@extends('layouts.master')

@push('css')
    <link rel="stylesheet" href="{{ asset('css/service-voucher-create.css') }}">
@endpush

@section('content')
    <div class="sv-create-page">
        <!-- Breadcrumb & Header -->
        <div class="az-content-breadcrumb">
            <span>Service Voucher</span>
            <span>Add Service Voucher</span>
        </div>

        <div class="sv-page-header">
            <div class="sv-header-title">
                <div class="sv-header-icon">
                    <i class="fa-solid fa-screwdriver-wrench"></i>
                </div>
                <div class="sv-header-text">
                    <h2>Add New Service Voucher</h2>
                    <div class="sv-subtitle">
                        <span>Record service expenses, vehicle maintenance, and contractor payments</span>
                        <span class="sv-urdu">نیا سروس واؤچر درج کریں</span>
                    </div>
                </div>
            </div>
            <a href="{{ route('service_vouchers.index') }}" class="sv-btn-back">
                <i class="fa-solid fa-arrow-left"></i> Back to Service Vouchers
            </a>
        </div>

        <!-- Main Form Card -->
        <div class="sv-main-card">
            <form id="serviceVoucherForm" method="POST" action="{{ route('service_vouchers.store') }}">
                @csrf

                <!-- Error Messages -->
                @if ($errors->any())
                    <div class="p-3">
                        <div class="alert alert-danger fade show mb-0" role="alert">
                            <strong class="d-flex align-items-center gap-2 mb-2">
                                <i class="fa-solid fa-circle-exclamation"></i> Please fix the following errors:
                            </strong>
                            <ul class="mb-0 ps-3">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                @endif

                <!-- SECTION 1: Master Voucher Details -->
                <div class="sv-section-header">
                    <h6 class="sv-section-title">
                        <i class="fa-solid fa-sliders"></i> Voucher Basic Information
                        <span class="sv-urdu" style="margin-left: auto;">بنیادی واؤچر اور پارٹی کی معلومات</span>
                    </h6>
                </div>

                <div class="sv-section-body">
                    <div class="row">
                        <!-- Voucher Date -->
                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="sv-field-group">
                                <label class="sv-label" for="voucher_date">
                                    <span>Voucher Date <span class="text-danger">*</span></span>
                                    <span class="label-urdu">تاریخ واؤچر</span>
                                </label>
                                <div class="sv-input-icon-wrap">
                                    <i class="fa-regular fa-calendar-days sv-input-icon"></i>
                                    <input type="date" id="voucher_date" name="voucher_date" class="sv-input"
                                        value="{{ date('Y-m-d') }}" required />
                                </div>
                            </div>
                        </div>

                        <!-- Supplier / Purchaser -->
                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="sv-field-group">
                                <label class="sv-label" for="partySelect">
                                    <span>Party (Supplier / Purchaser) <span class="text-danger">*</span></span>
                                    <span class="label-urdu">پارٹی / کھاتہ</span>
                                </label>
                                <select id="partySelect" class="form-control select2" required>
                                    <option value="">- Select Party -</option>
                                    @foreach ($parties as $party)
                                        <option value="{{ $party['type'] }}|{{ $party['id'] }}"
                                            {{ isset($voucher) && $voucher->party_type === $party['type'] && $voucher->party_id == $party['id'] ? 'selected' : '' }}>
                                            [{{ $party['type'] }}] {{ $party['display_name'] }}
                                        </option>
                                    @endforeach
                                </select>

                                <!-- Hidden fields for party type and id -->
                                <input type="hidden" name="party_type" id="partyType"
                                    value="{{ isset($voucher) ? $voucher->party_type : '' }}">
                                <input type="hidden" name="party_id" id="partyId"
                                    value="{{ isset($voucher) ? $voucher->party_id : '' }}">
                            </div>
                        </div>

                        <!-- Truck No -->
                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="sv-field-group">
                                <label class="sv-label" for="truck_no">
                                    <span>Truck / Vehicle No.</span>
                                    <span class="label-urdu">ٹرک نمبر</span>
                                </label>
                                <div class="sv-input-icon-wrap">
                                    <i class="fa-solid fa-truck sv-input-icon"></i>
                                    <input type="text" id="truck_no" name="truck_no" class="sv-input"
                                        placeholder="e.g. LES-1249" />
                                </div>
                            </div>
                        </div>

                        <!-- Bill No -->
                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="sv-field-group">
                                <label class="sv-label" for="bill_no">
                                    <span>Bill / Invoice No.</span>
                                    <span class="label-urdu">بل نمبر</span>
                                </label>
                                <div class="sv-input-icon-wrap">
                                    <i class="fa-solid fa-file-invoice sv-input-icon"></i>
                                    <input type="text" id="bill_no" name="bill_no" class="sv-input"
                                        placeholder="e.g. INV-90412" />
                                </div>
                            </div>
                        </div>

                        <!-- Description -->
                        <div class="col-12">
                            <div class="sv-field-group mb-0">
                                <label class="sv-label" for="description">
                                    <span>General Description / Remarks</span>
                                    <span class="label-urdu">تفصیلات / ریمارکس</span>
                                </label>
                                <textarea id="description" name="description" class="sv-textarea"
                                    placeholder="Enter any additional notes, vehicle remarks, or service details..."></textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- SECTION 2: Service Details Table -->
                <div class="sv-section-header">
                    <h6 class="sv-section-title">
                        <i class="fa-solid fa-table-list"></i> Service Line Items
                        <span class="sv-urdu" style="margin-left: auto;">سروس اور اخراجات کی تفصیلات</span>
                    </h6>
                </div>

                <div class="sv-section-body">
                    <div class="sv-table-card">
                        <div class="table-responsive">
                            <table class="table sv-table align-middle" id="detailsTable">
                                <thead>
                                    <tr>
                                        <th style="min-width: 260px;">
                                            <span>Expense / Control Account</span>
                                            <span class="text-danger">*</span>
                                        </th>
                                        <th style="width: 130px;" class="text-end">
                                            <span>Qty</span>
                                            <span class="text-danger">*</span>
                                        </th>
                                        <th style="width: 150px;">
                                            <span>Unit</span>
                                            <span class="text-danger">*</span>
                                        </th>
                                        <th style="width: 140px;" class="text-end">
                                            <span>Rate / Price</span>
                                            <span class="text-danger">*</span>
                                        </th>
                                        <th style="width: 160px;" class="text-end">
                                            <span>Amount (رقم)</span>
                                        </th>
                                        <th style="min-width: 200px;">
                                            <span>Narration (تفصیل)</span>
                                        </th>
                                        <th class="text-center" style="width: 70px;">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <select name="details[0][control_account_id]" class="form-control select2 select-account" required>
                                                <option value="">- Select Account -</option>
                                                @foreach ($accounts as $acc)
                                                    <option value="{{ $acc->id_control_account }}">{{ $acc->control_account_name }}</option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td>
                                            <input type="number" step="0.01" min="0.01" name="details[0][qty]"
                                                class="form-control qty font-weight-bold text-end" placeholder="1.00" required>
                                        </td>
                                        <td>
                                            <select name="details[0][unit]" class="form-control select2 select-unit" required>
                                                <option value="">- Select Unit -</option>
                                                @foreach ($units as $unit)
                                                    <option value="{{ $unit->measurement_unit_name }}">{{ $unit->measurement_unit_name }}</option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td>
                                            <input type="number" step="0.01" min="0" name="details[0][price]"
                                                class="form-control price font-weight-bold text-end" placeholder="0.00" required>
                                        </td>
                                        <td>
                                            <input type="number" step="0.01" class="form-control amount font-weight-bold text-end"
                                                readonly placeholder="0.00" style="color: #00879c; background-color: #f8fafc;">
                                        </td>
                                        <td>
                                            <input type="text" name="details[0][narration]" class="form-control narration"
                                                placeholder="Service notes">
                                        </td>
                                        <td class="text-center">
                                            <button type="button" class="sv-btn-remove removeRow" style="display: none;" title="Remove row">
                                                <i class="fa-solid fa-trash-can"></i>
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <!-- Add Row & Grand Total Bar -->
                        <div class="p-3 bg-light border-top d-flex align-items-center justify-content-between flex-wrap gap-3">
                            <button type="button" id="addRow" class="sv-btn-add-row">
                                <i class="fa-solid fa-plus-circle"></i> Add Service Item
                            </button>

                            <div class="sv-total-card">
                                <div class="title">
                                    <i class="fa-solid fa-coins"></i>
                                    <span>Total Amount (کُل رقم):</span>
                                </div>
                                <div class="amount">
                                    <small style="font-size: 16px; opacity: 0.85;">Rs.</small>
                                    <span id="grandTotalDisplay">0.00</span>
                                    <input type="hidden" id="grandTotal" name="grand_total" value="0.00">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- SECTION 3: Action Footer -->
                <div class="sv-form-footer">
                    <div>
                        <span class="text-muted small">Make sure party and service rates are verified before saving.</span>
                    </div>
                    <div class="sv-footer-actions">
                        <a href="{{ route('service_vouchers.index') }}" class="sv-btn-cancel">
                            <i class="fa-solid fa-xmark"></i> Cancel
                        </a>
                        <button type="submit" class="sv-btn-save">
                            <i class="fa-solid fa-floppy-disk"></i> Save Service Voucher
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            // Initialize Select2
            $('.select2').select2({
                width: '100%'
            });

            // Party Select Listener
            $('#partySelect').on('change', function() {
                const parts = ($(this).val() || '').split('|');
                $('#partyType').val(parts[0] ?? '');
                $('#partyId').val(parts[1] ?? '');
            });

            // Calculate Row Amount
            function calculateRowAmount($row) {
                const qty = parseFloat($row.find('.qty').val()) || 0;
                const price = parseFloat($row.find('.price').val()) || 0;
                const amount = (qty * price).toFixed(2);
                $row.find('.amount').val(amount);
                calculateGrandTotal();
            }

            // Calculate Grand Total
            function calculateGrandTotal() {
                let total = 0;
                $('.amount').each(function() {
                    total += parseFloat($(this).val()) || 0;
                });
                $('#grandTotal').val(total.toFixed(2));
                $('#grandTotalDisplay').text(total.toLocaleString('en-US', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                }));
            }

            // Reindex table rows
            function reindexRows() {
                const rows = $('#detailsTable tbody tr');
                rows.each(function(index) {
                    $(this).find('.select-account').attr('name', `details[${index}][control_account_id]`);
                    $(this).find('.qty').attr('name', `details[${index}][qty]`);
                    $(this).find('.select-unit').attr('name', `details[${index}][unit]`);
                    $(this).find('.price').attr('name', `details[${index}][price]`);
                    $(this).find('.narration').attr('name', `details[${index}][narration]`);

                    if (rows.length === 1) {
                        $(this).find('.removeRow').hide();
                    } else {
                        $(this).find('.removeRow').show();
                    }
                });
            }

            // ADD ROW
            $('#addRow').on('click', function() {
                const rowCount = $('#detailsTable tbody tr').length;
                const newRow = `
                    <tr>
                        <td>
                            <select name="details[${rowCount}][control_account_id]" class="form-control select2 select-account" required>
                                <option value="">- Select Account -</option>
                                @foreach ($accounts as $acc)
                                    <option value="{{ $acc->id_control_account }}">{{ $acc->control_account_name }}</option>
                                @endforeach
                            </select>
                        </td>
                        <td>
                            <input type="number" step="0.01" min="0.01" name="details[${rowCount}][qty]"
                                class="form-control qty font-weight-bold text-end" placeholder="1.00" required>
                        </td>
                        <td>
                            <select name="details[${rowCount}][unit]" class="form-control select2 select-unit" required>
                                <option value="">- Select Unit -</option>
                                @foreach ($units as $unit)
                                    <option value="{{ $unit->measurement_unit_name }}">{{ $unit->measurement_unit_name }}</option>
                                @endforeach
                            </select>
                        </td>
                        <td>
                            <input type="number" step="0.01" min="0" name="details[${rowCount}][price]"
                                class="form-control price font-weight-bold text-end" placeholder="0.00" required>
                        </td>
                        <td>
                            <input type="number" step="0.01" class="form-control amount font-weight-bold text-end"
                                readonly placeholder="0.00" style="color: #00879c; background-color: #f8fafc;">
                        </td>
                        <td>
                            <input type="text" name="details[${rowCount}][narration]" class="form-control narration"
                                placeholder="Service notes">
                        </td>
                        <td class="text-center">
                            <button type="button" class="sv-btn-remove removeRow" title="Remove row">
                                <i class="fa-solid fa-trash-can"></i>
                            </button>
                        </td>
                    </tr>
                `;

                const $appended = $(newRow).appendTo('#detailsTable tbody');
                $appended.find('.select2').select2({ width: '100%' });
                reindexRows();
            });

            // REMOVE ROW
            $(document).on('click', '.removeRow', function() {
                if ($('#detailsTable tbody tr').length > 1) {
                    $(this).closest('tr').remove();
                    reindexRows();
                    calculateGrandTotal();
                }
            });

            // Live calculation on quantity and price input
            $(document).on('input', '.qty, .price', function() {
                calculateRowAmount($(this).closest('tr'));
            });

            // Prevent unwanted enter submit
            $('#serviceVoucherForm').on('keydown', function(e) {
                if (e.key === 'Enter' && e.target.tagName !== 'TEXTAREA') {
                    e.preventDefault();
                    return false;
                }
            });

            // Background Ctrl + S shortcut
            document.addEventListener('keydown', function(e) {
                if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') {
                    e.preventDefault();
                    const form = document.getElementById('serviceVoucherForm');
                    if (form) form.submit();
                }
            });

            // Initial calculation & reindex
            reindexRows();
            calculateGrandTotal();
        });
    </script>
@endpush