@extends('layout')
@section('content')
    <div class="dashboard_main-content">
        <div class="dashboard_main-header">
            <div class="dashboard_main-header_info">
                <h1 class="dashboard_main-title">Add Promo Code</h1>
                <ul class="dashboard_main-breadcrumb">
                    <li><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                    <li><a href="{{ route('promos.index') }}">Promotion Codes</a></li>
                    <li><a href="{{ route('promos.create') }}">Add Promo Code</a></li>
                </ul>
            </div>
            <div class="dashboard_main-actions">
                <div class="switcher">
                    <label>
                        <span class="text">Inactive</span>
                        <input type="checkbox" id="statusToggle" name="status"
                            {{ old('status') ?? true ? 'checked' : '' }} />
                        <span class="slider"></span>
                        <span class="text">Active</span>
                    </label>
                </div>
            </div>
        </div>

        <div class="dashboard_main-body">
            <form id="promoForm" action="{{ route('promos.store') }}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="accordion-list">
                    <div class="accordion-item">
                        <h3 class="accordion-title">
                            Basic Information
                            <span class="icon">
                                <img loading="lazy" src="{{ asset('assets/images/icons/angle.svg') }}" alt="icon"
                                    class="svg" />
                            </span>
                        </h3>
                        <div class="accordion-body">
                            <div class="body-content">
                                <div class="form-grid">
                                    <div class="form-group float-label">
                                        <label class="form-label">
                                            Promotion Code
                                        </label>
                                        <input type="text" name="name" class="form-control"
                                            placeholder="Promotion Code" value="{{ old('name') }}" required />
                                        <span class="form-hint">
                                            <img src="{{ asset('assets/images/icons/info.svg') }}" alt="icon"
                                                class="svg" />
                                            User Uppercase letter
                                            and numbers e.g. VIP485
                                        </span>
                                        @error('name')
                                            <span class="error-message">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="form-group">
                                        <select class="form-control" name="applicability" id="applicability" required>
                                            <option value="" hidden>
                                                Applicability
                                            </option>
                                            <option value="All Events" @if (old('applicability') == 'All Events') selected @endif>
                                                All Events
                                            </option>
                                            <option value="Specific Events"
                                                @if (old('applicability') == 'Specific Events') selected @endif>
                                                Specific Events
                                            </option>
                                        </select>
                                        <span class="form-hint">
                                            By default, it applies
                                            to all events on the
                                            platform
                                        </span>
                                        @error('applicability')
                                            <span class="error-message">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    <div class="form-group full-w" id="questionSelect" style="display: none">
                                        <select class="form-control select-questions" placeholder="Select Questions">
                                            <option value="" hidden selected>Select Events</option>
                                            @foreach ($events as $event)
                                                <option value="{{ $event->id }}">{{ $event->title }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    @php
                                        $oldEvents = collect(old())
                                            ->filter(fn($v, $k) => Str::startsWith($k, 'question_'))
                                            ->values()
                                            ->map(
                                                fn($id) => [
                                                    'id' => $id,
                                                    'event' => optional($events->firstWhere('id', $id))->title,
                                                ],
                                            )
                                            ->filter(fn($q) => !is_null($q['event']))
                                            ->toArray();
                                    @endphp
                                    <div class="tag-container full-w" id="tagContainer">
                                        @foreach ($oldEvents ?? [] as $event)
                                            <input type="hidden" name="question_{{ $event['id'] }}"
                                                value="{{ $event['id'] }}" data-text="{{ $event['event'] }}">
                                        @endforeach
                                    </div>

                                    <div class="form-group float-label full-w">
                                        <label class="form-label">
                                            Description
                                        </label>
                                        <textarea class="form-control" name='description' placeholder="Description">{{ old('description') }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h3 class="accordion-title">
                            Discount Information
                            <span class="icon">
                                <img loading="lazy" src="{{ asset('assets/images/icons/angle.svg') }}" alt="icon"
                                    class="svg" />
                            </span>
                        </h3>
                        <div class="accordion-body">
                            <div class="body-content">
                                <div class="form-grid">
                                    <div class="form-group">
                                        <select class="form-control" name="discount_type" required>
                                            <option value="" hidden>
                                                Discount Type
                                            </option>
                                            <option value="Fixed Amount" @if (old('discount_type') == 'Fixed Amount') selected @endif>
                                                Fixed Amount
                                            </option>
                                            <option value="Percentage" @if (old('discount_type') == 'Percentage') selected @endif>
                                                Percentage
                                            </option>
                                        </select>
                                        @error('discount_type')
                                            <span class="error-message">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="form-group float-label">
                                        <label class="form-label">
                                            Discount Value
                                        </label>
                                        <input type="number" name="discount_value" class="form-control"
                                            placeholder="Discount Value" value="{{ old('discount_value') }}" required />
                                        @error('discount_value')
                                            <span class="error-message">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="form-group float-label">
                                        <label class="form-label">
                                            Minimum Purchase Amount
                                        </label>
                                        <input type="number" name="minimum_purchase" class="form-control"
                                            placeholder="Minimum Purchase Amount"
                                            value="{{ old('minimum_purchase') }}" />
                                        @error('minimum_purchase')
                                            <span class="error-message">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="form-group float-label">
                                        <label class="form-label">
                                            Maximum Discount (for percentage)
                                        </label>
                                        <input type="number" class="form-control" name="maximum_discount"
                                            placeholder="Maximum Discount (for percentage)"
                                            value="{{ old('maximum_discount') }}" />
                                        @error('maximum_discount')
                                            <span class="error-message">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h3 class="accordion-title">
                            Validation Information
                            <span class="icon">
                                <img loading="lazy" src="{{ asset('assets/images/icons/angle.svg') }}" alt="icon"
                                    class="svg" />
                            </span>
                        </h3>
                        <div class="accordion-body">
                            <div class="body-content">
                                <div class="form-grid">
                                    <div class="form-group date-input">
                                        <label class="form-label">
                                            Valid From
                                        </label>
                                        <div class="iconed-input">
                                            <i class="icon">
                                                <img src="{{ asset('assets/images/icons/calendar.svg') }}" alt="icon"
                                                    class="svg" />
                                            </i>
                                            <input name='valid_from' type="date" class="form-control"
                                                placeholder="Valid From" value="{{ old('valid_from') }}" required />
                                            @error('valid_from')
                                                <small style="color: red;">{{ $message }}</small>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="form-group date-input">
                                        <label class="form-label">
                                            Valid To
                                        </label>
                                        <div class="iconed-input">
                                            <i class="icon">
                                                <img src="{{ asset('assets/images/icons/calendar.svg') }}" alt="icon"
                                                    class="svg" />
                                            </i>
                                            <input name='valid_to' type="date" class="form-control"
                                                placeholder="Valid To" value="{{ old('valid_to') }}" required />
                                            @error('valid_to')
                                                <small style="color: red;">{{ $message }}</small>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h3 class="accordion-title">
                            Usage Limits
                            <span class="icon">
                                <img loading="lazy" src="{{ asset('assets/images/icons/angle.svg') }}" alt="icon"
                                    class="svg" />
                            </span>
                        </h3>
                        <div class="accordion-body">
                            <div class="body-content">
                                <div class="form-grid">
                                    <div class="form-group float-label">
                                        <label class="form-label">
                                            Total Usage Limit
                                        </label>
                                        <input type="number" name="total_limit" class="form-control"
                                            placeholder="Total Usage Limit" value="{{ old('total_limit') }}" />
                                        <span class="form-hint">
                                            <img src="{{ asset('assets/images/icons/info.svg') }}" alt="icon"
                                                class="svg" />
                                            Leave empty for unlimited uses
                                        </span>
                                    </div>
                                    <div class="form-group">
                                        <select class="form-control" name="limit_type">
                                            <option value="Usage Per User"
                                                @if (old('limit_type') == 'Usage Per User') selected @endif>
                                                Usage Per User
                                            </option>
                                            <option value="Usage Per Order"
                                                @if (old('limit_type') == 'Usage Per Order') selected @endif>
                                                Usage Per Order
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-buttons">
                    <button type="submit" name="action" value="publish" class="btn btn-primary">Create Promo
                        Code</button>
                    <button type="reset" class="btn btn-reset">Cancel</button>
                </div>
            </form>
        </div>
    </div>





    {{-- active and inactive --}}
    {{-- <script>
        const form = document.getElementById('promoForm');
        const statusToggle = document.getElementById('statusToggle');

        form.addEventListener('submit', function(e) {
            // Remove any existing hidden input for status
            const existing = form.querySelector('input[name="status"]');
            if (existing) existing.remove();

            // Add a hidden input with the correct value
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'status';
            input.value = statusToggle.checked ? 1 : 0;
            form.appendChild(input);
        });
    </script> --}}


    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
        integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"
        integrity="sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y" crossorigin="anonymous">
    </script>
    <script src="{{ asset('assets/js/svg.js') }}"></script>
    <script src="{{ asset('assets/js/main.js') }}"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const applicabilitySelect = document.getElementById("applicability");
            const specificApplicability = document.getElementById("questionSelect");
            const options = specificApplicability.querySelectorAll("option");
            const specificApplicabilityTags = document.getElementById("tagContainer");
            const accordionBody = specificApplicability.closest(".accordion-body");

            function toggleApplicability() {
                const selectedApplicability = applicabilitySelect.value;

                if (selectedApplicability === "Specific Events") {
                    specificApplicability.style.display = "block";
                } else {
                    specificApplicability.style.display = "none";
                    specificApplicabilityTags.innerHTML = "";
                    options.forEach(option => option.removeAttribute("disabled"));
                }

                if (accordionBody) {
                    accordionBody.style.maxHeight = accordionBody.scrollHeight + "px";
                }
            }

            toggleApplicability();

            applicabilitySelect.addEventListener("change", toggleApplicability);
        });
    </script>

    {{-- Include JustValidate --}}
    <script src="https://unpkg.com/just-validate@latest/dist/just-validate.production.min.js"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const validation = new JustValidate("#promoForm", {
                validateBeforeSubmitting: true,
                focusInvalidField: true,
                errorFieldCssClass: "is-invalid",
                errorLabelStyle: {
                    color: "#fe3b29",
                    paddingTop: "4px",
                    fontSize: "12px",
                },
            });

            // --- Promotion Code ---
            validation.addField('[name="name"]', [{
                    rule: "required",
                    errorMessage: "Please enter a promotion code.",
                },
                {
                    rule: "minLength",
                    value: 3,
                    errorMessage: "Promotion code must be at least 3 characters long.",
                },
                {
                    rule: "maxLength",
                    value: 50,
                    errorMessage: "Promotion code cannot exceed 50 characters.",
                },
            ]);

            // --- Applicability ---
            validation.addField('[name="applicability"]', [{
                rule: "required",
                errorMessage: "Please select an applicability option.",
            }, ]);

            // --- Specific Events (conditional validation) ---
            validation.addField('#questionSelect', [{
                validator: () => {
                    const applicability = document.querySelector('[name="applicability"]').value;
                    if (applicability !== 'Specific Events') return true;

                    const selectedEvents = document.querySelectorAll(
                        'input[name^="question_"]:checked');
                    return selectedEvents.length > 0;
                },
                errorMessage: 'Select at least one event when "Specific Events" is chosen.',
            }, ], {
                errorsContainer: document.getElementById('questionSelect'),
            });

            // --- Discount Type ---
            validation.addField('[name="discount_type"]', [{
                rule: "required",
                errorMessage: "Please select a discount type.",
            }, ]);

            // --- Discount Value ---
            validation.addField('[name="discount_value"]', [{
                    rule: "required",
                    errorMessage: "Please enter a discount value.",
                },
                {
                    rule: "number",
                    errorMessage: "Discount value must be a valid number.",
                },
                {
                    validator: (value, fields) => {
                        const type = document.querySelector('[name="discount_type"]').value;
                        const val = parseFloat(value);
                        return type !== "Percentage" || (val >= 0 && val <= 100);
                    },
                    errorMessage: "If discount type is 'Percentage', value must be between 0 and 100.",
                },
            ]);

            // --- Valid From ---
            validation.addField('[name="valid_from"]', [{
                rule: "required",
                errorMessage: "Please select a start date.",
            }, ]);

            // --- Valid To ---
            validation.addField('[name="valid_to"]', [{
                    rule: "required",
                    errorMessage: "Please select an end date.",
                },
                {
                    validator: (value) => {
                        const validFrom = document.querySelector('[name="valid_from"]').value;
                        if (!validFrom || !value) return true;

                        return new Date(value) >= new Date(validFrom);
                    },
                    errorMessage: "End date must be after or equal to start date.",
                },
            ]);

            // --- Expand accordion sections when invalid ---
            validation.onFail((fields) => {
                expandInvalidFields(fields);
            });

            const form = document.getElementById("promoForm");
            form.addEventListener("input", () => {
                const invalidFields = document.querySelectorAll(".is-invalid");
                invalidFields.forEach((elem) => {
                    const parent = elem.closest(".accordion-body");
                    if (parent) parent.style.maxHeight = parent.scrollHeight + "px";
                });
            });
            form.addEventListener("change", () => {
                const invalidFields = document.querySelectorAll(".is-invalid");
                invalidFields.forEach((elem) => {
                    const parent = elem.closest(".accordion-body");
                    if (parent) parent.style.maxHeight = parent.scrollHeight + "px";
                });
            });

            function expandInvalidFields(fields) {
                Object.values(fields).forEach(({
                    elem
                }) => {
                    const parent = elem.closest(".accordion-body");
                    if (parent) parent.style.maxHeight = parent.scrollHeight + "px";
                });
            }

            // --- On success: add hidden status field and submit ---
            validation.onSuccess((event) => {
                const form = event.target;
                const statusToggle = document.getElementById("statusToggle");

                // Remove old hidden input if exists
                form.querySelector('input[name="status"]')?.remove();

                // Add fresh hidden input for status
                const input = document.createElement("input");
                input.type = "hidden";
                input.name = "status";
                input.value = statusToggle?.checked ? 1 : 0;
                form.appendChild(input);

                form.submit();
            });
        });
    </script>
@endsection