@extends('layouts.app')

@section('title', 'Applications › Amendments')

@section('content')
    <div class="container-fluid py-3">
        <div class="d-flex align-items-center justify-content-between mb-3">
            <div>
                <h1 class="h4 mb-0">Business Application Amendments</h1>
                <small class="text-muted">Static demo list • replace with real data when backend is ready</small>
            </div>
            <a href="{{ route('applications.index') }}" class="btn btn-outline-secondary btn-sm">
                <i class="bi bi-arrow-left"></i> Back to Applications
            </a>
        </div>

        <!-- Simple Filters -->
        <div class="card mb-3">
            <div class="card-body">
                <form class="row g-2">
                    <div class="col-md-3">
                        <label class="form-label mb-0 small">Amendment Type</label>
                        <select class="form-select form-select-sm" id="filterAmendType">
                            <option value="">All</option>
                            <option>Change of Business Name</option>
                            <option>Change of Address</option>
                            <option>Add Line of Business</option>
                            <option>Drop Line of Business</option>
                            <option>Change in Capital</option>
                            <option>Change in Ownership</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label mb-0 small">Status</label>
                        <select class="form-select form-select-sm" id="filterStatus">
                            <option value="">All</option>
                            <option>Pending</option>
                            <option>For Assessment</option>
                            <option>Approved</option>
                            <option>Returned</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label mb-0 small">Date Filed</label>
                        <input type="date" class="form-control form-control-sm" id="filterDate">
                    </div>
                    <div class="col-md-3 d-flex align-items-end">
                        <button type="button" class="btn btn-primary btn-sm me-2" id="btnApplyFilters">
                            <i class="bi bi-funnel"></i> Apply
                        </button>
                        <button type="button" class="btn btn-outline-secondary btn-sm" id="btnResetFilters">
                            Reset
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <div class="card shadow-sm rounded-3">
            <div class="card-body ">
                <div class="table-responsive">
                    <table id="amendmentsTable" class="table table-striped table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th class="bg-success text-white">App No.</th>
                                <th class="bg-success text-white">Business Name</th>
                                <th class="bg-success text-white">Owner</th>
                                <th class="bg-success text-white">Amendment Type</th>
                                <th class="bg-success text-white">Old Value</th>
                                <th class="bg-success text-white">New Value</th>
                                <th class="bg-success text-white">Date Filed</th>
                                <th class="bg-success text-white">Status</th>
                                <th class="bg-success text-white">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $rows = [
                                    [
                                        'app_no' => '2025-000123',
                                        'biz_name' => 'Sunrise Mini Mart',
                                        'owner' => 'Juan Dela Cruz',
                                        'type' => 'Change of Business Name',
                                        'old' => 'Sunrise Sari-Sari Store',
                                        'new' => 'Sunrise Mini Mart',
                                        'date' => '2025-09-12',
                                        'status' => 'Approved',
                                    ],
                                    [
                                        'app_no' => '2025-000124',
                                        'biz_name' => 'Blue Ocean Eatery',
                                        'owner' => 'Maria Santos',
                                        'type' => 'Add Line of Business',
                                        'old' => 'Restaurant',
                                        'new' => 'Restaurant; Catering',
                                        'date' => '2025-09-14',
                                        'status' => 'For Assessment',
                                    ],
                                    [
                                        'app_no' => '2025-000125',
                                        'biz_name' => 'TechCraft Solutions',
                                        'owner' => 'Pedro Reyes',
                                        'type' => 'Change of Address',
                                        'old' => 'Purok 2, Brgy. Central',
                                        'new' => 'Lot 5, Phase 1, Brgy. North',
                                        'date' => '2025-09-20',
                                        'status' => 'Pending',
                                    ],
                                    [
                                        'app_no' => '2025-000126',
                                        'biz_name' => 'Happy Paws Grooming',
                                        'owner' => 'Ana Dizon',
                                        'type' => 'Drop Line of Business',
                                        'old' => 'Grooming; Pet Supplies',
                                        'new' => 'Grooming',
                                        'date' => '2025-09-21',
                                        'status' => 'Returned',
                                    ],
                                    [
                                        'app_no' => '2025-000127',
                                        'biz_name' => 'Golden Harvest Trading',
                                        'owner' => 'Jose Tan',
                                        'type' => 'Change in Capital',
                                        'old' => '₱500,000',
                                        'new' => '₱1,200,000',
                                        'date' => '2025-10-01',
                                        'status' => 'Approved',
                                    ],
                                    [
                                        'app_no' => '2025-000128',
                                        'biz_name' => 'Lotus Spa & Wellness',
                                        'owner' => 'Liza Lim',
                                        'type' => 'Change in Ownership',
                                        'old' => 'Sole Proprietorship',
                                        'new' => 'Partnership',
                                        'date' => '2025-10-05',
                                        'status' => 'Pending',
                                    ],
                                ];
                            @endphp

                            @foreach ($rows as $r)
                                <tr data-amend-type="{{ $r['type'] }}" data-status="{{ $r['status'] }}"
                                    data-date="{{ $r['date'] }}">
                                    <td>{{ $r['app_no'] }}</td>
                                    <td>{{ $r['biz_name'] }}</td>
                                    <td>{{ $r['owner'] }}</td>
                                    <td><span class="badge bg-info-subtle text-info">{{ $r['type'] }}</span></td>
                                    <td>{{ $r['old'] }}</td>
                                    <td>{{ $r['new'] }}</td>
                                    <td>{{ \Carbon\Carbon::parse($r['date'])->format('M d, Y') }}</td>
                                    <td>
                                        @php
                                            $statusClass =
                                                [
                                                    'Pending' => 'warning',
                                                    'For Assessment' => 'primary',
                                                    'Approved' => 'success',
                                                    'Returned' => 'danger',
                                                ][$r['status']] ?? 'secondary';
                                        @endphp
                                        <span class="badge bg-{{ $statusClass }}">{{ $r['status'] }}</span>
                                    </td>
                                    <td class="text-end">
                                        <div class="btn-group btn-group-sm">
                                            <button class="btn btn-outline-primary btn-view"
                                                data-app="{{ $r['app_no'] }}">
                                                <i class="bi bi-eye"></i>
                                            </button>
                                            <button class="btn btn-outline-secondary">
                                                <i class="bi bi-printer"></i>
                                            </button>
                                            <button class="btn btn-outline-dark">
                                                <i class="bi bi-three-dots"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- View Modal -->
    <div class="modal fade" id="viewModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Amendment Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <dl class="row mb-0" id="viewDetails">
                        <!-- populated by JS -->
                    </dl>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Print</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(function() {
            const $table = $('#amendmentsTable').DataTable({
                responsive: true,
                pageLength: 10,
                order: [
                    [6, 'desc']
                ],
                columnDefs: [{
                    targets: -1,
                    orderable: false,
                    searchable: false
                }]
            });

            // Filters
            $('#btnApplyFilters').on('click', function() {
                const type = $('#filterAmendType').val();
                const status = $('#filterStatus').val();
                const date = $('#filterDate').val();

                // Custom search using row data attributes for fast client-side filtering
                $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
                    const $row = $($table.row(dataIndex).node());
                    const rowType = $row.data('amend-type') + '';
                    const rowStatus = $row.data('status') + '';
                    const rowDate = ($row.data('date') + '') || '';

                    const passType = !type || rowType === type;
                    const passStatus = !status || rowStatus === status;
                    const passDate = !date || rowDate === date;

                    return passType && passStatus && passDate;
                });

                $table.draw();
                // Remove last custom filter so subsequent Apply re-registers a fresh predicate
                $.fn.dataTable.ext.search.pop();
            });

            $('#btnResetFilters').on('click', function() {
                $('#filterAmendType').val('');
                $('#filterStatus').val('');
                $('#filterDate').val('');
                $table.search('').columns().search('').draw();
            });

            // View modal
            $(document).on('click', '.btn-view', function() {
                const $tr = $(this).closest('tr');
                const details = [
                    ['Application No.', $tr.find('td:eq(0)').text()],
                    ['Business Name', $tr.find('td:eq(1)').text()],
                    ['Owner', $tr.find('td:eq(2)').text()],
                    ['Amendment Type', $tr.find('td:eq(3)').text().trim()],
                    ['Old Value', $tr.find('td:eq(4)').text()],
                    ['New Value', $tr.find('td:eq(5)').text()],
                    ['Date Filed', $tr.find('td:eq(6)').text()],
                    ['Status', $tr.find('td:eq(7)').text().trim()],
                ];

                const html = details.map(([k, v]) => `
        <dt class="col-sm-4">${k}</dt>
        <dd class="col-sm-8">${v}</dd>
      `).join('');

                $('#viewDetails').html(html);
                const modal = new bootstrap.Modal(document.getElementById('viewModal'));
                modal.show();
            });
        });
    </script>
@endpush