@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="0" @if (old('applicability') == '0') selected @endif>
                                                {{ __('All Events') }}
                                            </option>
                                            <option value="1" @if (old('applicability') == '1') 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(function ($id) use ($events) {
                                                return [
                                                    '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>
                    <a href="{{ route('promos.index') }}" class="btn btn-reset">{{ __('Cancel') }}</a>
                </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 && selectedApplicability === "1") {
                    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 !== '1') return true;

                    const selectedEvents = document.querySelectorAll(
                        'input[name^="question_"]');
                    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