{{-- Author By : zulfazdliabuas@gmail.com | Date : 2026 --}}
@push('styles')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.5/dist/bootstrap-table.min.css" rel="stylesheet">
@endpush

<x-app-layout>
    <div class="py-4">
        <div class="container">
            <div class="d-flex align-items-center justify-content-between mb-3">
                <h2 class="h5 mb-0">Sites</h2>
            </div>
            <p class="text-muted small mb-3">
                @if(config('subs.single_site_mode'))
                    SUBS is running in single-site mode and is locked to {{ config('subs.primary_site_name', 'Subang Uptown') }}.
                @else
                    Manage active/inactive sites used in SUBS requests.
                @endif
            </p>

            @if(session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif
            @if($errors->any())
                <div class="alert alert-danger">{{ $errors->first() }}</div>
            @endif

            <div class="card shadow-sm border-0 subs_table_card">
                <div class="card-body subs_table_card_body">
                    <div id="tableToolbar" class="d-flex align-items-center gap-2 mb-3">
                        <button type="button" class="btn btn-sm btn-outline-secondary js-refresh-list" title="Refresh list">
                            <i class="bi bi-arrow-clockwise"></i> Refresh List
                        </button>
                        @if(!config('subs.single_site_mode'))
                            <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#createSiteModal">
                                Add Site
                            </button>
                        @endif
                    </div>
                    <div class="table-responsive">
                        <table id="sitesTable" class="table table-hover align-middle">
                            <thead class="table-light">
                            <tr>
                                <th data-field="no" style="width:50px">No</th>
                                <th data-field="name">Name</th>
                                <th data-field="status" style="width:100px">Status</th>
                                <th data-field="actions" class="text-end" style="width:80px">Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            @forelse($sites as $site)
                                <tr>
                                    <td>{{ $loop->index + 1 }}</td>
                                    <td>{{ $site->name }}</td>
                                    <td>
                                        <span class="badge {{ $site->status === 'Active' ? 'text-bg-success' : 'text-bg-secondary' }}">
                                            {{ $site->status }}
                                        </span>
                                    </td>
                                    <td class="text-end">
                                        <div class="d-flex gap-2 justify-content-end">
                                            <button type="button"
                                                    class="btn btn-sm btn-outline-secondary"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#editSiteModal-{{ $site->id }}">
                                                Edit
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center text-muted py-4">No sites.</td>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if(!config('subs.single_site_mode'))
        <div class="modal fade" id="createSiteModal" tabindex="-1" aria-labelledby="createSiteModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="createSiteModalLabel">Add Site</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form method="post" action="{{ route('admin.sites.store') }}" class="row g-3 px-3 pb-3">
                        @csrf
                        @include('admin.sites.partials.form', ['site' => null])
                        <div class="d-flex justify-content-end gap-2">
                            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary">Create</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endif

    @foreach($sites as $site)
        <div class="modal fade" id="editSiteModal-{{ $site->id }}" tabindex="-1" aria-labelledby="editSiteModalLabel-{{ $site->id }}" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="editSiteModalLabel-{{ $site->id }}">Edit Site #{{ $site->id }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form method="post" action="{{ route('admin.sites.update', $site) }}" class="row g-3 px-3 pb-3">
                        @csrf
                        @method('put')
                        @include('admin.sites.partials.form', ['site' => $site])
                        <div class="d-flex justify-content-end gap-2">
                            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endforeach

    @push('scripts')
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.5/dist/bootstrap-table.min.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                $('#sitesTable').bootstrapTable({
                    toolbar: '#tableToolbar',
                    search: true,
                    searchAlign: 'right',
                    pagination: true,
                    pageSize: 20,
                    pageList: [10, 20, 50],
                    sortable: true
                });


            });
        </script>
    @endpush
</x-app-layout>