@extends('layouts.admin')

@section('title', 'Edit Kegiatan Monitoring')

@push('styles')
<style>
    .photo-preview { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
    .photo-preview .preview-item { position: relative; width: 120px; height: 120px; }
    .photo-preview .preview-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; border: 1px solid #ddd; }
    .photo-preview .preview-item .remove-btn { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; background: #dc3545; color: #fff; border: none; font-size: 12px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
    .existing-photo { position: relative; width: 120px; height: 120px; }
    .existing-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; border: 1px solid #ddd; }
    .existing-photo .delete-check { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.7); color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 11px; }
</style>
@endpush

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>Edit Kegiatan Monitoring</h2>
    <a href="{{ route('monitorings.index') }}" class="btn btn-secondary">Kembali</a>
</div>

<div class="card">
    <div class="card-body">
        <form method="POST" action="{{ route('monitorings.update', $monitoring) }}" enctype="multipart/form-data" id="monitoringForm">
            @csrf @method('PUT')

            <div class="mb-3">
                <label class="form-label">Guru</label>
                <input type="text" class="form-control" value="{{ $monitoring->teacher->user->name }}" readonly>
            </div>

            <div class="mb-3">
                <label for="company_id" class="form-label">Dunia Usaha <span class="text-danger">*</span></label>
                <select name="company_id" id="company_id" class="form-select @error('company_id') is-invalid @enderror" required>
                    <option value="">-- Pilih Perusahaan --</option>
                    @foreach ($companies as $company)
                    <option value="{{ $company->id }}" {{ old('company_id', $monitoring->company_id) == $company->id ? 'selected' : '' }}>
                        {{ $company->name }}
                    </option>
                    @endforeach
                </select>
                @error('company_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>

            <div class="mb-3">
                <label for="activity_type" class="form-label">Pilih Kegiatan <span class="text-danger">*</span></label>
                <select name="activity_type" id="activity_type" class="form-select @error('activity_type') is-invalid @enderror" required>
                    <option value="">-- Pilih --</option>
                    <option value="pengantaran" {{ old('activity_type', $monitoring->activity_type) === 'pengantaran' ? 'selected' : '' }}>Pengantaran</option>
                    <option value="monitoring" {{ old('activity_type', $monitoring->activity_type) === 'monitoring' ? 'selected' : '' }}>Monitoring</option>
                    <option value="penjemputan" {{ old('activity_type', $monitoring->activity_type) === 'penjemputan' ? 'selected' : '' }}>Penjemputan</option>
                </select>
                @error('activity_type') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>

            <div class="mb-3">
                <label for="activity_date" class="form-label">Tanggal Kegiatan <span class="text-danger">*</span></label>
                <input type="date" name="activity_date" id="activity_date" class="form-control @error('activity_date') is-invalid @enderror" value="{{ old('activity_date', $monitoring->activity_date->format('Y-m-d')) }}" required>
                @error('activity_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>

            <div class="mb-3">
                <label for="notes" class="form-label">Catatan Kegiatan</label>
                <textarea name="notes" id="notes" rows="4" class="form-control @error('notes') is-invalid @enderror" placeholder="Catatan kegiatan...">{{ old('notes', $monitoring->notes) }}</textarea>
                @error('notes') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>

            <div class="mb-3">
                <label class="form-label">Dokumentasi Saat Ini</label>
                <div class="d-flex flex-wrap gap-2">
                    @forelse ($monitoring->photos as $photo)
                    <div class="existing-photo">
                        <img src="{{ route('photos.show', $photo->photo) }}" alt="Foto">
                        <div class="delete-check">
                            <input type="checkbox" name="delete_photos[]" value="{{ $photo->id }}" id="del_{{$photo->id}}">
                            <label for="del_{{$photo->id}}" class="text-white small mb-0">Hapus</label>
                        </div>
                    </div>
                    @empty
                    <p class="text-muted mb-0">Belum ada dokumentasi.</p>
                    @endforelse
                </div>
            </div>

            <div class="mb-3">
                <label for="photos" class="form-label">Tambah Dokumentasi Baru</label>
                <input type="file" name="photos[]" id="photos" class="form-control @error('photos.*') is-invalid @enderror" accept="image/jpeg,image/png" multiple>
                <div class="form-text">Format: JPEG/PNG. Maks 5MB per file.</div>
                @error('photos.*') <div class="invalid-feedback">{{ $message }}</div> @enderror
                <div class="photo-preview" id="photoPreview"></div>
            </div>

            <button type="submit" class="btn btn-primary">Simpan</button>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.getElementById('photos').addEventListener('change', function(e) {
        const container = document.getElementById('photoPreview');
        container.innerHTML = '';
        const files = Array.from(e.target.files);
        files.forEach((file, index) => {
            const reader = new FileReader();
            reader.onload = function(ev) {
                const item = document.createElement('div');
                item.className = 'preview-item';
                item.innerHTML = `
                    <img src="${ev.target.result}" alt="Preview ${index + 1}" style="width:120px;height:120px;object-fit:cover;border-radius:6px;border:1px solid #ddd;">
                    <button type="button" class="remove-btn" data-index="${index}">&times;</button>
                `;
                container.appendChild(item);
            };
            reader.readAsDataURL(file);
        });
    });

    document.getElementById('photoPreview').addEventListener('click', function(e) {
        if (e.target.classList.contains('remove-btn')) {
            const index = e.target.dataset.index;
            const dt = new DataTransfer();
            const input = document.getElementById('photos');
            const files = Array.from(input.files);
            files.splice(index, 1);
            files.forEach(f => dt.items.add(f));
            input.files = dt.files;
            e.target.closest('.preview-item').remove();
        }
    });

    (function () {
        document.addEventListener('DOMContentLoaded', function () {
            const form = document.getElementById('monitoringForm');
            if (!form || typeof window.base64Files !== 'function') return;

            form.addEventListener('submit', async function (e) {
                e.preventDefault();
                await window.base64Files(this, [
                    { inputName: 'photos[]', b64Name: 'photos_b64[]', nameName: 'photos_name[]' },
                ]);
                this.submit();
            });
        });
    })();
</script>
@endpush