@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card mx-4 shadow-lg">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        {{-- button back --}}
                        <button class="btn btn-secondary mb-0" onclick="history.back()"><i class="fas fa-circle-left me-1">
                            </i><span class="font-weight-bold">Kembali</button>
                        {{-- check authorize add --}}
                        @if ($authorize->add == '1')
                            {{-- button save --}}
                            <button type="submit" form="period-form" class="btn btn-primary mb-0">
                                <i class="fas fa-floppy-disk me-1"></i>
                                <span class="font-weight-bold">Simpan</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <div class="row">
                            <div class="col">
                                <h5 class="mb-0">Add {{ $title_menu }}</h5>
                            </div>
                        </div>
                    </div>
                    <hr class="horizontal dark m-0">
                    <div class="card-body">
                        <form method="POST" action="{{ url($url_menu) }}" id="period-form" enctype="multipart/form-data">
                            @csrf
                            {{-- Hidden fields for start and end dates --}}
                            <input type="hidden" name="start_date" id="start_date" value="{{ old('start_date') }}">
                            <input type="hidden" name="end_date" id="end_date" value="{{ old('end_date') }}">

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="year" class="form-control-label">
                                            Tahun <span class="text-danger">*</span>
                                        </label>
                                        <select class="form-control" name="year" id="year" required>
                                            <option value="">Pilih Tahun</option>
                                            @for ($y = date('Y'); $y <= date('Y') + 5; $y++)
                                                <option value="{{ $y }}"
                                                    {{ old('year') == $y ? 'selected' : '' }}>
                                                    {{ $y }}
                                                </option>
                                            @endfor
                                        </select>
                                        @error('year')
                                            <div class="text-danger mt-1 text-xs">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="quarter" class="form-control-label">
                                            Periode (Kuartal) <span class="text-danger">*</span>
                                        </label>
                                        <select class="form-control" name="quarter" id="quarter" required>
                                            <option value="">Pilih Periode</option>
                                            <option value="1" {{ old('quarter') == '1' ? 'selected' : '' }}>
                                                Periode 1 (Desember - Februari)
                                            </option>
                                            <option value="2" {{ old('quarter') == '2' ? 'selected' : '' }}>
                                                Periode 2 (Maret - Mei)
                                            </option>
                                            <option value="3" {{ old('quarter') == '3' ? 'selected' : '' }}>
                                                Periode 3 (Juni - Agustus)
                                            </option>
                                            <option value="4" {{ old('quarter') == '4' ? 'selected' : '' }}>
                                                Periode 4 (September - November)
                                            </option>
                                        </select>
                                        @error('quarter')
                                            <div class="text-danger mt-1 text-xs">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="period_range" class="form-control-label">
                                            Rentang Periode
                                        </label>
                                        <input class="form-control" type="text" name="period_range" id="period_range"
                                            value="{{ old('period_range') }}" readonly
                                            placeholder="Pilih tahun dan kuartal terlebih dahulu">
                                        <small class="text-muted">Field ini akan terisi otomatis berdasarkan tahun dan
                                            kuartal yang dipilih</small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="deadline_date" class="form-control-label">
                                            Batas Waktu Penilaian <span class="text-danger">*</span>
                                        </label>
                                        <input class="form-control" type="date" name="deadline_date" id="deadline_date"
                                            value="{{ old('deadline_date') }}" required>
                                        @error('deadline_date')
                                            <div class="text-danger mt-1 text-xs">{{ $message }}</div>
                                        @enderror
                                        <small class="text-muted">Tanggal batas waktu untuk melakukan penilaian pada periode
                                            ini</small>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $(document).ready(function() {
            // Form submission loading state
            let isSubmitting = false;

            // Store original button HTML for reset
            const $submitButton = $('button[type="submit"][form="period-form"]');
            const originalButtonHtml = $submitButton.html();

            // Reset function in case of errors
            function resetSubmitState() {
                isSubmitting = false;
                $submitButton.prop('disabled', false).html(originalButtonHtml);
                Swal.close();
            }

            $('#period-form').on('submit', function(e) {
                // Prevent double submission
                if (isSubmitting) {
                    e.preventDefault();
                    return false;
                }

                // Validate required fields
                const year = $('#year').val();
                const quarter = $('#quarter').val();
                const deadlineDate = $('#deadline_date').val();

                if (!year || !quarter || !deadlineDate) {
                    e.preventDefault();
                    Swal.fire({
                        title: 'Formulir Tidak Lengkap',
                        text: 'Mohon lengkapi semua field yang diperlukan',
                        icon: 'warning',
                        confirmButtonColor: '#028284',
                        confirmButtonText: 'OK'
                    });
                    return false;
                }

                // Prevent form submission temporarily
                e.preventDefault();

                // Set submitting flag
                isSubmitting = true;

                // Close any existing Swal modals
                Swal.close();

                // Disable submit button
                $submitButton.prop('disabled', true).html(
                    '<i class="fas fa-spinner fa-spin me-1"></i><span class="font-weight-bold">Memproses...</span>'
                );

                // Show loading overlay with SweetAlert
                Swal.fire({
                    title: 'Membuat Periode...',
                    text: 'Mohon tunggu sebentar',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    showConfirmButton: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                // Small delay to ensure Swal is fully rendered, then submit
                setTimeout(() => {
                    // Submit the form programmatically
                    e.target.submit();
                }, 100);

                return false;
            });

            // Function to calculate quarter dates based on year and quarter
            function calculateQuarterDates(year, quarter) {
                let startDate, endDate;

                switch (quarter) {
                    case '1':
                        // Q1: Dec (previous year) - Feb (current year)
                        startDate = (year - 1) + '-12-01';
                        endDate = year + '-02-' + (isLeapYear(year) ? '29' : '28');
                        break;
                    case '2':
                        // Q2: Mar - May
                        startDate = year + '-03-01';
                        endDate = year + '-05-31';
                        break;
                    case '3':
                        // Q3: Jun - Aug
                        startDate = year + '-06-01';
                        endDate = year + '-08-31';
                        break;
                    case '4':
                        // Q4: Sep - Nov
                        startDate = year + '-09-01';
                        endDate = year + '-11-30';
                        break;
                    default:
                        return null;
                }

                return {
                    startDate: startDate,
                    endDate: endDate
                };
            }

            // Function to check if year is leap year
            function isLeapYear(year) {
                return ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0);
            }

            // Function to format date for display
            function formatDateDisplay(dateStr) {
                const date = new Date(dateStr);
                const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
                ];

                const day = String(date.getDate()).padStart(2, '0');
                const month = months[date.getMonth()];
                const year = date.getFullYear();

                return `${day} ${month} ${year}`;
            }

            // Function to format date for Indonesian display
            function formatDateIndonesian(dateStr) {
                const date = new Date(dateStr);
                const months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
                    'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
                ];

                const day = date.getDate();
                const month = months[date.getMonth()];
                const year = date.getFullYear();

                return `${day} ${month} ${year}`;
            }

            // Function to update period fields
            function updatePeriodFields() {
                const year = $('#year').val();
                const quarter = $('#quarter').val();

                if (year && quarter) {
                    const dates = calculateQuarterDates(parseInt(year), quarter);

                    if (dates) {
                        // Update hidden date fields
                        $('#start_date').val(dates.startDate);
                        $('#end_date').val(dates.endDate);

                        // Update period range display
                        const periodRange = formatDateDisplay(dates.startDate) + ' - ' + formatDateDisplay(dates
                            .endDate);
                        $('#period_range').val(periodRange);

                        // Show period info with Indonesian formatting
                        const quarterNames = {
                            1: 'Q1 (Desember - Februari)',
                            2: 'Q2 (Maret - Mei)',
                            3: 'Q3 (Juni - Agustus)',
                            4: 'Q4 (September - November)'
                        };

                        $('#info-period').text('Q' + quarter + ' ' + year + ' (' + quarterNames[quarter].split('(')[
                            1]);
                        $('#info-start').text(formatDateIndonesian(dates.startDate));
                        $('#info-end').text(formatDateIndonesian(dates.endDate));
                        $('#period-info').show();

                        // Set minimum deadline date to the day after period end
                        const minDeadline = new Date(dates.endDate);
                        minDeadline.setDate(minDeadline.getDate() + 1);
                        const minDeadlineFormatted = minDeadline.toISOString().split('T')[0];
                        $('#deadline_date').attr('min', minDeadlineFormatted);

                        // Set default deadline date (end of quarter + 30 days)
                        const endDate = new Date(dates.endDate);
                        endDate.setDate(endDate.getDate() + 30);
                        const defaultDeadline = endDate.toISOString().split('T')[0];

                        const currentDeadline = $('#deadline_date').val();
                        if (!currentDeadline) {
                            $('#deadline_date').val(defaultDeadline);
                        } else if (currentDeadline < minDeadlineFormatted) {
                            $('#deadline_date').val(minDeadlineFormatted);
                        }
                    }
                } else {
                    $('#period_range').val('');
                    $('#period-info').hide();
                    $('#deadline_date').removeAttr('min');
                }
            }

            // Event listeners for year and quarter changes
            $('#year, #quarter').on('change', function() {
                updatePeriodFields();
            });

            // Populate fields if values already selected (e.g., after validation errors)
            updatePeriodFields();

            // Validate deadline date against period start
            $('#deadline_date').on('change', function() {
                const startDate = $('#start_date').val();
                const deadlineDate = $(this).val();

                if (startDate && deadlineDate) {
                    const start = new Date(startDate);
                    const deadline = new Date(deadlineDate);

                    if (deadline < start) {
                        Swal.fire({
                            title: 'Tanggal Tidak Valid!',
                            text: 'Batas waktu penilaian tidak boleh sebelum tanggal mulai periode (' +
                                formatDateIndonesian(startDate) + ')',
                            icon: 'warning',
                            confirmButtonColor: '#028284',
                            confirmButtonText: 'OK'
                        });
                        $(this).val(''); // Clear the invalid date
                    }
                }
            });
        });
    </script>
@endpush