@csrf

<div class="excel-tabs" data-tabs-root>
    <div class="excel-tab-head">
        <button type="button" class="excel-tab-btn active" data-tab-target="tab-basic">البيانات الأساسية</button>
        <button type="button" class="excel-tab-btn" data-tab-target="tab-driver">حسابات السائق</button>
        <button type="button" class="excel-tab-btn" data-tab-target="tab-factory">حسابات المصنع</button>
        <button type="button" class="excel-tab-btn" data-tab-target="tab-company">حسابات الشركة والضريبة</button>
        <button type="button" class="excel-tab-btn" data-tab-target="tab-follow">المتابعة والفروقات</button>
    </div>

    <section class="excel-tab-panel active" data-tab-panel="tab-basic">
        <div class="grid grid-2">
            <div class="form-group">
                <label for="driver_id">السائق</label>
                <select id="driver_id" name="driver_id" required>
                    <option value="">اختر السائق</option>
                    @foreach($drivers as $driver)
                        <option
                            value="{{ $driver->id }}"
                            data-payment-type="{{ $driver->payment_type }}"
                            data-payment-value="{{ $driver->payment_value }}"
                            @selected((int)old('driver_id', $trip->driver_id ?? 0) === $driver->id)
                        >
                            {{ $driver->name }}
                            (
                            @if($driver->payment_type === 'per_trip')
                                لكل رحلة
                            @elseif($driver->payment_type === 'percentage')
                                نسبة مئوية
                            @else
                                ثابت
                            @endif
                            )
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="form-group">
                <label for="alternate_driver_name">السائق البديل</label>
                <input id="alternate_driver_name" name="alternate_driver_name" type="text" value="{{ old('alternate_driver_name', $trip->alternate_driver_name ?? '') }}">
            </div>
            <div class="form-group">
                <label for="invoice_date">تاريخ الفاتورة</label>
                <input id="invoice_date" name="invoice_date" type="date" value="{{ old('invoice_date', optional($trip->invoice_date ?? null)->format('Y-m-d')) }}">
            </div>
            <div class="form-group">
                <label for="weekly_date">التاريخ الأسبوعي</label>
                <input id="weekly_date" name="weekly_date" type="date" value="{{ old('weekly_date', optional($trip->weekly_date ?? null)->format('Y-m-d')) }}">
            </div>
            <div class="form-group">
                <label for="supply_order_number">رقم أمر التوريد</label>
                <input id="supply_order_number" name="supply_order_number" type="text" value="{{ old('supply_order_number', $trip->supply_order_number ?? '') }}">
            </div>
            <div class="form-group">
                <label for="tax_invoice_number">رقم الفاتورة الضريبية</label>
                <input id="tax_invoice_number" name="tax_invoice_number" type="text" value="{{ old('tax_invoice_number', $trip->tax_invoice_number ?? '') }}">
            </div>
            <div class="form-group">
                <label for="receipt_number">رقم الإيصال</label>
                <input id="receipt_number" name="receipt_number" type="text" value="{{ old('receipt_number', $trip->receipt_number ?? '') }}">
            </div>
            <div class="form-group">
                <label for="receipt_date">تاريخ الإيصال</label>
                <input id="receipt_date" name="receipt_date" type="date" value="{{ old('receipt_date', optional($trip->receipt_date ?? null)->format('Y-m-d')) }}">
            </div>
            <div class="form-group">
                <label for="company_name">الشركة</label>
                <input id="company_name" name="company_name" type="text" value="{{ old('company_name', $trip->company_name ?? '') }}" required>
            </div>
            <div class="form-group">
                <label for="factory_name">المصنع</label>
                <input id="factory_name" name="factory_name" type="text" value="{{ old('factory_name', $trip->factory_name ?? '') }}">
            </div>
            <div class="form-group">
                <label for="location">المكان</label>
                <input id="location" name="location" type="text" value="{{ old('location', $trip->location ?? '') }}">
            </div>
            <div class="form-group">
                <label for="transport_type">نوع النقل</label>
                <input id="transport_type" name="transport_type" type="text" value="{{ old('transport_type', $trip->transport_type ?? '') }}" required>
            </div>
            <div class="form-group">
                <label for="quantity">الكمية</label>
                <input id="quantity" name="quantity" type="number" step="0.01" min="0" value="{{ old('quantity', $trip->quantity ?? 0) }}" required>
            </div>
            <div class="form-group">
                <label for="price_per_unit">السعر لكل وحدة</label>
                <input id="price_per_unit" name="price_per_unit" type="number" step="0.01" min="0" value="{{ old('price_per_unit', $trip->price_per_unit ?? 0) }}" required>
            </div>
            <div class="form-group">
                <label for="cost_per_unit">تكلفة الوحدة</label>
                <input id="cost_per_unit" name="cost_per_unit" type="number" step="0.01" min="0" value="{{ old('cost_per_unit', $trip->cost_per_unit ?? 0) }}" required>
            </div>
            <div class="form-group">
                <label for="driver_cost">تكلفة السائق (اختياري للثابت)</label>
                <input id="driver_cost" name="driver_cost" type="number" step="0.01" min="0" value="{{ old('driver_cost', $trip->driver_cost ?? '') }}">
            </div>
        </div>
    </section>

    <section class="excel-tab-panel" data-tab-panel="tab-driver">
        <div class="grid grid-2">
            <div class="form-group">
                <label for="driver_payments">مدفوعات السائق</label>
                <input id="driver_payments" name="driver_payments" type="number" step="0.01" min="0" value="{{ old('driver_payments', $trip->driver_payments ?? 0) }}">
            </div>
            <div class="form-group">
                <label for="driver_increases">زيادات السائق</label>
                <input id="driver_increases" name="driver_increases" type="number" step="0.01" min="0" value="{{ old('driver_increases', $trip->driver_increases ?? 0) }}">
            </div>
            <div class="form-group">
                <label for="driver_deductions">خصومات السائق</label>
                <input id="driver_deductions" name="driver_deductions" type="number" step="0.01" min="0" value="{{ old('driver_deductions', $trip->driver_deductions ?? 0) }}">
            </div>
            <div class="form-group">
                <label for="driver_opening_balance">رصيد أول المدة - السائق</label>
                <input id="driver_opening_balance" name="driver_opening_balance" type="number" step="0.01" value="{{ old('driver_opening_balance', $trip->driver_opening_balance ?? 0) }}">
            </div>
            <div class="form-group">
                <label>الرصيد النهائي - السائق (تلقائي)</label>
                <input id="driver_closing_balance_preview" type="text" value="{{ number_format((float)($trip->driver_closing_balance ?? 0), 2) }}" readonly>
            </div>
            <div class="form-group">
                <label for="driver_notes">ملاحظات السائق</label>
                <input id="driver_notes" name="driver_notes" type="text" value="{{ old('driver_notes', $trip->driver_notes ?? '') }}">
            </div>
        </div>
    </section>

    <section class="excel-tab-panel" data-tab-panel="tab-factory">
        <div class="grid grid-2">
            <div class="form-group">
                <label for="factory_transport_count">نقلات أسمنت للمصنع</label>
                <input id="factory_transport_count" name="factory_transport_count" type="number" step="0.01" min="0" value="{{ old('factory_transport_count', $trip->factory_transport_count ?? 0) }}">
            </div>
            <div class="form-group">
                <label for="factory_payments">مدفوعات المصنع</label>
                <input id="factory_payments" name="factory_payments" type="number" step="0.01" min="0" value="{{ old('factory_payments', $trip->factory_payments ?? 0) }}">
            </div>
            <div class="form-group">
                <label for="factory_increases">زيادات المصنع</label>
                <input id="factory_increases" name="factory_increases" type="number" step="0.01" min="0" value="{{ old('factory_increases', $trip->factory_increases ?? 0) }}">
            </div>
            <div class="form-group">
                <label for="factory_deductions">خصومات المصنع</label>
                <input id="factory_deductions" name="factory_deductions" type="number" step="0.01" min="0" value="{{ old('factory_deductions', $trip->factory_deductions ?? 0) }}">
            </div>
            <div class="form-group">
                <label for="factory_opening_balance">رصيد أول المدة - المصنع</label>
                <input id="factory_opening_balance" name="factory_opening_balance" type="number" step="0.01" value="{{ old('factory_opening_balance', $trip->factory_opening_balance ?? 0) }}">
            </div>
            <div class="form-group">
                <label>الرصيد النهائي - المصنع (تلقائي)</label>
                <input id="factory_closing_balance_preview" type="text" value="{{ number_format((float)($trip->factory_closing_balance ?? 0), 2) }}" readonly>
            </div>
            <div class="form-group">
                <label for="factory_notes">ملاحظات المصنع</label>
                <input id="factory_notes" name="factory_notes" type="text" value="{{ old('factory_notes', $trip->factory_notes ?? '') }}">
            </div>
        </div>
    </section>

    <section class="excel-tab-panel" data-tab-panel="tab-company">
        <div class="grid grid-2">
            <div class="form-group">
                <label for="company_payments">مدفوعات الشركة</label>
                <input id="company_payments" name="company_payments" type="number" step="0.01" min="0" value="{{ old('company_payments', $trip->company_payments ?? 0) }}">
            </div>
            <div class="form-group">
                <label for="company_checks_under_collection">شيكات تحت التحصيل</label>
                <input id="company_checks_under_collection" name="company_checks_under_collection" type="number" step="0.01" min="0" value="{{ old('company_checks_under_collection', $trip->company_checks_under_collection ?? 0) }}">
            </div>
            <div class="form-group">
                <label for="company_deductions">خصومات الشركة</label>
                <input id="company_deductions" name="company_deductions" type="number" step="0.01" min="0" value="{{ old('company_deductions', $trip->company_deductions ?? 0) }}">
            </div>
            <div class="form-group">
                <label for="company_increases">زيادات على الشركة</label>
                <input id="company_increases" name="company_increases" type="number" step="0.01" min="0" value="{{ old('company_increases', $trip->company_increases ?? 0) }}">
            </div>
            <div class="form-group">
                <label for="company_opening_balance">رصيد أول المدة - الشركة</label>
                <input id="company_opening_balance" name="company_opening_balance" type="number" step="0.01" value="{{ old('company_opening_balance', $trip->company_opening_balance ?? 0) }}">
            </div>
            <div class="form-group">
                <label for="invoice_type">نوع الفاتورة</label>
                <input id="invoice_type" name="invoice_type" type="text" value="{{ old('invoice_type', $trip->invoice_type ?? '') }}">
            </div>
            <div class="form-group">
                <label for="purchase_invoice_value">قيمة فاتورة الشراء</label>
                <input id="purchase_invoice_value" name="purchase_invoice_value" type="number" step="0.01" min="0" value="{{ old('purchase_invoice_value', $trip->purchase_invoice_value ?? 0) }}">
            </div>
            <div class="form-group">
                <label for="company_notes">ملاحظات الشركة</label>
                <input id="company_notes" name="company_notes" type="text" value="{{ old('company_notes', $trip->company_notes ?? '') }}">
            </div>
        </div>
    </section>

    <section class="excel-tab-panel" data-tab-panel="tab-follow">
        <div class="grid grid-4">
            <div class="stat"><div class="label">ضريبة السعر</div><div class="value" id="calc-tax">0.00</div></div>
            <div class="stat"><div class="label">صافي الإيراد بعد الضريبة</div><div class="value" id="calc-net-revenue">0.00</div></div>
            <div class="stat"><div class="label">صافي الربح بعد الضريبة</div><div class="value" id="calc-net-profit">0.00</div></div>
            <div class="stat"><div class="label">إجمالي 1%</div><div class="value" id="calc-one-percent">0.00</div></div>
            <div class="stat"><div class="label">عمر الفاتورة (يوم)</div><div class="value" id="calc-invoice-age">-</div></div>
            <div class="stat"><div class="label">عمر الإيصال (يوم)</div><div class="value" id="calc-receipt-age">-</div></div>
            <div class="stat"><div class="label">فرق الطوب المصنع</div><div class="value" id="calc-brick-factory">0.00</div></div>
            <div class="stat"><div class="label">فرق الطوب الشركة</div><div class="value" id="calc-brick-company">0.00</div></div>
        </div>
    </section>
</div>

<div class="card" style="margin: 8px 0 0;">
    <strong>معاينة الحسابات المباشرة - مثل الإكسل</strong>
    <div class="grid grid-4" style="margin-top: 12px;">
        <div class="stat"><div class="label">إجمالي الإيراد</div><div class="value" id="calc-revenue">0.00</div></div>
        <div class="stat"><div class="label">إجمالي التكلفة</div><div class="value" id="calc-cost">0.00</div></div>
        <div class="stat"><div class="label">تكلفة السائق</div><div class="value" id="calc-driver-cost">0.00</div></div>
        <div class="stat"><div class="label">الربح</div><div class="value" id="calc-profit">0.00</div></div>
    </div>
</div>

<div class="actions">
    <button class="btn btn-primary" type="submit">{{ $submitText }}</button>
    <a class="btn btn-secondary" href="{{ route('trips.index') }}">إلغاء</a>
</div>

<script>
    (() => {
        const tabRoot = document.querySelector('[data-tabs-root]');
        if (tabRoot) {
            const buttons = tabRoot.querySelectorAll('[data-tab-target]');
            const panels = tabRoot.querySelectorAll('[data-tab-panel]');
            buttons.forEach((btn) => {
                btn.addEventListener('click', () => {
                    const target = btn.getAttribute('data-tab-target');
                    buttons.forEach((b) => b.classList.remove('active'));
                    btn.classList.add('active');
                    panels.forEach((p) => p.classList.toggle('active', p.getAttribute('data-tab-panel') === target));
                });
            });
        }

        const ids = [
            'driver_id', 'quantity', 'price_per_unit', 'cost_per_unit', 'driver_cost',
            'driver_payments', 'driver_increases', 'driver_deductions', 'driver_opening_balance',
            'factory_payments', 'factory_increases', 'factory_deductions', 'factory_opening_balance',
            'company_payments', 'company_checks_under_collection', 'company_deductions', 'company_increases', 'company_opening_balance',
            'invoice_date', 'receipt_date'
        ];

        const get = (id) => document.getElementById(id);
        const fields = Object.fromEntries(ids.map((id) => [id, get(id)]));

        const outputs = {
            revenue: get('calc-revenue'),
            cost: get('calc-cost'),
            driverCost: get('calc-driver-cost'),
            profit: get('calc-profit'),
            tax: get('calc-tax'),
            netRevenue: get('calc-net-revenue'),
            netProfit: get('calc-net-profit'),
            onePercent: get('calc-one-percent'),
            invoiceAge: get('calc-invoice-age'),
            receiptAge: get('calc-receipt-age'),
            brickFactory: get('calc-brick-factory'),
            brickCompany: get('calc-brick-company'),
            driverClosing: get('driver_closing_balance_preview'),
            factoryClosing: get('factory_closing_balance_preview')
        };

        const number = (value) => Number.parseFloat(value || '0') || 0;
        const format = (value) => value.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });

        const daysDiff = (dateValue) => {
            if (!dateValue) return '-';
            const inputDate = new Date(dateValue + 'T00:00:00');
            const today = new Date();
            today.setHours(0, 0, 0, 0);
            const diff = Math.floor((today.getTime() - inputDate.getTime()) / (1000 * 60 * 60 * 24));
            return Number.isFinite(diff) ? String(diff) : '-';
        };

        const recalc = () => {
            const quantity = number(fields.quantity?.value);
            const pricePerUnit = number(fields.price_per_unit?.value);
            const costPerUnit = number(fields.cost_per_unit?.value);
            const selected = fields.driver_id?.options?.[fields.driver_id.selectedIndex];
            const paymentType = selected?.dataset.paymentType || 'per_trip';
            const paymentValue = number(selected?.dataset.paymentValue || 0);

            const totalRevenue = quantity * pricePerUnit;
            const baseCost = quantity * costPerUnit;

            let driverCost = number(fields.driver_cost?.value);
            if (paymentType === 'per_trip') {
                driverCost = paymentValue;
            } else if (paymentType === 'percentage') {
                driverCost = totalRevenue * (paymentValue / 100);
            } else if (paymentType === 'fixed' && driverCost === 0) {
                driverCost = paymentValue;
            }

            const totalCost = baseCost + driverCost;
            const profit = totalRevenue - totalCost;
            const taxAmount = totalRevenue * 0.07 * 0.87719298;
            const netRevenue = totalRevenue - taxAmount;
            const netProfit = netRevenue - totalCost;
            const onePercent = totalRevenue * 0.01 * 0.87719298;

            const driverClosing = number(fields.driver_opening_balance?.value)
                + totalRevenue + number(fields.driver_increases?.value)
                - (number(fields.driver_payments?.value) + number(fields.driver_deductions?.value) + driverCost);

            const factoryClosing = number(fields.factory_opening_balance?.value)
                + totalRevenue + number(fields.factory_increases?.value)
                - (number(fields.factory_payments?.value) + number(fields.factory_deductions?.value));

            const brickFactory = totalRevenue - baseCost;
            const brickCompany = totalRevenue - quantity;

            outputs.revenue.textContent = format(totalRevenue);
            outputs.cost.textContent = format(totalCost);
            outputs.driverCost.textContent = format(driverCost);
            outputs.profit.textContent = format(profit);
            outputs.tax.textContent = format(taxAmount);
            outputs.netRevenue.textContent = format(netRevenue);
            outputs.netProfit.textContent = format(netProfit);
            outputs.onePercent.textContent = format(onePercent);
            outputs.invoiceAge.textContent = daysDiff(fields.invoice_date?.value);
            outputs.receiptAge.textContent = daysDiff(fields.receipt_date?.value);
            outputs.brickFactory.textContent = format(brickFactory);
            outputs.brickCompany.textContent = format(brickCompany);
            outputs.driverClosing.value = format(driverClosing);
            outputs.factoryClosing.value = format(factoryClosing);
        };

        ids.forEach((id) => {
            const el = fields[id];
            if (el) {
                el.addEventListener('input', recalc);
                el.addEventListener('change', recalc);
            }
        });

        recalc();
    })();
</script>