@extends('admin.layouts.master')

@section('title', 'Create Course Package')

@push('styles')
    {{-- Libraries --}}
    <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">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

    <style>
        :root {
            --primary: #4f46e5;
            --bg-body: #f8fafc;
            --border: #e2e8f0;
            --text-main: #0f172a;
            --danger: #ef4444;
        }

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

        /* --- Header --- */
        .sticky-header {
            position: sticky;
            top: 60px;
            z-index: 99;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--border);
            margin: 0 -1.5rem 2rem -1.5rem;
            padding: 1rem 2rem;
        }

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

        .form-control,
        .input-group-text {
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 0.65rem 1rem;
            font-size: 0.925rem;
            transition: all 0.2s;
        }

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

        .input-group-text {
            background: #f8fafc;
            border-right: 0;
            color: #64748b;
        }

        .input-group .form-control {
            border-left: 0;
        }

        /* --- Validation & Animation --- */
        .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(-5px);
            }

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

        .is-invalid {
            border-color: var(--danger) !important;
        }

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

        /* Quill Validation */
        .ql-container.ql-snow {
            border-radius: 0 0 8px 8px;
            border-color: var(--border);
            font-family: 'Inter';
        }

        .ql-toolbar.ql-snow {
            border-radius: 8px 8px 0 0;
            border-color: var(--border);
        }

        .ql-invalid .ql-container {
            border-color: var(--danger) !important;
            background-color: #fef2f2;
        }

        /* --- Course Selector (Searchable List) --- */
        .course-selector-box {
            border: 1px solid var(--border);
            border-radius: 12px;
            background: #fff;
            overflow: hidden;
            transition: border-color 0.2s;
        }

        .course-search-header {
            padding: 1rem;
            background: #f8fafc;
            border-bottom: 1px solid var(--border);
        }

        .course-list-scroll {
            max-height: 400px;
            overflow-y: auto;
            padding: 0.5rem;
        }

        .course-item {
            display: flex;
            align-items: center;
            padding: 10px;
            border-radius: 8px;
            cursor: pointer;
            transition: 0.2s;
            border: 1px solid transparent;
            margin-bottom: 4px;
        }

        .course-item:hover {
            background: #f1f5f9;
        }

        .course-item.selected {
            background: #eff6ff;
            border-color: var(--primary);
        }

        .course-item .check-circle {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px solid #cbd5e1;
            margin-right: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.2s;
        }

        .course-item.selected .check-circle {
            background: var(--primary);
            border-color: var(--primary);
            color: #fff;
        }

        .course-item .course-price {
            font-weight: 600;
            color: var(--primary);
            margin-left: auto;
            font-size: 0.9rem;
        }

        /* --- Pricing Card --- */
        .pricing-card {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1.5rem;
        }

        .summary-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.75rem;
            font-size: 0.9rem;
            color: #64748b;
        }

        .summary-total {
            border-top: 1px dashed #e2e8f0;
            margin-top: 1rem;
            padding-top: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 700;
            color: #0f172a;
            font-size: 1.1rem;
        }

        /* --- Image Upload (Fixed & Changeable) --- */
        .upload-zone {
            border: 2px dashed var(--border);
            border-radius: 12px;
            height: 220px;
            width: 100%;
            position: relative;
            background: #fff;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }

        .upload-zone:hover {
            border-color: var(--primary);
            background: #eff6ff;
        }

        /* IMPORTANT: Input must be on top */
        .upload-zone input[type="file"] {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
            z-index: 10;
        }

        /* Preview Image */
        #imagePreview {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1;
            display: none;
            border-radius: 10px;
            background: #fff;
        }

        /* Hover Overlay */
        .upload-zone.has-image:hover::after {
            content: 'Change Image';
            position: absolute;
            z-index: 5;
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            pointer-events: none;
        }

        .upload-zone.has-image #uploadPlaceholder {
            display: none;
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid pb-5">
        <form id="packageForm" enctype="multipart/form-data" novalidate>
            @csrf

            {{-- Header --}}
            <div class="d-flex align-items-center justify-content-between sticky-header shadow-sm">
                <div>
                    <h1 class="h4 mb-1 text-dark">Create Package</h1>
                    <p class="mb-0 text-muted fs-12">Combine multiple courses into a single value bundle.</p>
                </div>
                <div class="d-flex gap-2">
                    <a href="{{ route('admin.course.courses') }}" class="btn btn-light border fw-medium px-4">Discard</a>
                    <button type="submit" class="btn btn-primary fw-medium px-4 shadow-sm" id="saveBtn">
                        <i class="ri-check-line align-bottom me-1"></i> Publish Package
                    </button>
                </div>
            </div>

            <div class="row g-4">

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

                    {{-- 1. Basic Details --}}
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-body p-4">
                            <h5 class="mb-4 text-dark border-bottom pb-2">Package Details</h5>
                            <div class="row g-4">
                                <div class="col-md-8">
                                    <label class="form-label">Package Name <span class="text-danger">*</span></label>
                                    <input type="text" name="package_name" id="package_name"
                                        class="form-control form-control-lg fw-semibold" placeholder="e.g. Master Bundle">
                                    <div class="error-msg">Package Name is required</div>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Code <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="ri-barcode-line"></i></span>
                                        <input type="text" name="package_code" id="package_code"
                                            class="form-control form-control-lg text-uppercase" placeholder="PKG-01">
                                    </div>
                                    <div class="error-msg">Code is required</div>
                                </div>
                                <input type="hidden" name="slug" id="slug">

                                <div class="col-12" id="div_description">
                                    <label class="form-label">Description <span class="text-danger">*</span></label>
                                    <div id="description_editor" style="height: 150px;"></div>
                                    <input type="hidden" name="description" id="description">
                                    <div class="error-msg">Description is required</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- 2. Course Selector --}}
                    <div class="card border-0 shadow-sm" id="courseCardWrapper">
                        <div class="card-body p-4">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h5 class="mb-0 text-dark">Included Courses <span class="text-danger">*</span></h5>
                                <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-3"
                                    id="courseCountBadge">0 Selected</span>
                            </div>

                            <div class="course-selector-box" id="courseSelector">
                                <div class="course-search-header">
                                    <div class="input-group input-group-sm">
                                        <span class="input-group-text bg-white"><i class="ri-search-line"></i></span>
                                        <input type="text" id="courseSearch" class="form-control border-start-0"
                                            placeholder="Search courses...">
                                    </div>
                                    <div class="d-flex justify-content-end mt-2">
                                        <button type="button" class="btn btn-link btn-sm p-0 text-decoration-none"
                                            id="selectAllBtn">Select All</button>
                                        <span class="mx-2 text-muted">|</span>
                                        <button type="button"
                                            class="btn btn-link btn-sm p-0 text-decoration-none text-danger"
                                            id="clearAllBtn">Clear</button>
                                    </div>
                                </div>

                                <div class="course-list-scroll">
                                    @forelse($courses as $course)
                                        <div class="course-item" data-id="{{ $course->id }}"
                                            data-price="{{ $course->total_fee }}"
                                            data-name="{{ strtolower($course->name) }} {{ strtolower($course->code) }}">
                                            <div class="check-circle"><i class="ri-check-line" style="font-size: 12px;"></i>
                                            </div>
                                            <input type="checkbox" name="course_ids[]" value="{{ $course->id }}"
                                                class="d-none real-checkbox">

                                            <div class="d-flex align-items-center gap-3 w-100">
                                                @if ($course->cover_image)
                                                    <img src="{{ Storage::url($course->cover_image) }}" class="rounded"
                                                        width="40" height="40" style="object-fit:cover;">
                                                @else
                                                    <div class="bg-light rounded d-flex align-items-center justify-content-center"
                                                        style="width:40px;height:40px;"><i
                                                            class="ri-image-line text-muted"></i></div>
                                                @endif
                                                <div>
                                                    <div class="fw-semibold text-dark fs-14">{{ $course->name }}</div>
                                                    <div class="text-muted small font-monospace">{{ $course->code }}</div>
                                                </div>
                                                <div class="course-price">₹{{ number_format($course->total_fee) }}</div>
                                            </div>
                                        </div>
                                    @empty
                                        <div class="text-center py-4 text-muted">No active courses found.</div>
                                    @endforelse
                                </div>
                            </div>
                            <div class="error-msg text-center" id="courseError">Please select at least one course.</div>
                        </div>
                    </div>
                </div>

                {{-- RIGHT COLUMN: Pricing & Assets --}}
                <div class="col-xl-4">

                    {{-- 1. Pricing Engine --}}
                    <div class="pricing-card mb-4 shadow-sm">
                        <h6 class="text-uppercase text-muted fs-11 fw-bold ls-1 mb-3">Pricing Engine</h6>

                        <div class="summary-row">
                            <span>Total Value (Actual)</span>
                            <span class="fw-bold text-dark text-decoration-line-through" id="disp_actual">₹0.00</span>
                        </div>

                        <div class="mb-3 mt-3">
                            <label class="form-label text-dark small">Selling Price <span
                                    class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-text fw-bold text-dark">₹</span>
                                <input type="number" name="package_price" id="package_price"
                                    class="form-control fw-bold fs-5 text-end text-primary" placeholder="0.00"
                                    step="0.01">
                            </div>
                            <div class="error-msg text-end" id="priceFeedback">Price is required</div>
                        </div>

                        <div class="summary-total">
                            <span class="text-success fs-14">Savings</span>
                            <span class="badge bg-success-subtle text-success border border-success-subtle px-3 py-2"
                                id="disp_savings">0% OFF</span>
                        </div>
                        <small class="text-danger mt-2 d-none d-block text-end" id="priceWarning">Price exceeds actual
                            value!</small>
                    </div>

                    {{-- 2. Image Upload (Fixed) --}}
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-body p-3">
                            <h6 class="text-uppercase text-muted fs-11 fw-bold mb-3">Thumbnail <span
                                    class="text-danger">*</span></h6>

                            <div class="upload-zone" id="dropArea">
                                <input type="file" name="cover_image" id="cover_image" accept="image/*"
                                    onchange="previewImage(this)">

                                <div id="uploadPlaceholder">
                                    <div class="text-center">
                                        <i class="ri-upload-cloud-2-line fs-2 text-primary"></i>
                                        <p class="mb-0 fs-13 fw-medium text-dark mt-1">Upload Cover</p>
                                        <span class="text-muted text-xs">Max 5MB</span>
                                    </div>
                                </div>
                                <img id="imagePreview" src="" alt="Preview">
                            </div>

                            <div class="error-msg text-center" id="imageFeedback">Thumbnail is required</div>
                        </div>
                    </div>

                    {{-- 3. Settings --}}
                    <div class="card border-0 shadow-sm">
                        <div class="card-body p-3">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <label class="fw-semibold fs-14">Active Status</label>
                                <div class="form-check form-switch m-0">
                                    <input class="form-check-input" type="checkbox" name="is_active" checked>
                                </div>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <label class="fw-semibold fs-14">Featured Bundle</label>
                                <div class="form-check form-switch m-0">
                                    <input class="form-check-input" type="checkbox" name="is_featured">
                                </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 src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>

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

            // --- 1. Quill Editor ---
            var toolbarOptions = [
                ['bold', 'italic', 'underline'],
                [{
                    'list': 'ordered'
                }, {
                    'list': 'bullet'
                }],
                ['link', 'clean']
            ];
            var quill = new Quill('#description_editor', {
                theme: 'snow',
                modules: {
                    toolbar: toolbarOptions
                }
            });

            quill.on('text-change', function() {
                $('#description').val(quill.root.innerHTML);
                $('#div_description').find('.ql-container').css('border-color', '#e2e8f0');
                $('#div_description').find('.error-msg').hide();
            });

            // --- 2. Course Selection & Math ---
            let totalValue = 0;

            function updateMath() {
                const selectedCount = $('.course-item.selected').length;
                $('#courseCountBadge').text(selectedCount + ' Selected');

                totalValue = 0;
                $('.course-item.selected').each(function() {
                    totalValue += parseFloat($(this).data('price'));
                });

                $('#disp_actual').text('₹' + totalValue.toLocaleString('en-IN', {
                    minimumFractionDigits: 2
                }));
                const sellingPrice = parseFloat($('#package_price').val()) || 0;

                let savings = 0;
                if (totalValue > 0 && sellingPrice > 0) {
                    if (sellingPrice > totalValue) {
                        $('#priceWarning').removeClass('d-none');
                        $('#disp_savings').removeClass('bg-success-subtle text-success').addClass(
                            'bg-danger-subtle text-danger').text('OVERPRICED');
                    } else {
                        $('#priceWarning').addClass('d-none');
                        savings = ((totalValue - sellingPrice) / totalValue) * 100;
                        $('#disp_savings').removeClass('bg-danger-subtle text-danger').addClass(
                            'bg-success-subtle text-success').text(Math.round(savings) + '% OFF');
                    }
                } else {
                    $('#disp_savings').text('0% OFF');
                }
            }

            $('.course-item').click(function() {
                $(this).toggleClass('selected');
                const checkbox = $(this).find('.real-checkbox');
                checkbox.prop('checked', !checkbox.prop('checked'));
                updateMath();
                // Clear Error
                if ($('.course-item.selected').length > 0) {
                    $('#courseSelector').css('border-color', '#e2e8f0').removeClass('shake-field');
                    $('#courseError').hide();
                }
            });

            $('#selectAllBtn').click(function() {
                $('.course-item').addClass('selected');
                $('.real-checkbox').prop('checked', true);
                updateMath();
                $('#courseSelector').css('border-color', '#e2e8f0').removeClass('shake-field');
                $('#courseError').hide();
            });

            $('#clearAllBtn').click(function() {
                $('.course-item').removeClass('selected');
                $('.real-checkbox').prop('checked', false);
                updateMath();
            });

            $('#courseSearch').on('keyup', function() {
                var value = $(this).val().toLowerCase();
                $(".course-item").filter(function() {
                    $(this).toggle($(this).data('name').toLowerCase().indexOf(value) > -1)
                });
            });

            $('#package_price').on('input', function() {
                updateMath();
                $(this).removeClass('shake-field is-invalid');
                $('#priceFeedback').hide();
            });

            // --- 3. Image Preview (Fixed) ---
            window.previewImage = function(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $('#imagePreview').attr('src', e.target.result).fadeIn();
                        $('#dropArea').addClass('has-image');
                        $('.upload-zone').css('border-color', 'var(--primary)').removeClass('shake-field');
                        $('#imageFeedback').hide();
                    }
                    reader.readAsDataURL(input.files[0]);
                }
            }

            // --- 4. Auto Slug ---
            $('#package_name').on('input', function() {
                let val = $(this).val();
                let slug = val.toLowerCase().replace(/[^\w\s-]/g, '').replace(/[\s_-]+/g, '-').replace(
                    /^-+|-+$/g, '');
                $('#slug').val(slug);
                $(this).removeClass('shake-field is-invalid');
                $(this).next('.error-msg').hide();
            });

            // --- 5. Submit Handler ---
            $('#packageForm').on('submit', function(e) {
                e.preventDefault();

                // Reset Errors
                $('.shake-field').removeClass('shake-field is-invalid');
                $('.is-invalid').removeClass('is-invalid');
                $('.ql-invalid').removeClass('ql-invalid');
                $('.error-msg').hide();
                $('.ql-container').css('border-color', '#e2e8f0');
                $('.upload-zone').css('border-color', '#e2e8f0');
                $('#courseSelector').css('border-color', '#e2e8f0');

                let isValid = true;
                let firstError = null;

                function markError(el, msgEl) {
                    el.addClass('shake-field');
                    if (el.is('input')) el.addClass('is-invalid');
                    msgEl.show();
                    isValid = false;
                    if (!firstError) firstError = el;
                }

                // Check Fields
                if (!$('#package_name').val().trim()) markError($('#package_name'), $('#package_name').next(
                    '.error-msg'));
                if (!$('#package_code').val().trim()) markError($('#package_code'), $('#package_code')
                    .closest('div').next('.error-msg'));
                if (!$('#package_price').val()) markError($('#package_price'), $('#priceFeedback'));

                if (quill.getText().trim().length === 0) {
                    $('#div_description').find('.ql-container').css('border-color', '#ef4444');
                    markError($('#div_description'), $('#div_description').find('.error-msg'));
                }

                if (!$('#cover_image').val()) {
                    $('.upload-zone').css('border-color', '#ef4444');
                    markError($('.upload-zone'), $('#imageFeedback'));
                }

                if ($('.course-item.selected').length === 0) {
                    $('#courseSelector').css('border-color', '#ef4444');
                    markError($('#courseSelector'), $('#courseError'));
                }

                if (!isValid) {
                    $('html, body').animate({
                        scrollTop: $(firstError).offset().top - 150
                    }, 500);
                    return;
                }

                // Submit
                let btn = $('#saveBtn');
                let originalText = btn.html();
                btn.html('<span class="spinner-border spinner-border-sm me-2"></span> Publishing...').prop(
                    'disabled', true);

                let formData = new FormData(this);

                $.ajax({
                    url: "{{ route('admin.packages.store') }}",
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(res) {
                        Swal.fire({
                                icon: 'success',
                                title: 'Published!',
                                text: res.success,
                                confirmButtonColor: '#4f46e5',
                                timer: 2000
                            })
                            .then(() => {
                                window.location.href =
                                    "{{ route('admin.packages.course') }}";
                            });
                    },
                    error: function(err) {
                        btn.html(originalText).prop('disabled', false);

                        if (err.status === 422) {
                            let errors = err.responseJSON.errors;
                            $.each(errors, function(key, messages) {
                                let msg = messages[0];
                                if (key === 'package_name') markError($(
                                    '#package_name'), $('#package_name').next(
                                    '.error-msg').text(msg));
                                else if (key === 'package_code') markError($(
                                        '#package_code'), $('#package_code')
                                    .closest('div').next('.error-msg').text(msg));
                                else if (key === 'package_price') markError($(
                                    '#package_price'), $('#priceFeedback').text(
                                    msg));
                                else if (key === 'description') {
                                    $('#div_description').find('.ql-container').css(
                                        'border-color', '#ef4444');
                                    markError($('#div_description'), $(
                                            '#div_description').find('.error-msg')
                                        .text(msg));
                                } else if (key === 'cover_image') {
                                    $('.upload-zone').css('border-color', '#ef4444');
                                    markError($('.upload-zone'), $('#imageFeedback')
                                        .text(msg));
                                } else if (key === 'course_ids') {
                                    $('#courseSelector').css('border-color', '#ef4444');
                                    markError($('#courseSelector'), $('#courseError')
                                        .text(msg));
                                }
                            });
                            Swal.fire({
                                icon: 'error',
                                title: 'Validation Error',
                                text: 'Please check highlighted fields.',
                                confirmButtonColor: '#ef4444'
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Server Error',
                                text: 'Something went wrong.'
                            });
                        }
                    }
                });
            });

            $('input, textarea').on('input', function() {
                $(this).removeClass('shake-field is-invalid');
                $(this).next('.error-msg').hide();
                $(this).closest('div').next('.error-msg').hide();
            });
        });
    </script>
@endpush