@extends('layouts.app')

@section('title', 'Edit Laporan #' . $report->report_number)

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">

            {{-- Header --}}
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-gradient-primary text-white">
                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                        <h5 class="mb-0">
                            <i class="bi bi-pencil-square"></i> Edit Laporan
                            <span class="badge bg-white text-dark ms-2 fw-normal" style="font-size:0.75rem;">
                                {{ $report->report_number }}
                            </span>
                        </h5>
                        <a href="{{ route('reports.show', $report->id) }}" class="btn btn-light btn-sm">
                            <i class="bi bi-arrow-left"></i> Kembali
                        </a>
                    </div>
                </div>
            </div>

            {{-- Alert Error --}}
            @if($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="bi bi-exclamation-triangle-fill me-2"></i>
                    <strong>Terdapat kesalahan:</strong>
                    <ul class="mb-0 mt-1">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            {{-- Form Edit --}}
            <div class="card shadow-sm">
                <div class="card-body p-4">
                    <form action="{{ route('reports.update', $report->id) }}" method="POST" enctype="multipart/form-data" id="editForm">
                        @csrf
                        @method('PUT')

                        <div class="row g-4">

                            {{-- Tipe Audit --}}
                            <div class="col-12 col-md-6">
                                <label for="audit_type_id" class="form-label fw-bold">
                                    <i class="bi bi-clipboard2-check text-primary"></i> Tipe Audit
                                    <span class="text-danger">*</span>
                                </label>
                                <select name="audit_type_id" id="audit_type_id"
                                    class="form-select @error('audit_type_id') is-invalid @enderror" required>
                                    <option value="">-- Pilih Tipe Audit --</option>
                                    @foreach($auditTypes as $type)
                                        <option value="{{ $type->id }}"
                                            {{ old('audit_type_id', $report->audit_type_id) == $type->id ? 'selected' : '' }}>
                                            {{ $type->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('audit_type_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- Departemen --}}
                            <div class="col-12 col-md-6">
                                <label for="department_id" class="form-label fw-bold">
                                    <i class="bi bi-building text-primary"></i> Departemen
                                    <span class="text-danger">*</span>
                                </label>
                                <select name="department_id" id="department_id"
                                    class="form-select @error('department_id') is-invalid @enderror" required>
                                    <option value="">-- Pilih Departemen --</option>
                                    @foreach($departments as $dept)
                                        <option value="{{ $dept->id }}"
                                            {{ old('department_id', $report->department_id) == $dept->id ? 'selected' : '' }}>
                                            {{ $dept->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('department_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- Lokasi --}}
                            <div class="col-12 col-md-6">
                                <label for="location" class="form-label fw-bold">
                                    <i class="bi bi-geo-alt text-primary"></i> Lokasi
                                    <span class="text-danger">*</span>
                                </label>
                                <input type="text" name="location" id="location"
                                    class="form-control @error('location') is-invalid @enderror"
                                    placeholder="Contoh: Lantai 2, Area Produksi A"
                                    value="{{ old('location', $report->location) }}" required>
                                @error('location')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- Jenis Masalah --}}
                            <div class="col-12 col-md-6">
                                <label for="issue_type" class="form-label fw-bold">
                                    <i class="bi bi-exclamation-triangle text-primary"></i> Jenis Masalah
                                    <span class="text-danger">*</span>
                                </label>
                                <input type="text" name="issue_type" id="issue_type"
                                    class="form-control @error('issue_type') is-invalid @enderror"
                                    placeholder="Contoh: Kebocoran Pipa, Lantai Licin"
                                    value="{{ old('issue_type', $report->issue_type) }}" required>
                                @error('issue_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- Deskripsi --}}
                            <div class="col-12">
                                <label for="description" class="form-label fw-bold">
                                    <i class="bi bi-card-text text-primary"></i> Deskripsi
                                    <span class="text-danger">*</span>
                                </label>
                                <textarea name="description" id="description" rows="5"
                                    class="form-control @error('description') is-invalid @enderror"
                                    placeholder="Jelaskan masalah secara detail..." required>{{ old('description', $report->description) }}</textarea>
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- Foto Saat Ini --}}
                            @if(!empty($report->photos) && count($report->photos) > 0)
                                <div class="col-12">
                                    <label class="form-label fw-bold">
                                        <i class="bi bi-images text-primary"></i> Foto Saat Ini
                                    </label>
                                    <div class="row g-2">
                                        @foreach($report->photos as $index => $photo)
                                            <div class="col-6 col-sm-4 col-md-3 col-lg-2">
                                                <div class="position-relative">
                                                    <img src="{{ Storage::url($photo) }}"
                                                        class="img-thumbnail w-100"
                                                        style="height: 120px; object-fit: cover; cursor: pointer;"
                                                        alt="Foto {{ $index + 1 }}"
                                                        onclick="openLightbox('{{ Storage::url($photo) }}')">
                                                    <span class="position-absolute top-0 start-0 badge bg-dark bg-opacity-75 m-1" style="font-size:0.65rem;">
                                                        {{ $index + 1 }}
                                                    </span>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                    <small class="text-muted mt-1 d-block">
                                        <i class="bi bi-info-circle"></i>
                                        Foto baru yang diunggah akan <strong>ditambahkan</strong> ke foto yang sudah ada.
                                    </small>
                                </div>
                            @endif

                            {{-- Upload Foto Baru --}}
                            <div class="col-12">
                                <label for="photos" class="form-label fw-bold">
                                    <i class="bi bi-camera text-primary"></i> Tambah Foto Baru
                                    <span class="text-muted fw-normal small">(Opsional)</span>
                                </label>
                                <div class="upload-area border rounded p-4 text-center @error('photos') border-danger @enderror"
                                    id="uploadArea"
                                    style="border-style: dashed !important; cursor: pointer; transition: all 0.2s;">
                                    <i class="bi bi-cloud-arrow-up display-5 text-muted" id="uploadIcon"></i>
                                    <p class="text-muted mb-1 mt-2" id="uploadText">
                                        Klik atau seret foto ke sini
                                    </p>
                                    <small class="text-muted">Format: JPEG, PNG, JPG — Maks. per file: 10MB</small>
                                    <input type="file" name="photos[]" id="photos" class="d-none"
                                        accept="image/jpeg,image/png,image/jpg" multiple>
                                </div>
                                @error('photos')
                                    <div class="text-danger small mt-1">{{ $message }}</div>
                                @enderror

                                {{-- Preview foto baru --}}
                                <div id="photoPreviewContainer" class="row g-2 mt-2 d-none">
                                    <div class="col-12">
                                        <small class="fw-bold text-success">
                                            <i class="bi bi-check-circle"></i> Foto baru yang akan diunggah:
                                        </small>
                                    </div>
                                </div>
                            </div>

                        </div>{{-- end row --}}

                        {{-- Tombol Aksi --}}
                        <hr class="my-4">
                        <div class="d-flex justify-content-end gap-2 flex-wrap">
                            <a href="{{ route('reports.show', $report->id) }}"
                                class="btn btn-outline-secondary">
                                <i class="bi bi-x-circle"></i> Batal
                            </a>
                            <button type="submit" class="btn btn-primary" id="submitBtn">
                                <i class="bi bi-check-circle"></i> Simpan Perubahan
                            </button>
                        </div>

                    </form>
                </div>
            </div>

        </div>
    </div>
</div>

{{-- Lightbox Modal --}}
<div class="modal fade" id="lightboxModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content bg-dark border-0">
            <div class="modal-header border-0 py-2">
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0 text-center">
                <img id="lightboxImg" src="" alt="Preview" class="img-fluid rounded">
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .bg-gradient-primary {
        background: linear-gradient(135deg, #065F46 0%, #047857 100%);
    }
    .card {
        border: none;
        border-radius: 10px;
    }
    .card-header {
        border-radius: 10px 10px 0 0 !important;
    }
    .upload-area:hover {
        background-color: #f0fdf4;
        border-color: #047857 !important;
    }
    .upload-area.dragover {
        background-color: #dcfce7;
        border-color: #047857 !important;
    }
    .photo-preview-item {
        position: relative;
    }
    .photo-preview-item .remove-btn {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: rgba(220,53,69,0.85);
        color: white;
        border: none;
        font-size: 12px;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .photo-preview-item img {
        height: 100px;
        object-fit: cover;
        width: 100%;
        border-radius: 6px;
    }
</style>
@endpush

@push('scripts')
<script>
    // ── Upload area click & drag ──
    const uploadArea = document.getElementById('uploadArea');
    const photosInput = document.getElementById('photos');
    const previewContainer = document.getElementById('photoPreviewContainer');

    uploadArea.addEventListener('click', () => photosInput.click());

    uploadArea.addEventListener('dragover', (e) => {
        e.preventDefault();
        uploadArea.classList.add('dragover');
    });

    uploadArea.addEventListener('dragleave', () => uploadArea.classList.remove('dragover'));

    uploadArea.addEventListener('drop', (e) => {
        e.preventDefault();
        uploadArea.classList.remove('dragover');
        const dt = new DataTransfer();
        // existing files
        Array.from(photosInput.files).forEach(f => dt.items.add(f));
        // dropped files (images only)
        Array.from(e.dataTransfer.files).filter(f => f.type.startsWith('image/')).forEach(f => dt.items.add(f));
        photosInput.files = dt.files;
        renderPreviews(photosInput.files);
    });

    photosInput.addEventListener('change', () => renderPreviews(photosInput.files));

    function renderPreviews(files) {
        // Clear old previews (keep label col)
        const items = previewContainer.querySelectorAll('.photo-preview-item');
        items.forEach(i => i.remove());

        if (files.length === 0) {
            previewContainer.classList.add('d-none');
            return;
        }

        previewContainer.classList.remove('d-none');

        Array.from(files).forEach((file, idx) => {
            const col = document.createElement('div');
            col.className = 'col-6 col-sm-4 col-md-3 col-lg-2 photo-preview-item';
            col.dataset.index = idx;

            const reader = new FileReader();
            reader.onload = (e) => {
                col.innerHTML = `
                    <img src="${e.target.result}" alt="preview">
                    <button type="button" class="remove-btn" onclick="removePhoto(${idx})" title="Hapus foto ini">
                        <i class="bi bi-x"></i>
                    </button>
                    <small class="d-block text-muted mt-1 text-truncate" style="font-size:0.65rem;">${file.name}</small>
                `;
            };
            reader.readAsDataURL(file);
            previewContainer.appendChild(col);
        });

        document.getElementById('uploadText').textContent = `${files.length} foto dipilih`;
    }

    function removePhoto(index) {
        const dt = new DataTransfer();
        Array.from(photosInput.files).forEach((f, i) => { if (i !== index) dt.items.add(f); });
        photosInput.files = dt.files;
        renderPreviews(photosInput.files);
    }

    // ── Lightbox ──
    function openLightbox(src) {
        document.getElementById('lightboxImg').src = src;
        new bootstrap.Modal(document.getElementById('lightboxModal')).show();
    }

    // ── Submit feedback ──
    document.getElementById('editForm').addEventListener('submit', function() {
        const btn = document.getElementById('submitBtn');
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Menyimpan...';
    });
</script>
@endpush