@extends('layouts.app')

@section('title', 'Edit Sales Order')

@section('content')
<div class="container-fluid pb-5">
    <div class="mb-4">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb small">
                <li class="breadcrumb-item"><a href="{{ route('sales-orders.index') }}">Sales Orders</a></li>
                <li class="breadcrumb-item"><a href="{{ route('sales-orders.show', $salesOrder->id) }}">{{ $salesOrder->order_number }}</a></li>
                <li class="breadcrumb-item active">Edit</li>
            </ol>
        </nav>
        <h2 class="h4 fw-bold">Edit Sales Order: {{ $salesOrder->order_number }}</h2>
    </div>

    <form action="{{ route('sales-orders.update', $salesOrder->id) }}" method="POST" id="so-form" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        <div class="row">
            <!-- Left Column: Main Form -->
            <div class="col-lg-8">
                <!-- Header Section -->
                <div class="card border-0 shadow-sm rounded-4 p-4 mb-4">
                    <div class="row g-4">
                        <div class="col-md-12">
                            <label class="form-label fw-bold small text-muted text-uppercase">Customer Name <span class="text-danger">*</span></label>
                            <select name="customer_id" class="form-select rounded-3 border-light bg-light" required>
                                @foreach($customers as $customer)
                                <option value="{{ $customer->id }}" {{ $salesOrder->customer_id == $customer->id ? 'selected' : '' }}>{{ $customer->display_name ?: $customer->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-bold small text-muted text-uppercase">Sales Order# <span class="text-danger">*</span></label>
                            <input type="text" name="order_number" class="form-control rounded-3 border-light bg-light" value="{{ $salesOrder->order_number }}" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold small text-muted text-uppercase">Reference#</label>
                            <input type="text" name="reference_number" class="form-control rounded-3 border-light bg-light" value="{{ $salesOrder->reference_number }}">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-bold small text-muted text-uppercase">Sales Order Date <span class="text-danger">*</span></label>
                            <input type="date" name="order_date" class="form-control rounded-3 border-light bg-light" value="{{ $salesOrder->order_date }}" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold small text-muted text-uppercase">Expected Shipment Date</label>
                            <input type="date" name="expected_shipment_date" class="form-control rounded-3 border-light bg-light" value="{{ $salesOrder->expected_shipment_date }}">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-bold small text-muted text-uppercase">Payment Terms</label>
                            <select name="payment_terms" class="form-select rounded-3 border-light bg-light">
                                <option value="Due on Receipt" {{ $salesOrder->payment_terms == 'Due on Receipt' ? 'selected' : '' }}>Due on Receipt</option>
                                <option value="Net 15" {{ $salesOrder->payment_terms == 'Net 15' ? 'selected' : '' }}>Net 15</option>
                                <option value="Net 30" {{ $salesOrder->payment_terms == 'Net 30' ? 'selected' : '' }}>Net 30</option>
                                <option value="Net 45" {{ $salesOrder->payment_terms == 'Net 45' ? 'selected' : '' }}>Net 45</option>
                                <option value="Net 60" {{ $salesOrder->payment_terms == 'Net 60' ? 'selected' : '' }}>Net 60</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold small text-muted text-uppercase">Delivery Method</label>
                            <select name="delivery_method" class="form-select rounded-3 border-light bg-light">
                                <option value="">Select Method</option>
                                <option value="Direct Delivery" {{ $salesOrder->delivery_method == 'Direct Delivery' ? 'selected' : '' }}>Direct Delivery</option>
                                <option value="Courier" {{ $salesOrder->delivery_method == 'Courier' ? 'selected' : '' }}>Courier</option>
                                <option value="Shipping Agent" {{ $salesOrder->delivery_method == 'Shipping Agent' ? 'selected' : '' }}>Shipping Agent</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold small text-muted text-uppercase">Salesperson</label>
                            <select name="salesperson" class="form-select rounded-3 border-light bg-light">
                                <option value="">Select Salesperson</option>
                                <option value="John Doe" {{ $salesOrder->salesperson == 'John Doe' ? 'selected' : '' }}>John Doe</option>
                                <option value="Jane Smith" {{ $salesOrder->salesperson == 'Jane Smith' ? 'selected' : '' }}>Jane Smith</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Items Table Section -->
                <div class="card border-0 shadow-sm rounded-4 overflow-hidden mb-4">
                    <div class="card-header bg-light border-0 py-3 d-flex justify-content-between align-items-center">
                        <h6 class="mb-0 fw-bold">Item Details</h6>
                        <span class="text-muted small">Prices are inclusive of Tax</span>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-borderless align-middle mb-0" id="items-table">
                            <thead class="bg-light-subtle small fw-bold text-muted text-uppercase">
                                <tr>
                                    <th class="ps-4" style="width: 5%;"></th>
                                    <th style="width: 45%;">Item Details</th>
                                    <th style="width: 15%;">Quantity</th>
                                    <th style="width: 15%;">Rate</th>
                                    <th style="width: 15%;">Amount</th>
                                    <th class="pe-4 text-end" style="width: 5%;"></th>
                                </tr>
                            </thead>
                            <tbody class="sortable">
                                @foreach($salesOrder->items as $index => $soItem)
                                <tr class="item-row border-bottom">
                                    <td class="ps-3 text-muted cursor-move drag-handle">
                                        <i class="fas fa-grip-vertical"></i>
                                    </td>
                                    <td>
                                        <input type="text" name="items[{{ $index }}][name]" class="form-control border-0 bg-transparent fw-bold" value="{{ $soItem->name }}" required>
                                        <input type="hidden" name="items[{{ $index }}][item_id]" class="item-id-input" value="{{ $soItem->item_id }}">
                                        <textarea name="items[{{ $index }}][description]" class="form-control border-0 bg-transparent small text-muted p-0" rows="1">{{ $soItem->description }}</textarea>
                                    </td>
                                    <td>
                                        <input type="number" name="items[{{ $index }}][quantity]" class="form-control border-0 bg-transparent qty" value="{{ number_format($soItem->quantity, 2, '.', '') }}" step="1" min="1" required>
                                    </td>
                                    <td>
                                        <input type="number" name="items[{{ $index }}][rate]" class="form-control border-0 bg-transparent rate" value="{{ number_format($soItem->rate, 2, '.', '') }}" step="0.01" required>
                                    </td>
                                    <td>
                                        <span class="fw-bold amount-text">{{ formatCurrency($soItem->amount) }}</span>
                                        <input type="hidden" name="items[{{ $index }}][amount]" class="amount-hidden" value="{{ $soItem->amount }}">
                                    </td>
                                    <td class="pe-4 text-end">
                                        <button type="button" class="btn btn-link text-danger remove-row p-0"><i class="fas fa-minus-circle"></i></button>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="p-3 bg-light-subtle">
                        <button type="button" class="btn btn-outline-primary btn-sm rounded-pill px-3" id="add-item">
                            <i class="fas fa-plus me-1"></i> Add another line
                        </button>
                    </div>
                </div>

                <!-- Notes & Tags Section -->
                <div class="row g-4 mb-4">
                    <div class="col-md-6">
                        <div class="card border-0 shadow-sm rounded-4 p-4 h-100">
                            <label class="form-label fw-bold small text-muted text-uppercase">Customer Notes</label>
                            <textarea name="notes" class="form-control rounded-3 border-light bg-light" rows="4">{{ $salesOrder->notes }}</textarea>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card border-0 shadow-sm rounded-4 p-4 h-100">
                            <label class="form-label fw-bold small text-muted text-uppercase">Reporting Tags</label>
                            <select name="tags[]" class="form-select rounded-3 border-light bg-light" multiple>
                                <option value="B2B" {{ is_array($salesOrder->tags) && in_array('B2B', $salesOrder->tags) ? 'selected' : '' }}>B2B</option>
                                <option value="Retail" {{ is_array($salesOrder->tags) && in_array('Retail', $salesOrder->tags) ? 'selected' : '' }}>Retail</option>
                                <option value="Urgent" {{ is_array($salesOrder->tags) && in_array('Urgent', $salesOrder->tags) ? 'selected' : '' }}>Urgent</option>
                                <option value="Export" {{ is_array($salesOrder->tags) && in_array('Export', $salesOrder->tags) ? 'selected' : '' }}>Export</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Terms & Attachments -->
                <div class="row g-4">
                    <div class="col-md-6">
                        <div class="card border-0 shadow-sm rounded-4 p-4">
                            <label class="form-label fw-bold small text-muted text-uppercase">Terms & Conditions</label>
                            <textarea name="terms" class="form-control rounded-3 border-light bg-light" rows="4">{{ $salesOrder->terms }}</textarea>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card border-0 shadow-sm rounded-4 p-4">
                            <label class="form-label fw-bold small text-muted text-uppercase">Attachments</label>
                            @if($salesOrder->attachments->count() > 0)
                            <div class="mb-3 small">
                                <h6 class="small fw-bold text-muted mb-2">Existing Attachments:</h6>
                                <div class="list-group list-group-flush">
                                    @foreach($salesOrder->attachments as $attachment)
                                    <div class="list-group-item px-0 py-1 d-flex justify-content-between align-items-center bg-transparent border-0">
                                        <span><i class="fas fa-paperclip me-2"></i>{{ $attachment->file_name }}</span>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                            @endif
                            <div class="upload-zone border-2 border-dashed border-light rounded-4 p-3 text-center bg-light">
                                <input type="file" name="attachments[]" class="form-control d-none" id="file-upload" multiple>
                                <label for="file-upload" class="cursor-pointer mb-0">
                                    <i class="fas fa-cloud-upload-alt fa-2x text-primary mb-2"></i>
                                    <p class="mb-0 small fw-bold">Click to upload new files</p>
                                </label>
                            </div>
                            <div id="file-list" class="mt-2 small"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column: Summary Panel -->
            <div class="col-lg-4">
                <div class="card border-0 shadow-sm rounded-4 p-4 sticky-top" style="top: 2rem;">
                    <h5 class="fw-bold mb-4">Summary</h5>
                    
                    <div class="d-grid gap-3 mb-4">
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="text-muted small">Subtotal</span>
                            <span class="fw-bold" id="label-subtotal">{{ formatCurrency($salesOrder->subtotal) }}</span>
                            <input type="hidden" name="subtotal" id="input-subtotal" value="{{ $salesOrder->subtotal }}">
                        </div>

                        <div class="discount-section">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <span class="text-muted small">Discount</span>
                                <div class="input-group input-group-sm w-50">
                                    <input type="number" name="discount_value" id="discount-input" class="form-control text-end" value="{{ $salesOrder->discount_total }}" step="0.01">
                                    <select name="discount_type" id="discount-type" class="form-select form-select-sm" style="max-width: 60px;">
                                        <option value="fixed">{{ getCurrencySymbol() }}</option>
                                        <option value="percent">%</option>
                                    </select>
                                </div>
                            </div>
                            <input type="hidden" name="discount_total" id="input-discount-total" value="{{ $salesOrder->discount_total }}">
                        </div>

                        <div class="d-flex justify-content-between align-items-center">
                            <span class="text-muted small">TDS</span>
                            <div class="input-group input-group-sm w-50">
                                <input type="number" name="tds" id="input-tds" class="form-control text-end" value="{{ $salesOrder->tds }}" step="0.01">
                                <span class="input-group-text">{{ getCurrencySymbol() }}</span>
                            </div>
                        </div>

                        <div class="d-flex justify-content-between align-items-center">
                            <span class="text-muted small">TCS</span>
                            <div class="input-group input-group-sm w-50">
                                <input type="number" name="tcs" id="input-tcs" class="form-control text-end" value="{{ $salesOrder->tcs }}" step="0.01">
                                <span class="input-group-text">{{ getCurrencySymbol() }}</span>
                            </div>
                        </div>

                        <div class="d-flex justify-content-between align-items-center">
                            <span class="text-muted small">Adjustment</span>
                            <div class="input-group input-group-sm w-50">
                                <input type="number" name="adjustment" id="input-adjustment" class="form-control text-end" value="{{ $salesOrder->adjustment }}" step="0.01">
                                <span class="input-group-text">{{ getCurrencySymbol() }}</span>
                            </div>
                        </div>

                        <hr class="my-0">

                        <div class="d-flex justify-content-between align-items-center bg-primary-subtle p-3 rounded-3">
                            <h5 class="fw-bold mb-0">Total</h5>
                            <h4 class="fw-bold mb-0 text-primary" id="label-total">{{ formatCurrency($salesOrder->total) }}</h4>
                            <input type="hidden" name="total" id="input-total" value="{{ $salesOrder->total }}">
                        </div>
                    </div>

                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary rounded-pill py-3 fw-bold shadow">Update Order</button>
                        <a href="{{ route('sales-orders.show', $salesOrder->id) }}" class="btn btn-link link-muted small text-decoration-none text-center">Cancel</a>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    let rowCount = {{ count($salesOrder->items) }};

    // Add Row
    document.getElementById('add-item').addEventListener('click', function() {
        const tbody = document.querySelector('#items-table tbody');
        const newRow = `
            <tr class="item-row border-bottom">
                <td class="ps-3 text-muted cursor-move drag-handle">
                    <i class="fas fa-grip-vertical"></i>
                </td>
                <td>
                    <input type="text" name="items[${rowCount}][name]" class="form-control border-0 bg-transparent fw-bold" placeholder="Select or type an item..." required>
                    <input type="hidden" name="items[${rowCount}][item_id]" class="item-id-input">
                    <textarea name="items[${rowCount}][description]" class="form-control border-0 bg-transparent small text-muted p-0" rows="1" placeholder="Add a description..."></textarea>
                </td>
                <td>
                    <input type="number" name="items[${rowCount}][quantity]" class="form-control border-0 bg-transparent qty" value="1.00" step="1" min="1" required>
                </td>
                <td>
                    <input type="number" name="items[${rowCount}][rate]" class="form-control border-0 bg-transparent rate" value="0.00" step="0.01" required>
                </td>
                <td>
                    <span class="fw-bold amount-text">{{ getCurrencySymbol() }}0.00</span>
                    <input type="hidden" name="items[${rowCount}][amount]" class="amount-hidden" value="0">
                </td>
                <td class="pe-4 text-end">
                    <button type="button" class="btn btn-link text-danger remove-row p-0"><i class="fas fa-minus-circle"></i></button>
                </td>
            </tr>
        `;
        tbody.insertAdjacentHTML('beforeend', newRow);
        rowCount++;
    });

    // Remove Row
    document.querySelector('#items-table').addEventListener('click', function(e) {
        if (e.target.closest('.remove-row')) {
            if (document.querySelectorAll('.item-row').length > 1) {
                e.target.closest('tr').remove();
                calculateAll();
            }
        }
    });

    // File list preview
    document.getElementById('file-upload').addEventListener('change', function(e) {
        const fileList = document.getElementById('file-list');
        fileList.innerHTML = '';
        Array.from(this.files).forEach(file => {
            fileList.innerHTML += `<div class="text-muted small"><i class="fas fa-paperclip me-1 text-primary"></i> ${file.name}</div>`;
        });
    });

    // Calculation logic
    document.getElementById('so-form').addEventListener('input', calculateAll);
    document.getElementById('so-form').addEventListener('change', calculateAll);

    function calculateAll() {
        let subtotal = 0;

        // Calculate Rows
        document.querySelectorAll('.item-row').forEach(row => {
            const qty = parseFloat(row.querySelector('.qty').value) || 0;
            const rate = parseFloat(row.querySelector('.rate').value) || 0;
            const amount = qty * rate;

            const currencySymbol = '{{ getCurrencySymbol() }}';
            row.querySelector('.amount-hidden').value = amount.toFixed(2);
            subtotal += amount;
        });

        // Summary Calculations
        const discountInput = parseFloat(document.getElementById('discount-input').value) || 0;
        const discountType = document.getElementById('discount-type').value;
        let discountTotal = 0;

        if (discountType === 'percent') {
            discountTotal = (subtotal * discountInput) / 100;
        } else {
            discountTotal = discountInput;
        }

        const tds = parseFloat(document.getElementById('input-tds').value) || 0;
        const tcs = parseFloat(document.getElementById('input-tcs').value) || 0;
        const adjustment = parseFloat(document.getElementById('input-adjustment').value) || 0;

        const total = subtotal - discountTotal + tds - tcs + adjustment;

        // Update Labels
        const currencySymbol = '{{ getCurrencySymbol() }}';
        document.getElementById('label-subtotal').innerText = currencySymbol + subtotal.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
        document.getElementById('input-subtotal').value = subtotal.toFixed(2);
        
        document.getElementById('input-discount-total').value = discountTotal.toFixed(2);
        
        document.getElementById('label-total').innerText = currencySymbol + total.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
        document.getElementById('input-total').value = total.toFixed(2);
    }
    
    // Initial calculation
    calculateAll();
});
</script>

<style>
.bg-light-subtle { background-color: #f8f9fa; }
.cursor-move { cursor: move; }
.upload-zone { transition: 0.3s; border-style: dashed !important; }
.upload-zone:hover { border-color: #0d6efd !important; background-color: #f1f8ff !important; }
.cursor-pointer { cursor: pointer; }
.bg-primary-subtle { background-color: rgba(13, 110, 253, 0.1) !important; }
.form-control:focus, .form-select:focus { box-shadow: none; border-color: #0d6efd !important; }
.link-muted { color: #6c757d; }
.link-muted:hover { color: #495057; }
</style>
@endsection