@extends('layouts.admin')

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

@section('content')

<div class="container-fluid p-0">
    <!--title-->

    <div class="mb-3">
        <h4 class="fw-bold">Office Details</h4>       

        <div class="card p-3">
            <p><strong>Office:</strong> {{ $office->name }} ||
                <strong>Office Type:</strong> {{ $office->officeType->name ?? 'N/A' }}  ||
                <strong>District:</strong> {{ $office->district->district ?? 'N/A' }}</p>
            </div>
        </div>
        <div class="mb-3">
            <h1 class="h3 d-inline align-middle">Sections</h1>
        </div>   

        <!-- Create Section Button -->
        <!-- div class="mt-2 mt-md-0">
            <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#addSectionForm">
                Create Section
            </button>
            <a href="http://127.0.0.1:8000/admin/seat-management/seatgroups" class="btn btn-primary ms-2">Back</a>
        </div><br> -->
        <div class="mt-2 mt-md-0 d-flex align-items-center">
    <button class="btn btn-primary" type="button"
        data-bs-toggle="collapse"
        data-bs-target="#addSectionForm">
        Create Section
    </button>

    <a href="{{ url()->previous() }}"
       class="btn btn-primary ms-auto">
        Back
    </a>
</div>
<br>
        <div class="collapse mb-4" id="addSectionForm">
            <form id="sectionForm">
                @csrf

                <div class="row">


                    <div class="mb-3 col-md-6">
                        <label for="example-text-input" class="form-control-label"><span style="color:red">*</span> Section Name</label>
                        <input class="form-control" type="text" name="name"  id="sectionName"
                        maxlength="100"
                        minlength="3"
                        required >
                        <small class="text-muted">Min 3, Max 100 characters</small>



                        <label style="color:red" id="nameError"></label>
                    </div>                                   


                </div>                                       


                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>  

        <!-- Search Form -->
        <div class="col-md-6">
            <br>
            <form class="d-flex ms-auto" action="" role="search">
                <input class="form-control me-2" type="search" placeholder="Search" name="search" value="{{ $search ?? '' }}" aria-label="Search">
                <button class="btn btn-outline-primary" type="submit">Search</button>
            </form>
        </div>  

        <!-- Collapsible Section Add Form -->


        <br>

        <!-- Sections 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>Section Name</th>
                                    <th>Status</th>
                                    <th>Manage Seats</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>                                  
                                @if($sections->count() > 0)
                                @foreach ($sections as $index => $section)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ $section->name }}</td>
                                    <td>
                                        @if($section->status == 1)
                                        <span class="badge bg-success">Active</span>
                                        @else
                                        <span class="badge bg-danger">Inactive</span>
                                        @endif
                                    </td>
                                    <td>
                                        <a href="{{ route('admin.seatmanagement.seats.index', Crypt::encryptString($section->id)) }}"
                                         class="btn btn-dark">
                                         Manage Seat
                                     </a>
                                 </td>
                                 <td>
                                     <!-- Edit Section Button -->
                                     <a href="javascript:void(0);" 
                                     class="edit-section-btn"
                                     data-id="{{ Crypt::encryptString($section->id) }}"
                                     data-name="{{ $section->name }}">
                                     <i class="align-middle" data-feather="edit-2"></i>
                                 </a>

                                 <!-- Deactivate Button -->
                                <!--  @if($section->status == 1 && $section->able_to_deactivate)
                                 <button class="btn btn-danger deactivate-section"
                                 data-section="{{ Crypt::encryptString($section->id) }}">
                                 Deactivate
                             </button>
                             @endif -->

                             @if($section->status == 1 && $section->able_to_deactivate)
    <a href="javascript:void(0)"
       class="text-primary deactivate-section"
       data-section="{{ Crypt::encryptString($section->id) }}"
       title="Deactivate">
        <i class="align-middle me-2 fas fa-fw fa-ban"></i>
    </a>

@endif
                         </td>
                              <!-- <td>

                               @if($section->status==1)

                                    @if($section->able_to_deactivate)


                                         <button class="btn btn-danger deactivate-section"  data-section-id="{{ \Crypt::encryptString($section->id) }}">Deactivate</button>


                                    @else

                                       <div class="alert alert-danger">Can't Deactivate</div>

                                    @endif

                                @endif


                               </td>-->
                           </tr>
                           @endforeach
                           @else
                           <tr><td colspan="7" class="text-center">No Section found.</td></tr>
                           @endif
                       </tbody>
                   </table>

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



<!-- Edit Section Modal -->
<!-- Edit Section Modal -->
<div class="modal fade" id="editSectionModal" tabindex="-1" aria-labelledby="editSectionModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">

       <div class="modal-header bg-primary text-white">
        <h5 class="modal-title">Edit Section</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
    </div>

    <div class="modal-body">
        <form id="editSectionForm">
            @csrf
            <input type="hidden" id="editSectionId">
            <div class="mb-3">
                <label>Section Name</label>
                <input type="text" class="form-control" id="editSectionName" name="name">
                <small id="editNameError" class="text-danger"></small>
            </div>
        </form>
    </div>

    <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button class="btn btn-primary" id="saveEditSectionBtn">Save Changes</button>
    </div>

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






</div>

@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        const MIN_LEN = 3;
        const MAX_LEN = 100;

       $('#addSectionForm').on('show.bs.collapse', function () {
        $('button[data-bs-target="#addSectionForm"]').hide();
    });

    // Show button again when form collapses
       $('#addSectionForm').on('hidden.bs.collapse', function () {
        $('button[data-bs-target="#addSectionForm"]').show();
    });

       $('#sectionForm').on('submit', function(e) {
        e.preventDefault();

        // Clear previous errors
        $('#nameError').text('');

        let sec_name = $('input[name="name"]').val().trim();
        let officeId = "{{ Crypt::encryptString($office->id) }}";


        // Basic validation before sending request
        if (sec_name.length === 0) {
            $('#nameError').text('Section name is required');
            return;
        }

        if (sec_name.length < MIN_LEN) {
            $('#nameError').text('Section name must be at least 3 characters');
            return;
        }

        if (sec_name.length > MAX_LEN) {
            $('#nameError').text('Section name cannot exceed 100 characters');
            return;
        }


        $.ajax({
            url: "{{ route('admin.seatmanagement.sections.store', ':office') }}".replace(':office', officeId),
            method: "POST",
            data: {
                _token: '{{ csrf_token() }}',
                name: sec_name,
            },
            beforeSend: function() {
                Swal.fire({
                    title: 'Please wait...',
                    text: 'Submitting data...',
                    allowOutsideClick: false,
                    didOpen: () => Swal.showLoading()
                });
            },
            success: function(response) {
                Swal.close();

                // If redirect() used in controller, it won’t be JSON — so let’s handle both.
                if (response.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: response.message,
                        timer: 1500,
                        showConfirmButton: true
                    });

                    // Redirect after success
                    setTimeout(() => {
                        location.reload();
                    }, 1500);
                } else {
                    // fallback if normal redirect() happened
                    Swal.fire({
                        icon: 'success',
                        title: 'Added successfully!',
                        text: 'Redirecting...',
                        timer: 1500,
                        showConfirmButton: false
                    });

                    setTimeout(() => {
                        location.reload();
                    }, 1500);
                }
            },
            error: function(xhr) {
                Swal.close();

                if (xhr.status === 422) {
                    // Laravel validation errors
                    let errors = xhr.responseJSON.errors;
                    if (errors.name) {
                        $('#nameError').text(errors.name[0]);
                    }

                } else {
                    Swal.fire('Error', 'Something went wrong while submitting.', 'error');
                }
            }
        });
    });



    // Open edit modal
       $(document).on('click', '.edit-section-btn', function() {
        let id = $(this).data('id');
        let name = $(this).data('name');

        $('#editSectionId').val(id);
        $('#editSectionName').val(name);
        $('#editNameError').text('');

        $('#editSectionModal').modal('show');
    });

    // Save edit
       $('#saveEditSectionBtn').on('click', function() {
        let id = $('#editSectionId').val();
        let name = $('#editSectionName').val().trim();

        if(name === '') {
            $('#editNameError').text('Section name is required');
            return;
        }

        $.ajax({
            url: "{{ route('admin.seatmanagement.sections.update', ':id') }}".replace(':id', id),
            method: "POST",
            data: {
                _token: '{{ csrf_token() }}',
                name: name
            },
            beforeSend: function() {
                Swal.fire({
                    title: 'Updating...',
                    allowOutsideClick: false,
                    didOpen: () => Swal.showLoading()
                });
            },
            success: function(res) {
                Swal.close();
                if(res.success) {
                    Swal.fire('Success', res.message, 'success').then(() => location.reload());
                } else {
                    Swal.fire('Error', res.message || 'Something went wrong', 'error');
                }
            },
            error: function(xhr) {
                Swal.close();
                if(xhr.status === 422 && xhr.responseJSON.errors.name) {
                    $('#editNameError').text(xhr.responseJSON.errors.name[0]);
                } else {
                    Swal.fire('Error', 'Something went wrong', 'error');
                }
            }
        });
    });

    // Deactivate Section
       $(document).on('click', '.deactivate-section', function() {
        let section = $(this).data('section');

        Swal.fire({
            title: 'Are you sure?',
            text: "This will deactivate the section.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, deactivate'
        }).then((result) => {
            if(result.isConfirmed) {
                $.ajax({
                    url: "{{ route('admin.seatmanagement.sections.deactivate') }}",
                    method: "POST",
                    data: {_token: '{{ csrf_token() }}', section: section},
                    success: function(res) {
                        if(res.status === 'success') {
                            Swal.fire('Deactivated!', res.message, 'success').then(() => location.reload());
                        } else {
                            Swal.fire('Error', res.message || 'Something went wrong', 'error');
                        }
                    },
                    error: function() {
                        Swal.fire('Error', 'Something went wrong', 'error');
                    }
                });
            }
        });
    });

   });



</script>
@endpush