@extends('layouts.app')

@section('nav', 'Business Records')
@section('title', 'Business Records')


@section('content')
    <div>
        <div class="d-flex align-items-center justify-content-between mb-3">
            <h4 class="mb-0"><i class="bi bi-card-list me-2"></i>Businesses</h4>
        </div>
        {{-- Card Wrapper --}}
        <div class="card shadow-sm">
            <div class="card-header">
                <div id="_header" class="row align-items-center g-2">
                
                    <!-- Left: title -->
                    <div class="col text-truncate">
                        <div class="d-flex align-items-center gap-2">
                            <small class="text-muted">Manage, filter, export</small>
                        </div>
                    </div>

                    <!-- Right: toolbar (Search → Excel → Print → Create) -->
                    <div class="col-auto">
                        <div id="_dtoolbar" class="d-flex align-items-center justify-content-end gap-2 flex-nowrap">
                            <div class="input-group input-group-sm flex-shrink-0" id="_dsearchgroup">
                                <input id="bizGlobalSearch" type="search" class="form-control"
                                    placeholder="Search business name, code, trade…" autocomplete="off" />
                                <button id="clearsearch" type="button" class="btn btn-outline-secondary">Clear</button>
                            </div>

                            <div id="_dbuttons" class="d-inline-flex align-items-center flex-shrink-0"></div>

                            <a href="{{ route('business.create') }}" class="btn btn-primary btn-sm flex-shrink-0">
                                Create New Business
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card-body">
                {{-- Flash --}}
                @if (session('success'))
                    <div class="alert alert-success">{{ session('success') }}</div>
                @endif

                {{-- (Removed the old search row here; it now lives in the header) --}}
                <div class="table-responsive">
                    <table id="_dtable" class="table table-striped table-hover align-middle mb-0 nowrap"
                        style="width:100%">
                        <thead class="table-light">
                            <tr>
                                <th>Control Code</th>
                                <th>Business Name</th>
                                <th>Trade Name</th>
                                <th>Organization</th>
                                <th>Address</th>
                                <th>Location</th>
                                <th>Status</th>
                                <th>Filed</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($businesses as $biz)
                                @php
                                    $status = strtoupper((string) $biz->status);
                                    $statusClass = match ($status) {
                                        'ACTIVE' => 'bg-success',
                                        'CLOSED', 'RETIRED' => 'bg-secondary',
                                        'TRANSFERRED' => 'bg-warning',
                                        default => 'bg-light text-dark',
                                    };
                                    $filedDate = optional($biz->created_at);
                                @endphp
                                <tr class="table-row-link" data-href="{{ route('business.detail', $biz->id) }}"
                                    tabindex="0" role="link" aria-label="Open {{ $biz->business_name }}">
                                    <td class="text-nowrap">{{ $biz->control_code }}</td>
                                    <td class="fw-semibold">{{ $biz->business_name }}</td>
                                    <td>{{ $biz->trade_name }}</td>
                                    <td>{{ $biz->organization_nature }}</td>
                                    <td>{{ $biz->address_line }}</td>
                                    <td>{{ $biz->barangay }}, {{ $biz->city_municipality }}, {{ $biz->province }}
                                        {{ $biz->zipcode }}</td>
                                    <td><span class="badge {{ $statusClass }}">{{ $biz->status }}</span></td>
                                    <td data-order="{{ $filedDate?->format('Y-m-d H:i:s') }}">
                                        {{ $filedDate?->format('M d, Y') }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="text-center text-muted">No records found.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        /* Header: allow height to grow (prevents overlap), keep controls on one line on lg+ */
        #_header {
            margin: 0;
        }

        /* clean row spacing */
        #_dtoolbar {
            max-width: 100%;
        }

        /* Search width that never stretches too wide and shrinks if space is tight */
        #_dsearchgroup {
            width: clamp(220px, 26vw, 340px);
        }

        /* DataTables buttons inline and uniform */
        #_dbuttons .dt-buttons {
            display: flex !important;
            flex-wrap: nowrap !important;
            gap: .375rem;
            margin: 0 !important;
        }

        #_dbuttons .dt-button {
            border: 1px solid #ced4da !important;
            background: #fff !important;
            padding: .25rem .5rem !important;
            line-height: 1.5 !important;
            border-radius: .25rem !important;
            font-size: .875rem !important;
            /* btn-sm */
            min-width: 88px;
            /* Excel / Print same width */
        }

        #_dbuttons .dt-button:hover {
            background: #f8f9fa !important;
        }

        /* Polished table header (normal + fixed) */
        #_dtable thead th,
        div.fixedHeader-floating thead th {
            background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
            color: #334155;
            border-bottom: 1px solid #dbe3ea !important;
            vertical-align: middle;
        }

        div.fixedHeader-floating {
            box-shadow: 0 1px 6px rgba(0, 0, 0, .06);
            border-bottom: 1px solid #dbe3ea;
        }

        /* Safety: if the screen is very narrow, allow wrap INSIDE the header instead of overflowing */
        @media (max-width: 991.98px) {
            #_dtoolbar {
                flex-wrap: wrap;
                row-gap: .375rem;
            }
        }

        /* Clickable table rows */
        /* Clickable table rows */
        #_dtable tbody tr.table-row-link {
            cursor: pointer;
            transition: background-color .12s ease-in-out;
        }

        /* Stronger hover + focus highlight (override Bootstrap/DataTables) */
        #_dtable {
            /* Tweak these to your brand */
            --row-hover-bg: #e7f1ff;
            /* light indigo/blue */
            --row-hover-color: #1f2937;
            /* slate-800 */
        }

        #_dtable.table-hover tbody tr.table-row-link:hover>*,
        #_dtable tbody tr.table-row-link:focus>* {
            background-color: var(--row-hover-bg) !important;
            color: var(--row-hover-color);
        }

        /* Optional: slightly different tone in dark mode */
        @media (prefers-color-scheme: dark) {
            #_dtable {
                --row-hover-bg: #263a4d;
                --row-hover-color: #e5e7eb;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        (function($) {
            $(function() {
                var $tableEl = $('#_dtable');
                if (!$tableEl.length) return;

                var dt = $tableEl.DataTable({
                    responsive: true,
                    fixedHeader: true,
                    processing: true,
                    deferRender: true,
                    autoWidth: false,
                    order: [
                        [1, 'asc']
                    ], // Business Name
                    // removed columnDefs with targets:-1 (Actions no longer exists)
                    dom: "<'row'<'col-12'tr>>" +
                        "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
                    buttons: [{
                            extend: 'excel',
                            title: 'Businesses'
                        },
                        {
                            extend: 'print',
                            title: 'Businesses'
                        }
                    ]
                });

                if (dt.buttons && $('#_dbuttons').length) {
                    dt.buttons().container().appendTo('#_dbuttons');
                    $('#_dbuttons .dt-buttons').addClass('btn-group btn-group-sm');
                    $('#_dbuttons .dt-button').addClass('btn btn-outline-secondary btn-sm');
                }

                var $global = $('#bizGlobalSearch');
                if ($global.length) {
                    $global.on('keydown', function(e) {
                        if (e.key === 'Enter') e.preventDefault();
                    });
                    $global.on('input change', function() {
                        dt.search(this.value || '').draw();
                    });
                }
                $('#clearsearch').on('click', function() {
                    $global.val('');
                    dt.search('').draw();
                    $global.trigger('focus');
                });

                // ---- Row navigation (click or keyboard) ----
                function navigateFromRow(tr) {
                    var url = tr.getAttribute('data-href');
                    if (url) window.location.href = url;
                }

                // Avoid triggering when selecting text or clicking on interactive elements
                function isInteractiveTarget(target) {
                    return $(target).closest(
                        'a,button,input,select,textarea,label,.dataTables_empty,.dtr-details').length > 0;
                }

                $('#_dtable tbody')
                    .on('click', 'tr.table-row-link', function(e) {
                        if (isInteractiveTarget(e.target)) return;
                        if (window.getSelection && window.getSelection().toString()) return;
                        navigateFromRow(this);
                    })
                    .on('keydown', 'tr.table-row-link', function(e) {
                        if (e.key === 'Enter' || e.key === ' ') {
                            e.preventDefault();
                            navigateFromRow(this);
                        }
                    });
            });
        })(jQuery);
    </script>
@endpush