@extends('layouts.app')

@section('title', 'New 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 active">New Sales Order</li>
            </ol>
        </nav>
        <h2 class="h4 fw-bold">New Sales Order</h2>
    </div>

    <form action="{{ route('sales-orders.store') }}" method="POST" id="so-form" enctype="multipart/form-data">
        @csrf
        <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>
                                <option value="">Select Customer</option>
                                @foreach($customers as $customer)
                                <option value="{{ $customer->id }}">{{ $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="{{ $nextNumber }}" 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">
                        </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="{{ date('Y-m-d') }}" 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="{{ date('Y-m-d', strtotime('+3 days')) }}">
                        </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">Due on Receipt</option>
                                <option value="Net 15">Net 15</option>
                                <option value="Net 30">Net 30</option>
                                <option value="Net 45">Net 45</option>
                                <option value="Net 60">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">Direct Delivery</option>
                                <option value="Courier">Courier</option>
                                <option value="Shipping Agent">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">John Doe</option>
                                <option value="Jane Smith">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">
                                <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[0][name]" class="form-control border-0 bg-transparent fw-bold" placeholder="Select or type an item..." required>
                                        <input type="hidden" name="items[0][item_id]" class="item-id-input">
                                        <textarea name="items[0][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[0][quantity]" class="form-control border-0 bg-transparent qty" value="1.00" step="1" min="1" required>
                                    </td>
                                    <td>
                                        <input type="number" name="items[0][rate]" class="form-control border-0 bg-transparent rate" value="0.00" step="0.01" required>
                                    </td>
                                    <td>
                                    <td>
                                        <span class="fw-bold amount-text">{{ getCurrencySymbol() }}0.00</span>
                                        <input type="hidden" name="items[0][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>
                        </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" placeholder="Enter any notes to be displayed in your transaction"></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">B2B</option>
                                <option value="Retail">Retail</option>
                                <option value="Urgent">Urgent</option>
                                <option value="Export">Export</option>
                            </select>
                            <div class="form-text small">Hold Ctrl (Cmd) to select multiple tags.</div>
                        </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" placeholder="Enter terms & conditions"></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>
                            <div class="upload-zone border-2 border-dashed border-light rounded-4 p-4 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 or drag files here to upload</p>
                                    <p class="text-muted small mb-0">Max 10 files, 5MB each</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">{{ getCurrencySymbol() }}0.00</span>
                            <input type="hidden" name="subtotal" id="input-subtotal" value="0">
                        </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="0" 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="0">
                        </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="0" 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="0" 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="0" 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">{{ getCurrencySymbol() }}0.00</h4>
                            <input type="hidden" name="total" id="input-total" value="0">
                        </div>
                    </div>

                    <div class="d-grid gap-2">
                        <button type="submit" name="status" value="open" class="btn btn-primary rounded-pill py-3 fw-bold shadow">Save & Confirm</button>
                        <button type="submit" name="status" value="draft" class="btn btn-light rounded-pill py-2 small">Save as Draft</button>
                        <a href="{{ route('sales-orders.index') }}" 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() {
    const currencySymbol = '{{ getCurrencySymbol() }}';
    let rowCount = 1;

    // 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">${currencySymbol}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"><i class="fas fa-paperclip me-1"></i> ${file.name} (${(file.size / 1024).toFixed(1)} KB)</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;

            row.querySelector('.amount-text').innerText = currencySymbol + amount.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
            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
        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);
    }
});
</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