@extends('layouts.app')

@section('nav', 'Owners')
@section('title', 'Owners')

@section('content')
    <div>
        @if (session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger">{{ session('error') }}</div>
        @endif

        <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>Owners</h4>
        </div>
        {{-- Table --}}
        <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="clearsearch" 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('owners.create') }}" class="btn btn-primary btn-sm flex-shrink-0">
                                Create New Owner
                            </a>
                        </div>
                    </div>

                </div>
            </div>

            <div class="card-body p-0">
                <div class="table-responsive">
                    <table id="_dtable" class="table table-striped table-hover align-middle mb-0 nowrap"
                        style="width:100%">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Full Name</th>
                                <th>Mobile No</th>{{--  --}}
                                <th>Email</th>
                                <th>Address</th>
                                <th>Barangay</th>
                                <th>City/Municipality</th>
                                <th>Province</th>
                                <th>Zipcode</th>
                                <th>Created</th>

                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($owners as $owner)
                                <tr class="table-row-link" data-href="{{ route('owners.detail', $owner->id) }}"
                                    tabindex="0" role="link" aria-label="Open {{ $owner->business_name }}">
                                    <td>{{ $owner->id }}</td>
                                    <td>
                                        {{ trim(($owner->last_name ?? '') . ', ' . ($owner->first_name ?? '') . ' ' . ($owner->middle_name ?? '')) }}
                                    </td>
                                    <td>{{ $owner->mobile_no }}</td>
                                    <td>{{ $owner->email }}</td>
                                    <td>{{ $owner->address_line }}</td>
                                    <td>{{ $owner->barangay }}</td>
                                    <td>{{ $owner->city_municipality }}</td>
                                    <td>{{ $owner->province }}</td>
                                    <td>{{ $owner->zipcode }}</td>
                                    <td>{{ $owner->created_at }}</td>

                                </tr>
                            @empty
                                <tr>
                                    <td colspan="11" class="text-center text-muted">No records yet.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            @if (method_exists($owners, 'hasPages') && $owners->hasPages())
                <div class="card-footer">
                    {{ $owners->links() }}
                </div>
            @endif
        </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: #7cc74aff !important;
            padding: .25rem .5rem !important;
            line-height: 1.5 !important;
            border-radius: .25rem !important;
            s 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: [
                        [0, 'desc']
                    ],
                    lengthMenu: [
                        [10, 25, 50, 100, -1],
                        [10, 25, 50, 100, 'All']
                    ],
                    pageLength: 10,
                    columnDefs: [{
                        targets: -1,
                        orderable: false,
                        searchable: false
                    }],
                    dom: '<"row g-2"<"col-sm-12"tr>>' +
                        '<"row align-items-center g-2 mt-2"<"col-sm-12 col-md-5"l><"col-sm-12 col-md-7 d-flex justify-content-md-end gap-2"Bip>>',
                    buttons: [{
                        extend: 'excel',
                        title: 'Owners'
                    }, {
                        extend: 'print',
                        title: 'Owners'
                    }]
                });

                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 = $('#ownersGlobalSearch');
                if ($global.length) {
                    $global.on('keydown', 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');
                });

                // Hide server-side pagination block if present
                $('.card-footer .pagination').closest('.card-footer').hide();
            });
        })(jQuery);
    </script>
@endpush