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

<x-Dashboard.Layout.Layout title="Create Referral Setting">
    <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 Referral Setting</h6>
                    </div>
                    <form class="card-body" method="POST" action="{{ route('referralsettings.store') }}">
                        @csrf
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        <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_id" 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="product_track_category_id" 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  class="select2" 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 class="select2" name="track_id" id="categorytracksSelect">
                                        <option value="">Select Track</option>
                                        <!-- Populated via JS -->
                                    </x-forms.select.basic>
                            </div>
                        </div>


                        <div class="row mt-3">
                            <div class="col-md-6">
                                <x-forms.labels.basic>
                                    Select Discount type
                                </x-forms.labels.basic>
                                <x-forms.select.basic class="select2" name="discount_type" required>
                                    <option value="">Select Discount type</option>
                                    <option value="percentage">Percentage</option>
                                    <option value="fixed">Fixed</option>
                                </x-forms.select.basic>
                            </div>


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

                            <div class="col-md-6">
                                <x-forms.input-label.basic
                                    name="expire_day"
                                    required value="{{ old('expire_day') }}"
                                    type="number"
                                    min="1">
                                    Expire Day
                                </x-forms.input-label.basic>
                            </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>
                        </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>