@extends('layouts.app')

@section('title', 'Pembuatan Formulir UKT Baru')

@section('content')
<div class="container-fluid py-5">
    <!-- Notification Alerts -->
    @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show d-flex align-items-center" role="alert">
        <i class="bi bi-check-circle-fill fs-4 me-3"></i>
        <div>
            <h5 class="alert-heading mb-1">Berhasil!</h5>
            <p class="mb-0">{{ session('success') }}</p>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif

    @if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show d-flex align-items-center" role="alert">
        <i class="bi bi-exclamation-triangle-fill fs-4 me-3"></i>
        <div>
            <h5 class="alert-heading mb-1">Terjadi Kesalahan!</h5>
            <p class="mb-0">{{ session('error') }}</p>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif

    <!-- Main Card -->
    <div class="card border-0 shadow-lg rounded-4 overflow-hidden mx-auto" style="max-width: 1200px;">
        <!-- Card Header -->
        <div class="card-header bg-gradient-teal text-white py-4">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h2 class="h4 mb-0 fw-bold">Buat Form UKT Baru</h2>
                </div>
                <a href="{{ route('form.pendaftaran') }}" class="btn btn-light btn-sm rounded-pill px-3">
                    <i class="bi bi-arrow-left me-1"></i> Kembali
                </a>
            </div>
        </div>

        <!-- Card Body -->
        <div class="card-body p-5">
            <form action="{{ route('form.store') }}" method="POST" class="needs-validation" novalidate>
                @csrf

                <div class="row g-4">
                    <!-- Section 1: Basic Information -->
                    <div class="col-12">
                        <h5 class="fw-bold text-teal mb-3">Informasi Dasar Formulir</h5>
                    </div>

                    <!-- Nama Formulir -->
                    <div class="col-md-6">
                        <label for="nama_form" class="form-label fw-bold text-dark">Nama Formulir <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('nama_form') is-invalid @enderror" 
                                id="nama_form" name="nama_form" placeholder="Contoh: Form UKT Semester Ganjil 2023" required
                                value="{{ old('nama_form') }}">
                        <div class="invalid-feedback">
                            @error('nama_form') {{ $message }} @else Nama form wajib diisi @enderror
                        </div>
                    </div>

                    <!-- Jenis Formulir -->
                    <div class="col-md-6">
                        <label for="jenis_form" class="form-label fw-bold text-dark">Jenis Formulir <span class="text-danger">*</span></label>
                        <select class="form-control @error('jenis_form') is-invalid @enderror" 
                                id="jenis_form" name="jenis_form" required>
                            <option value="" selected disabled>Pilih Jenis Formulir</option>
                            <option value="penurunan" @selected(old('jenis_form') == 'penurunan')>Penurunan UKT</option>
                            <option value="pengangsuran" @selected(old('jenis_form') == 'pengangsuran')>Pengangsuran UKT</option>
                        </select>
                        <div class="invalid-feedback">
                            @error('jenis_form') {{ $message }} @else Jenis form wajib dipilih @enderror
                        </div>
                    </div>

                    <!-- Semester -->
                    <div class="col-md-6">
                        <label for="semester" class="form-label fw-bold text-dark">Semester <span class="text-danger">*</span></label>
                        <select class="form-control @error('semester') is-invalid @enderror" 
                                id="semester" name="semester" required>
                            <option value="" selected disabled>Pilih Semester</option>
                            <option value="Ganjil" @selected(old('semester') == 'Ganjil')>Ganjil</option>
                            <option value="Genap" @selected(old('semester') == 'Genap')>Genap</option>
                        </select>
                        <div class="invalid-feedback">
                            @error('semester') {{ $message }} @else Semester wajib dipilih @enderror
                        </div>
                    </div>

                    <!-- Tahun -->
                    <div class="col-md-6">
                        <label for="tahun" class="form-label fw-bold text-dark">Tahun <span class="text-danger">*</span></label>
                        <select class="form-control @error('tahun') is-invalid @enderror" 
                                id="tahun" name="tahun" required>
                            <option value="" selected disabled>Pilih Tahun</option>
                            @for($year = 2020; $year <= 2035; $year++)
                                <option value="{{ $year }}" @selected(old('tahun') == $year)>{{ $year }}</option>
                            @endfor
                        </select>
                        <div class="invalid-feedback">
                            @error('tahun') {{ $message }} @else Tahun wajib dipilih @enderror
                        </div>
                    </div>


                    <!-- Section 2: Timeline -->
                    <div class="col-12 mt-4">
                        <h5 class="fw-bold text-teal mb-3">Timeline Formulir</h5>
                        <div class="alert alert-info">
                            Pastikan urutan tanggal sesuai: Pembukaan → Penutupan → Verifikasi → Pengumuman
                        </div>
                    </div>

                    <!-- Timeline Cards -->
                    <div class="col-md-6">
                        <div class="card h-100 border-0 shadow-sm">
                            <div class="card-header bg-light-primary border-bottom-0">
                                <h6 class="mb-0 fw-bold text-dark">Periode Pendaftaran</h6>
                            </div>
                            <div class="card-body">
                                <!-- Tanggal Pembukaan -->
                                <div class="mb-3">
                                    <label for="tanggal_pembukaan" class="form-label fw-bold text-dark">Tanggal Pembukaan <span class="text-danger">*</span></label>
                                    <input type="date" class="form-control @error('tanggal_pembukaan') is-invalid @enderror" 
                                            id="tanggal_pembukaan" name="tanggal_pembukaan" required
                                            value="{{ old('tanggal_pembukaan') }}">
                                    <div class="invalid-feedback">
                                        @error('tanggal_pembukaan') {{ $message }} @else Tanggal pembukaan wajib diisi @enderror
                                    </div>
                                </div>

                                <!-- Tanggal Penutupan -->
                                <div class="mb-3">
                                    <label for="tanggal_penutupan" class="form-label fw-bold text-dark">Tanggal Penutupan <span class="text-danger">*</span></label>
                                    <input type="date" class="form-control @error('tanggal_penutupan') is-invalid @enderror" 
                                            id="tanggal_penutupan" name="tanggal_penutupan" required
                                            value="{{ old('tanggal_penutupan') }}">
                                    <div class="invalid-feedback">
                                        @error('tanggal_penutupan') {{ $message }} @else Tanggal penutupan wajib diisi @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="card h-100 border-0 shadow-sm">
                            <div class="card-header bg-light-primary border-bottom-0">
                                <h6 class="mb-0 fw-bold text-dark">Proses Verifikasi & Hasil</h6>
                            </div>
                            <div class="card-body">
                                <!-- Tanggal Verifikasi -->
                                <div class="mb-3">
                                    <label for="tanggal_verifikasi" class="form-label fw-bold text-dark">Tanggal Verifikasi <span class="text-danger">*</span></label>
                                    <input type="date" class="form-control @error('tanggal_verifikasi') is-invalid @enderror" 
                                            id="tanggal_verifikasi" name="tanggal_verifikasi" required
                                            value="{{ old('tanggal_verifikasi') }}">
                                    <div class="invalid-feedback">
                                        @error('tanggal_verifikasi') {{ $message }} @else Tanggal verifikasi wajib diisi @enderror
                                    </div>
                                </div>

                                <!-- Tanggal Pengumuman -->
                                <div class="mb-3">
                                    <label for="tanggal_pengumuman" class="form-label fw-bold text-dark">Tanggal Pengumuman <span class="text-danger">*</span></label>
                                    <input type="date" class="form-control @error('tanggal_pengumuman') is-invalid @enderror" 
                                            id="tanggal_pengumuman" name="tanggal_pengumuman" required
                                            value="{{ old('tanggal_pengumuman') }}">
                                    <div class="invalid-feedback">
                                        @error('tanggal_pengumuman') {{ $message }} @else Tanggal pengumuman wajib diisi @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Section 3: Kuota Information -->
                    <div class="col-12 mt-4">
                        <h5 class="fw-bold text-teal mb-3">Pengaturan Kuota</h5>
                    </div>
                    
                    <!-- Kuota -->
                    <div class="col-md-6">
                        <label for="kuota" class="form-label fw-bold text-dark">Kuota <span class="text-danger">*</span></label>
                        @if(auth()->user()->role == 'admin')
                            <input type="number" class="form-control @error('kuota') is-invalid @enderror" 
                                    id="kuota" name="kuota" min="0" 
                                    placeholder="Masukkan jumlah kuota" required 
                                    value="{{ old('kuota', 0) }}">
                            <div class="invalid-feedback">
                                @if ($errors->has('kuota'))
                                    {{ $errors->first('kuota') }}
                                @else
                                    Kuota wajib diisi
                                @endif
                             </div>
                            <small class="text-muted">Masukkan jumlah kuota untuk formulir ini</small>
                        @else
                            <input type="number" class="form-control" 
                                   id="kuota" name="kuota" min="0" 
                                   placeholder="0" value="0" readonly>
                            <small class="text-muted">Kuota hanya dapat diinput oleh admin</small>
                        @endif
                        <input type="hidden" id="kuota_pengangsuran" name="kuota_pengangsuran" value="0">
                        <input type="hidden" id="kuota_penurunan" name="kuota_penurunan" value="0">
                    </div>

                    <!-- Form Preview -->
                    <div class="col-md-6">
                        <div class="card border-0 bg-light-primary p-4 h-100">
                            <label class="form-label fw-bold mb-3 text-dark">Preview Formulir</label>
                            <div class="bg-white rounded-3 p-3 border">
                                <h6 class="fw-bold mb-1" id="preview-name">{{ old('nama_form') ?: 'Nama Formulir' }}</h6>
                                <div class="d-flex gap-3 mb-2">
                                    <small class="text-muted">
                                        Jenis: <span id="preview-jenis">{{ old('jenis_form') ? ucfirst(old('jenis_form')) : 'Belum dipilih' }}</span>
                                    </small>
                                    <small class="text-muted">
                                        Kuota: <span id="preview-kuota">{{ old('kuota', 0) }}</span>
                                    </small>
                                </div>
                                <div>
                                    <span class="badge bg-success">
                                        <span class="text-white">Aktif</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Section 4: Status -->
                    <div class="col-12 mt-4">
                        <h5 class="fw-bold text-teal mb-3">Status Formulir</h5>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" role="switch" 
                                   id="status" name="status" @checked(old('status', true))>
                            <label class="form-check-label fw-medium" for="status">
                                <span id="status-label">Aktif</span>
                            </label>
                        </div>
                        <small class="text-muted">
                            Formulir dapat dibuka/ditutup melalui menu Form Pendaftaran
                        </small>
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="d-flex justify-content-end mt-5 gap-3">
                    <button type="reset" class="btn btn-outline-secondary px-4 rounded-pill">
                        Reset Form
                    </button>
                    <button type="submit" class="btn btn-teal px-4 rounded-pill">
                        Simpan Formulir
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Form validation
    (function () {
        'use strict'
        var forms = document.querySelectorAll('.needs-validation')
        Array.prototype.slice.call(forms).forEach(function (form) {
            form.addEventListener('submit', function (event) {
                if (!form.checkValidity()) {
                    event.preventDefault()
                    event.stopPropagation()
                }
                form.classList.add('was-validated')
            }, false)
        })
    })();

    // Status switch toggle
    const statusSwitch = document.getElementById('status');
    const statusLabel = document.getElementById('status-label');
    statusSwitch.addEventListener('change', function() {
        statusLabel.textContent = this.checked ? 'Aktif' : 'Tidak Aktif';
    });

    // Preview updates
    const nameInput = document.getElementById('nama_form');
    const jenisFormInput = document.getElementById('jenis_form');
    const kuotaInput = document.getElementById('kuota');
    
    const previewName = document.getElementById('preview-name');
    const previewJenis = document.getElementById('preview-jenis');
    const previewKuota = document.getElementById('preview-kuota');
    const kuotaPengangsuran = document.getElementById('kuota_pengangsuran');
    const kuotaPenurunan = document.getElementById('kuota_penurunan');
    
    nameInput.addEventListener('input', function() {
        previewName.textContent = this.value || 'Nama Formulir';
    });
    
    jenisFormInput.addEventListener('change', function() {
        previewJenis.textContent = this.value ? this.options[this.selectedIndex].text : 'Belum dipilih';
        
        // Auto-set kuota based on jenis form
        if (this.value === 'pengangsuran') {
            kuotaPengangsuran.value = kuotaInput.value;
            kuotaPenurunan.value = 0;
        } else if (this.value === 'penurunan') {
            kuotaPenurunan.value = kuotaInput.value;
            kuotaPengangsuran.value = 0;
        }
    });
    
    kuotaInput.addEventListener('input', function() {
        previewKuota.textContent = this.value || '0';
        
        // Update hidden fields based on jenis form
        if (jenisFormInput.value === 'pengangsuran') {
            kuotaPengangsuran.value = this.value;
        } else if (jenisFormInput.value === 'penurunan') {
            kuotaPenurunan.value = this.value;
        }
    });

    // Date validation
    const tanggalPembukaan = document.getElementById('tanggal_pembukaan');
    const tanggalPenutupan = document.getElementById('tanggal_penutupan');
    const tanggalVerifikasi = document.getElementById('tanggal_verifikasi');
    const tanggalPengumuman = document.getElementById('tanggal_pengumuman');

    function validateDates() {
        if (tanggalPembukaan.value && tanggalPenutupan.value) {
            if (new Date(tanggalPenutupan.value) <= new Date(tanggalPembukaan.value)) {
                tanggalPenutupan.setCustomValidity('Tanggal penutupan harus setelah tanggal pembukaan');
            } else {
                tanggalPenutupan.setCustomValidity('');
            }
        }

        if (tanggalPenutupan.value && tanggalVerifikasi.value) {
            if (new Date(tanggalVerifikasi.value) <= new Date(tanggalPenutupan.value)) {
                tanggalVerifikasi.setCustomValidity('Tanggal verifikasi harus setelah tanggal penutupan');
            } else {
                tanggalVerifikasi.setCustomValidity('');
            }
        }

        if (tanggalVerifikasi.value && tanggalPengumuman.value) {
            if (new Date(tanggalPengumuman.value) <= new Date(tanggalVerifikasi.value)) {
                tanggalPengumuman.setCustomValidity('Tanggal pengumuman harus setelah tanggal verifikasi');
            } else {
                tanggalPengumuman.setCustomValidity('');
            }
        }
    }

    tanggalPembukaan.addEventListener('change', validateDates);
    tanggalPenutupan.addEventListener('change', validateDates);
    tanggalVerifikasi.addEventListener('change', validateDates);
    tanggalPengumuman.addEventListener('change', validateDates);
});
</script>

<style>
    .container-fluid {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    
    .bg-gradient-teal {
        background: linear-gradient(135deg,rgb(0, 122, 153) 0%,rgb(30, 101, 94) 100%);
    }
    
    .bg-light-primary {
        background-color: rgba(0, 150, 136, 0.08);
    }
    
    .text-teal {
        color: #009688;
    }
    
    .btn-teal {
        background-color: #009688;
        border-color: #009688;
        color: white;
    }
    
    .btn-teal:hover {
        background-color: #00796B;
        border-color: #00796B;
    }
    
    .form-control, .form-select {
        transition: all 0.3s ease;
    }
    
    .form-control:focus, .form-select:focus {
        border-color: #009688;
        box-shadow: 0 0 0 0.25rem rgba(0, 150, 136, 0.25);
    }
    
    .form-check-input:checked {
        background-color: #009688;
        border-color: #009688;
    }
    
    .form-switch .form-check-input:focus {
        box-shadow: 0 0 0 0.25rem rgba(0, 150, 136, 0.25);
    }
    
    .rounded-4 {
        border-radius: 1rem !important;
    }
    
    .card-header {
        border-bottom: none;
    }
    
    /* Disabled input style */
    .form-control:disabled {
        background-color: #f8f9fa;
        opacity: 1;
    }
</style>
@endsection