@php
    use App\Enums\Deals\StageType;
@endphp

<x-Dashboard.Layout.Layout title="Edit - 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">Edit product</h6>
                    </div>
                    <form class="card-body" method="POST" action="{{ route('products.update', $product->id) }}">
                        @csrf
                        @method('PUT')
                        <div class="row g-3">
                            {{-- <div class="col-md-6">
                                <x-forms.input-label.basic name="name" required value="{{ old('name', $deal->name) }}">
                                    Name
                                </x-forms.input-label.basic>
                            </div>

                            <div class="col-md-6">
                                <x-forms.input-label.basic
                                    name="amount"
                                    required value="{{ old('amount', $product->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', $product->account_id) == $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', $product->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', $product->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', $product->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" @if (basename($product->product_type) == 'Product') selected @endif>Product
                                    </option>
                                    <option value="track" @if (basename($product->product_type) == 'TrackLevel') selected @endif>Track
                                    </option>
                                </x-forms.select.basic>
                            </div>

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

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

                            <div class="col-md-6" id="track-category"
                                style="@if (basename($product->product_type) == 'TrackLevel') display: block; @else display: none; @endif">
                                <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 }}"
                                            @if ($product->track_level->track->category->id == $getAcademytrackProductCategory->id) selected @endif>
                                            {{ $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="@if (basename($product->product_type) == 'Product') display: block; @else display: none; @endif">
                            <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>
                                    @if (basename($product->product_type) == 'Product')
                                        <option value="{{ $product->product->id }}" selected>
                                            {{ $product->product->name_en }}
                                        </option>
                                    @endif
                                    <!-- 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="@if (basename($product->product_type) == 'TrackLevel') display: block; @else display: none; @endif">
                                <x-forms.labels.basic>
                                    Tracks
                                </x-forms.labels.basic>
                                <x-forms.select.basic class="select2" id="categorytracksSelect"
                                    onchange="loadTrackLevels(this.value)">
                                    <option value="">Select Track</option>
                                    @if (basename($product->product_type) == 'TrackLevel')
                                        <option value="{{ $product->track_level->track->id }}" selected>
                                            {{ $product->track_level->track->name_en }}
                                        </option>
                                    @endif
                                    <!-- Populated via JS -->
                                </x-forms.select.basic>
                            </div>

                            <div class="col-md-6" id="track-levels"
                                style="@if (basename($product->product_type) == 'TrackLevel') display: black; @else display: none; @endif">
                                <x-forms.labels.basic>
                                    Levels
                                </x-forms.labels.basic>
                                <x-forms.select.basic class="select2" name="level_id" id="track-levels-select">
                                    <option value="">Select level</option>
                                    <!-- Populated via JS -->
                                    @if (basename($product->product_type) == 'TrackLevel')
                                        <option value="{{ $product->product_id }}" selected>
                                            {{ $product->track_level->name_en }}
                                        </option>
                                    @endif
                                </x-forms.select.basic>
                            </div>

                        </div>



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


                    </form>
                </div>
            </div>
        </div>
    </div>

    @push('script')
        <script src="{{ asset('assets/js/dashboard/product/product.js') }}"></script>
    @endpush

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

        const oldAccountId = "{{ old('account_id', $product->account_id) }}";
        const oldContactId = "{{ old('contact_id', $product->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);
            }
        }

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

        document.addEventListener('DOMContentLoaded', () => {
            if (oldAccountId) {
                getAccountContacts(oldAccountId, oldContactId);
            }
        });
    </script>
</x-Dashboard.Layout.Layout>