@extends('layouts.app')

@section('title', 'Edit Foto Galeri')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="mb-0"><i class="fas fa-edit"></i> Edit Foto Galeri</h4>
                    <a href="{{ route('galeri.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> Kembali
                    </a>
                </div>
                <div class="card-body">
                    @if($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <strong>Terjadi kesalahan!</strong>
                            <ul class="mb-0 mt-2">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    <form action="{{ route('galeri.update', $galeri->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        
                        <div class="row">
                            <div class="col-md-8">
                                <!-- Judul -->
                                <div class="mb-3">
                                    <label for="judul" class="form-label">Judul Foto <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('judul') is-invalid @enderror" 
                                           id="judul" name="judul" value="{{ old('judul', $galeri->judul) }}" 
                                           placeholder="Masukkan judul foto" required>
                                    @error('judul')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Deskripsi -->
                                <div class="mb-3">
                                    <label for="deskripsi" class="form-label">Deskripsi</label>
                                    <textarea class="form-control @error('deskripsi') is-invalid @enderror" 
                                              id="deskripsi" name="deskripsi" rows="4" 
                                              placeholder="Masukkan deskripsi foto (opsional)">{{ old('deskripsi', $galeri->deskripsi) }}</textarea>
                                    @error('deskripsi')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Foto Saat Ini -->
                                @if($galeri->gambar)
                                <div class="mb-3">
                                    <label class="form-label">Foto Saat Ini</label>
                                    <div class="border rounded p-3 text-center bg-light">
                                        <img src="{{ asset('storage/' . $galeri->gambar) }}" alt="{{ $galeri->judul }}" 
                                             class="img-fluid" style="max-height: 200px; border-radius: 8px;">
                                        <p class="small text-muted mt-2 mb-0">{{ $galeri->gambar }}</p>
                                    </div>
                                </div>
                                @endif

                                <!-- Upload Gambar Baru -->
                                <div class="mb-3">
                                    <label for="gambar" class="form-label">Upload Foto Baru (Opsional)</label>
                                    <input type="file" class="form-control @error('gambar') is-invalid @enderror" 
                                           id="gambar" name="gambar" accept="image/*">
                                    <div class="form-text">
                                        Format yang didukung: JPEG, PNG, JPG, GIF. Maksimal 2MB. Kosongkan jika tidak ingin mengubah foto.
                                    </div>
                                    @error('gambar')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Preview Gambar Baru -->
                                <div class="mb-3" id="imagePreview" style="display: none;">
                                    <label class="form-label">Preview Foto Baru</label>
                                    <div class="border rounded p-3 text-center">
                                        <img id="previewImg" src="" alt="Preview" class="img-fluid" style="max-height: 300px;">
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <!-- Kategori -->
                                <div class="mb-3">
                                    <label for="kategori" class="form-label">Kategori</label>
                                    <select class="form-select @error('kategori') is-invalid @enderror" id="kategori" name="kategori">
                                        <option value="">Pilih Kategori</option>
                                        <option value="produk" {{ old('kategori', $galeri->kategori) == 'produk' ? 'selected' : '' }}>Produk</option>
                                        <option value="layanan" {{ old('kategori', $galeri->kategori) == 'layanan' ? 'selected' : '' }}>Layanan</option>
                                        <option value="kantor" {{ old('kategori', $galeri->kategori) == 'kantor' ? 'selected' : '' }}>Kantor</option>
                                        <option value="kegiatan" {{ old('kategori', $galeri->kategori) == 'kegiatan' ? 'selected' : '' }}>Kegiatan</option>
                                        <option value="infrastruktur" {{ old('kategori', $galeri->kategori) == 'infrastruktur' ? 'selected' : '' }}>Infrastruktur</option>
                                        <option value="tim" {{ old('kategori', $galeri->kategori) == 'tim' ? 'selected' : '' }}>Tim</option>
                                    </select>
                                    @error('kategori')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Urutan -->
                                <div class="mb-3">
                                    <label for="urutan" class="form-label">Urutan Tampil <span class="text-danger">*</span></label>
                                    <input type="number" class="form-control @error('urutan') is-invalid @enderror" 
                                           id="urutan" name="urutan" value="{{ old('urutan', $galeri->urutan) }}" 
                                           min="1" required>
                                    <div class="form-text">
                                        Semakin kecil angka, semakin awal ditampilkan
                                    </div>
                                    @error('urutan')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Status -->
                                <div class="mb-3">
                                    <label for="status" class="form-label">Status <span class="text-danger">*</span></label>
                                    <select class="form-select @error('status') is-invalid @enderror" id="status" name="status" required>
                                        <option value="">Pilih Status</option>
                                        <option value="aktif" {{ old('status', $galeri->status) == 'aktif' ? 'selected' : '' }}>Aktif</option>
                                        <option value="nonaktif" {{ old('status', $galeri->status) == 'nonaktif' ? 'selected' : '' }}>Non Aktif</option>
                                    </select>
                                    @error('status')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Info Card -->
                                <div class="card bg-light">
                                    <div class="card-body">
                                        <h6 class="card-title"><i class="fas fa-info-circle"></i> Informasi Foto</h6>
                                        <ul class="small mb-0">
                                            <li><strong>Dibuat:</strong> {{ $galeri->created_at->format('d/m/Y H:i') }}</li>
                                            <li><strong>Diupdate:</strong> {{ $galeri->updated_at->format('d/m/Y H:i') }}</li>
                                            @if($galeri->gambar)
                                            <li><strong>File:</strong> {{ basename($galeri->gambar) }}</li>
                                            @endif
                                        </ul>
                                    </div>
                                </div>

                                <!-- Tips Card -->
                                <div class="card bg-light mt-3">
                                    <div class="card-body">
                                        <h6 class="card-title"><i class="fas fa-lightbulb"></i> Tips Edit Foto</h6>
                                        <ul class="small mb-0">
                                            <li>Upload foto baru hanya jika diperlukan</li>
                                            <li>Foto lama akan dihapus otomatis</li>
                                            <li>Pastikan foto baru berkualitas baik</li>
                                            <li>Sesuaikan urutan untuk pengaturan tampilan</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Submit Buttons -->
                        <div class="row mt-4">
                            <div class="col-12">
                                <div class="d-flex justify-content-end gap-2">
                                    <a href="{{ route('galeri.index') }}" class="btn btn-secondary">
                                        <i class="fas fa-times"></i> Batal
                                    </a>
                                    <a href="{{ route('galeri.show', $galeri->id) }}" class="btn btn-info">
                                        <i class="fas fa-eye"></i> Lihat Detail
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save"></i> Update Foto
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .card {
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .form-control:focus, .form-select:focus {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
    }
    
    .btn {
        border-radius: 6px;
    }
    
    .alert {
        border-radius: 8px;
    }
    
    #previewImg {
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .bg-light {
        background-color: #f8f9fa !important;
    }
</style>
@endpush

@push('scripts')
<script>
    // Image preview functionality
    document.getElementById('gambar').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('previewImg').src = e.target.result;
                document.getElementById('imagePreview').style.display = 'block';
            }
            reader.readAsDataURL(file);
        } else {
            document.getElementById('imagePreview').style.display = 'none';
        }
    });

    // Form validation
    document.querySelector('form').addEventListener('submit', function(e) {
        const judul = document.getElementById('judul').value.trim();
        const urutan = document.getElementById('urutan').value;
        const status = document.getElementById('status').value;
        const gambar = document.getElementById('gambar').files[0];

        if (!judul || !urutan || !status) {
            e.preventDefault();
            alert('Mohon lengkapi semua field yang wajib diisi!');
            return false;
        }

        // Check file size if new image is uploaded
        if (gambar && gambar.size > 2097152) {
            e.preventDefault();
            alert('Ukuran file terlalu besar! Maksimal 2MB.');
            return false;
        }

        // Check file type if new image is uploaded
        const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif'];
        if (gambar && !allowedTypes.includes(gambar.type)) {
            e.preventDefault();
            alert('Format file tidak didukung! Gunakan JPEG, PNG, JPG, atau GIF.');
            return false;
        }
    });

    // Confirm if user wants to change image
    document.getElementById('gambar').addEventListener('change', function(e) {
        if (e.target.files[0]) {
            if (!confirm('Foto baru akan menggantikan foto yang sudah ada. Lanjutkan?')) {
                e.target.value = '';
                document.getElementById('imagePreview').style.display = 'none';
            }
        }
    });
</script>
@endpush