@php
    use App\Enums\Deals\StageType;
    use App\Enums\Tasks\RelatedToType;
    use App\Enums\Tasks\Status;
@endphp

<x-Dashboard.Layout.Layout title="Create Product">

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-md-12">
                <div class="card border-0">
                    <div class="card-header">
                        <h6 class="text-lg font-weight-semibold mb-0">Create product</h6>
                    </div>
                    <form class="card-body" method="POST" action="{{ route('products.store') }}">
                        @csrf
                        <div class="row g-3">
                            {{-- <div class="col-md-6">
                                <x-forms.input-label.basic name="name" required value="{{ old('name') }}">
                                    Name
                                </x-forms.input-label.basic>
                            </div> --}}

                            {{-- <div class="col-md-6">
                                <x-forms.input-label.basic
                                    name="amount"
                                    required value="{{ old('amount') }}"
                                    type="number">
                                    Amount
                                </x-forms.input-label.basic>
                            </div> --}}

                            <div class="col-md-6">
                                <x-forms.labels.basic>
                                    Account
                                </x-forms.labels.basic>
                                <x-forms.select.basic class="select2" name="account_id" id="accountsSelect" required>
                                    <option value="">Select account</option>
                                    @foreach ($accountsSelect as $id => $name)
                                        <option value="{{ $id }}" @selected(old('account_id', $queryParams['account_id'] ?? null) == $id)>
                                            {{ $name }}
                                        </option>
                                    @endforeach
                                </x-forms.select.basic>
                            </div>

                            <div class="col-md-6">
                                <x-forms.labels.basic>
                                    Contact
                                </x-forms.labels.basic>
                                <x-forms.select.basic class="select2" name="contact_id" id="contactsSelect" required>
                                    <option value="">Select contact</option>

                                    @foreach ($contactsSelect as $contact)
                                        <option value="{{ $contact->id }}" @selected(old('contact_id') == $contact->id)>
                                            {{ $contact->name }}
                                        </option>
                                    @endforeach
                                </x-forms.select.basic>
                            </div>

                            {{-- <div class="col-md-6">
                                <x-forms.labels.basic>
                                    Stage
                                </x-forms.labels.basic>
                                <x-forms.select.basic name="stage" required>
                                    <option value="">Select stage</option>
                                    @foreach (StageType::cases() as $stage)
                                        <option
                                            value="{{ $stage->value }}"
                                            @selected(old('stage') === $stage->value)
                                        >
                                            {{ str($stage->value)->replace('_', '')->ucfirst() }}
                                        </option>
                                    @endforeach
                                </x-forms.select.basic>
                            </div> --}}

                            {{-- <div class="col-md-6">
                                <x-forms.input-label.basic
                                    name="expected_close_date"
                                    required value="{{ old('expected_close_date') }}"
                                    type="date">
                                    Expected close date
                                </x-forms.input-label.basic>
                            </div> --}}

                        </div>
                        <div class="row mt-3">

                            <div class="col-md-6">
                                <x-forms.labels.basic>
                                    Select Product type
                                </x-forms.labels.basic>
                                <x-forms.select.basic class="select2" name="product_type" required
                                    onchange="toggleCategorySelect(this.value)">
                                    <option value="">Select Product type</option>
                                    <option value="product">Product</option>
                                    <option value="track">Track</option>
                                </x-forms.select.basic>
                            </div>

                            <div class="col-md-6" id="product-category" style="display: none;">
                                <x-forms.labels.basic>
                                    Product Category
                                </x-forms.labels.basic>
                                <x-forms.select.basic class="select2" name="product_category"
                                    onchange="loadCategoryProducts(this.value)">
                                    <option value="">Select Product Category</option>
                                    @foreach ($getAcademyProductCategories as $getAcademyProductCategory)
                                        <option value="{{ $getAcademyProductCategory->id }}">
                                            {{ $getAcademyProductCategory->name_en }}
                                        </option>
                                    @endforeach

                                    <!-- Add your product categories here -->
                                </x-forms.select.basic>
                            </div>

                            <div class="col-md-6" id="track-category" style="display: none;">
                                <x-forms.labels.basic>
                                    Track Category
                                </x-forms.labels.basic>
                                <x-forms.select.basic class="select2" name="track_category"
                                    onchange="loadTrackCategoryProducts(this.value)">
                                    <option value="">Select Track Category</option>
                                    <!-- Add your track categories here -->
                                    @foreach ($getAcademytrackProductCategories as $getAcademytrackProductCategory)
                                        <option value="{{ $getAcademytrackProductCategory->id }}">
                                            {{ $getAcademytrackProductCategory->name_en }}
                                        </option>
                                    @endforeach
                                </x-forms.select.basic>
                            </div>

                        </div>


                        <!-- Products in Selected Category -->

                        <div class="row mt-3" id="product-category-products" style="display: none;">
                            <div class="col-md-6">
                                <x-forms.labels.basic>
                                    Products
                                </x-forms.labels.basic>
                                <x-forms.select.basic name="product_id" id="categoryProductsSelect">
                                    <option value="">Select Product</option>
                                    <!-- Populated via JS -->
                                </x-forms.select.basic>
                            </div>
                        </div>


                        <div class="row mt-3">
                            <!-- Products in Selected tyrack -->
                            <div class="col-md-6" id="track-category-products" style="display: none;">
                                <x-forms.labels.basic>
                                    Tracks
                                </x-forms.labels.basic>
                                <x-forms.select.basic id="categorytracksSelect" onchange="loadTrackLevels(this.value)">
                                    <option value="">Select Track</option>
                                    <!-- Populated via JS -->
                                </x-forms.select.basic>
                            </div>

                            <div class="col-md-6" id="track-levels" style="display: none;">
                                <x-forms.labels.basic>
                                    Levels
                                </x-forms.labels.basic>
                                <x-forms.select.basic name="level_id" id="track-levels-select">
                                    <option value="">Select level</option>
                                    <!-- Populated via JS -->
                                </x-forms.select.basic>
                            </div>

                        </div>






                        <div class="row mt-3">
                            <div class="col-12 pt-4 text-end">
                                <x-forms.buttons.primary class="float-end">
                                    Submit
                                </x-forms.buttons.primary>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        const accountsSelect = document.getElementById('accountsSelect');
        const contactsSelect = document.getElementById('contactsSelect');

        // Get old values from the server
        const oldAccountId = "{{ old('account_id', $queryParams['account_id'] ?? null) }}";
        const oldContactId = "{{ old('contact_id') }}";

        async function getAccountContacts(accountId, selectedContactId = null) {
            const url = `{{ route('api.v1.contacts.list') }}?account_id=${accountId}`;

            try {
                const res = await fetch(url);
                const data = await res.json();

                contactsSelect.innerHTML = '';

                const defaultOption = document.createElement('option');
                defaultOption.value = '';
                defaultOption.textContent = 'Select contact';
                defaultOption.disabled = true;
                contactsSelect.appendChild(defaultOption);

                Object.entries(data).forEach(([id, name]) => {
                    const option = document.createElement('option');
                    option.value = id;
                    option.textContent = name;
                    if (selectedContactId && selectedContactId == id) {
                        option.selected = true;
                        defaultOption.selected = false;
                    }
                    contactsSelect.appendChild(option);
                });
            } catch (error) {
                console.error('Failed to fetch contacts:', error);
            }
        }

        // On change of account dropdown
        accountsSelect.addEventListener('change', (e) => {
            const accountId = e.target.value;
            if (accountId) {
                getAccountContacts(accountId);
            }
        });

        // On page load: load contacts if old account_id exists
        document.addEventListener('DOMContentLoaded', () => {
            if (oldAccountId) {
                getAccountContacts(oldAccountId, oldContactId);
            }
        });
    </script>
    @push('script')
        <script src="{{ asset('assets/js/dashboard/product/product.js') }}"></script>
    @endpush
</x-Dashboard.Layout.Layout>