@extends('dashboard.layouts.app')

@section('title', __('dashboard.Create New Invoice'))
@section('page_heading', __('dashboard.Create New Invoice'))

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

@section('content')
<div class="card">
    <div class="card-header">
        <h3 class="card-title">{{ __('dashboard.Create New Invoice') }}</h3>
    </div>
    <div class="card-body">
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('dashboard.invoices.store') }}" method="POST">
            @csrf

            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="source" class="form-label">{{ __('dashboard.Source') }}</label>
                        <select name="source" id="source" class="form-select @error('source') is-invalid @enderror" required>
                            <option value="">{{ __('dashboard.Select Source') }}</option>
                            <option value="website" {{ old('source') == 'website' ? 'selected' : '' }}>{{ __('dashboard.Website') }}</option>
                            <option value="crm" {{ old('source') == 'crm' ? 'selected' : '' }}>{{ __('dashboard.CRM') }}</option>
                            <option value="app" {{ old('source') == 'app' ? 'selected' : '' }}>{{ __('dashboard.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">{{ __('dashboard.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="">{{ __('dashboard.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">{{ __('dashboard.Assigned To') }} ({{ __('dashboard.Optional') }})</label>
                        <select name="assigned_to_id" id="assigned_to_id" class="form-select @error('assigned_to_id') is-invalid @enderror">
                            <option value="">{{ __('dashboard.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">{{ __('dashboard.Invoice Type') }}</label>
                        <select name="invoice_type" id="invoice_type" class="form-select @error('invoice_type') is-invalid @enderror" required>
                            <option value="">{{ __('dashboard.Select Invoice Type') }}</option>
                            <option value="private" {{ old('invoice_type') == 'private' ? 'selected' : '' }}>{{ __('dashboard.Private') }}</option>
                            <option value="shared" {{ old('invoice_type') == 'shared' ? 'selected' : '' }}>{{ __('dashboard.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="due_date" class="form-label">{{ __('dashboard.Due Date') }}</label>
                        <input type="date" name="due_date" id="due_date" class="form-control @error('due_date') is-invalid @enderror" value="{{ old('due_date', now()->addDays(30)->format('Y-m-d')) }}" required>
                        @error('due_date')
                            <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">{{ __('dashboard.Global General Discount') }} ({{ __('dashboard.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="">{{ __('dashboard.No General Discount') }}</option>
                        </select>
                        @error('global_general_discount_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <hr>
            <h4>{{ __('dashboard.Invoice Items') }}</h4>

            <div class="mb-4" id="items-container">
                @if(old('items'))
                    @foreach(old('items') as $index => $itemData)
                        @if($itemData['item_type'] == 'track')
                            <div class="item-block mb-3" data-type="track">
                                <h5>{{ __('dashboard.Item') }} #{{ $index + 1 }}</h5>
                                <table class="table table-bordered">
                                    <thead>
                                        <tr class="header-row">
                                            <th>{{ __('dashboard.Type') }}</th>
                                            <th>{{ __('dashboard.Track Category') }}</th>
                                            <th>{{ __('dashboard.Track Sub Category') }}</th>
                                            <th>{{ __('dashboard.Track') }}</th>
                                            <th>{{ __('dashboard.Pricing Type') }}</th>
                                            <th>{{ __('dashboard.Track Type') }}</th>
                                            <th>{{ __('dashboard.Pricing Option') }}</th>
                                            <th>{{ __('dashboard.Price') }}</th>
                                            <th>{{ __('dashboard.Quantity') }}</th>
                                            <th>{{ __('dashboard.Discount') }}</th>
                                            <th>{{ __('dashboard.Actions') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="item-row" data-type="track">
                                            <td><input type="hidden" name="items[{{$index}}][item_type]" value="track"><span>{{ __('dashboard.Track') }}</span></td>
                                            <td><select name="items[{{$index}}][category_id]" class="form-select category-select" required><option value="">{{ __('dashboard.Select Track Category') }}</option></select></td>
                                            <td><select name="items[{{$index}}][subcategory_id]" class="form-select subcategory-select" required><option value="">{{ __('dashboard.Select Track Sub Category') }}</option></select></td>
                                            <td><select name="items[{{$index}}][item_id]" class="form-select item-select" required><option value="">{{ __('dashboard.Select Track') }}</option></select></td>
                                            <td><select name="items[{{$index}}][pricing_type_id]" class="form-select pricing-type-select" required><option value="">{{ __('dashboard.Select Pricing Type') }}</option></select></td>
                                            <td><select name="items[{{$index}}][track_type_id]" class="form-select track-type-select" required><option value="">{{ __('dashboard.Select Track Type') }}</option></select></td>
                                            <td><select name="items[{{$index}}][track_pricing_id]" class="form-select pricing-option-select" required><option value="">{{ __('dashboard.Select Pricing Option') }}</option></select></td>
                                            <td><input type="number" name="items[{{$index}}][price]" class="form-control price" step="0.01" min="0" required value="{{ $itemData['price'] ?? '' }}" readonly></td>
                                            <td><input type="number" name="items[{{$index}}][quantity]" class="form-control quantity" min="1" required value="{{ $itemData['quantity'] ?? 1 }}" readonly></td>
                                            <td><select name="items[{{$index}}][general_discount_id]" class="form-select general-discount-select"><option value="">{{ __('dashboard.No General Discount') }}</option></select></td>
                                            <td><button type="button" class="btn btn-sm btn-danger remove-item">{{ __('dashboard.Remove') }}</button></td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="text-end">
                                    <strong>{{ __('dashboard.Subtotal') }}: <span class="subtotal">0.00</span></strong>
                                    <div class="not-included text-danger" style="display: none;">{{ __('dashboard.Not Included') }}</div>
                                </div>
                            </div>
                        @elseif($itemData['item_type'] == 'item')
                            <div class="item-block mb-3" data-type="item">
                                <h5>{{ __('dashboard.Item') }} #{{ $index + 1 }}</h5>
                                <table class="table table-bordered">
                                    <thead>
                                        <tr class="header-row">
                                            <th>{{ __('dashboard.Type') }}</th>
                                            <th>{{ __('dashboard.Item Category') }}</th>
                                            <th>{{ __('dashboard.Item') }}</th>
                                            <th>{{ __('dashboard.Pricing Type') }}</th>
                                            <th>{{ __('dashboard.Pricing Option') }}</th>
                                            <th>{{ __('dashboard.Price') }}</th>
                                            <th>{{ __('dashboard.Quantity') }}</th>
                                            <th>{{ __('dashboard.Discount') }}</th>
                                            <th>{{ __('dashboard.Actions') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="item-row" data-type="item">
                                            <td><input type="hidden" name="items[{{$index}}][item_type]" value="item"><span>{{ __('dashboard.Item') }}</span></td>
                                            <td><select name="items[{{$index}}][category_id]" class="form-select category-select" required><option value="">{{ __('dashboard.Select Item Category') }}</option></select></td>
                                            <td><select name="items[{{$index}}][item_id]" class="form-select item-select" required><option value="">{{ __('dashboard.Select Item') }}</option></select></td>
                                            <td><select name="items[{{$index}}][pricing_type_id]" class="form-select pricing-type-select" required><option value="">{{ __('dashboard.Select Pricing Type') }}</option></select></td>
                                            <td><select name="items[{{$index}}][item_pricing_id]" class="form-select pricing-option-select" required><option value="">{{ __('dashboard.Select Pricing Option') }}</option></select></td>
                                            <td><input type="number" name="items[{{$index}}][price]" class="form-control price" step="0.01" min="0" required value="{{ $itemData['price'] ?? '' }}" readonly></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="">{{ __('dashboard.No General Discount') }}</option></select></td>
                                            <td><button type="button" class="btn btn-sm btn-danger remove-item">{{ __('dashboard.Remove') }}</button></td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="text-end">
                                    <strong>{{ __('dashboard.Subtotal') }}: <span class="subtotal">0.00</span></strong>
                                    <div class="not-included text-danger" style="display: none;">{{ __('dashboard.Not Included') }}</div>
                                </div>
                            </div>
                        @elseif($itemData['item_type'] == 'custom')
                            <div class="item-block mb-3" data-type="custom">
                                <h5>{{ __('dashboard.Item') }} #{{ $index + 1 }}</h5>
                                <table class="table table-bordered">
                                    <thead>
                                        <tr class="header-row">
                                            <th>{{ __('dashboard.Type') }}</th>
                                            <th>{{ __('dashboard.Custom Item Name') }}</th>
                                            <th>{{ __('dashboard.Price') }}</th>
                                            <th>{{ __('dashboard.Quantity') }}</th>
                                            <th>{{ __('dashboard.Discount') }}</th>
                                            <th>{{ __('dashboard.Actions') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="item-row" data-type="custom">
                                            <td><input type="hidden" name="items[{{$index}}][item_type]" value="custom"><span>{{ __('dashboard.Custom') }}</span></td>
                                            <td><input type="text" name="items[{{$index}}][item_name]" class="form-control item-name" value="{{ $itemData['item_name'] ?? '' }}" required></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="">{{ __('dashboard.No General Discount') }}</option></select></td>
                                            <td><button type="button" class="btn btn-sm btn-danger remove-item">{{ __('dashboard.Remove') }}</button></td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="text-end">
                                    <strong>{{ __('dashboard.Subtotal') }}: <span class="subtotal">0.00</span></strong>
                                    <div class="not-included text-danger" style="display: none;">{{ __('dashboard.Not Included') }}</div>
                                </div>
                            </div>
                        @endif
                    @endforeach
                @endif
                <div class="mb-3">
                    <button type="button" class="btn btn-sm btn-secondary me-2" id="add-track">{{ __('dashboard.Add Track') }}</button>
                    <button type="button" class="btn btn-sm btn-secondary me-2" id="add-item">{{ __('dashboard.Add Item') }}</button>
                    <button type="button" class="btn btn-sm btn-secondary" id="add-custom">{{ __('dashboard.Add Custom') }}</button>
                </div>

                <!-- Coupon Code moved here -->
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label for="coupon_code" class="form-label">{{ __('dashboard.Coupon Code') }} ({{ __('dashboard.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>

                <!-- Price Breakdown -->
                <div class="text-end mt-3">
                    <h5>{{ __('dashboard.Price Breakdown') }}:</h5>
                    <p>{{ __('dashboard.Price Before Discounts') }}: <span id="price-before-discounts">0.00</span></p>
                    <p>{{ __('dashboard.General Discounts Total') }}: <span id="general-discounts-total">0.00</span></p>
                    <p>{{ __('dashboard.Coupon Discount') }}: <span id="coupon-discount">0.00</span></p>
                    <p>{{ __('dashboard.Total Discounts') }}: <span id="total-discounts">0.00</span></p>
                    <h5>{{ __('dashboard.Final Total') }}: <span id="final-total">0.00</span></h5>
                </div>
            </div>

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

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
$(document).ready(function() {
    let itemIndex = {{ old('items') ? count(old('items')) : 0 }};

    // Function to update item numbers
    function updateItemNumbers() {
        $('.item-block').each(function(index) {
            $(this).find('h5').text(`{{ __('dashboard.Item') }} #${index + 1}`);
        });
    }

    // Function to calculate totals and update price breakdown
    function updateTotals() {
        let priceBeforeDiscounts = 0;
        let generalDiscountsTotal = 0;
        let couponDiscount = 0;
        let totalDiscounts = 0;
        let finalTotal = 0;

        $('.item-block').each(function() {
            const block = $(this);
            const itemType = block.data('type');
            const price = parseFloat(block.find('.price').val()) || 0;
            const quantity = parseInt(block.find('.quantity').val()) || 0;
            const discountSelect = block.find('.general-discount-select');
            const discountId = discountSelect.val();
            let subtotalBeforeDiscount = price * quantity;
            let discountAmount = 0;

            priceBeforeDiscounts += subtotalBeforeDiscount;

            if (discountId) {
                $.ajax({
                    url: "{{ route('dashboard.invoices.check-general-discount') }}",
                    method: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        general_discount_id: discountId,
                        item_type: itemType,
                        item_id: itemType !== 'custom' ? block.find('.item-select').val() : null,
                        category_id: block.find('.category-select').val(),
                        subcategory_id: block.data('type') === 'track' ? block.find('.subcategory-select').val() : null,
                    },
                    success: function(response) {
                        if (response.is_applicable) {
                            discountAmount = response.discount_amount;
                            block.find('.subtotal').text((subtotalBeforeDiscount - discountAmount).toFixed(2));
                            block.find('.not-included').hide();
                        } else {
                            block.find('.subtotal').text(subtotalBeforeDiscount.toFixed(2));
                            block.find('.not-included').show();
                        }
                        generalDiscountsTotal += discountAmount;
                        updatePriceBreakdown();
                    },
                    error: function(xhr) {
                        console.error('Error checking discount:', xhr);
                        block.find('.subtotal').text(subtotalBeforeDiscount.toFixed(2));
                        block.find('.not-included').show();
                    },
                    async: false // Synchronous to ensure correct calculation order
                });
            } else {
                block.find('.subtotal').text(subtotalBeforeDiscount.toFixed(2));
                block.find('.not-included').hide();
            }
        });

        function updatePriceBreakdown() {
            const couponCode = $('#coupon_code').val();
            if (couponCode) {
                $.ajax({
                    url: "{{ route('dashboard.invoices.check-coupon') }}",
                    method: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        coupon_code: couponCode,
                        items: $('.item-block').map(function() {
                            return {
                                item_type: $(this).data('type'),
                                item_id: $(this).data('type') !== 'custom' ? $(this).find('.item-select').val() : null,
                                category_id: $(this).find('.category-select').val(),
                                subcategory_id: $(this).data('type') === 'track' ? $(this).find('.subcategory-select').val() : null,
                                price: parseFloat($(this).find('.price').val()) || 0,
                                quantity: parseInt($(this).find('.quantity').val()) || 0,
                            };
                        }).get()
                    },
                    success: function(response) {
                        couponDiscount = response.coupon_discount;
                        finalTotal = response.final_total;
                        $('#coupon-discount').text(couponDiscount.toFixed(2));
                        $('#final-total').text(finalTotal.toFixed(2));
                    },
                    error: function(xhr) {
                        console.error('Error checking coupon:', xhr);
                        couponDiscount = 0;
                        finalTotal = priceBeforeDiscounts - generalDiscountsTotal;
                        $('#coupon-discount').text('0.00');
                        $('#final-total').text(finalTotal.toFixed(2));
                    },
                    async: false
                });
            } else {
                couponDiscount = 0;
                finalTotal = priceBeforeDiscounts - generalDiscountsTotal;
                $('#coupon-discount').text('0.00');
                $('#final-total').text(finalTotal.toFixed(2));
            }

            totalDiscounts = generalDiscountsTotal + couponDiscount;
            $('#price-before-discounts').text(priceBeforeDiscounts.toFixed(2));
            $('#general-discounts-total').text(generalDiscountsTotal.toFixed(2));
            $('#total-discounts').text(totalDiscounts.toFixed(2));
        }

        updatePriceBreakdown();
    }

    // Fetch and populate general discounts
    function populateGeneralDiscounts(selectElement) {
        $.ajax({
            url: "{{ route('dashboard.invoices.fetch-general-discounts') }}",
            method: 'GET',
            success: function(response) {
                selectElement.empty().append('<option value="">{{ __("dashboard.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);
        updateTotals();
    });

    // Add Track Row
    $('#add-track').on('click', function() {
        const newBlock = `
            <div class="item-block mb-3" data-type="track">
                <h5>{{ __('dashboard.Item') }} #${itemIndex + 1}</h5>
                <table class="table table-bordered">
                    <thead>
                        <tr class="header-row">
                            <th>{{ __('dashboard.Type') }}</th>
                            <th>{{ __('dashboard.Track Category') }}</th>
                            <th>{{ __('dashboard.Track Sub Category') }}</th>
                            <th>{{ __('dashboard.Track') }}</th>
                            <th>{{ __('dashboard.Pricing Type') }}</th>
                            <th>{{ __('dashboard.Track Type') }}</th>
                            <th>{{ __('dashboard.Pricing Option') }}</th>
                            <th>{{ __('dashboard.Price') }}</th>
                            <th>{{ __('dashboard.Quantity') }}</th>
                            <th>{{ __('dashboard.Discount') }}</th>
                            <th>{{ __('dashboard.Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="item-row" data-type="track">
                            <td><input type="hidden" name="items[${itemIndex}][item_type]" value="track"><span>{{ __('dashboard.Track') }}</span></td>
                            <td><select name="items[${itemIndex}][category_id]" class="form-select category-select" required><option value="">{{ __('dashboard.Select Track Category') }}</option></select></td>
                            <td><select name="items[${itemIndex}][subcategory_id]" class="form-select subcategory-select" required><option value="">{{ __('dashboard.Select Track Sub Category') }}</option></select></td>
                            <td><select name="items[${itemIndex}][item_id]" class="form-select item-select" required><option value="">{{ __('dashboard.Select Track') }}</option></select></td>
                            <td><select name="items[${itemIndex}][pricing_type_id]" class="form-select pricing-type-select" required><option value="">{{ __('dashboard.Select Pricing Type') }}</option></select></td>
                            <td><select name="items[${itemIndex}][track_type_id]" class="form-select track-type-select" required><option value="">{{ __('dashboard.Select Track Type') }}</option></select></td>
                            <td><select name="items[${itemIndex}][track_pricing_id]" class="form-select pricing-option-select" required><option value="">{{ __('dashboard.Select Pricing Option') }}</option></select></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}][quantity]" class="form-control quantity" min="1" required value="1" readonly></td>
                            <td><select name="items[${itemIndex}][general_discount_id]" class="form-select general-discount-select"><option value="">{{ __('dashboard.No General Discount') }}</option></select></td>
                            <td><button type="button" class="btn btn-sm btn-danger remove-item">{{ __('dashboard.Remove') }}</button></td>
                        </tr>
                    </tbody>
                </table>
                <div class="text-end">
                    <strong>{{ __('dashboard.Subtotal') }}: <span class="subtotal">0.00</span></strong>
                    <div class="not-included text-danger" style="display: none;">{{ __('dashboard.Not Included') }}</div>
                </div>
            </div>`;
        $('#items-container').append(newBlock);
        populateTrackCategories($('.item-block[data-type="track"]:last'));
        populateGeneralDiscounts($('.item-block[data-type="track"]:last .general-discount-select'));
        itemIndex++;
        updateItemNumbers();
        updateTotals();
    });

    // Add Item Row
    $('#add-item').on('click', function() {
        const newBlock = `
            <div class="item-block mb-3" data-type="item">
                <h5>{{ __('dashboard.Item') }} #${itemIndex + 1}</h5>
                <table class="table table-bordered">
                    <thead>
                        <tr class="header-row">
                            <th>{{ __('dashboard.Type') }}</th>
                            <th>{{ __('dashboard.Item Category') }}</th>
                            <th>{{ __('dashboard.Item') }}</th>
                            <th>{{ __('dashboard.Pricing Type') }}</th>
                            <th>{{ __('dashboard.Pricing Option') }}</th>
                            <th>{{ __('dashboard.Price') }}</th>
                            <th>{{ __('dashboard.Quantity') }}</th>
                            <th>{{ __('dashboard.Discount') }}</th>
                            <th>{{ __('dashboard.Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="item-row" data-type="item">
                            <td><input type="hidden" name="items[${itemIndex}][item_type]" value="item"><span>{{ __('dashboard.Item') }}</span></td>
                            <td><select name="items[${itemIndex}][category_id]" class="form-select category-select" required><option value="">{{ __('dashboard.Select Item Category') }}</option></select></td>
                            <td><select name="items[${itemIndex}][item_id]" class="form-select item-select" required><option value="">{{ __('dashboard.Select Item') }}</option></select></td>
                            <td><select name="items[${itemIndex}][pricing_type_id]" class="form-select pricing-type-select" required><option value="">{{ __('dashboard.Select Pricing Type') }}</option></select></td>
                            <td><select name="items[${itemIndex}][item_pricing_id]" class="form-select pricing-option-select" required><option value="">{{ __('dashboard.Select Pricing Option') }}</option></select></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}][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="">{{ __('dashboard.No General Discount') }}</option></select></td>
                            <td><button type="button" class="btn btn-sm btn-danger remove-item">{{ __('dashboard.Remove') }}</button></td>
                        </tr>
                    </tbody>
                </table>
                <div class="text-end">
                    <strong>{{ __('dashboard.Subtotal') }}: <span class="subtotal">0.00</span></strong>
                    <div class="not-included text-danger" style="display: none;">{{ __('dashboard.Not Included') }}</div>
                </div>
            </div>`;
        $('#items-container').append(newBlock);
        populateItemCategories($('.item-block[data-type="item"]:last'));
        populateGeneralDiscounts($('.item-block[data-type="item"]:last .general-discount-select'));
        itemIndex++;
        updateItemNumbers();
        updateTotals();
    });

    // Add Custom Row
    $('#add-custom').on('click', function() {
        const newBlock = `
            <div class="item-block mb-3" data-type="custom">
                <h5>{{ __('dashboard.Item') }} #${itemIndex + 1}</h5>
                <table class="table table-bordered">
                    <thead>
                        <tr class="header-row">
                            <th>{{ __('dashboard.Type') }}</th>
                            <th>{{ __('dashboard.Custom Item Name') }}</th>
                            <th>{{ __('dashboard.Price') }}</th>
                            <th>{{ __('dashboard.Quantity') }}</th>
                            <th>{{ __('dashboard.Discount') }}</th>
                            <th>{{ __('dashboard.Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="item-row" data-type="custom">
                            <td><input type="hidden" name="items[${itemIndex}][item_type]" value="custom"><span>{{ __('dashboard.Custom') }}</span></td>
                            <td><input type="text" name="items[${itemIndex}][item_name]" class="form-control item-name" required></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="">{{ __('dashboard.No General Discount') }}</option></select></td>
                            <td><button type="button" class="btn btn-sm btn-danger remove-item">{{ __('dashboard.Remove') }}</button></td>
                        </tr>
                    </tbody>
                </table>
                <div class="text-end">
                    <strong>{{ __('dashboard.Subtotal') }}: <span class="subtotal">0.00</span></strong>
                    <div class="not-included text-danger" style="display: none;">{{ __('dashboard.Not Included') }}</div>
                </div>
            </div>`;
        $('#items-container').append(newBlock);
        populateGeneralDiscounts($('.item-block[data-type="custom"]:last .general-discount-select'));
        itemIndex++;
        updateItemNumbers();
        updateTotals();
    });

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

    // Update totals on change
    $(document).on('change', '.price, .quantity, .general-discount-select, .pricing-option-select, #coupon_code', function() {
        updateTotals();
    });

    // Populate Track Categories
    function populateTrackCategories(block) {
        const categorySelect = block.find('.category-select');
        $.ajax({
            url: "{{ route('dashboard.invoices.fetch-track-categories') }}",
            method: 'GET',
            data: { parent_id: null },
            success: function(response) {
                categorySelect.empty().append('<option value="">{{ __('dashboard.Select Track Category') }}</option>');
                response.categories.forEach(category => {
                    categorySelect.append(`<option value="${category.id}">${category.name}</option>`);
                });
            },
            error: function(xhr) {
                console.error('Error fetching track categories:', xhr);
            }
        });
    }

    // Populate Item Categories
    function populateItemCategories(block) {
        const categorySelect = block.find('.category-select');
        $.ajax({
            url: "{{ route('dashboard.invoices.fetch-item-categories') }}",
            method: 'GET',
            success: function(response) {
                categorySelect.empty().append('<option value="">{{ __('dashboard.Select Item Category') }}</option>');
                response.categories.forEach(category => {
                    categorySelect.append(`<option value="${category.id}">${category.name}</option>`);
                });
            },
            error: function(xhr) {
                console.error('Error fetching item categories:', xhr);
            }
        });
    }

    // Handle category change
    $(document).on('change', '.category-select', function() {
        const block = $(this).closest('.item-block');
        const itemType = block.data('type');
        const categoryId = $(this).val();

        if (itemType === 'track') {
            const subcategorySelect = block.find('.subcategory-select');
            subcategorySelect.empty().append('<option value="">{{ __('dashboard.Select Track Sub Category') }}</option>');
            if (categoryId) {
                $.ajax({
                    url: "{{ route('dashboard.invoices.fetch-track-categories') }}",
                    method: 'GET',
                    data: { parent_id: categoryId },
                    success: function(response) {
                        response.categories.forEach(category => {
                            subcategorySelect.append(`<option value="${category.id}">${category.name}</option>`);
                        });
                    },
                    error: function(xhr) {
                        console.error('Error fetching track subcategories:', xhr);
                    }
                });
            }
        } else if (itemType === 'item') {
            fetchItems(block, categoryId);
        }
        updateTotals();
    });

    // Handle subcategory change
    $(document).on('change', '.subcategory-select', function() {
        const block = $(this).closest('.item-block');
        const categoryId = $(this).val();
        fetchTracks(block, categoryId);
        updateTotals();
    });

    // Fetch Tracks
    function fetchTracks(block, categoryId) {
        const itemSelect = block.find('.item-select');
        itemSelect.empty().append('<option value="">{{ __('dashboard.Select Track') }}</option>');
        if (categoryId) {
            $.ajax({
                url: "{{ route('dashboard.invoices.fetch-tracks') }}",
                method: 'GET',
                data: { 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 tracks:', xhr);
                }
            });
        }
    }

    // Fetch Items
    function fetchItems(block, categoryId) {
        const itemSelect = block.find('.item-select');
        itemSelect.empty().append('<option value="">{{ __('dashboard.Select Item') }}</option>');
        if (categoryId) {
            $.ajax({
                url: "{{ route('dashboard.invoices.fetch-items') }}",
                method: 'GET',
                data: { 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/track change
    $(document).on('change', '.item-select', function() {
        const block = $(this).closest('.item-block');
        const itemType = block.data('type');
        const itemId = $(this).val();
        const pricingTypeSelect = block.find('.pricing-type-select');

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

        if (!itemId) return;

        $.ajax({
            url: "{{ route('dashboard.invoices.fetch-pricing-types') }}",
            method: 'GET',
            success: function(response) {
                response.pricingTypes.forEach(pricingType => {
                    pricingTypeSelect.append(`<option value="${pricingType.id}">${pricingType.name}</option>`);
                });
                if (itemType === 'track') {
                    const trackTypeSelect = block.find('.track-type-select');
                    trackTypeSelect.empty().append('<option value="">{{ __('dashboard.Select Track Type') }}</option>');
                    $.ajax({
                        url: "{{ route('dashboard.invoices.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);
                        }
                    });
                }
            },
            error: function(xhr) {
                console.error('Error fetching pricing types:', xhr);
            }
        });
        updateTotals();
    });

    // Handle pricing type change
    $(document).on('change', '.pricing-type-select', function() {
        const block = $(this).closest('.item-block');
        const itemType = block.data('type');
        const itemId = block.find('.item-select').val();
        const pricingTypeId = $(this).val();
        const pricingOptionSelect = block.find('.pricing-option-select');

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

        if (!itemId || !pricingTypeId) return;

        if (itemType === 'track') {
            const trackTypeId = block.find('.track-type-select').val();
            if (!trackTypeId) return;
            $.ajax({
                url: "{{ route('dashboard.invoices.fetch-price') }}",
                method: 'GET',
                data: {
                    item_type: itemType,
                    item_id: itemId,
                    pricing_type_id: pricingTypeId,
                    track_type_id: trackTypeId
                },
                success: function(response) {
                    response.pricingOptions.forEach(option => {
                        pricingOptionSelect.append(`<option value="${option.id}" data-price="${option.price}" data-levels="${option.levels_number}">${option.levels_number} Levels - ${option.price}</option>`);
                    });
                },
                error: function(xhr) {
                    console.error('Error fetching track pricing options:', xhr);
                }
            });
        } else if (itemType === 'item') {
            $.ajax({
                url: "{{ route('dashboard.invoices.fetch-price') }}",
                method: 'GET',
                data: {
                    item_type: itemType,
                    item_id: itemId,
                    pricing_type_id: pricingTypeId
                },
                success: function(response) {
                    response.pricingOptions.forEach(option => {
                        pricingOptionSelect.append(`<option value="${option.id}" data-price="${option.price}">${option.pricing_type} - ${option.price}</option>`);
                    });
                },
                error: function(xhr) {
                    console.error('Error fetching item pricing options:', xhr);
                }
            });
        }
    });

    // Handle track type change
    $(document).on('change', '.track-type-select', function() {
        const block = $(this).closest('.item-block');
        const itemId = block.find('.item-select').val();
        const pricingTypeId = block.find('.pricing-type-select').val();
        const trackTypeId = $(this).val();
        const pricingOptionSelect = block.find('.pricing-option-select');

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

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

        $.ajax({
            url: "{{ route('dashboard.invoices.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 => {
                    pricingOptionSelect.append(`<option value="${option.id}" data-price="${option.price}" data-levels="${option.levels_number}">${option.levels_number} Levels - ${option.price}</option>`);
                });
            },
            error: function(xhr) {
                console.error('Error fetching track pricing options:', xhr);
            }
        });
    });

    // Handle pricing option selection
    $(document).on('change', '.pricing-option-select', function() {
        const block = $(this).closest('.item-block');
        const itemType = block.data('type');
        const selectedOption = $(this).find(':selected');
        const price = selectedOption.data('price') || 0;
        const levels = selectedOption.data('levels') || 1;
        block.find('.price').val(price);
        if (itemType === 'track') {
            block.find('.quantity').val(levels);
        }
        updateTotals();
    });

    // Initialize existing rows
    $('.item-block').each(function() {
        const block = $(this);
        const itemType = block.data('type');
        if (itemType === 'track') {
            populateTrackCategories(block);
            if (block.find('.category-select').val()) block.find('.category-select').trigger('change');
            if (block.find('.subcategory-select').val()) block.find('.subcategory-select').trigger('change');
        } else if (itemType === 'item') {
            populateItemCategories(block);
            if (block.find('.category-select').val()) block.find('.category-select').trigger('change');
        }
        if (block.find('.item-select').val()) block.find('.item-select').trigger('change');
        if (block.find('.pricing-type-select').val()) block.find('.pricing-type-select').trigger('change');
        if (block.find('.track-type-select').val()) block.find('.track-type-select').trigger('change');
        if (block.find('.pricing-option-select').val()) block.find('.pricing-option-select').trigger('change');
    });

    updateItemNumbers();
    updateTotals();
});
</script>
<style>
    .item-block {
        border: 1px solid #dee2e6;
        padding: 15px;
        border-radius: 5px;
        background-color: #fff;
    }
    .header-row {
        background-color: #f8f9fa;
    }
    .table {
        width: 100%;
        table-layout: auto;
    }
    .table th, .table td {
        text-align: center;
        vertical-align: middle;
        padding: 8px;
    }
    .subtotal {
        font-weight: bold;
        color: #007bff;
    }
    #final-total {
        font-weight: bold;
        color: #28a745;
    }
    #items-container {
        max-width: 100%;
        overflow-x: hidden;
    }
    .not-included {
        font-size: 0.9em;
    }
</style>
@endsection