@extends('admin.layouts.app')
@section('title', 'Edit Periode')

@section('content')

{{-- Page Header --}}
<div class="d-flex align-items-center justify-content-between mb-3">
    <div>
        <h5 class="fw-bold mb-0" style="color:#1a3c2e;">
            <i class="bi bi-pencil-square me-2" style="color:#2d7a4f;"></i>Edit Periode Seleksi
        </h5>
        <nav aria-label="breadcrumb" class="mt-1">
            <ol class="breadcrumb mb-0" style="font-size:0.8rem;">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}" class="text-decoration-none" style="color:#2d7a4f;">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('admin.periode.index') }}" class="text-decoration-none" style="color:#2d7a4f;">Periode Seleksi</a></li>
                <li class="breadcrumb-item active text-muted">Edit</li>
            </ol>
        </nav>
    </div>
    <a href="{{ route('admin.periode.index') }}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-arrow-left me-1"></i>Kembali
    </a>
</div>

{{-- Form Card --}}
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span><i class="bi bi-pencil-square me-2"></i>Form Edit Periode</span>
        <span class="badge" style="background:#e0f2e9; color:#2d7a4f; font-size:0.75rem;">
            <i class="bi bi-asterisk me-1"></i>Wajib diisi
        </span>
    </div>
    <div class="card-body p-4">
        @if($errors->any())
        <div class="alert alert-danger d-flex align-items-start gap-2">
            <i class="bi bi-exclamation-circle-fill mt-1"></i>
            <div>
                <strong>Terdapat kesalahan input:</strong>
                <ul class="mb-0 mt-1 ps-3">
                    @foreach($errors->all() as $e)
                    <li>{{ $e }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
        @endif

        <form method="POST" action="{{ route('admin.periode.update', $periode) }}">
            @csrf
            @method('PUT')
            
            {{-- Tanggal --}}
            <div class="row g-3 mb-4">
                <div class="col-md-6">
                    <label class="form-label fw-semibold">
                        Tanggal Mulai <span class="text-danger">*</span>
                    </label>
                    <input
                        type="date"
                        id="tanggal_mulai"
                        name="tanggal_mulai"
                        class="form-control @error('tanggal_mulai') is-invalid @enderror"
                        value="{{ old('tanggal_mulai', $periode->tanggal_mulai->format('Y-m-d')) }}"
                        required>
                    @error('tanggal_mulai')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-md-6">
                    <label class="form-label fw-semibold">
                        Tanggal Selesai <span class="text-danger">*</span>
                    </label>
                    <input
                        type="date"
                        id="tanggal_selesai"
                        name="tanggal_selesai"
                        class="form-control @error('tanggal_selesai') is-invalid @enderror"
                        value="{{ old('tanggal_selesai', $periode->tanggal_selesai->format('Y-m-d')) }}"
                        required>
                    @error('tanggal_selesai')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            {{-- Nama Periode (Otomatis) --}}
            <div class="mb-4">
                <label class="form-label fw-semibold">
                    Nama Periode <span class="badge bg-info text-dark"><i class="bi bi-magic me-1"></i>Otomatis</span>
                </label>
                <input
                    type="text"
                    name="nama"
                    id="nama_periode"
                    class="form-control @error('nama') is-invalid @enderror"
                    value="{{ old('nama', $periode->nama) }}"
                    required>
                <div class="form-text text-muted"><i class="bi bi-info-circle me-1"></i>Nama otomatis dari tanggal mulai. Anda tetap bisa mengubahnya.</div>
                @error('nama')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            {{-- Kuota & Status --}}
            <div class="row g-3 mb-4">
                <div class="col-md-4">
                    <label class="form-label fw-semibold">
                        Kuota Penerima <span class="text-danger">*</span>
                    </label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="bi bi-people-fill"></i></span>
                        <input
                            type="number"
                            name="kuota_penerima"
                            class="form-control @error('kuota_penerima') is-invalid @enderror"
                            min="1"
                            value="{{ old('kuota_penerima', $periode->kuota_penerima) }}"
                            required>
                        <span class="input-group-text text-muted">orang</span>
                        @error('kuota_penerima')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="col-md-4">
                    <label class="form-label fw-semibold">
                        Kuota Cadangan
                        <span class="text-muted" style="font-size:0.8rem;">(opsional)</span>
                    </label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="bi bi-person-plus"></i></span>
                        <input
                            type="number"
                            name="kuota_cadangan"
                            class="form-control @error('kuota_cadangan') is-invalid @enderror"
                            min="0"
                            value="{{ old('kuota_cadangan', $periode->kuota_cadangan ?? 5) }}">
                        <span class="input-group-text text-muted">orang</span>
                        @error('kuota_cadangan')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="col-md-4">
                    <label class="form-label fw-semibold">
                        Status
                    </label>
                    <input type="text" class="form-control bg-light" value="Aktif" readonly disabled>
                    <input type="hidden" name="status" value="aktif">
                </div>
            </div>

            {{-- Divider --}}
            <hr class="my-4" style="border-color:#e5ede8;">

            {{-- Action Buttons --}}
            <div class="d-flex align-items-center gap-2">
                <button type="submit" class="btn btn-primary px-4">
                    <i class="bi bi-save me-2"></i>Update Periode
                </button>
                <a href="{{ route('admin.periode.index') }}" class="btn btn-outline-secondary">
                    <i class="bi bi-x-circle me-1"></i>Batal
                </a>
            </div>
        </form>
    </div>
</div>
@push('scripts')
<script>
    const bulanIndo = ['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];
    let namaManualEdited = true; // Default true on edit so existing name is preserved

    function generateNamaPeriode() {
        if (namaManualEdited) return;
        const mulai = document.getElementById('tanggal_mulai').value;
        const namaField = document.getElementById('nama_periode');

        if (mulai) {
            const d = new Date(mulai);
            namaField.value = 'BLT-DD ' + bulanIndo[d.getMonth()] + ' ' + d.getFullYear();
        }
    }

    document.getElementById('tanggal_mulai').addEventListener('change', function() {
        namaManualEdited = false;
        generateNamaPeriode();
    });
    document.getElementById('tanggal_selesai').addEventListener('change', generateNamaPeriode);

    document.getElementById('nama_periode').addEventListener('input', function() {
        namaManualEdited = true;
    });
</script>
@endpush

@endsection