@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 Ticket</h1>
                <ul class="dashboard_main-breadcrumb">
                    <li><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                    <li><a href="{{ route('tickets.index') }}">Tickets</a></li>
                    <li><a href="{{ route('tickets.create') }}">Add Ticket</a></li>
                </ul>
            </div>
            <div class="dashboard_main-actions">
                <div class="switcher">
                    @php
                        $statusCheck = true;
                        if (old('status') === 'inactive') {
                            $statusCheck = false;
                        }
                    @endphp
                    <label>
                        <span class="text">Inactive</span>
                        <input type="checkbox" id="statusToggle" name="status" value="active"
                            {{ $statusCheck ? 'checked' : '' }} />
                        <span class="slider"></span>
                        <span class="text">Active</span>
                    </label>
                </div>
            </div>
        </div>

        <div class="dashboard_main-body">
            <form id="ticketForm" action="{{ route('tickets.store') }}" method="POST">
                @csrf

                <div class="accordion-list">
                    <!-- Basic Information Accordion -->
                    <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">Ticket Name</label>
                                        <input type="text" name="name" class="form-control" placeholder="Ticket Name"
                                            value="{{ old('name') }}" required />
                                        @error('name')
                                            <span class="error-message">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <select class="form-control" name="ticket_category_id" required>
                                            <option value="" hidden selected>Ticket Category</option>
                                            @foreach ($categories as $category)
                                                <option value="{{ $category->id }}"
                                                    {{ old('ticket_category_id') == $category->id ? 'selected' : '' }}>
                                                    {{ $category->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('ticket_category_id')
                                            <span class="error-message">{{ $message }}</span>
                                        @enderror
                                    </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>
                                        @error('description')
                                            <span class="error-message">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Price Information Accordion -->
                    <div class="accordion-item">
                        <h3 class="accordion-title">
                            Price 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">Price</label>
                                        <input type="number" name="price" class="form-control" placeholder="Price"
                                            step="0.01" min="0" value="{{ old('price') }}" required />
                                        <span class="form-hint">
                                            <img src="{{ asset('assets/images/icons/info.svg') }}" alt="icon"
                                                class="svg" />
                                            15% VAT will be added automatically. Final price: <span
                                                id="finalPrice">0.00</span>
                                        </span>
                                        @error('price')
                                            <span class="error-message">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    <div class="form-group">
                                        <select class="form-control" name="currency_id">
                                            <option value="" hidden selected>Currency</option>
                                            @foreach ($currencies as $currency)
                                                <option value="{{ $currency->id }}"
                                                    {{ old('currency_id') == $currency->id ? 'selected' : '' }}>
                                                    {{ $currency->code }} - {{ $currency->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('currency_id')
                                            <span class="error-message">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Ticket Features Accordion -->
                    <div class="accordion-item">
                        <h3 class="accordion-title">
                            Ticket Features
                            <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">
                                        <input type="text" id="tagInput" class="form-control" placeholder="Features" />
                                        <span class="form-hint">
                                            <img src="{{ asset('assets/images/icons/info.svg') }}" alt="icon"
                                                class="svg" />
                                            Type a new feature and
                                            press Enter to add it
                                        </span>
                                    </div>
                                    <div class="tag-container full-w" id="tagsContainer"></div>
                                    <input type="hidden" name="features" id="tagsList"
                                        value="{{ old('features') ?? '' }}" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-buttons">
                    <button type="submit" class="btn btn-primary">Create Ticket</button>
                    <button type="button" id="draftBtn" class="btn btn-secondary">Save as Draft</button>
                    <a href="{{ route('tickets.index') }}" class="btn btn-reset">Cancel</a>
                </div>
            </form>
        </div>
    </div>

    {{-- <style>
        .error-message {
            color: #e74c3c;
            font-size: 12px;
            margin-top: 5px;
            display: block;
        }

        .tag {
            background: #e9ecef;
            padding: 4px 8px;
            border-radius: 4px;
            margin: 2px;
            display: inline-flex;
            align-items: center;
            font-size: 14px;
        }

        .tag-remove {
            margin-left: 5px;
            cursor: pointer;
            font-weight: bold;
        }

        .tag-container {
            min-height: 40px;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 8px;
            margin-top: 10px;
        }

        .form-hint {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 12px;
            color: #6c757d;
            margin-top: 5px;
        }
    </style> --}}




    {{-- active and inactive --}}
    {{-- <script>
        const form = document.getElementById('ticketForm');
        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 ? 'active' : 'inactive';
            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>

    {{-- 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("#ticketForm", {
                validateBeforeSubmitting: true,
                focusInvalidField: true,
                errorFieldCssClass: "is-invalid",
                errorLabelStyle: {
                    color: "#fe3b29",
                    paddingTop: "4px",
                    fontSize: "12px",
                },
            });

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

            // --- Category ---
            validation.addField('[name="ticket_category_id"]', [{
                rule: "required",
                errorMessage: "Please select a ticket category.",
            }, ]);

            // --- Price ---
            validation.addField('[name="price"]', [{
                    rule: "required",
                    errorMessage: "Please enter the ticket price.",
                },
                {
                    rule: "number",
                    errorMessage: "Ticket price must be a valid number.",
                },
                {
                    validator: (value) => parseFloat(value) >= 0,
                    errorMessage: "Ticket price must be zero or greater.",
                },
            ]);

            // --- Expand Accordion Section When Invalid ---
            validation.onFail((fields) => {
                expandInvalidFields(fields);
            });

            const form = document.getElementById("ticketForm");
            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 ---
            validation.onSuccess((event) => {
                const form = event.target;
                const statusToggle = document.getElementById("statusToggle");

                // Remove existing status input (avoid duplicates)
                form.querySelector('input[name="status"]')?.remove();

                // Create and append new hidden status input
                const input = document.createElement("input");
                input.type = "hidden";
                input.name = "status";
                input.value = statusToggle?.checked ? "active" : "inactive";
                form.appendChild(input);

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