@extends('layouts.master')

@section('styles')
    <!-- SELECT2 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
@endsection

@section('content')
    <div class="d-sm-flex d-block align-items-center justify-content-between page-header-breadcrumb">
        <h4 class="fw-medium mb-0">@lang('coupon.AddCoupon')</h4>
        <div class="ms-sm-1 ms-0">
            <nav>
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item">
                        <a href="{{ route('coupons.list') }}">
                            @lang('coupon.Coupons')
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        <a href="{{ route('coupon.create') }}">@lang('coupon.AddCoupon')</a>
                    </li>
                </ol>
            </nav>
        </div>
    </div>

    <div class="main-content app-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xl-12">
                    <div class="card custom-card">
                        <div class="card-header">
                            <div class="card-title">@lang('coupon.AddCoupon')</div>
                        </div>
                        <div class="card-body">
                            @if (session('error'))
                                <div class="alert alert-solid-danger alert-dismissible fade show">
                                    {!! session('error') !!}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                                        <i class="bi bi-x"></i>
                                    </button>
                                </div>
                            @endif

                            @if (session('success'))
                                <div class="alert alert-solid-success alert-dismissible fade show">
                                    {{ session('success') }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                                        <i class="bi bi-x"></i>
                                    </button>
                                </div>
                            @endif

                            @if ($errors->any())
                                @foreach ($errors->all() as $error)
                                    <div class="alert alert-solid-danger alert-dismissible fade show">
                                        {{ $error }}
                                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                                            <i class="bi bi-x"></i>
                                        </button>
                                    </div>
                                @endforeach
                            @endif
                            <form method="POST" action="{{ route('coupon.store') }}" class="needs-validation" novalidate>
                                @csrf
                                <div class="row gy-4">
                                    <!-- Coupon titlear -->
                                    <div class="col-xl-6">
                                        <label for="title_ar" class="form-label">@lang('coupon.title_ar')</label>
                                        <input type="text" name="title_ar" id="title_ar" class="form-control"
                                            value="{{ old('title_ar') }}" placeholder="@lang('coupon.title_ar')" required>
                                        <div class="invalid-feedback">@lang('validation.Entertitle_ar')</div>
                                    </div> <!-- Coupon titleen -->
                                    <div class="col-xl-6">
                                        <label for="title_en" class="form-label">@lang('coupon.title_en')</label>
                                        <input type="text" name="title_en" id="title_en" class="form-control"
                                            value="{{ old('title_en') }}" placeholder="@lang('coupon.title_en')" required>
                                        <div class="invalid-feedback">@lang('validation.Entertitle_en')</div>
                                    </div>
                                    <!-- Coupon Code -->
                                    <div class="col-xl-6">
                                        <label for="code" class="form-label">@lang('coupon.Code')</label>
                                        <input type="text" name="code" id="code" class="form-control"
                                            value="{{ old('code') }}" placeholder="@lang('coupon.Code')" required>
                                        <div class="invalid-feedback">@lang('validation.Entercode')</div>
                                    </div>

                                    <!-- Discount Value -->
                                    <div class="col-xl-6">
                                        <label for="value" class="form-label">@lang('coupon.Value')</label>
                                        <input type="number" step="0.01" name="value" id="value"
                                            class="form-control" value="{{ old('value') }}"
                                            placeholder="@lang('coupon.Value')" required>
                                        <div class="invalid-feedback">@lang('validation.EnterDiscountValue')</div>
                                    </div>


                                    <!-- Minimum Spend -->
                                    <div class="col-xl-6">
                                        <label for="minimum_spend" class="form-label">@lang('coupon.MinimumSpend')</label>
                                        <input type="number" step="0.01" name="minimum_spend" id="minimum_spend"
                                            class="form-control" value="{{ old('minimum_spend') }}"
                                            placeholder="@lang('coupon.MinimumSpend')" required>
                                        <div class="invalid-feedback">@lang('validation.EnterMinimumSpend')</div>
                                    </div>

                                    <!-- Usage Limit -->
                                    <div class="col-xl-6">
                                        <label for="usage_limit" class="form-label">@lang('coupon.UsageLimit')</label>
                                        <input type="number" name="usage_limit" id="usage_limit" class="form-control"
                                            value="{{ old('usage_limit') }}" placeholder="@lang('coupon.UsageLimit')" required>
                                        <div class="invalid-feedback">@lang('validation.EnterUsageLimit')</div>
                                    </div>

                                    <!-- Start Date -->
                                    <div class="col-xl-6">
                                        <label for="start_date" class="form-label">@lang('coupon.StartDate')</label>
                                        <input type="datetime-local" name="start_date" id="start_date"
                                            class="form-control" value="{{ old('start_date') }}" required>
                                        <div class="invalid-feedback">@lang('validation.EnterStartDate')</div>
                                    </div>

                                    <!-- End Date -->
                                    <div class="col-xl-6">
                                        <label for="end_date" class="form-label">@lang('coupon.EndDate')</label>
                                        <input type="datetime-local" name="end_date" id="end_date" class="form-control"
                                            value="{{ old('end_date') }}" required>
                                        <div class="invalid-feedback">@lang('validation.EnterEndDate')</div>
                                    </div>

                                    <!-- Is Active -->
                                    <div class="col-xl-6">
                                        <p class="mb-2 text-muted">@lang('coupon.IsActive')</p>
                                        <div class="form-check form-check-inline">
                                            <input type="radio" name="is_active" value="1"
                                                class="form-check-input" @if (old('is_active') == '1') checked @endif
                                                required>
                                            <label class="form-check-label">@lang('coupon.Active')</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input type="radio" name="is_active" value="0"
                                                class="form-check-input" @if (old('is_active') == '0') checked @endif
                                                required>
                                            <label class="form-check-label">@lang('coupon.Inactive')</label>
                                        </div>
                                    </div>
                                    <!-- Discount Type -->
                                    <div class="col-xl-6">
                                        <p class="mb-2 text-muted">@lang('coupon.Type')</p>
                                        <div class="form-check form-check-inline">
                                            <input type="radio" name="type" value="percentage"
                                                class="form-check-input coupon-type"
                                                @if (old('type') == 'percentage') checked @endif required>
                                            <label class="form-check-label">@lang('coupon.Percentage')</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input type="radio" name="type" value="fixed"
                                                class="form-check-input coupon-type"
                                                @if (old('type') == 'fixed') checked @endif required>
                                            <label class="form-check-label">@lang('coupon.Fixed')</label>
                                        </div>
                                    </div>



                                    <div class="col-xl-6">
                                        <label for="apply_type" class="form-label">@lang('coupon.ApplyType')</label>
                                        <select name="apply_type" id="apply_type" class="form-control" required
                                            @if (old('type', 'percentage') == 'fixed') disabled @endif>
                                            <option value="order" @if (old('apply_type') == 'order') selected @endif>
                                                @lang('coupon.Order')</option>
                                            <option value="dish" @if (old('apply_type') == 'dish' && old('type') != 'fixed') selected @endif
                                                @if (old('type') == 'fixed') disabled @endif>
                                                @lang('coupon.Dish')</option>
                                        </select>
                                        <div class="invalid-feedback">@lang('validation.apply_type')</div>
                                    </div>

                                    <div class="col-xl-6">
                                        <label for="branches" class="form-label">@lang('coupon.Branches')</label>
                                        <select name="branches[]" id="branches" class="form-control" multiple required
                                            @if (auth('admin')->user()->hasRole('Branch Manager')) disabled @endif>
                                            @foreach ($branches as $branch)
                                                <option value="{{ $branch->id }}"
                                                    @if (in_array($branch->id, old('branches', [])) ||
                                                            (auth('admin')->user()->hasRole('Branch Manager') && $branch->id == getBranchManagerID())) selected @endif>
                                                    {{ app()->getLocale() == 'en' ? $branch->name_en : $branch->name_ar }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <div class="invalid-feedback">@lang('validation.SelectBranches')</div>
                                    </div>

                                    <!-- Container for categories and dishes (hidden by default) -->
                                    <div id="dish-application-container" style="display: none;">
                                        <div class="card">
                                            <div class="card-header">
                                                <h5>@lang('coupon.SelectDishes')</h5>
                                            </div>
                                            <div class="card-body">
                                                <div id="categories-container" class="row"></div>
                                                <div id="dishes-container" class="row mt-3"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Submit Button -->
                                    <center>
                                        <div class="col-xl-4">
                                            <button type="submit"
                                                class="btn btn-primary form-control">@lang('category.save')</button>
                                        </div>
                                    </center>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('scripts')
    <!-- JQUERY CDN -->
    <script src="https://code.jquery.com/jquery-3.6.1.min.js" crossorigin="anonymous"></script>
    <!-- SELECT2 CDN -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <!-- Custom JS -->
    @vite('resources/assets/js/validation.js')



    <script>
        $(document).ready(function() {
            // Initialize select2 for branches
            $('#branches').select2({
                disabled: true // Initially disabled
            });

            // Store branch-category-dish relationships
            let branchCategoryDishMap = {};

            // Handle coupon type change
            $('.coupon-type').change(function() {
                const selectedType = $(this).val();
                const applyTypeSelect = $('#apply_type');

                // Enable/disable apply_type select based on coupon type
                if (selectedType === 'fixed') {
                    applyTypeSelect.val('order').prop('disabled', true);
                    $('#branches').prop('disabled', false).trigger('change');
                    $('#dish-application-container').hide();
                    if (!$('#hidden-apply-type').length) {
                        $('<input>').attr({
                            type: 'hidden',
                            id: 'hidden-apply-type',
                            name: 'apply_type',
                            value: 'order'
                        }).appendTo('form');
                    }
                } else {
                    applyTypeSelect.prop('disabled', false);
                    $('#branches').prop('disabled', false).trigger('change');
                }

                // Clear any existing dish selections
                $('#categories-container').empty();
                $('#dishes-container').empty();
                branchCategoryDishMap = {};
            });

            // Handle apply type change
            // $('#apply_type').on('change', function() {

            //     if ($(this).val() === 'dish') {
            //         $('#dish-application-container').show();
            //         if ($('#branches').val()) {
            //             loadCategoriesForBranches();
            //         }
            //     } else {
            //         $('#dish-application-container').hide();
            //         $('#categories-container').empty();
            //         $('#dishes-container').empty();
            //         branchCategoryDishMap = {};
            //     }
            // });

            $('#apply_type').on('change', function() {
                // 🔹 Reset branches every time apply_type changes
                $('#branches').val(null).trigger('change');

                if ($(this).val() === 'dish') {
                    $('#dish-application-container').show();
                    if ($('#branches').val()) {
                        loadCategoriesForBranches();
                    }
                } else {
                    $('#dish-application-container').hide();
                    $('#categories-container').empty();
                    $('#dishes-container').empty();
                    branchCategoryDishMap = {};
                }
            });

            // Handle branch selection
            let prevSelectedBranches = [];
            $('#branches').on('change', function() {
                if ($('#apply_type').val() === 'dish') {
                    let selectedBranches = $(this).val() || [];

                    // Remove unselected branches
                    prevSelectedBranches.forEach(branch_id => {
                        if (!selectedBranches.includes(branch_id)) {
                            delete branchCategoryDishMap[branch_id];
                            $(`#branch_${branch_id}_section`).remove();
                        }
                    });

                    // Add new branches
                    selectedBranches.forEach(branch_id => {
                        if (!branchCategoryDishMap[branch_id]) {
                            const branchName = $(`#branches option[value="${branch_id}"]`).text();
                            branchCategoryDishMap[branch_id] = {
                                name: branchName,
                                categories: {}
                            };

                            // Create branch section
                            $('#dishes-container').append(`
                        <div id="branch_${branch_id}_section" class="branch-section mb-4">
                            <h4 class="branch-header">${branchName}</h4>
                            <div id="branch_${branch_id}_categories" class="row"></div>
                            <div id="branch_${branch_id}_dishes" class="row mt-3"></div>
                        </div>
                    `);

                            loadCategoriesForBranch(branch_id);
                        }
                    });

                    prevSelectedBranches = selectedBranches;
                }
            });

            // Load categories for a specific branch
            function loadCategoriesForBranch(branch_id) {
                $.ajax({
                    url: `/dashboard/coupon/branches/${branch_id}/categories`,
                    type: "GET",
                    dataType: "json",
                    success: function(data) {
                        const $branchCategories = $(`#branch_${branch_id}_categories`);
                        $branchCategories.empty();

                        data.categories.forEach(cat => {
                            if (!branchCategoryDishMap[branch_id].categories[cat.menu_id]) {
                                branchCategoryDishMap[branch_id].categories[cat.menu_id] = {
                                    name: cat.name,
                                    dishes: []
                                };

                                $branchCategories.append(`
                            <div class="col-md-4 mb-3">
                                <div class="card">
                                    <div class="card-header">
                                        <input type="checkbox"
                                               class="category-checkbox"
                                               data-id="${cat.menu_id}"
                                               data-branch="${branch_id}"
                                               id="cat_${cat.menu_id}_branch_${branch_id}">
                                        <label for="cat_${cat.menu_id}_branch_${branch_id}">${cat.name}</label>
                                    </div>
                                </div>
                            </div>
                        `);
                            }
                        });
                    }
                });
            }

            // Handle category checkbox change
            $(document).on('change', '.category-checkbox', function() {
                let category_id = $(this).data('id');
                let branch_id = $(this).data('branch');
                const $branchDishes = $(`#branch_${branch_id}_dishes`);

                if ($(this).is(':checked')) {
                    $.ajax({
                        url: `/dashboard/coupon/categories/${category_id}/dishes/${branch_id}`,
                        type: "GET",
                        dataType: "json",
                        success: function(dishes) {
                            branchCategoryDishMap[branch_id].categories[category_id].dishes =
                                dishes;

                            // Clear existing dishes for this category if any
                            $(`#dishes_cat_${category_id}_branch_${branch_id}`).remove();

                            // Add dishes section
                            $branchDishes.append(`
                        <div id="dishes_cat_${category_id}_branch_${branch_id}" class="col-12 mb-4">
                            <div class="card">
                                <div class="card-header">
                                    <h5>
                                        ${branchCategoryDishMap[branch_id].categories[category_id].name}
                                        <input type="checkbox" class="check-all-dishes"
                                               data-category="${category_id}"
                                               data-branch="${branch_id}">
                                        @lang('coupon.SelectAllDishes')
                                    </h5>
                                </div>
                                <div class="card-body row">
                                    ${dishes.map(dish => `
                                                <div class="col-md-3 mb-2">
                                                    <div class="form-check">
                                                        <input type="checkbox"
                                                               name="branch_dishes[${branch_id}][${category_id}][]"
                                                               value="${dish.menu_id}"
                                                               class="form-check-input dish-checkbox cat_${category_id}_branch_${branch_id}"
                                                               id="dish_${dish.menu_id}_branch_${branch_id}">
                                                        <label class="form-check-label" for="dish_${dish.menu_id}_branch_${branch_id}">
                                                            ${dish.name}
                                                        </label>
                                                    </div>
                                                </div>
                                            `).join('')}
                                </div>
                            </div>
                        </div>
                    `);
                        }
                    });
                } else {
                    // Remove dishes from this category
                    branchCategoryDishMap[branch_id].categories[category_id].dishes = [];
                    $(`#dishes_cat_${category_id}_branch_${branch_id}`).remove();
                }
            });

            // Handle "Select All" for dishes in a category
            $(document).on('change', '.check-all-dishes', function() {
                let category_id = $(this).data('category');
                let branch_id = $(this).data('branch');
                $(`.cat_${category_id}_branch_${branch_id}`).prop('checked', $(this).is(':checked'));
            });

            // Initialize form state based on existing values
            function initializeFormState() {
                const selectedType = $('input[name="type"]:checked').val();
                const applyType = $('#apply_type').val();

                if (selectedType === 'fixed') {
                    $('#apply_type').val('order').prop('disabled', true);
                    $('#branches').prop('disabled', false);
                    $('#dish-application-container').hide();
                } else {
                    $('#apply_type').prop('disabled', false);
                    $('#branches').prop('disabled', applyType !== 'dish');

                    if (applyType === 'dish') {
                        $('#dish-application-container').show();
                        if ($('#branches').val()) {
                            loadCategoriesForBranches();
                        }
                    } else {
                        $('#dish-application-container').hide();
                    }
                }
            }

            // Run initialization
            initializeFormState();
        });
    </script>

       <script>


            document.addEventListener('DOMContentLoaded', function () {
                const couponTypes = document.querySelectorAll('.coupon-type');
                const applyType = document.getElementById('apply_type');
                const branches = document.getElementById('branches');

                function resetBranches() {
                    if (branches) {
                        [...branches.options].forEach(option => option.selected = false);
                    }
                }

                // When coupon type changes
                couponTypes.forEach(type => {
                    type.addEventListener('change', resetBranches);
                });


            });
    </script>
@endsection