@extends('admin.layouts.master')
@section('title', 'Schedule New Batch')

@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
    <style>
        :root {
            --primary: #4f46e5;
            --primary-hover: #4338ca;
            --bg-body: #f8fafc;
            --border: #e2e8f0;
            --text-main: #0f172a;
            --text-muted: #64748b;
            --danger: #ef4444;
            --success: #10b981;
        }

        body {
            background-color: var(--bg-body);
            color: var(--text-main);
            font-family: 'Inter', sans-serif;
        }

        /* --- Cards --- */
        .modern-card {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            margin-bottom: 1.5rem;
            transition: transform 0.2s;
        }

        .modern-card:hover {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        }

        .card-header-clean {
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--border);
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .card-title-text {
            font-size: 1rem;
            font-weight: 700;
            color: var(--text-main);
            margin: 0;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .card-icon {
            width: 32px;
            height: 32px;
            background: #eef2ff;
            color: var(--primary);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
        }

        .card-body-clean {
            padding: 1.5rem;
        }

        /* --- Inputs --- */
        .form-label {
            font-size: 0.85rem;
            font-weight: 600;
            color: #334155;
            margin-bottom: 0.4rem;
        }

        .form-control,
        .form-select {
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 0.65rem 1rem;
            font-size: 0.95rem;
            transition: all 0.2s;
            background-color: #fff;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px #e0e7ff;
            outline: none;
        }

        .input-group-text {
            background: #f8fafc;
            border: 1px solid var(--border);
            color: var(--text-muted);
        }

        /* --- Header --- */
        .sticky-header {
            position: sticky;
            top: 70px;
            z-index: 90;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--border);
            margin: -1.5rem -1.5rem 1.5rem -1.5rem;
            padding: 1rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* --- Preview Box --- */
        .course-preview {
            background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
            color: white;
            border-radius: 10px;
            padding: 1.25rem;
            margin-top: 1rem;
            display: none;
            box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
        }

        /* --- Buttons --- */
        .btn-primary-custom {
            background-color: var(--primary);
            color: white;
            border-radius: 8px;
            padding: 0.6rem 1.5rem;
            font-weight: 600;
            border: none;
            transition: 0.2s;
            box-shadow: 0 2px 4px rgba(79, 70, 229, 0.2);
        }

        .btn-primary-custom:hover {
            background-color: var(--primary-hover);
            transform: translateY(-1px);
        }

        .btn-light-custom {
            background: #fff;
            border: 1px solid var(--border);
            color: var(--text-muted);
            font-weight: 600;
            border-radius: 8px;
            padding: 0.6rem 1.2rem;
            transition: 0.2s;
        }

        .btn-light-custom:hover {
            background: #f8fafc;
            color: var(--text-main);
            border-color: #cbd5e1;
        }

        /* Validation */
        .shake-field {
            animation: shake 0.4s cubic-bezier(.36, .07, .19, .97) both;
            border-color: var(--danger) !important;
            background-color: #fef2f2;
        }

        @keyframes shake {

            0%,
            100% {
                transform: translateX(0);
            }

            20%,
            60% {
                transform: translateX(-4px);
            }

            40%,
            80% {
                transform: translateX(4px);
            }
        }

        .error-msg {
            color: var(--danger);
            font-size: 0.75rem;
            margin-top: 4px;
            display: none;
            font-weight: 600;
        }

        /* Switch */
        .form-check-input {
            width: 2.5em;
            height: 1.3em;
            cursor: pointer;
        }

        .form-check-input:checked {
            background-color: var(--success);
            border-color: var(--success);
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid pb-5">
        <form id="batchForm" novalidate>
            @csrf

            {{-- 1. STICKY HEADER --}}
            <div class="sticky-header shadow-sm">
                <div>
                    <h1 class="h4 fw-bold mb-0 text-dark">Schedule New Batch</h1>
                    <p class="text-muted small mb-0">Create a time slot and assign capacity for a course.</p>
                </div>
                <div class="d-flex gap-2">
                    <a href="{{ url()->previous() }}" class="btn-light-custom text-decoration-none">Discard</a>
                    <button type="submit" class="btn-primary-custom" id="saveBtn">
                        <i class="ri-check-double-line me-1"></i> Publish Batch
                    </button>
                </div>
            </div>

            <div class="row g-4">

                {{-- LEFT COLUMN --}}
                <div class="col-xl-8">

                    {{-- A. COURSE SELECTION --}}
                    <div class="modern-card">
                        <div class="card-header-clean">
                            <div class="card-title-text">
                                <div class="card-icon"><i class="ri-book-open-line"></i></div>
                                Course Selection
                            </div>
                        </div>
                        <div class="card-body-clean">
                            <label class="form-label">Select Course <span class="text-danger">*</span></label>
                            <select class="form-select form-select-lg" name="course_id" id="course_id">
                                <option value="" selected disabled>Choose a course...</option>
                                @foreach ($courses as $course)
                                    <option value="{{ $course->id }}" data-code="{{ $course->code }}"
                                        data-name="{{ $course->name }}">
                                        {{ $course->name }} ({{ $course->code }})
                                    </option>
                                @endforeach
                            </select>
                            <div class="error-msg" id="courseFeedback">Please select a course.</div>

                            {{-- Dynamic Preview --}}
                            <div class="course-preview" id="coursePreviewBox">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <span class="badge bg-white bg-opacity-25 text-success mb-2 "
                                            style="font-size: 0.7rem;">SELECTED</span>
                                        <h5 class="mb-0 fw-bold text-white" id="prev_name">Course Name</h5>
                                        <div class="opacity-75 small mt-1 font-monospace" id="prev_code">CODE: 000</div>
                                    </div>
                                    <i class="ri-checkbox-circle-fill fs-1 opacity-50 text-white"></i>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- B. SCHEDULE --}}
                    <div class="modern-card">
                        <div class="card-header-clean">
                            <div class="card-title-text">
                                <div class="card-icon"><i class="ri-calendar-event-line"></i></div>
                                Timeline & Schedule
                            </div>
                        </div>
                        <div class="card-body-clean">
                            <div class="row g-4">
                                {{-- Dates --}}
                                <div class="col-md-6">
                                    <label class="form-label">Start Date <span class="text-danger">*</span></label>
                                    <input type="date" name="start_date" id="start_date" class="form-control">
                                    <div class="error-msg">Start date required.</div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">End Date <span class="text-danger">*</span></label>
                                    <input type="date" name="end_date" id="end_date" class="form-control">
                                    <div class="error-msg">End date required.</div>
                                </div>

                                {{-- Duration Alert --}}
                                <div class="col-12" id="durationContainer" style="display:none;">
                                    <div
                                        class="p-3 bg-primary bg-opacity-10 rounded-3 border border-primary border-opacity-10 d-flex align-items-center gap-3">
                                        <div class="card-icon bg-white text-primary" style="width: 40px; height: 40px;"><i
                                                class="ri-time-line"></i></div>
                                        <div>
                                            <div class="fw-bold text-primary" id="durationText">0 Days</div>
                                            <small class="text-primary text-opacity-75">Calculated duration based on
                                                dates.</small>
                                        </div>
                                    </div>
                                </div>

                                {{-- Times --}}
                                <div class="col-md-6">
                                    <label class="form-label">Daily Start Time</label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="ri-sun-line"></i></span>
                                        <input type="time" name="start_time" value="09:00" class="form-control">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Daily End Time</label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="ri-moon-line"></i></span>
                                        <input type="time" name="end_time" value="17:00" class="form-control">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- C. BATCH IDENTITY --}}
                    <div class="modern-card">
                        <div class="card-header-clean">
                            <div class="card-title-text">
                                <div class="card-icon"><i class="ri-fingerprint-line"></i></div>
                                Batch Identity
                            </div>
                            <button type="button"
                                class="btn btn-sm btn-light text-primary border-primary border-opacity-25"
                                id="regenerateNameBtn">
                                <i class="ri-magic-line me-1"></i> Auto-Generate
                            </button>
                        </div>
                        <div class="card-body-clean">
                            <div class="row g-4">
                                <div class="col-md-8">
                                    <label class="form-label">Batch Name <span class="text-danger">*</span></label>
                                    <input type="text" name="batch_name" id="batch_name" class="form-control"
                                        placeholder="e.g. GPR January Morning Batch">
                                    <div class="error-msg">Batch Name is required.</div>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Batch Code <span class="text-danger">*</span></label>
                                    <input type="text" name="batch_code" id="batch_code"
                                        class="form-control bg-light text-uppercase fw-bold text-primary"
                                        placeholder="AUTO">
                                    <div class="error-msg">Batch Code is required.</div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                {{-- RIGHT COLUMN --}}
                <div class="col-xl-4">

                    {{-- D. CAPACITY --}}
                    <div class="modern-card">
                        <div class="card-header-clean">
                            <div class="card-title-text">
                                <div class="card-icon"><i class="ri-group-line"></i></div>
                                Capacity & Location
                            </div>
                        </div>
                        <div class="card-body-clean">
                            <div class="mb-4">
                                <label class="form-label">Total Seats <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="number" name="total_seats" id="total_seats"
                                        class="form-control fw-bold fs-5" value="40" min="1">
                                    <span class="input-group-text bg-white text-muted">Students</span>
                                </div>
                                <div class="error-msg">Total seats required.</div>
                            </div>

                            <div class="mb-0">
                                <label class="form-label">Venue / Classroom</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="ri-map-pin-line"></i></span>
                                    <input type="text" name="venue" class="form-control"
                                        placeholder="e.g. Room 101, Block A">
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- E. SETTINGS --}}
                    <div class="modern-card">
                        <div class="card-header-clean">
                            <div class="card-title-text">
                                <div class="card-icon"><i class="ri-settings-4-line"></i></div>
                                Settings
                            </div>
                        </div>
                        <div class="card-body-clean">
                            <div class="mb-4">
                                <label class="form-label">Booking Cutoff</label>
                                <input type="datetime-local" name="booking_cutoff_date" class="form-control">
                                <div class="form-text mt-2 text-xs text-muted"><i class="ri-information-line"></i>
                                    Defaults to 1 day before start.</div>
                            </div>

                            <div class="p-3 bg-light rounded-3 border d-flex justify-content-between align-items-center">
                                <div>
                                    <div class="fw-bold text-dark fs-6">Open Booking</div>
                                    <div class="small text-muted">Allow students to book now?</div>
                                </div>
                                <div class="form-check form-switch mb-0">
                                    <input class="form-check-input" type="checkbox" name="status" value="open"
                                        checked>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        $(document).ready(function() {

            // --- 1. COURSE SELECTION VISUALS ---
            $('#course_id').on('change', function() {
                const selected = $(this).find(':selected');
                const name = selected.data('name');
                const code = selected.data('code');

                if (name) {
                    $('#prev_name').text(name);
                    $('#prev_code').text('CODE: ' + code);
                    $('#coursePreviewBox').slideDown();
                    // Clear error
                    $('#course_id').removeClass('shake-field');
                    $('#courseFeedback').hide();

                    generateBatchIdentity();
                }
            });

            // --- 2. AUTO-GENERATE IDENTITY ---
            function generateBatchIdentity() {
                const courseSelect = $('#course_id option:selected');
                const startDateVal = $('#start_date').val();

                if (courseSelect.val() && startDateVal) {
                    const courseCode = courseSelect.data('code');
                    const courseName = courseSelect.data('name');
                    const dateObj = new Date(startDateVal);

                    const monthName = dateObj.toLocaleString('default', {
                        month: 'long'
                    });
                    const monthShort = dateObj.toLocaleString('default', {
                        month: 'short'
                    }).toUpperCase();
                    const year = dateObj.getFullYear();

                    const autoName = `${courseName} - ${monthName} ${year}`;
                    const autoCode = `${courseCode}-${year}-${monthShort}`;

                    // Animate change
                    $('#batch_name').val(autoName).addClass('bg-primary bg-opacity-10');
                    $('#batch_code').val(autoCode).addClass('bg-primary bg-opacity-10');

                    setTimeout(() => {
                        $('#batch_name, #batch_code').removeClass('bg-primary bg-opacity-10');
                    }, 500);
                }
            }

            $('#start_date').on('change', generateBatchIdentity);
            $('#regenerateNameBtn').on('click', generateBatchIdentity);

            // --- 3. DURATION LOGIC ---
            $('#start_date, #end_date').on('change', function() {
                const s = new Date($('#start_date').val());
                const e = new Date($('#end_date').val());

                if (s && e && !isNaN(s) && !isNaN(e)) {
                    if (e < s) {
                        $('#durationContainer').slideDown();
                        $('#durationText').html(
                            '<span class="text-danger">Invalid: End date is before start date</span>');
                        $('#end_date').addClass('shake-field');
                    } else {
                        const diffTime = Math.abs(e - s);
                        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;

                        $('#durationContainer').slideDown();
                        $('#durationText').html(`${diffDays} Days Duration`);
                        $('#end_date').removeClass('shake-field');
                    }
                }
            });

            // --- 4. SUBMIT HANDLER ---
            $('#batchForm').on('submit', function(e) {
                e.preventDefault();

                // Reset Validation
                $('.shake-field').removeClass('shake-field');
                $('.error-msg').hide();

                let isValid = true;

                // Helper to show error
                function showError(el, msgEl) {
                    el.addClass('shake-field');
                    if (msgEl) msgEl.show();
                    isValid = false;
                }

                // Checks
                if (!$('#course_id').val()) showError($('#course_id'), $('#courseFeedback'));
                if (!$('#start_date').val()) showError($('#start_date'), $('#start_date').next(
                    '.error-msg'));
                if (!$('#end_date').val()) showError($('#end_date'), $('#end_date').next('.error-msg'));
                if (!$('#batch_name').val().trim()) showError($('#batch_name'), $('#batch_name').next(
                    '.error-msg'));
                if (!$('#batch_code').val().trim()) showError($('#batch_code'), $('#batch_code').next(
                    '.error-msg'));
                if (!$('#total_seats').val() || $('#total_seats').val() < 1) showError($('#total_seats'), $(
                    '#total_seats').parent().next('.error-msg'));

                if (!isValid) return;

                // AJAX
                const btn = $('#saveBtn');
                const originalHtml = btn.html();
                btn.prop('disabled', true).html(
                    '<span class="spinner-border spinner-border-sm me-2"></span>Creating...');

                $.ajax({
                    url: "{{ route('admin.batch.store') }}",
                    type: "POST",
                    data: new FormData(this),
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Batch Created!',
                            text: 'The batch has been scheduled successfully.',
                            confirmButtonColor: '#4f46e5',
                            timer: 2000
                        }).then(() => {
                            window.location.reload();
                        });
                    },
                    error: function(xhr) {
                        btn.prop('disabled', false).html(originalHtml);
                        let msg = xhr.responseJSON?.message || 'Something went wrong.';

                        // Handle Backend Validation
                        if (xhr.status === 422) {
                            let errors = xhr.responseJSON.errors;
                            if (errors.batch_code) {
                                $('#batch_code').addClass('shake-field');
                                $('#batch_code').next('.error-msg').text(errors.batch_code[0])
                                    .show();
                            }
                        }

                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: msg,
                            confirmButtonColor: '#ef4444'
                        });
                    }
                });
            });

            // Input Cleanup
            $('input, select').on('input change', function() {
                $(this).removeClass('shake-field');
                $(this).next('.error-msg').hide();
                $(this).parent().next('.error-msg').hide(); // For input groups
                if ($(this).attr('id') === 'course_id') $('#courseFeedback').hide();
            });
        });
    </script>
@endpush