@extends('dashboard.layouts.app')

@section('title', __('Edit Order'))
@section('page_heading', __('Edit 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">{{ __('Edit Order #') . $order->id }}</li>
@endsection

@section('content')
<div class="card">
    <div class="card-header">
        <h3 class="card-title">{{ __('Edit Order #') . $order->id }}</h3>
    </div>
    <div class="card-body">
        <form action="{{ route('dashboard.orders.update', $order) }}" method="POST">
            @csrf
            @method('PUT')

            <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', $order->source) == 'website' ? 'selected' : '' }}>{{ __('Website') }}</option>
                            <option value="crm" {{ old('source', $order->source) == 'crm' ? 'selected' : '' }}>{{ __('CRM') }}</option>
                            <option value="app" {{ old('source', $order->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', $order->created_by_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', $order->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', $order->invoice_type) == 'private' ? 'selected' : '' }}>{{ __('Private') }}</option>
                            <option value="shared" {{ old('invoice_type', $order->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>
                        </select>
                        @error('global_general_discount_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

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

            <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') }}</th>
                            <th>{{ __('Price') }}</th>
                            <th>{{ __('Discounted Price') }}</th>
                            <th>{{ __('General Discount') }}</th>
                            <th>{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($order->items as $index => $item)
                            @if($item->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>
                                            @foreach($trackCategories as $category)
                                                <option value="{{ $category->id }}" {{ $item->trackPricing->track->track_category_id == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td>
                                        <select name="items[{{$index}}][item_id]" class="form-select item-select" required>
                                            <option value="">{{ __('Select Track') }}</option>
                                            @foreach(Track::where('track_category_id', $item->trackPricing->track->track_category_id)->get() as $track)
                                                <option value="{{ $track->id }}" {{ $item->item_id == $track->id ? 'selected' : '' }}>{{ $track->name }}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td>
                                        <select name="items[{{$index}}][pricing_type_id]" class="form-select pricing-type-select">
                                            <option value="">{{ __('Select Pricing Type') }}</option>
                                            @foreach($pricingTypes as $type)
                                                <option value="{{ $type->id }}" {{ $item->trackPricing->pricing_type_id == $type->id ? 'selected' : '' }}>{{ $type->name }}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td>
                                        <select name="items[{{$index}}][track_type_id]" class="form-select track-type-select">
                                            <option value="">{{ __('Select Track Type') }}</option>
                                            @foreach($trackTypes as $type)
                                                <option value="{{ $type->id }}" {{ $item->trackPricing->track_type_id == $type->id ? 'selected' : '' }}>{{ $type->name }}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td>
                                        <select name="items[{{$index}}][track_pricing_id]" class="form-select track-pricing-select" required>
                                            <option value="">{{ __('Select Pricing Option') }}</option>
                                            @foreach(TrackPricing::where('track_id', $item->item_id)->where('pricing_type_id', $item->trackPricing->pricing_type_id)->where('track_type_id', $item->trackPricing->track_type_id)->get() as $pricing)
                                                <option value="{{ $pricing->id }}" data-levels="{{ $pricing->levels_number }}" data-price="{{ $pricing->discounted_price }}" {{ $item->track_pricing_id == $pricing->id ? 'selected' : '' }}>{{ $pricing->levels_number }} Levels</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td>
                                        <input type="number" name="items[{{$index}}][levels_number]" class="form-control levels-number" value="{{ $item->quantity }}" readonly>
                                    </td>
                                    <td>
                                        <input type="number" name="items[{{$index}}][price]" class="form-control price" step="0.01" min="0" value="{{ $item->price }}" required readonly>
                                    </td>
                                    <td>
                                        <input type="number" name="items[{{$index}}][discounted_price]" class="form-control discounted-price" step="0.01" min="0" value="{{ $item->discounted_price }}" 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
                    </tbody>
                </table>
                <button type="button" class="btn btn-sm btn-secondary me-2" id="add-track">{{ __('Add Track') }}</button>
            </div>

            <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>{{ __('Discounted Price') }}</th>
                            <th>{{ __('General Discount') }}</th>
                            <th>{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($order->items as $index => $item)
                            @if($item->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>
                                            @foreach($testCategories as $category)
                                                <option value="{{ $category->id }}" {{ $item->placementTestPricing->placementTest->test_category_id == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td>
                                        <select name="items[{{$index}}][item_id]" class="form-select item-select" required>
                                            <option value="">{{ __('Select Placement Test') }}</option>
                                            @foreach(PlacementTest::where('test_category_id', $item->placementTestPricing->placementTest->test_category_id)->get() as $test)
                                                <option value="{{ $test->id }}" {{ $item->item_id == $test->id ? 'selected' : '' }}>{{ $test->name }}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td>
                                        <select name="items[{{$index}}][pricing_type_id]" class="form-select pricing-type-select">
                                            <option value="">{{ __('Select Pricing Type') }}</option>
                                            @foreach($pricingTypes as $type)
                                                <option value="{{ $type->id }}" {{ $item->placementTestPricing->pricing_type_id == $type->id ? 'selected' : '' }}>{{ $type->name }}</option>
                                            @endforeach
                                        </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>
                                            @foreach(PlacementTestPricing::where('placement_test_id', $item->item_id)->where('pricing_type_id', $item->placementTestPricing->pricing_type_id)->get() as $pricing)
                                                <option value="{{ $pricing->id }}" data-quantity="{{ $pricing->quantity }}" data-price="{{ $pricing->discounted_price }}" {{ $item->placement_test_pricing_id == $pricing->id ? 'selected' : '' }}>{{ $pricing->quantity }} Tests</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td>
                                        <input type="number" name="items[{{$index}}][quantity]" class="form-control quantity" value="{{ $item->quantity }}" readonly>
                                    </td>
                                    <td>
                                        <input type="number" name="items[{{$index}}][price]" class="form-control price" step="0.01" min="0" value="{{ $item->price }}" required readonly>
                                    </td>
                                    <td>
                                        <input type="number" name="items[{{$index}}][discounted_price]" class="form-control discounted-price" step="0.01" min="0" value="{{ $item->discounted_price }}" 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
                    </tbody>
                </table>
                <button type="button" class="btn btn-sm btn-secondary me-2" id="add-placement-test">{{ __('Add Placement Test') }}</button>
            </div>

            <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>{{ __('Discounted Price') }}</th>
                            <th>{{ __('General Discount') }}</th>
                            <th>{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($order->items as $index => $item)
                            @if($item->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" value="{{ $item->price }}" required>
                                    </td>
                                    <td>
                                        <input type="number" name="items[{{$index}}][quantity]" class="form-control quantity" min="1" value="{{ $item->quantity }}" required>
                                    </td>
                                    <td>
                                        <input type="number" name="items[{{$index}}][discounted_price]" class="form-control discounted-price" step="0.01" min="0" value="{{ $item->discounted_price }}" 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
                    </tbody>
                </table>
                <button type="button" class="btn btn-sm btn-secondary me-2" id="add-gift-call">{{ __('Add Gift Call') }}</button>
            </div>

            <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>{{ __('Discounted Price') }}</th>
                            <th>{{ __('General Discount') }}</th>
                            <th>{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($order->items as $index => $item)
                            @if($item->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" value="{{ $item->price }}" required>
                                    </td>
                                    <td>
                                        <input type="number" name="items[{{$index}}][quantity]" class="form-control quantity" min="1" value="{{ $item->quantity }}" required>
                                    </td>
                                    <td>
                                        <input type="number" name="items[{{$index}}][discounted_price]" class="form-control discounted-price" step="0.01" min="0" value="{{ $item->discounted_price }}" 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
                    </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">{{ __('Update Order') }}</button>
                <a href="{{ route('dashboard.orders.show', $order) }}" class="btn btn-secondary">{{ __('Cancel') }}</a>
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    let itemIndex = {{ $order->items->count() }};

    function populateGeneralDiscounts(selectElement, selectedId = null) {
        $.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'})`;
                    let selected = selectedId == discount.id ? 'selected' : '';
                    selectElement.append(`<option value="${discount.id}" ${selected}>${discountText}</option>`);
                });
            },
            error: function(xhr) {
                console.error('Error fetching general discounts:', xhr);
            }
        });
    }

    populateGeneralDiscounts($('#global_general_discount_id'), '{{ $order->global_general_discount_id }}');

    $('.general-discount-select').each(function() {
        const row = $(this).closest('.item-row');
        const itemDiscountId = row.data('discount-id') || '{{ $item->general_discount_id ?? "" }}';
        populateGeneralDiscounts($(this), itemDiscountId);
    });

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

    $(document).on('change', '.general-discount-select, #global_general_discount_id', function() {
        const row = $(this).closest('.item-row');
        const price = parseFloat(row.find('.price').val()) || 0;
        const discountId = $(this).val();
        let discountedPrice = price;

        if (discountId) {
            $.ajax({
                url: "{{ route('dashboard.orders.fetch-general-discounts') }}",
                method: 'GET',
                success: function(response) {
                    const discount = response.discounts.find(d => d.id == discountId);
                    if (discount) {
                        if (discount.discount_type === 'percentage') {
                            discountedPrice = price * (1 - (discount.discount_value / 100));
                        } else {
                            discountedPrice = Math.max(0, price - discount.discount_value);
                        }
                        discountedPrice = Math.round(discountedPrice * 100) / 100;
                        row.find('.discounted-price').val(discountedPrice);
                    }
                },
                error: function(xhr) {
                    console.error('Error fetching discount details:', xhr);
                }
            });
        } else {
            row.find('.discounted-price').val(price);
        }
    });

    $('#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>
                    <input type="number" name="items[${itemIndex}][discounted_price]" class="form-control discounted-price" step="0.01" min="0" 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').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>
                    <input type="number" name="items[${itemIndex}][discounted_price]" class="form-control discounted-price" step="0.01" min="0" 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').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>
                    <input type="number" name="items[${itemIndex}][discounted_price]" class="form-control discounted-price" step="0.01" min="0" 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>
        `);
        $('#gift-calls-table tbody').append(newRow);
        populateGeneralDiscounts(newRow.find('.general-discount-select'));
        newRow.find('.discounted-price').val(newRow.find('.price').val());
        itemIndex++;
    });

    $('#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>
                    <input type="number" name="items[${itemIndex}][discounted_price]" class="form-control discounted-price" step="0.01" min="0" 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>
        `);
        $('#discussion-groups-table tbody').append(newRow);
        populateGeneralDiscounts(newRow.find('.general-discount-select'));
        newRow.find('.discounted-price').val(newRow.find('.price').val());
        itemIndex++;
    });

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

    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);
            }
        });
    }

    $(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);
            }
        });
    });

    $(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);
            }
        });
    });

    $(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:', xhr);
                }
            });
        }
    });

    $(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:', xhr);
            }
        });
    });

    $(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;
        row.find('.levels-number').val(levelsNumber);
        row.find('.price').val(price);
        row.find('.discounted-price').val(price);
        row.find('.general-discount-select').trigger('change');
    });

    $(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;
        row.find('.quantity').val(quantity);
        row.find('.price').val(price);
        row.find('.discounted-price').val(price);
        row.find('.general-discount-select').trigger('change');
    });

    $(document).on('input', '.price', function() {
        const row = $(this).closest('.item-row');
        const price = parseFloat($(this).val()) || 0;
        row.find('.discounted-price').val(price);
        row.find('.general-discount-select').trigger('change');
    });

    $('.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);
            row.find('.category-select').trigger('change');
            row.find('.item-select').trigger('change');
            row.find('.pricing-type-select').trigger('change');
            row.find('.track-type-select').trigger('change');
            row.find('.track-pricing-select').trigger('change');
            row.find('.placement-test-pricing-select').trigger('change');
        }
        row.find('.general-discount-select').trigger('change');
    });
});
</script>
@endsection