@extends('dashboard.layouts.app')

@section('title', __('Create New Order'))
@section('page_heading', __('Create New Order'))

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('dashboard.home') }}">{{ __('Home') }}</a></li>
    <li class="breadcrumb-item"><a href="{{ route('dashboard.orders.index') }}">{{ __('Orders') }}</a></li>
    <li class="breadcrumb-item active">{{ __('Create New Order') }}</li>
@endsection

@section('content')
<div class="card">
    <div class="card-header">
        <h3 class="card-title">{{ __('Create New Order') }}</h3>
    </div>
    <div class="card-body">
        <form action="{{ route('dashboard.orders.store') }}" method="POST">
            @csrf

            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="source" class="form-label">{{ __('Source') }}</label>
                        <select name="source" id="source" class="form-select @error('source') is-invalid @enderror" required>
                            <option value="">{{ __('Select Source') }}</option>
                            <option value="website" {{ old('source') == 'website' ? 'selected' : '' }}>{{ __('Website') }}</option>
                            <option value="crm" {{ old('source') == 'crm' ? 'selected' : '' }}>{{ __('CRM') }}</option>
                            <option value="app" {{ old('source') == 'app' ? 'selected' : '' }}>{{ __('App') }}</option>
                        </select>
                        @error('source')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="created_by_id" class="form-label">{{ __('Created By') }}</label>
                        <select name="created_by_id" id="created_by_id" class="form-select @error('created_by_id') is-invalid @enderror" required>
                            <option value="">{{ __('Select User') }}</option>
                            @foreach ($users as $user)
                                <option value="{{ $user->id }}" {{ old('created_by_id', auth()->id()) == $user->id ? 'selected' : '' }}>
                                    {{ $user->name }} ({{ $user->email }})
                                </option>
                            @endforeach
                        </select>
                        @error('created_by_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="assigned_to_id" class="form-label">{{ __('Assigned To') }} ({{ __('Optional') }})</label>
                        <select name="assigned_to_id" id="assigned_to_id" class="form-select @error('assigned_to_id') is-invalid @enderror">
                            <option value="">{{ __('Select User') }}</option>
                            @foreach ($users as $user)
                                <option value="{{ $user->id }}" {{ old('assigned_to_id') == $user->id ? 'selected' : '' }}>
                                    {{ $user->name }} ({{ $user->email }})
                                </option>
                            @endforeach
                        </select>
                        @error('assigned_to_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="invoice_type" class="form-label">{{ __('Invoice Type') }}</label>
                        <select name="invoice_type" id="invoice_type" class="form-select @error('invoice_type') is-invalid @enderror" required>
                            <option value="">{{ __('Select Invoice Type') }}</option>
                            <option value="private" {{ old('invoice_type') == 'private' ? 'selected' : '' }}>{{ __('Private') }}</option>
                            <option value="shared" {{ old('invoice_type') == 'shared' ? 'selected' : '' }}>{{ __('Shared') }}</option>
                        </select>
                        @error('invoice_type')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="coupon_code" class="form-label">{{ __('Coupon Code') }} ({{ __('Optional') }})</label>
                        <input type="text" name="coupon_code" id="coupon_code" class="form-control @error('coupon_code') is-invalid @enderror" value="{{ old('coupon_code') }}">
                        @error('coupon_code')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="global_general_discount_id" class="form-label">{{ __('Global General Discount') }} ({{ __('Optional') }})</label>
                        <select name="global_general_discount_id" id="global_general_discount_id" class="form-select @error('global_general_discount_id') is-invalid @enderror">
                            <option value="">{{ __('No General Discount') }}</option>
                            <!-- Options will be populated via AJAX -->
                        </select>
                        @error('global_general_discount_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <hr>
            <h4>{{ __('Order Items') }}</h4>

            <!-- Tracks Table -->
            <h5>{{ __('Tracks') }}</h5>
            <div class="table-responsive mb-4">
                <table class="table table-bordered" id="tracks-table">
                    <thead>
                        <tr>
                            <th>{{ __('Category') }}</th>
                            <th>{{ __('Track') }}</th>
                            <th>{{ __('Pricing Type') }}</th>
                            <th>{{ __('Track Type') }}</th>
                            <th>{{ __('Pricing Option') }}</th>
                            <th>{{ __('Levels Number') }}</th>
                            <th>{{ __('Price') }}</th>
                            <th>{{ __('General Discount') }}</th>
                            <th>{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if(old('items'))
                            @foreach(old('items') as $index => $itemData)
                                @if($itemData['item_type'] == 'track')
                                    <tr class="item-row">
                                        <td>
                                            <input type="hidden" name="items[{{$index}}][item_type]" value="track">
                                            <select name="items[{{$index}}][category_id]" class="form-select category-select" required>
                                                <option value="">{{ __('Select Category') }}</option>
                                            </select>
                                        </td>
                                        <td>
                                            <select name="items[{{$index}}][item_id]" class="form-select item-select" required>
                                                <option value="">{{ __('Select Track') }}</option>
                                            </select>
                                        </td>
                                        <td>
                                            <select name="items[{{$index}}][pricing_type_id]" class="form-select pricing-type-select">
                                                <option value="">{{ __('Select Pricing Type') }}</option>
                                            </select>
                                        </td>
                                        <td>
                                            <select name="items[{{$index}}][track_type_id]" class="form-select track-type-select">
                                                <option value="">{{ __('Select Track Type') }}</option>
                                            </select>
                                        </td>
                                        <td>
                                            <select name="items[{{$index}}][track_pricing_id]" class="form-select track-pricing-select" required>
                                                <option value="">{{ __('Select Pricing Option') }}</option>
                                            </select>
                                        </td>
                                        <td>
                                            <input type="number" name="items[{{$index}}][levels_number]" class="form-control levels-number" readonly>
                                        </td>
                                        <td>
                                            <input type="number" name="items[{{$index}}][price]" class="form-control price" step="0.01" min="0" required readonly>
                                        </td>
                                        <td>
                                            <select name="items[{{$index}}][general_discount_id]" class="form-select general-discount-select">
                                                <option value="">{{ __('No General Discount') }}</option>
                                            </select>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-sm btn-danger remove-item">{{ __('Remove') }}</button>
                                        </td>
                                    </tr>
                                @endif
                            @endforeach
                        @endif
                    </tbody>
                </table>
                <button type="button" class="btn btn-sm btn-secondary me-2" id="add-track">{{ __('Add Track') }}</button>
            </div>

            <!-- Placement Tests Table -->
            <h5>{{ __('Placement Tests') }}</h5>
            <div class="table-responsive mb-4">
                <table class="table table-bordered" id="placement-tests-table">
                    <thead>
                        <tr>
                            <th>{{ __('Category') }}</th>
                            <th>{{ __('Placement Test') }}</th>
                            <th>{{ __('Pricing Type') }}</th>
                            <th>{{ __('Pricing Option') }}</th>
                            <th>{{ __('Quantity') }}</th>
                            <th>{{ __('Price') }}</th>
                            <th>{{ __('General Discount') }}</th>
                            <th>{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if(old('items'))
                            @foreach(old('items') as $index => $itemData)
                                @if($itemData['item_type'] == 'placement_test')
                                    <tr class="item-row">
                                        <td>
                                            <input type="hidden" name="items[{{$index}}][item_type]" value="placement_test">
                                            <select name="items[{{$index}}][category_id]" class="form-select category-select" required>
                                                <option value="">{{ __('Select Category') }}</option>
                                            </select>
                                        </td>
                                        <td>
                                            <select name="items[{{$index}}][item_id]" class="form-select item-select" required>
                                                <option value="">{{ __('Select Placement Test') }}</option>
                                            </select>
                                        </td>
                                        <td>
                                            <select name="items[{{$index}}][pricing_type_id]" class="form-select pricing-type-select">
                                                <option value="">{{ __('Select Pricing Type') }}</option>
                                            </select>
                                        </td>
                                        <td>
                                            <select name="items[{{$index}}][placement_test_pricing_id]" class="form-select placement-test-pricing-select" required>
                                                <option value="">{{ __('Select Pricing Option') }}</option>
                                            </select>
                                        </td>
                                        <td>
                                            <input type="number" name="items[{{$index}}][quantity]" class="form-control quantity" readonly>
                                        </td>
                                        <td>
                                            <input type="number" name="items[{{$index}}][price]" class="form-control price" step="0.01" min="0" required readonly value="{{ $itemData['price'] ?? '' }}">
                                        </td>
                                        <td>
                                            <select name="items[{{$index}}][general_discount_id]" class="form-select general-discount-select">
                                                <option value="">{{ __('No General Discount') }}</option>
                                            </select>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-sm btn-danger remove-item">{{ __('Remove') }}</button>
                                        </td>
                                    </tr>
                                @endif
                            @endforeach
                        @endif
                    </tbody>
                </table>
                <button type="button" class="btn btn-sm btn-secondary me-2" id="add-placement-test">{{ __('Add Placement Test') }}</button>
            </div>

            <!-- Gift Calls Table -->
            <h5>{{ __('Gift Calls') }}</h5>
            <div class="table-responsive mb-4">
                <table class="table table-bordered" id="gift-calls-table">
                    <thead>
                        <tr>
                            <th>{{ __('Item Type') }}</th>
                            <th>{{ __('Price') }}</th>
                            <th>{{ __('Quantity') }}</th>
                            <th>{{ __('General Discount') }}</th>
                            <th>{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if(old('items'))
                            @foreach(old('items') as $index => $itemData)
                                @if($itemData['item_type'] == 'gift_call')
                                    <tr class="item-row">
                                        <td>
                                            <input type="hidden" name="items[{{$index}}][item_type]" value="gift_call">
                                            <span>{{ __('Gift Call') }}</span>
                                        </td>
                                        <td>
                                            <input type="number" name="items[{{$index}}][price]" class="form-control price" step="0.01" min="0" required value="{{ $itemData['price'] ?? '' }}">
                                        </td>
                                        <td>
                                            <input type="number" name="items[{{$index}}][quantity]" class="form-control quantity" min="1" required value="{{ $itemData['quantity'] ?? 1 }}">
                                        </td>
                                        <td>
                                            <select name="items[{{$index}}][general_discount_id]" class="form-select general-discount-select">
                                                <option value="">{{ __('No General Discount') }}</option>
                                            </select>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-sm btn-danger remove-item">{{ __('Remove') }}</button>
                                        </td>
                                    </tr>
                                @endif
                            @endforeach
                        @endif
                    </tbody>
                </table>
                <button type="button" class="btn btn-sm btn-secondary me-2" id="add-gift-call">{{ __('Add Gift Call') }}</button>
            </div>

            <!-- Discussion Groups Table -->
            <h5>{{ __('Discussion Groups') }}</h5>
            <div class="table-responsive mb-4">
                <table class="table table-bordered" id="discussion-groups-table">
                    <thead>
                        <tr>
                            <th>{{ __('Item Type') }}</th>
                            <th>{{ __('Price') }}</th>
                            <th>{{ __('Quantity') }}</th>
                            <th>{{ __('General Discount') }}</th>
                            <th>{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if(old('items'))
                            @foreach(old('items') as $index => $itemData)
                                @if($itemData['item_type'] == 'discussion_group')
                                    <tr class="item-row">
                                        <td>
                                            <input type="hidden" name="items[{{$index}}][item_type]" value="discussion_group">
                                            <span>{{ __('Discussion Group') }}</span>
                                        </td>
                                        <td>
                                            <input type="number" name="items[{{$index}}][price]" class="form-control price" step="0.01" min="0" required value="{{ $itemData['price'] ?? '' }}">
                                        </td>
                                        <td>
                                            <input type="number" name="items[{{$index}}][quantity]" class="form-control quantity" min="1" required value="{{ $itemData['quantity'] ?? 1 }}">
                                        </td>
                                        <td>
                                            <select name="items[{{$index}}][general_discount_id]" class="form-select general-discount-select">
                                                <option value="">{{ __('No General Discount') }}</option>
                                            </select>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-sm btn-danger remove-item">{{ __('Remove') }}</button>
                                        </td>
                                    </tr>
                                @endif
                            @endforeach
                        @endif
                    </tbody>
                </table>
                <button type="button" class="btn btn-sm btn-secondary me-2" id="add-discussion-group">{{ __('Add Discussion Group') }}</button>
            </div>

            <div class="mt-3">
                <button type="submit" class="btn btn-primary">{{ __('Create Order') }}</button>
                <a href="{{ route('dashboard.orders.index') }}" class="btn btn-secondary">{{ __('Cancel') }}</a>
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    let itemIndex = {{ old('items') ? count(old('items')) : 0 }};

    // Fetch and populate general discounts
    function populateGeneralDiscounts(selectElement) {
        $.ajax({
            url: "{{ route('dashboard.orders.fetch-general-discounts') }}",
            method: 'GET',
            success: function(response) {
                selectElement.empty().append('<option value="">{{ __("No General Discount") }}</option>');
                response.discounts.forEach(discount => {
                    let discountText = `${discount.name} (${discount.discount_value} ${discount.discount_type === 'percentage' ? '%' : 'Fixed'})`;
                    selectElement.append(`<option value="${discount.id}">${discountText}</option>`);
                });
            },
            error: function(xhr) {
                console.error('Error fetching general discounts:', xhr);
            }
        });
    }

    // Populate global and initial item discounts
    populateGeneralDiscounts($('#global_general_discount_id'));
    $('.general-discount-select').each(function() {
        populateGeneralDiscounts($(this));
    });

    // Handle global discount change
    $('#global_general_discount_id').on('change', function() {
        const selectedDiscountId = $(this).val();
        $('.general-discount-select').val(selectedDiscountId);
    });

    // Add Track Row
    $('#add-track').on('click', function() {
        const newRow = $(`
            <tr class="item-row">
                <td>
                    <input type="hidden" name="items[${itemIndex}][item_type]" value="track">
                    <select name="items[${itemIndex}][category_id]" class="form-select category-select" required>
                        <option value="">{{ __('Select Category') }}</option>
                    </select>
                </td>
                <td>
                    <select name="items[${itemIndex}][item_id]" class="form-select item-select" required>
                        <option value="">{{ __('Select Track') }}</option>
                    </select>
                </td>
                <td>
                    <select name="items[${itemIndex}][pricing_type_id]" class="form-select pricing-type-select">
                        <option value="">{{ __('Select Pricing Type') }}</option>
                    </select>
                </td>
                <td>
                    <select name="items[${itemIndex}][track_type_id]" class="form-select track-type-select">
                        <option value="">{{ __('Select Track Type') }}</option>
                    </select>
                </td>
                <td>
                    <select name="items[${itemIndex}][track_pricing_id]" class="form-select track-pricing-select" required>
                        <option value="">{{ __('Select Pricing Option') }}</option>
                    </select>
                </td>
                <td>
                    <input type="number" name="items[${itemIndex}][levels_number]" class="form-control levels-number" readonly>
                </td>
                <td>
                    <input type="number" name="items[${itemIndex}][price]" class="form-control price" step="0.01" min="0" required readonly>
                </td>
                <td>
                    <select name="items[${itemIndex}][general_discount_id]" class="form-select general-discount-select">
                        <option value="">{{ __('No General Discount') }}</option>
                    </select>
                </td>
                <td>
                    <button type="button" class="btn btn-sm btn-danger remove-item">{{ __('Remove') }}</button>
                </td>
            </tr>
        `);
        $('#tracks-table tbody').append(newRow);
        populateCategories(newRow, 'track');
        populateGeneralDiscounts(newRow.find('.general-discount-select'));
        itemIndex++;
    });

    // Add Placement Test Row
    $('#add-placement-test').on('click', function() {
        const newRow = $(`
            <tr class="item-row">
                <td>
                    <input type="hidden" name="items[${itemIndex}][item_type]" value="placement_test">
                    <select name="items[${itemIndex}][category_id]" class="form-select category-select" required>
                        <option value="">{{ __('Select Category') }}</option>
                    </select>
                </td>
                <td>
                    <select name="items[${itemIndex}][item_id]" class="form-select item-select" required>
                        <option value="">{{ __('Select Placement Test') }}</option>
                    </select>
                </td>
                <td>
                    <select name="items[${itemIndex}][pricing_type_id]" class="form-select pricing-type-select">
                        <option value="">{{ __('Select Pricing Type') }}</option>
                    </select>
                </td>
                <td>
                    <select name="items[${itemIndex}][placement_test_pricing_id]" class="form-select placement-test-pricing-select" required>
                        <option value="">{{ __('Select Pricing Option') }}</option>
                    </select>
                </td>
                <td>
                    <input type="number" name="items[${itemIndex}][quantity]" class="form-control quantity" readonly>
                </td>
                <td>
                    <input type="number" name="items[${itemIndex}][price]" class="form-control price" step="0.01" min="0" required readonly>
                </td>
                <td>
                    <select name="items[${itemIndex}][general_discount_id]" class="form-select general-discount-select">
                        <option value="">{{ __('No General Discount') }}</option>
                    </select>
                </td>
                <td>
                    <button type="button" class="btn btn-sm btn-danger remove-item">{{ __('Remove') }}</button>
                </td>
            </tr>
        `);
        $('#placement-tests-table tbody').append(newRow);
        populateCategories(newRow, 'placement_test');
        populateGeneralDiscounts(newRow.find('.general-discount-select'));
        itemIndex++;
    });

    // Add Gift Call Row
    $('#add-gift-call').on('click', function() {
        const newRow = $(`
            <tr class="item-row">
                <td>
                    <input type="hidden" name="items[${itemIndex}][item_type]" value="gift_call">
                    <span>{{ __('Gift Call') }}</span>
                </td>
                <td>
                    <input type="number" name="items[${itemIndex}][price]" class="form-control price" step="0.01" min="0" required>
                </td>
                <td>
                    <input type="number" name="items[${itemIndex}][quantity]" class="form-control quantity" min="1" required value="1">
                </td>
                <td>
                    <select name="items[${itemIndex}][general_discount_id]" class="form-select general-discount-select">
                        <option value="">{{ __('No General Discount') }}</option>
                    </select>
                </td>
                <td>
                    <button type="button" class="btn btn-sm btn-danger remove-item">{{ __('Remove') }}</button>
                </td>
            </tr>
        `);
        $('#gift-calls-table tbody').append(newRow);
        populateGeneralDiscounts(newRow.find('.general-discount-select'));
        itemIndex++;
    });

    // Add Discussion Group Row
    $('#add-discussion-group').on('click', function() {
        const newRow = $(`
            <tr class="item-row">
                <td>
                    <input type="hidden" name="items[${itemIndex}][item_type]" value="discussion_group">
                    <span>{{ __('Discussion Group') }}</span>
                </td>
                <td>
                    <input type="number" name="items[${itemIndex}][price]" class="form-control price" step="0.01" min="0" required>
                </td>
                <td>
                    <input type="number" name="items[${itemIndex}][quantity]" class="form-control quantity" min="1" required value="1">
                </td>
                <td>
                    <select name="items[${itemIndex}][general_discount_id]" class="form-select general-discount-select">
                        <option value="">{{ __('No General Discount') }}</option>
                    </select>
                </td>
                <td>
                    <button type="button" class="btn btn-sm btn-danger remove-item">{{ __('Remove') }}</button>
                </td>
            </tr>
        `);
        $('#discussion-groups-table tbody').append(newRow);
        populateGeneralDiscounts(newRow.find('.general-discount-select'));
        itemIndex++;
    });

    // Remove item row
    $(document).on('click', '.remove-item', function() {
        $(this).closest('.item-row').remove();
    });

    // Populate categories for Track and Placement Test
    function populateCategories(row, itemType) {
        const categorySelect = row.find('.category-select');
        $.ajax({
            url: "{{ route('dashboard.orders.fetch-categories') }}",
            method: 'GET',
            data: { item_type: itemType },
            success: function(response) {
                response.categories.forEach(category => {
                    categorySelect.append(`<option value="${category.id}">${category.name}</option>`);
                });
            },
            error: function(xhr) {
                console.error('Error fetching categories:', xhr);
            }
        });
    }

    // Handle category change
    $(document).on('change', '.category-select', function() {
        const row = $(this).closest('.item-row');
        const itemType = row.find('input[name*="[item_type]"]').val();
        const categoryId = $(this).val();
        const itemSelect = row.find('.item-select');

        itemSelect.empty().append('<option value="">{{ __('Select Item') }}</option>');

        if (!categoryId) return;

        $.ajax({
            url: "{{ route('dashboard.orders.fetch-items') }}",
            method: 'GET',
            data: { item_type: itemType, category_id: categoryId },
            success: function(response) {
                response.items.forEach(item => {
                    itemSelect.append(`<option value="${item.id}">${item.name}</option>`);
                });
            },
            error: function(xhr) {
                console.error('Error fetching items:', xhr);
            }
        });
    });

    // Handle item change
    $(document).on('change', '.item-select', function() {
        const row = $(this).closest('.item-row');
        const itemType = row.find('input[name*="[item_type]"]').val();
        const itemId = $(this).val();
        const pricingTypeSelect = row.find('.pricing-type-select');

        pricingTypeSelect.empty().append('<option value="">{{ __('Select Pricing Type') }}</option>');

        if (!itemId) return;

        $.ajax({
            url: "{{ route('dashboard.orders.fetch-pricing-types') }}",
            method: 'GET',
            data: { item_type: itemType, item_id: itemId },
            success: function(response) {
                response.pricingTypes.forEach(pricingType => {
                    pricingTypeSelect.append(`<option value="${pricingType.id}">${pricingType.name}</option>`);
                });
            },
            error: function(xhr) {
                console.error('Error fetching pricing types:', xhr);
            }
        });
    });

    // Handle pricing type change
    $(document).on('change', '.pricing-type-select', function() {
        const row = $(this).closest('.item-row');
        const itemType = row.find('input[name*="[item_type]"]').val();
        const itemId = row.find('.item-select').val();
        const pricingTypeId = $(this).val();

        if (itemType === 'track') {
            const trackTypeSelect = row.find('.track-type-select');
            trackTypeSelect.empty().append('<option value="">{{ __('Select Track Type') }}</option>');
            $.ajax({
                url: "{{ route('dashboard.orders.fetch-track-types') }}",
                method: 'GET',
                success: function(response) {
                    response.trackTypes.forEach(trackType => {
                        trackTypeSelect.append(`<option value="${trackType.id}">${trackType.name}</option>`);
                    });
                },
                error: function(xhr) {
                    console.error('Error fetching track types:', xhr);
                }
            });
        } else if (itemType === 'placement_test') {
            const placementTestPricingSelect = row.find('.placement-test-pricing-select');
            placementTestPricingSelect.empty().append('<option value="">{{ __('Select Pricing Option') }}</option>');

            if (!pricingTypeId || !itemId) return;

            $.ajax({
                url: "{{ route('dashboard.orders.fetch-price') }}",
                method: 'GET',
                data: {
                    item_type: itemType,
                    item_id: itemId,
                    pricing_type_id: pricingTypeId
                },
                success: function(response) {
                    response.pricingOptions.forEach(option => {
                        placementTestPricingSelect.append(`<option value="${option.id}" data-quantity="${option.quantity}" data-price="${option.price}">${option.quantity} Tests</option>`);
                    });
                },
                error: function(xhr) {
                    console.error('Error fetching placement test pricing options:', xhr);
                }
            });
        }
    });

    // Handle track type change (for Track only)
    $(document).on('change', '.track-type-select', function() {
        const row = $(this).closest('.item-row');
        const itemId = row.find('.item-select').val();
        const pricingTypeId = row.find('.pricing-type-select').val();
        const trackTypeId = $(this).val();
        const trackPricingSelect = row.find('.track-pricing-select');

        trackPricingSelect.empty().append('<option value="">{{ __('Select Pricing Option') }}</option>');

        if (!trackTypeId || !pricingTypeId || !itemId) return;

        $.ajax({
            url: "{{ route('dashboard.orders.fetch-price') }}",
            method: 'GET',
            data: {
                item_type: 'track',
                item_id: itemId,
                pricing_type_id: pricingTypeId,
                track_type_id: trackTypeId
            },
            success: function(response) {
                response.pricingOptions.forEach(option => {
                    trackPricingSelect.append(`<option value="${option.id}" data-levels="${option.levels_number}" data-price="${option.price}">${option.levels_number} Levels</option>`);
                });
            },
            error: function(xhr) {
                console.error('Error fetching track pricing options:', xhr);
            }
        });
    });

    // Handle track pricing selection (update levels number and price fields)
    $(document).on('change', '.track-pricing-select', function() {
        const row = $(this).closest('.item-row');
        const selectedOption = $(this).find(':selected');
        const levelsNumber = selectedOption.data('levels') || 0;
        const price = selectedOption.data('price') || 0;
        const levelsNumberInput = row.find('.levels-number');
        const priceInput = row.find('.price');
        levelsNumberInput.val(levelsNumber);
        priceInput.val(price);
    });

    // Handle placement test pricing selection (update quantity and price fields)
    $(document).on('change', '.placement-test-pricing-select', function() {
        const row = $(this).closest('.item-row');
        const selectedOption = $(this).find(':selected');
        const quantity = selectedOption.data('quantity') || 0;
        const price = selectedOption.data('price') || 0;
        const quantityInput = row.find('.quantity');
        const priceInput = row.find('.price');
        quantityInput.val(quantity);
        priceInput.val(price);
    });

    // Initialize existing rows
    $('.item-row').each(function() {
        const row = $(this);
        const itemType = row.find('input[name*="[item_type]"]').val();
        if (itemType === 'track' || itemType === 'placement_test') {
            populateCategories(row, itemType);
            if (row.find('.category-select').val()) row.find('.category-select').trigger('change');
            if (row.find('.item-select').val()) row.find('.item-select').trigger('change');
            if (row.find('.pricing-type-select').val()) row.find('.pricing-type-select').trigger('change');
            if (row.find('.track-type-select').val()) row.find('.track-type-select').trigger('change');
            if (row.find('.track-pricing-select').val()) row.find('.track-pricing-select').trigger('change');
            if (row.find('.placement-test-pricing-select').val()) row.find('.placement-test-pricing-select').trigger('change');
        }
    });
});
</script>
@endsection