@extends('layouts.main')

@section('title', 'Edit Data Source - ' . $dataSource->title)

@section('content')
    <!-- start page content -->
    <div class="row">
        <div class="col-sm-12">
            <div class="white-box-card">
                <div class="block-heading-panel d-flex align-items-center justify-content-between mb-4">
                    <div class="d-flex align-items-center gap-3">
                        <div class="heading-avatar text-dark" style="background: #FFF3E0;">
                            <i class="bx bx-edit"></i>
                        </div>
                        <div class="block-heading">
                            <h3>Edit Data Source</h3>
                            <h5 class="mb-0">{{ $dataSource->title }}</h5>
                        </div>
                    </div>
                    <div class="d-flex gap-2">
                        <a href="{{ route('data-sources.show', $dataSource) }}" class="btn btn-outline-info">
                            <i class="bx bx-show"></i> View
                        </a>
                        <a href="{{ route('data-sources.index') }}" class="btn btn-outline-secondary">
                            <i class="bx bx-arrow-back"></i> Back to List
                        </a>
                    </div>
                </div>

                @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                <div class="card">
                    <div class="card-body">
                        <form action="{{ route('data-sources.update', $dataSource) }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')
                            
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="mb-3">
                                        <label for="title" class="form-label">Title <span class="text-danger">*</span></label>
                                        <input type="text" 
                                               class="form-control @error('title') is-invalid @enderror" 
                                               id="title" 
                                               name="title" 
                                               value="{{ old('title', $dataSource->title) }}" 
                                               placeholder="Enter data source title"
                                               required>
                                        @error('title')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Hidden slug field - auto-generated -->
                                    <input type="hidden" id="slug" name="slug" value="{{ old('slug', $dataSource->slug) }}">

                                    <div class="mb-3">
                                        <label class="form-label">Status <span class="text-danger">*</span></label>
                                        <div class="d-flex gap-3">
                                            <div class="form-check">
                                                <input class="form-check-input @error('status') is-invalid @enderror" 
                                                       type="radio" 
                                                       name="status" 
                                                       id="status_active" 
                                                       value="1" 
                                                       {{ old('status', $dataSource->status) == '1' ? 'checked' : '' }} 
                                                       required>
                                                <label class="form-check-label" for="status_active">
                                                    <span class="badge bg-success">Active</span>
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input @error('status') is-invalid @enderror" 
                                                       type="radio" 
                                                       name="status" 
                                                       id="status_inactive" 
                                                       value="0" 
                                                       {{ old('status', $dataSource->status) == '0' ? 'checked' : '' }}>
                                                <label class="form-check-label" for="status_inactive">
                                                    <span class="badge bg-danger">Inactive</span>
                                                </label>
                                            </div>
                                        </div>
                                        @error('status')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <!-- Current Icon -->
                                    @if($dataSource->icon_url)
                                        <div class="mb-3">
                                            <label class="form-label">Current Icon</label>
                                            <div class="border rounded p-3 text-center bg-light">
                                                <img src="{{ $dataSource->icon_url }}" alt="{{ $dataSource->title }}" 
                                                     style="max-width: 100px; max-height: 100px; object-fit: cover;">
                                                <div class="mt-2">
                                                    <small class="text-muted">{{ $dataSource->icon->original_name ?? 'Icon' }}</small>
                                                </div>
                                            </div>
                                        </div>
                                    @endif

                                    <div class="mb-3">
                                        <label for="icon" class="form-label">
                                            {{ $dataSource->icon_url ? 'Replace Icon' : 'Upload Icon' }}
                                        </label>
                                        <input type="file" 
                                               class="form-control @error('icon') is-invalid @enderror" 
                                               id="icon" 
                                               name="icon" 
                                               accept="image/*">
                                        <div class="form-text">Upload an icon (JPEG, PNG, JPG, GIF, SVG, WEBP). Max size: 2MB</div>
                                        @error('icon')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- New Icon Preview -->
                                    <div id="iconPreview" style="display: none;">
                                        <label class="form-label">New Preview</label>
                                        <div class="border rounded p-3 text-center bg-light">
                                            <img id="previewImage" src="" alt="Icon Preview" 
                                                 style="max-width: 100px; max-height: 100px; object-fit: cover;">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex gap-2 justify-content-end">
                                <a href="{{ route('data-sources.index') }}" class="btn btn-outline-secondary">
                                    <i class="bx bx-x"></i> Cancel
                                </a>
                                <button type="submit" class="btn btn-primary">
                                    <i class="bx bx-save"></i> Update Data Source
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-generate slug from title (hidden field)
    const titleInput = document.getElementById('title');
    const slugInput = document.getElementById('slug');
    
    titleInput.addEventListener('input', function() {
        const slug = this.value
            .toLowerCase()
            .replace(/[^a-z0-9 -]/g, '')
            .replace(/\s+/g, '-')
            .replace(/-+/g, '-')
            .trim('-');
        slugInput.value = slug;
    });

    // Icon preview
    const iconInput = document.getElementById('icon');
    const iconPreview = document.getElementById('iconPreview');
    const previewImage = document.getElementById('previewImage');
    
    iconInput.addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                previewImage.src = e.target.result;
                iconPreview.style.display = 'block';
            };
            reader.readAsDataURL(file);
        } else {
            iconPreview.style.display = 'none';
        }
    });
});
</script>
@endsection