@extends('layouts.admin')

@section('title','Office List')

@section('content')

<div class="container-fluid p-0">
    
    <!-- Title -->
    <div class="mb-3 d-flex justify-content-between align-items-center">
        <h1 class="h3 d-inline align-middle">Offices</h1>

        <a href="{{ route('admin.seatmanagement.offices.create') }}" class="btn btn-primary">
            Create Office
        </a>
    </div>

    <!-- Search -->
    <div class="col-md-6 mb-3">
        <form class="d-flex" method="get" action="{{ route('admin.seatmanagement.offices.index') }}" role="search">
            <input class="form-control me-2" 
                   type="search" 
                   placeholder="Search name, code, phone or email" 
                   name="q" 
                   value="{{ request('q') }}">
            <button class="btn btn-outline-primary" type="submit">Search</button>
        </form>
    </div>


    <!-- Table -->
    <div class="row">
        <div class="col-12 col-xl-12">
            <div class="card">

                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Name</th>
                                <th>Code</th>
                                <th>District</th>
                                <th>Type</th>
                                
                                <th>Status</th>
                                <th width="180">Actions</th>
                            </tr>
                        </thead>

                        <tbody>
                            @forelse($offices as $office)
                            <tr>
                                <td>{{ $loop->iteration + ($offices->currentPage() - 1) * $offices->perPage() }}</td>

                                <td>
                                    
                                        {{ $office->name }}
                                    
                                </td>

                                <td>{{ $office->code }}</td>
                                <td>{{ $office->district?->district ?? '—' }}</td>
                                <td>{{ $office->officeType?->name ?? '—' }}</td>

                                

                                <td>
                                    @if($office->status)
                                        <div class="btn-success-light">Active</div>
                                    @else
                                        <div class="btn-danger-light">Inactive</div>
                                    @endif
                                </td>

                                <td >
<div class="table-action d-flex align-items-center gap-2">
                                    <!-- Edit -->
                                    <a href="{{ route('admin.seatmanagement.offices.edit', encrypt($office->id)) }}">
                                        <i class="align-middle" data-feather="edit-2"></i>
                                    </a>

                                    <!-- Activate / Deactivate -->
                                    <form action="{{ route('admin.seatmanagement.offices.toggleStatus', encrypt($office->id)) }}"
                                          method="POST"
                                          class="toggle-status-form m-0 p-0">
                                        @csrf

                                        <button type="button"
                                                class="btn btn-sm p-0 border-0 bg-transparent toggle-status-btn"
                                                data-status="{{ $office->status ? 'deactivate' : 'activate' }}">
                                            <i class="align-middle" data-feather="trash"></i>
                                        </button>
                                    </form>
</div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="9" class="text-center">No offices found.</td>
                            </tr>
                            @endforelse
                        </tbody>

                    </table>

                    <div class="d-flex justify-content-center mt-3 pagination-wrapper">
                        {{ $offices->links('pagination::bootstrap-5') }}
                    </div>

                </div>

            </div>
        </div>
    </div>

</div>

@endsection


@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {

    document.querySelectorAll('.toggle-status-btn').forEach(button => {
        button.addEventListener('click', function (e) {
            e.preventDefault();

            const form = this.closest('form');
            const status = this.dataset.status; // activate/deactivate

            Swal.fire({
                title: `Are you sure?`,
                text: `Do you want to ${status} this office?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: `Yes, ${status}`,
                cancelButtonText: 'Cancel',
            }).then((result) => {

                if (result.isConfirmed) {

                    // 🔥 SHOW LOADER BEFORE FORM SUBMIT
                    Swal.fire({
                        title: `${status.charAt(0).toUpperCase() + status.slice(1)}...`,
                        text: 'Please wait...',
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });

                    // submit the form
                    form.submit();
                }
            });

        });
    });

});
</script>

@endpush