@extends('layouts.app')

@section('title', 'Create Application (Static UI with Owner Picker)')

@section('content')
    <div class="container-fluid">
        <div class="d-flex align-items-center justify-content-between mb-3">
            <h4 class="mb-0"><i class="bi bi-buildings me-2"></i>Create Application</h4>
            <div class="d-flex gap-2">
                <button id="btnClearAll" class="btn btn-danger btn-sm">
                    <i class="bi bi-trash3 me-1"></i> Clear Local Entries
                </button>
                <a href="{{ route('applications.create') }}" class="btn btn-secondary btn-sm">
                    <i class="bi bi-arrow-counterclockwise me-1"></i> Reset Form
                </a>
            </div>
        </div>


        {{-- FORM --}}
        <form id="appCreateForm" novalidate>
            {{-- Business & Owner --}}
            <div class="card shadow-sm mb-3">
                <div class="card-header bg-success text-white py-2 fw-semibold">Business & Owner</div>
                <div class="card-body row g-3">

                    {{-- OWNER SELECTION ROW --}}
                    <div class="col-md-8">
                        <label class="form-label">Owner / Proprietor <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <input type="text" name="owner_name" id="owner_name" class="form-control"
                                placeholder="Pick from list…" required readonly>
                            <button class="btn btn-outline-primary" type="button" id="btnPickOwner">
                                <i class="bi bi-search"></i> Select Owner
                            </button>
                            <button class="btn btn-outline-secondary" type="button" id="btnClearOwner" title="Clear owner">
                                <i class="bi bi-x-lg"></i>
                            </button>
                        </div>
                        <div class="invalid-feedback">Please select an owner.</div>
                        <input type="hidden" name="owner_id" id="owner_id">
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">TIN</label>
                        <input type="text" name="tin" id="owner_tin" class="form-control"
                            placeholder="###-###-###-###" maxlength="20" readonly>
                        <div class="form-text">Auto-filled from owner; digits & hyphens only.</div>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Mobile No.</label>
                        <input type="text" name="mobile_no" id="owner_mobile" class="form-control" maxlength="32"
                            readonly>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Email</label>
                        <input type="email" name="email" id="owner_email" class="form-control" maxlength="255" readonly>
                    </div>

                    {{-- BUSINESSES for selected owner --}}
                    <div class="col-md-4">
                        <label class="form-label">Business (owned) <span class="text-danger">*</span></label>
                        <select id="owner_business_select" class="form-select" required disabled>
                            <option value="">-- select owner first --</option>
                        </select>
                        <div class="invalid-feedback">Please select a business.</div>
                    </div>

                    {{-- BUSINESS FIELDS (auto-filled) --}}
                    <div class="col-md-6">
                        <label class="form-label">Business Name <span class="text-danger">*</span></label>
                        <input type="text" name="business_name" id="business_name" class="form-control" required
                            readonly>
                        <div class="invalid-feedback">Business name is required.</div>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">Business Address <span class="text-danger">*</span></label>
                        <input type="text" name="business_address" id="business_address" class="form-control" required
                            readonly>
                        <div class="invalid-feedback">Business address is required.</div>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Barangay <span class="text-danger">*</span></label>
                        <select name="barangay" id="barangay" class="form-select" required disabled>
                            <option value="">-- select business first --</option>
                        </select>
                        <div class="invalid-feedback">Please select a barangay.</div>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Line of Business <span class="text-danger">*</span></label>
                        <select name="line_of_business" id="line_of_business" class="form-select" required disabled>
                            <option value="">-- select business first --</option>
                        </select>
                        <div class="invalid-feedback">Please select a line of business.</div>
                    </div>

                </div>
            </div>

            {{-- Application Details --}}
            <div class="card shadow-sm mb-3">
                <div class="card-header bg-success text-white py-2 fw-semibold">Application Details</div>
                <div class="card-body row g-3">

                    <div class="col-md-3">
                        <label class="form-label">Application No (auto)</label>
                        <input type="text" name="application_no" class="form-control" readonly>
                        <div class="form-text">Generated on load (UI-only).</div>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">Permit No (optional)</label>
                        <input type="text" name="permit_no" class="form-control" maxlength="50">
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">Application Type <span class="text-danger">*</span></label>
                        <select name="type" class="form-select" required>
                            <option value="">-- choose --</option>
                            <option>New</option>
                            <option>Renewal</option>
                            <option>Additional Line</option>
                        </select>
                        <div class="invalid-feedback">Please choose an application type.</div>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">Tax Year <span class="text-danger">*</span></label>
                        <input type="number" name="tax_year" class="form-control" min="2000" required>
                        <div class="invalid-feedback">Enter a valid tax year.</div>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Filed At <span class="text-danger">*</span></label>
                        <input type="datetime-local" name="filed_at" class="form-control" required>
                        <div class="invalid-feedback">Please provide filing date/time.</div>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Status <span class="text-danger">*</span></label>
                        <select name="status" class="form-select" required>
                            <option>Draft</option>
                            <option>Pending</option>
                            <option>For Payment</option>
                            <option>Under Review</option>
                            <option>Approved</option>
                            <option>Rejected</option>
                            <option>Cancelled</option>
                        </select>
                        <div class="invalid-feedback">Please choose a status.</div>
                    </div>

                    <div class="col-md-8">
                        <label class="form-label">Remarks</label>
                        <input type="text" name="remarks" class="form-control" maxlength="500">
                    </div>
                </div>
            </div>

            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-check2-circle me-1"></i> Save
                </button>
                <button type="button" id="btnQuickPending" class="btn btn-outline-warning">
                    <i class="bi bi-hourglass-split me-1"></i> Mark Pending
                </button>
                <button type="button" id="btnQuickApproved" class="btn btn-outline-success">
                    <i class="bi bi-hand-thumbs-up me-1"></i> Mark Approved
                </button>
            </div>
        </form>

        {{-- TABLE: Recently Added (UI) --}}
        <div class="card shadow-sm mt-4">
            <div class="card-header py-2 fw-semibold d-flex justify-content-between align-items-center">
                <span>Recently Added (UI)</span>
                <span class="small text-muted">Stored in localStorage: <code>apps_mvp</code></span>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="appsUiTable" class="table table-sm table-bordered align-middle" style="width:100%">
                        <thead class="table-light">
                            <tr>
                                <th>Application No</th>
                                <th>Permit No</th>
                                <th>Type</th>
                                <th>Tax Year</th>
                                <th>Filed At</th>
                                <th>Status</th>
                                <th>Remarks</th>
                                <th>Created</th>
                                <th style="width:70px;">Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
                <div class="small text-muted mt-2">This is a UI sandbox, separate from server-side lists.</div>
            </div>
        </div>
    </div>

    {{-- OWNER PICKER MODAL --}}
    <div class="modal fade" id="ownerPickerModal" tabindex="-1" aria-labelledby="ownerPickerLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header py-2">
                    <h5 class="modal-title" id="ownerPickerLabel"><i class="bi bi-people me-2"></i>Select Owner</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table id="ownersTable" class="table table-sm table-bordered align-middle" style="width:100%">
                            <thead class="table-light">
                                <tr>
                                    <th style="width:80px;">Action</th>
                                    <th>Owner</th>
                                    <th>TIN</th>
                                    <th>Mobile</th>
                                    <th>Email</th>
                                    <th>Total Businesses</th>
                                </tr>
                            </thead>
                            <tbody><!-- filled by JS --></tbody>
                        </table>
                    </div>
                    <div class="small text-muted mt-2">Use the search box to filter owners by name, email, or mobile.</div>
                </div>
                <div class="modal-footer py-2">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(function() {
            // =========================
            // STATIC DATASETS (UI ONLY)
            // =========================
            // Owners (id must be unique)
            const OWNERS = [{
                    id: 1,
                    name: 'Juan Dela Cruz',
                    tin: '123-456-789-000',
                    mobile: '09171234567',
                    email: 'juan@example.com'
                },
                {
                    id: 2,
                    name: 'Maria Santos',
                    tin: '456-789-123-000',
                    mobile: '09181234567',
                    email: 'maria@example.com'
                },
                {
                    id: 3,
                    name: 'Pedro Reyes',
                    tin: '789-123-456-000',
                    mobile: '09221234567',
                    email: 'pedro@example.com'
                },
            ];

            // Businesses; each belongs to an owner_id
            // barangay & line_of_business will pre-populate the selects
            const BUSINESSES = [{
                    id: 101,
                    owner_id: 1,
                    name: 'Dela Cruz Sari-Sari Store',
                    address: '123 Mabini St., Poblacion',
                    barangay: 'Poblacion',
                    line_of_business: 'Retail Trade',
                    permit_no: 'BP-25-000123'
                },
                {
                    id: 102,
                    owner_id: 1,
                    name: 'Cruz Food House',
                    address: '45 J. Rizal Ave., San Isidro',
                    barangay: 'San Isidro',
                    line_of_business: 'Food Service',
                    permit_no: 'BP-24-009876'
                },
                {
                    id: 201,
                    owner_id: 2,
                    name: 'Santos Construction',
                    address: 'Brgy. San Roque, Lot 5',
                    barangay: 'San Roque',
                    line_of_business: 'Construction',
                    permit_no: 'BP-25-000555'
                },
                {
                    id: 202,
                    owner_id: 2,
                    name: 'Santos Transport Services',
                    address: 'Rizal Ext., Rizal',
                    barangay: 'Rizal',
                    line_of_business: 'Transport Services',
                    permit_no: 'BP-23-001234'
                },
                {
                    id: 301,
                    owner_id: 3,
                    name: 'Reyes Wholesale Depot',
                    address: 'Km 4 Highway, Mabini',
                    barangay: 'Mabini',
                    line_of_business: 'Wholesale Trade',
                    permit_no: 'BP-25-000777'
                },
            ];

            const BARANGAYS = ['Poblacion', 'San Isidro', 'San Roque', 'Mabini', 'Sto. Niño', 'San Jose',
                'Maligaya', 'Rizal'
            ];
            const LOBS = ['Retail Trade', 'Wholesale Trade', 'Food Service', 'Professional Services',
                'Manufacturing (Light)', 'Manufacturing (General)', 'Construction', 'Transport Services'
            ];

            // =========================
            // HELPERS
            // =========================
            const LS_KEY = 'apps_mvp';
            const pad6 = n => String(n).padStart(6, '0');
            const genAppNo = () => `APP-${new Date().getFullYear()}-${pad6(Math.floor(Math.random()*999999)+1)}`;
            const nowYmdHi = () => {
                const d = new Date();
                return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}
            ${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`.replace(/\s+/g, ' ');
            };
            const statusClassMap = {
                'approved': 'table-success',
                'active': 'table-success',
                'pending': 'table-warning',
                'for payment': 'table-warning',
                'under review': 'table-info',
                'processing': 'table-info',
                'rejected': 'table-danger',
                'denied': 'table-danger',
                'cancelled': 'table-danger',
                'canceled': 'table-secondary',
                'draft': 'table-light'
            };
            const rowClasses =
                'table-success table-warning table-danger table-info table-secondary table-light table-primary table-active';

            function loadEntries() {
                try {
                    return JSON.parse(localStorage.getItem(LS_KEY) || '[]');
                } catch {
                    return [];
                }
            }

            function saveEntries(arr) {
                localStorage.setItem(LS_KEY, JSON.stringify(arr));
            }

            // Populate select options
            function fillOptions($sel, items, placeholder) {
                const opts = [`<option value="">${placeholder}</option>`].concat(items.map(v =>
                    `<option value="${v}">${v}</option>`));
                $sel.html(opts.join(''));
            }

            // Owner → Businesses
            function businessesOf(ownerId) {
                return BUSINESSES.filter(b => b.owner_id === Number(ownerId));
            }

            // Apply business to form fields
            function applyBusiness(biz) {
                $('#business_name').val(biz.name);
                $('#business_address').val(biz.address);
                // enable barangay and LOB selects, ensure the dataset is filled once
                fillOptions($('#barangay'), BARANGAYS, '-- choose --');
                fillOptions($('#line_of_business'), LOBS, '-- choose --');
                $('#barangay').prop('disabled', false).val(biz.barangay);
                $('#line_of_business').prop('disabled', false).val(biz.line_of_business);

                // Permit no is optional; if you want, prefill it:
                $('input[name="permit_no"]').val(biz.permit_no || '');
            }

            function clearBusinessFields() {
                $('#owner_business_select').html('<option value="">-- select owner first --</option>').prop(
                    'disabled', true);
                $('#business_name').val('');
                $('#business_address').val('');
                $('#barangay').html('<option value="">-- select business first --</option>').prop('disabled', true);
                $('#line_of_business').html('<option value="">-- select business first --</option>').prop(
                    'disabled', true);
            }

            function setOwner(owner) {
                $('#owner_id').val(owner.id);
                $('#owner_name').val(owner.name);
                $('#owner_tin').val(owner.tin);
                $('#owner_mobile').val(owner.mobile);
                $('#owner_email').val(owner.email);

                // Populate businesses for this owner
                const list = businessesOf(owner.id);
                if (list.length) {
                    const opts = ['<option value="">-- choose --</option>'].concat(
                        list.map(b => `<option value="${b.id}">${b.name}</option>`)
                    );
                    $('#owner_business_select').html(opts.join('')).prop('disabled', false);
                } else {
                    $('#owner_business_select').html('<option value="">No businesses found for owner</option>')
                        .prop('disabled', true);
                }

                // Clear business-specific fields until one is chosen
                $('#business_name').val('');
                $('#business_address').val('');
                $('#barangay').html('<option value="">-- select business first --</option>').prop('disabled', true);
                $('#line_of_business').html('<option value="">-- select business first --</option>').prop(
                    'disabled', true);
            }

            function clearOwner() {
                $('#owner_id').val('');
                $('#owner_name').val('');
                $('#owner_tin').val('');
                $('#owner_mobile').val('');
                $('#owner_email').val('');
                clearBusinessFields();
            }

            // =========================
            // FORM BOOTSTRAP
            // =========================
            const form = document.getElementById('appCreateForm');
            $('input[name="application_no"]').val(genAppNo());
            $('input[name="filed_at"]').val(new Date().toISOString().slice(0, 16));
            $('input[name="tax_year"]').val(new Date().getFullYear());
            $('select[name="status"]').val('Draft');

            // quick status helpers
            $('#btnQuickPending').on('click', () => $('select[name="status"]').val('Pending'));
            $('#btnQuickApproved').on('click', () => $('select[name="status"]').val('Approved'));

            // sanitize (if user ever toggles readonly, keep validation sane)
            $('#owner_tin').on('input', function() {
                this.value = this.value.replace(/[^0-9\-]/g, '');
            });

            // =========================
            // OWNER MODAL + TABLE
            // =========================
            let ownersDT = null;

            function buildOwnersTable() {
                const $tbody = $('#ownersTable tbody');
                const counts = OWNERS.reduce((acc, o) => {
                    acc[o.id] = businessesOf(o.id).length;
                    return acc;
                }, {});
                const rows = OWNERS.map(o => `
      <tr>
        <td class="text-center">
          <button class="btn btn-sm btn-primary btnSelectOwner" data-owner="${o.id}">
            <i class="bi bi-check2-circle"></i> Select
          </button>
        </td>
        <td>${o.name}</td>
        <td>${o.tin || ''}</td>
        <td>${o.mobile || ''}</td>
        <td>${o.email || ''}</td>
        <td class="text-end">${counts[o.id] || 0}</td>
      </tr>
    `);
                $tbody.html(rows.join(''));

                if (ownersDT) {
                    ownersDT.destroy();
                }
                ownersDT = $('#ownersTable').DataTable({
                    processing: false,
                    serverSide: false,
                    paging: true,
                    searching: true,
                    lengthChange: true,
                    order: [
                        [1, 'asc']
                    ],
                });
            }

            const ownerModal = new bootstrap.Modal(document.getElementById('ownerPickerModal'), {
                keyboard: true
            });

            $('#btnPickOwner').on('click', function() {
                buildOwnersTable();
                ownerModal.show();
            });

            $('#ownersTable').on('click', '.btnSelectOwner', function() {
                const ownerId = Number($(this).data('owner'));
                const owner = OWNERS.find(o => o.id === ownerId);
                if (!owner) return;
                setOwner(owner);
                ownerModal.hide();
                // focus the business selector for smooth flow
                $('#owner_business_select').focus();
            });

            $('#btnClearOwner').on('click', function() {
                clearOwner();
            });

            // Business select change → fill business fields
            $('#owner_business_select').on('change', function() {
                const id = Number($(this).val());
                const biz = BUSINESSES.find(b => b.id === id);
                if (!biz) {
                    clearBusinessFields();
                    return;
                }
                applyBusiness(biz);
            });

            // =========================
            // RECENTLY ADDED TABLE
            // =========================
            const appsDT = $('#appsUiTable').DataTable({
                processing: false,
                serverSide: false,
                searching: true,
                lengthChange: true,
                order: [
                    [7, 'desc']
                ],
                columns: [{
                        data: 'application_no'
                    },
                    {
                        data: 'permit_no'
                    },
                    {
                        data: 'type'
                    },
                    {
                        data: 'tax_year',
                        className: 'text-end'
                    },
                    {
                        data: 'filed_at'
                    },
                    {
                        data: 'status'
                    },
                    {
                        data: 'remarks'
                    },
                    {
                        data: 'created_at'
                    },
                    {
                        data: 'actions',
                        orderable: false,
                        searchable: false,
                        className: 'text-center'
                    },
                ],
                rowCallback: function(row, data) {
                    $(row).removeClass(rowClasses);
                    const cls = statusClassMap[String(data.status || '').trim().toLowerCase()];
                    if (cls) $(row).addClass(cls);
                }
            });

            function redrawApps() {
                const rows = loadEntries().map((r, idx) => ({
                    ...r,
                    actions: `<button class="btn btn-sm btn-outline-danger btnDel" data-idx="${idx}" title="Remove">
                  <i class="bi bi-x-lg"></i>
                </button>`
                }));
                appsDT.clear().rows.add(rows).draw();
            }
            redrawApps();

            $('#appsUiTable').on('click', '.btnDel', function() {
                const idx = parseInt($(this).data('idx'), 10);
                const rows = loadEntries();
                rows.splice(idx, 1);
                saveEntries(rows);
                redrawApps();
            });

            $('#btnClearAll').on('click', function() {
                if (confirm('Clear all locally stored entries?')) {
                    localStorage.removeItem(LS_KEY);
                    redrawApps();
                }
            });

            // =========================
            // VALIDATION + SAVE (UI)
            // =========================
            $('#appCreateForm').on('submit', function(e) {
                e.preventDefault();
                e.stopPropagation();

                // HTML5 validity
                if (!form.checkValidity()) {
                    form.classList.add('was-validated');
                    return;
                }

                // extra: year guard
                const year = parseInt($('input[name="tax_year"]').val(), 10);
                const maxYear = (new Date().getFullYear()) + 1;
                if (isNaN(year) || year < 2000 || year > maxYear) {
                    $('input[name="tax_year"]').addClass('is-invalid').focus();
                    return;
                } else {
                    $('input[name="tax_year"]').removeClass('is-invalid');
                }

                // must have an owner & business
                const ownerId = $('#owner_id').val();
                const selectedBizId = $('#owner_business_select').val();
                if (!ownerId) {
                    alert('Please select an owner.');
                    $('#btnPickOwner').focus();
                    return;
                }
                if (!selectedBizId) {
                    alert('Please select a business for the owner.');
                    $('#owner_business_select').focus();
                    return;
                }

                // build row (UI only)
                const row = {
                    application_no: $('input[name="application_no"]').val(),
                    permit_no: $('input[name="permit_no"]').val() || '',
                    type: $('select[name="type"]').val(),
                    tax_year: year,
                    filed_at: ($('input[name="filed_at"]').val() || '').replace('T', ' '),
                    status: $('select[name="status"]').val(),
                    remarks: $('input[name="remarks"]').val() || '',
                    created_at: nowYmdHi(),

                    // useful extra (not shown in table)
                    owner_id: Number(ownerId),
                    owner_name: $('#owner_name').val(),
                    owner_tin: $('#owner_tin').val(),
                    owner_mobile: $('#owner_mobile').val(),
                    owner_email: $('#owner_email').val(),
                    business_id: Number(selectedBizId),
                    business_name: $('#business_name').val(),
                    business_address: $('#business_address').val(),
                    barangay: $('#barangay').val(),
                    line_of_business: $('#line_of_business').val(),
                };

                const rows = loadEntries();
                rows.unshift(row);
                saveEntries(rows);
                redrawApps();

                $('<div class="alert alert-success mt-3">Saved locally (UI only). You can clear it anytime.</div>')
                    .insertBefore($('.card').first())
                    .delay(2000).fadeOut(400, function() {
                        $(this).remove();
                    });

                // reset but keep owner & business for consecutive entries? For demo, keep both.
                const keepOwner = $('#owner_id').val();
                const keepBiz = $('#owner_business_select').val();

                form.reset();
                form.classList.remove('was-validated');
                $('input[name="application_no"]').val(genAppNo());
                $('input[name="filed_at"]').val(new Date().toISOString().slice(0, 16));
                $('input[name="tax_year"]').val(new Date().getFullYear());
                $('select[name="status"]').val('Draft');

                if (keepOwner) {
                    const o = OWNERS.find(x => String(x.id) === String(keepOwner));
                    if (o) setOwner(o);
                    if (keepBiz) {
                        const b = BUSINESSES.find(x => String(x.id) === String(keepBiz));
                        if (b) {
                            $('#owner_business_select').val(String(b.id));
                            applyBusiness(b);
                        }
                    }
                }
            });
        });
    </script>
@endpush