@extends('layout.layout')

@section('content')
    @include('components.alert')

    <section class="container-fluid app-bg">
        <div class="page-shell">
            <div class="d-flex flex-column gap-4">
                <x-page-title
                    title="Discount Plans"
                    description="Manage discount rules, level ranges, and assigned pricing behavior from one place."
                >
                    @can('retention_discount_plans_create')
                        <button class="asset-btn asset-btn--primary" data-bs-toggle="modal"
                            data-bs-target="#createDiscountPlanModal">
                            + Add Discount Plan
                        </button>
                    @endcan
                </x-page-title>

                <div class="ui-card ui-card--table">
                    <div class="ui-card__header">
                        <div class="d-flex align-items-center gap-3 flex-nowrap">
                            <h6 class="mb-0 ui-title" style="margin-right: auto;">Filters</h6>
                            <x-table-controls :action="route('discount_plans.index')" />
                        </div>
                    </div>

                    <x-table
                        :headers="['Name (EN)', 'Name (AR)', 'One Level', 'Level From', 'Level To', 'Level', 'Type', 'Discount', 'Actions']"
                        :paginator="$discountPlans"
                        emptyMessage="No discount plans found."
                    >
                        @foreach ($discountPlans as $discountPlan)
                            <tr>
                                <td class="ui-title text-center">{{ $discountPlan->name_en }}</td>
                                <td class="ui-title text-center">{{ $discountPlan->name_ar }}</td>
                                <td class="ui-muted text-center">{{ $discountPlan->one_level ?? '-' }}</td>
                                <td class="ui-muted text-center">{{ $discountPlan->level_from ?? '-' }}</td>
                                <td class="ui-muted text-center">{{ $discountPlan->level_to ?? '-' }}</td>
                                <td class="ui-muted text-center">{{ $discountPlan->trackLevel?->name_en ?? '-' }}</td>
                                <td class="text-center">
                                    <span class="ui-pill ui-pill--neutral">{{ $discountPlan->type }}</span>
                                </td>
                                <td class="text-center">
                                    <span class="ui-pill ui-pill--info">{{ $discountPlan->discount ?? '-' }}</span>
                                </td>
                                <td class="text-center" onclick="event.stopPropagation()">
                                    <div class="ui-actions justify-content-center">
                                        @can('retention_discount_plans_update')
                                            <x-table-action
                                                type="edit"
                                                :target="'#editDiscountPlanModal' . $discountPlan->id"
                                                title="Edit Discount Plan"
                                            />
                                        @endcan

                                        @can('retention_discount_plans_destroy')
                                            <x-table-action
                                                type="delete"
                                                :target="'#deleteDiscountPlanModal' . $discountPlan->id"
                                                title="Delete Discount Plan"
                                            />
                                        @endcan
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </x-table>
                </div>
            </div>

            @foreach ($discountPlans as $discountPlan)
                @can('retention_discount_plans_destroy')
                    <div class="modal fade" id="deleteDiscountPlanModal{{ $discountPlan->id }}" tabindex="-1"
                        aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <div class="modal-title">Delete</div>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body text-center">
                                    Are you sure you want to delete this discount plan?
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-outline-secondary"
                                        data-bs-dismiss="modal">Cancel</button>
                                    <form action="{{ route('discount_plans.destroy', $discountPlan->id) }}"
                                        method="POST">
                                        @csrf
                                        @method('DELETE')
                                        <button class="btn btn-outline-danger">Delete</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                @endcan

                @can('retention_discount_plans_update')
                    @include('dashboard.academics.discount_plan.edit', [
                        'discountPlan' => $discountPlan,
                        'categories' => $categories,
                    ])
                @endcan
            @endforeach

            @can('retention_discount_plans_create')
                @include('dashboard.academics.discount_plan.create', ['categories' => $categories])
            @endcan
        </div>
    </section>

@endsection

@push('scripts')
    {{-- Unified JS below --}}
    <script>
        (function ($) {
            $(function () {

                // utility to build options
                function buildOptions(items, placeholder = 'Select') {
                    let html = `<option value="">${placeholder}</option>`;
                    items.forEach(i => { html += `<option value="${i.id}">${i.name_en}</option>`; });
                    return html;
                }


                $(document).on('submit', 'form', function () {
                    const form = $(this);
                    const assign = form.find('.assign-to-level-select').val();
                    const levelType = form.find('.level-or-more-select').val();

                    form.find('[name="one_level"]').prop('disabled', false);
                    form.find('[name="level_from"]').prop('disabled', false);
                    form.find('[name="level_to"]').prop('disabled', false);
                    form.find('[name="track_level_id"]').prop('disabled', false);
                    form.find('[name="category_id"]').prop('disabled', false);
                    form.find('[name="track_id"]').prop('disabled', false);

                    if (assign !== 'yes') {
                        form.find('[name="category_id"]').prop('disabled', true);
                        form.find('[name="track_id"]').prop('disabled', true);
                        form.find('[name="track_level_id"]').prop('disabled', true);

                        if (levelType === 'one') {
                            form.find('[name="level_from"]').prop('disabled', true);
                            form.find('[name="level_to"]').prop('disabled', true);

                        } else if (levelType !== 'one') {
                            form.find('[name="one_level"]').prop('disabled', true);
                        }

                    }

                    if (assign === 'yes') {
                        form.find('[name="level_or_more"]').prop('disabled', true);
                        form.find('[name="level_from"]').prop('disabled', true);
                        form.find('[name="level_to"]').prop('disabled', true);
                        form.find('[name="one_level"]').prop('disabled', true);
                    }
                });




                // When modal shown -> for edit modals populate selects if needed
                $(document).on('shown.bs.modal', '.modal', function () {
                    const modal = $(this);
                    // only proceed if modal contains category select (create/edit)
                    const categorySelect = modal.find('.category-select');
                    if (!categorySelect.length) return;

                    // for edit: there are data-selected attributes on track & level selects
                    const selectedTrackId = modal.find('.track-select').data('selected') || '';
                    const selectedLevelId = modal.find('.level-select').data('selected') || '';
                    const categoryId = categorySelect.val();

                    if (categoryId) {
                        // fetch tracks for category
                        $.get('/getTracksOnCategory/' + categoryId, function (tracks) {
                            modal.find('.track-select').html(buildOptions(tracks, 'Select Program'));
                            if (selectedTrackId) modal.find('.track-select').val(selectedTrackId);
                            // if track selected -> fetch levels
                            const trackVal = modal.find('.track-select').val();
                            if (trackVal) {
                                $.get('/getLevelsOnTrack/' + trackVal, function (levels) {
                                    modal.find('.level-select').html(buildOptions(levels, 'Select Level'));
                                    if (selectedLevelId) modal.find('.level-select').val(selectedLevelId);
                                });
                            }
                        });
                    }
                });

                // When category changes (create/edit)
                $(document).on('change', '.category-select', function () {
                    const modal = $(this).closest('.modal-body, .modal-content');
                    const catId = $(this).val();
                    const trackSelect = modal.find('.track-select');
                    const levelSelect = modal.find('.level-select');

                    if (!catId) {
                        trackSelect.html('<option value="">Select Program</option>');
                        levelSelect.html('<option value="">Select Level</option>');
                        return;
                    }

                    $.get('/getTracksOnCategory/' + catId, function (tracks) {
                        trackSelect.html(buildOptions(tracks, 'Select Program'));
                        levelSelect.html('<option value="">Select Level</option>');
                    });
                });

                // When track changes -> load levels
                $(document).on('change', '.track-select', function () {
                    const modal = $(this).closest('.modal-body, .modal-content');
                    const trackId = $(this).val();
                    const levelSelect = modal.find('.level-select');

                    if (!trackId) {
                        levelSelect.html('<option value="">Select Level</option>');
                        return;
                    }

                    $.get('/getLevelsOnTrack/' + trackId, function (levels) {
                        levelSelect.html(buildOptions(levels, 'Select Level'));
                    });
                });

                // Assign to level toggle (works for create & edit) using classes and closest modal context
                $(document).on('change', '.assign-to-level-select', function () {
                    const modal = $(this).closest('.modal-body, .modal-content');
                    if ($(this).val() === 'yes') {
                        modal.find('.level-assignment-area').removeClass('d-none').show();
                        modal.find('.all-levels-area').addClass('d-none').hide();
                    } else {
                        modal.find('.level-assignment-area').addClass('d-none').hide();
                        modal.find('.all-levels-area').removeClass('d-none').show();
                    }
                });

                // Level-or-more toggle (one vs more)
                $(document).on('change', '.level-or-more-select', function () {
                    const modal = $(this).closest('.modal-body, .modal-content');
                    if ($(this).val() === 'one') {
                        modal.find('.one-level-field').removeClass('d-none').show();
                        modal.find('.more-levels-fields').addClass('d-none').hide();
                    } else {
                        modal.find('.one-level-field').addClass('d-none').hide();
                        modal.find('.more-levels-fields').removeClass('d-none').show();
                    }
                });

                // initialize create modal fields based on old() (if present)
                $(function initFromOld() {
                    const createModal = $('#createDiscountPlanModal');
                    if (!createModal.length) return;

                    // trigger assign_to_level if old value exists
                    const assignVal = createModal.find('.assign-to-level-select').data('old') || '';
                    if (assignVal) createModal.find('.assign-to-level-select').val(assignVal).trigger('change');

                    const lom = createModal.find('.level-or-more-select').data('old') || '';
                    if (lom) createModal.find('.level-or-more-select').val(lom).trigger('change');

                    // if old category exists, populate tracks immediately
                    const oldCategory = createModal.find('.category-select').data('old') || '';
                    const oldTrack = createModal.find('.track-select').data('old') || '';
                    const oldLevel = createModal.find('.level-select').data('old') || '';

                    if (oldCategory) {
                        $.get('/getTracksOnCategory/' + oldCategory, function (tracks) {
                            createModal.find('.track-select').html(buildOptions(tracks, 'Select Program'));
                            if (oldTrack) createModal.find('.track-select').val(oldTrack);
                            if (oldTrack) {
                                $.get('/getLevelsOnTrack/' + oldTrack, function (levels) {
                                    createModal.find('.level-select').html(buildOptions(levels, 'Select Level'));
                                    if (oldLevel) createModal.find('.level-select').val(oldLevel);
                                });
                            }
                        });
                    }
                });

                // discount input: if percentage, ensure max 100 (front-only)
                $(document).on('change', '.type-select', function () {
                    const modal = $(this).closest('.modal-body, .modal-content');
                    const discountInput = modal.find('.discount-input');
                    if ($(this).val() === 'percentage') {
                        discountInput.attr('max', 100).attr('type', 'number').attr('step', '0.01');
                    } else {
                        discountInput.removeAttr('max').attr('type', 'number').attr('step', '0.01');
                    }
                });

                // on page load, apply type constraints for any open modals
                $('.type-select').trigger('change');

            });
        })(jQuery);
    </script>
@endpush