@extends('layouts.app')

@section('title', 'New Delivery Challan')

@push('css')
<style>
    .sticky-summary {
        position: sticky;
        top: 20px;
    }
    .form-section-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #0d6efd;
        border-bottom: 2px solid #eef2f7;
        padding-bottom: 10px;
        margin-bottom: 20px;
    }
    .calculation-summary-card {
        background-color: #f8f9fa;
        border: 1px solid #eef2f7;
    }
    .item-table th {
        background-color: #f8f9fa;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.5px;
        color: #6c757d;
    }
</style>
@endpush

@section('content')
<div class="row align-items-center mb-4">
    <div class="col">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-1">
                <li class="breadcrumb-item"><a href="{{ route('delivery-challans.index') }}">Delivery Challans</a></li>
                <li class="breadcrumb-item active" aria-current="page">New Delivery Challan</li>
            </ol>
        </nav>
        <h2 class="h4 mb-0">New Delivery Challan</h2>
    </div>
</div>

<form action="{{ route('delivery-challans.store') }}" method="POST" id="delivery-challan-form">
    @csrf
    <div class="row">
        <!-- Left Column: Form Details -->
        <div class="col-lg-8">
            <div class="card stat-card border-0 mb-4">
                <div class="card-body p-4">
                    <!-- Section 1: Customer Details -->
                    <div class="form-section-title">
                        <i class="fas fa-user-circle me-2"></i> Basic Details
                    </div>
                    <div class="row mb-4">
                        <div class="col-md-6 mb-3">
                            <label for="customer_id" class="form-label text-muted small fw-bold">Customer Name *</label>
                            <select name="customer_id" id="customer_id" class="form-select @error('customer_id') is-invalid @enderror" required>
                                <option value="">Select Customer</option>
                                @foreach($customers as $customer)
                                    <option value="{{ $customer->id }}" {{ old('customer_id') == $customer->id ? 'selected' : '' }}>{{ $customer->name }}</option>
                                @endforeach
                            </select>
                            @error('customer_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="challan_number" class="form-label text-muted small fw-bold">Challan Number *</label>
                            <input type="text" name="challan_number" id="challan_number" class="form-control @error('challan_number') is-invalid @enderror" value="{{ old('challan_number', $challanNumber) }}" required>
                            @error('challan_number') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="date" class="form-label text-muted small fw-bold">Date *</label>
                            <input type="date" name="date" id="date" class="form-control @error('date') is-invalid @enderror" value="{{ old('date', date('Y-m-d')) }}" required>
                            @error('date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <!-- Section 2: Item Table -->
                    <div class="form-section-title d-flex justify-content-between align-items-center">
                        <span><i class="fas fa-list me-2"></i> Item Details</span>
                        <button type="button" class="btn btn-outline-primary btn-sm" id="add-row">
                            <i class="fas fa-plus me-1"></i> Add Item
                        </button>
                    </div>
                    <div class="table-responsive">
                        <table class="table item-table align-middle" id="items-table">
                            <thead>
                                <tr>
                                    <th style="width: 45%;">Item Name</th>
                                    <th style="width: 15%; text-align: center;">Qty</th>
                                    <th style="width: 20%; text-align: right;">Rate</th>
                                    <th style="width: 20%; text-align: right;">Amount</th>
                                    <th style="width: 50px;"></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="item-row">
                                    <td>
                                        <select name="items[0][item_id]" class="form-select item-selector" required>
                                            <option value="">Select or type item</option>
                                            @foreach($items as $item)
                                                <option value="{{ $item->id }}" data-price="{{ $item->sales_price }}">{{ $item->name }}</option>
                                            @endforeach
                                        </select>
                                        <input type="hidden" name="items[0][name]" class="item-name-input">
                                    </td>
                                    <td><input type="number" name="items[0][quantity]" class="form-control qty-input text-center" step="0.01" min="0.01" value="1" required></td>
                                    <td><input type="number" name="items[0][rate]" class="form-control rate-input text-end" step="0.01" min="0" value="0.00" required></td>
                                    <td><input type="text" name="items[0][amount]" class="form-control amount-input bg-light text-end" readonly value="0.00"></td>
                                    <td class="text-center">
                                        <button type="button" class="btn btn-link text-danger p-0 remove-row" style="visibility: hidden;"><i class="fas fa-trash"></i></button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- Section 3: Notes -->
                    <div class="row mt-4 pt-4 border-top">
                        <div class="col-md-6 mb-3">
                            <label for="customer_notes" class="form-label text-muted small fw-bold">Customer Notes</label>
                            <textarea name="customer_notes" id="customer_notes" class="form-control" rows="3" placeholder="Notes that will appear on the challan"></textarea>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="terms_conditions" class="form-label text-muted small fw-bold">Terms & Conditions</label>
                            <textarea name="terms_conditions" id="terms_conditions" class="form-control" rows="3" placeholder="Terms and conditions for this delivery"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="mt-4 mb-5">
                <button type="submit" name="status" value="open" class="btn btn-primary px-4 me-2">Save as Open</button>
                <button type="submit" name="status" value="draft" class="btn btn-outline-secondary px-4 me-2">Save as Draft</button>
                <a href="{{ route('delivery-challans.index') }}" class="btn btn-link text-muted px-4">Cancel</a>
            </div>
        </div>

        <!-- Right Column: Calculation Summary (Sticky) -->
        <div class="col-lg-4">
            <div class="sticky-summary">
                <div class="card stat-card border-0 calculation-summary-card shadow-sm">
                    <div class="card-body p-4">
                        <h5 class="fw-bold mb-4">Summary</h5>
                        
                        <div class="d-flex justify-content-between mb-3">
                            <span class="text-muted">Subtotal</span>
                            <span class="fw-bold" id="sub-total-display">{{ formatCurrency(0) }}</span>
                            <input type="hidden" name="subtotal" id="subtotal_input" value="0">
                        </div>

                        <div class="mb-3">
                            <label for="tax_selector" class="form-label text-muted small fw-bold">Tax</label>
                            <select id="tax_selector" class="form-select form-select-sm">
                                <option value="0" data-rate="0">No Tax (0%)</option>
                                @foreach($taxes as $tax)
                                    <option value="{{ $tax->id }}" data-rate="{{ $tax->rate }}">{{ $tax->name }} ({{ $tax->rate }}%)</option>
                                @endforeach
                            </select>
                            <div class="d-flex justify-content-between mt-2 small">
                                <span class="text-muted">Tax Amount</span>
                                <span id="tax-amount-display">{{ formatCurrency(0) }}</span>
                                <input type="hidden" name="tax_amount" id="tax_amount_input" value="0">
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="discount" class="form-label text-muted small fw-bold">Discount ({{ getCurrencySymbol() }})</label>
                            <input type="number" name="discount" id="discount" class="form-control form-control-sm text-end" value="0" step="0.01" min="0">
                        </div>

                        <div class="mb-3">
                            <label for="adjustment" class="form-label text-muted small fw-bold">Adjustment ({{ getCurrencySymbol() }})</label>
                            <input type="number" name="adjustment" id="adjustment" class="form-control form-control-sm text-end" value="0" step="0.01">
                        </div>

                        <hr class="my-4">

                        <div class="d-flex justify-content-between align-items-center mb-0">
                            <span class="h6 fw-bold mb-0">Total ({{ getCurrencySymbol() }})</span>
                            <span class="h4 fw-bold text-primary mb-0" id="total-amount-display">0.00</span>
                            <input type="hidden" name="total_amount" id="total_amount_input" value="0">
                        </div>
                    </div>
                </div>

                <div class="card stat-card border-0 mt-3 bg-light-info">
                    <div class="card-body p-3 small text-center">
                        <i class="fas fa-info-circle me-2"></i> Goods can be marked as delivered once the challan is in <strong>Open</strong> status.
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const tableBody = document.querySelector('#items-table tbody');
    const addRowBtn = document.querySelector('#add-row');
    const subTotalDisplay = document.querySelector('#sub-total-display');
    const subTotalInput = document.querySelector('#subtotal_input');
    const taxSelector = document.querySelector('#tax_selector');
    const taxAmountDisplay = document.querySelector('#tax-amount-display');
    const taxAmountInput = document.querySelector('#tax_amount_input');
    const discountInput = document.querySelector('#discount');
    const adjustmentInput = document.querySelector('#adjustment');
    const totalAmountDisplay = document.querySelector('#total-amount-display');
    const totalAmountInput = document.querySelector('#total_amount_input');
    
    let rowCount = 1;

    const currencySymbol = "{{ getCurrencySymbol() }} ";

    function calculateTotal() {
        let subtotal = 0;
        document.querySelectorAll('.amount-input').forEach(input => {
            subtotal += parseFloat(input.value) || 0;
        });

        const taxRate = parseFloat(taxSelector.options[taxSelector.selectedIndex].getAttribute('data-rate')) || 0;
        const taxAmount = (subtotal * taxRate) / 100;
        const discount = parseFloat(discountInput.value) || 0;
        const adjustment = parseFloat(adjustmentInput.value) || 0;
        
        const total = subtotal + taxAmount - discount + adjustment;

        subTotalDisplay.textContent = currencySymbol + subtotal.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
        subTotalInput.value = subtotal.toFixed(2);
        
        taxAmountDisplay.textContent = currencySymbol + taxAmount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
        taxAmountInput.value = taxAmount.toFixed(2);
        
        totalAmountDisplay.textContent = total.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
        totalAmountInput.value = total.toFixed(2);
    }

    function calculateRowAmount(row) {
        const qty = parseFloat(row.querySelector('.qty-input').value) || 0;
        const rate = parseFloat(row.querySelector('.rate-input').value) || 0;
        const amount = qty * rate;
        row.querySelector('.amount-input').value = amount.toFixed(2);
        calculateTotal();
    }

    addRowBtn.addEventListener('click', () => {
        const row = document.createElement('tr');
        row.className = 'item-row';
        row.innerHTML = `
            <td>
                <select name="items[${rowCount}][item_id]" class="form-select item-selector" required>
                    <option value="">Select or type item</option>
                    @foreach($items as $item)
                        <option value="{{ $item->id }}" data-price="{{ $item->sales_price }}">{{ $item->name }}</option>
                    @endforeach
                </select>
                <input type="hidden" name="items[${rowCount}][name]" class="item-name-input">
            </td>
            <td><input type="number" name="items[${rowCount}][quantity]" class="form-control qty-input text-center" step="0.01" min="0.01" value="1" required></td>
            <td><input type="number" name="items[${rowCount}][rate]" class="form-control rate-input text-end" step="0.01" min="0" value="0.00" required></td>
            <td><input type="text" name="items[${rowCount}][amount]" class="form-control amount-input bg-light text-end" readonly value="0.00"></td>
            <td class="text-center"><button type="button" class="btn btn-link text-danger p-0 remove-row"><i class="fas fa-trash"></i></button></td>
        `;
        tableBody.appendChild(row);
        rowCount++;
        
        if (document.querySelectorAll('.item-row').length > 1) {
            document.querySelector('.remove-row').style.visibility = 'visible';
        }
    });

    tableBody.addEventListener('change', (e) => {
        if (e.target.classList.contains('item-selector')) {
            const row = e.target.closest('tr');
            const selectedOption = e.target.options[e.target.selectedIndex];
            const price = selectedOption.getAttribute('data-price') || 0;
            const name = selectedOption.text;
            
            row.querySelector('.rate-input').value = price;
            row.querySelector('.item-name-input').value = name;
            calculateRowAmount(row);
        }
    });

    tableBody.addEventListener('input', (e) => {
        if (e.target.classList.contains('qty-input') || e.target.classList.contains('rate-input')) {
            calculateRowAmount(e.target.closest('tr'));
        }
    });

    tableBody.addEventListener('click', (e) => {
        if (e.target.closest('.remove-row')) {
            if (document.querySelectorAll('.item-row').length > 1) {
                e.target.closest('tr').remove();
                calculateTotal();
                if (document.querySelectorAll('.item-row').length === 1) {
                    document.querySelector('.remove-row').style.visibility = 'hidden';
                }
            }
        }
    });

    taxSelector.addEventListener('change', calculateTotal);
    discountInput.addEventListener('input', calculateTotal);
    adjustmentInput.addEventListener('input', calculateTotal);
});
</script>
@endpush
@endsection