@extends('layouts.admin')

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

@section('content')
<style>
    .uniform-btn {
    min-width: 50px;   /* adjust width as you like */
    height: 38px;       /* consistent height */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    font-size: 14px;
    white-space: nowrap;
}

    </style>


<div class="container-fluid p-0">
    <!--title-->
    <div class="mb-3">
        <h1 class="h3 d-inline align-middle">Offices</h1>
    </div>
<div class="mt-2 mt-md-0 d-flex justify-content-start">
    <a href="{{ route('admin.seatmanagement.offices.create') }}" class="btn btn-primary">Create Office</a>
</div>


    <div class="row">

    <div class="col-md-12">
        <br>
        <!-- <div class="collapse navbar-collapse" id="navbarSearch">-->
            <form class="d-flex ms-auto" action="{{ route('admin.seatmanagement.offices') }}" role="search">
                <div class="col-md-3">
                    <input class="form-control me-2" type="search" placeholder="Search" name="search" value="{{ $search}}"  aria-label="Search">
                </div>
                <div class="col-md-3">
                   <select class="form-control" name="office_type">

                      <option value="">Choose Office Type</option>

                       @foreach($office_types as $office_type)

                       

                       
                        <option value="{{ \Crypt::encryptString($office_type->id) }}"  @if($office_type->id==$office_type_id) selected @endif>{{ $office_type->name }}</option>

                        

                      

                       @endforeach


                   </select>

                </div>

                <div class="col-md-3">
                   <select class="form-control" name="district">

                       <option value="">Choose District</option>


                       @foreach($districts as $district)

                         <option value="{{ \Crypt::encryptString($district->id) }}"  @if($district->id==$district_id)  selected @endif>{{ $district->district }}</option>

                       @endforeach


                   </select>

                </div>
                <button class="btn btn-outline-primary" type="submit">Search</button>
            </form>
            <!--  </div>-->
        </div>
        <!--title-->

        <!--content-->

    </div>

    

        <br>
        <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>Office Name</th>
                                    <th>Office Type</th>
                                    <th>District</th>
                                    <th>Status</th>
                                    <th>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->officeType->name ?? '—' }}</td>
                    <td>{{ $office->district->district ?? '—' }}</td>
                    <td>                    
                    @if($office->status == 1)<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">
    <!-- Manage Sections -->
    <a href="{{ route('admin.seatmanagement.sections.sections', Crypt::encryptString($office->id)) }}" 
       class="btn btn-success btn-sm uniform-btn">
        Manage Sections
    </a>
@if(strtolower($office->officeType->name) !== 'society')
    <!-- 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="m-0 p-0 d-inline-block status-form">
    @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 text-primary"
       data-feather="{{ $office->status ? 'slash' : 'check-circle' }}"></i>

</button>
</form>
  @endif
</div>
</td>

                              
                        </tr>                                        
                        @empty
                        <tr><td colspan="7" class="text-center">No Offices found.</td></tr>
                        @endforelse

                    </tbody>
                </table>

                <div class="d-flex justify-content-center">
                    {{ $offices->links() }}
                </div>
            </div>

        </div>
    </div>
</div>
<!--content-->

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

<script>
document.addEventListener('DOMContentLoaded', function () {
    function getCsrfToken(form) {
        const meta = document.querySelector('meta[name="csrf-token"]');
        if (meta) return meta.getAttribute('content');
        const tokenInput = form.querySelector('input[name="_token"]');
        return tokenInput ? tokenInput.value : '';
    }

    document.querySelectorAll('.toggle-status-btn').forEach(button => {
        button.addEventListener('click', function (e) {
            e.preventDefault();
            const form = this.closest('form');
            const actionText = this.dataset.status;
            const isActivating = actionText.toLowerCase().includes('activate');

            Swal.fire({
                title: `Are you sure you want to ${actionText.toLowerCase()} this office?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: `Yes, ${actionText}`,
                cancelButtonText: 'Cancel',
                confirmButtonColor: isActivating ? '#28a745' : '#d33',
                cancelButtonColor: '#6c757d',
            }).then((result) => {
                if (!result.isConfirmed) return;
                 Swal.fire({
                    title: actionText + '...',
                    text: 'Please wait...',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                const originalText = this.innerHTML;
                this.disabled = true;
                this.innerHTML = 'Please wait...';

                const url = form.action;
                const csrf = getCsrfToken(form);
                const formData = new FormData(form);

                fetch(url, {
                    method: form.method.toUpperCase() || 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': csrf
                    },
                    body: formData
                })
                .then(async res => {
                    this.disabled = false;
                    this.innerHTML = originalText;

                    const data = await res.json().catch(() => ({}));
                    if (res.ok && data.status === 'success') {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success',
                            text: data.message || 'Status updated successfully.',
                            confirmButtonText: 'OK'
                        }).then(() => {
                            // Redirect or reload only after OK is clicked
                            window.location.reload();
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: data.message || 'Failed to update office status.',
                            confirmButtonText: 'OK'
                        }).then(() => {
                            window.location.reload();
                        });
                    }
                })
                .catch(err => {
                    console.error(err);
                    this.disabled = false;
                    this.innerHTML = originalText;
                    Swal.fire({
                        icon: 'error',
                        title: 'Network Error',
                        text: 'Could not reach the server. Try again.',
                        confirmButtonText: 'OK'
                    }).then(() => {
                        window.location.reload();
                    });
                });
            });
        });
    });
});
</script>

@endpush