@extends('layouts.admin_main')

@section('content')
    <div class="content-wrapper">
      <div class="card">
        <div class="row">
          <div class="col-sm-6">
            <h4 class="pl-3 pt-3 pb-2">Sections</h4>
          </div>
        </div>
      </div>
      <section class="content">
        <div class="container-fluid">
          @if(session('status'))
            <h5 class="alert alert-success text-center">{{ session('status') }}</h5>
          @endif
          <div class="row">
            <div class="col-12">
              <div class="card">
                <div class="card-header">
                  <h3 class="card-title">Manage Sections</h3>
                </div>
                <div class="card-body">
                  <div class="table-responsive">
                    <table id="sections-table" class="table table-bordered table-hover">
                      <thead>
                        <tr>
                          <th>Section Name</th>
                          <th>Status</th>
                          <th>Actions</th>
                        </tr>
                      </thead>
                      <tbody>
                        @foreach($sections as $section)
                          <tr>
                            <td>{{ $section->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>
                              <input type="checkbox" class="status-toggle" data-id="{{ $section->id }}" {{ $section->status == 1 ? 'checked' : '' }} data-bootstrap-switch>
                            </td>
                          </tr>
                        @endforeach
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>

<script>
  $(document).ready(function(){
    // Initialize Bootstrap Switch for the status toggle
    $("input[data-bootstrap-switch]").bootstrapSwitch();

    // Handle status toggle
    $(document).on('switchChange.bootstrapSwitch', '.status-toggle', function(event, state) {
        var id = $(this).data('id');
        var status = state ? 1 : 0;

        $.ajax({
            url: "{{ route('sections.status.update') }}",
            method: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                id: id,
                status: status
            },
            success: function(response) {
                if (response.success) {
                    // Update status badge
                    var row = $(event.target).closest('tr');
                    var badge = row.find('span.badge');
                    if (status === 1) {
                        badge.removeClass('bg-danger').addClass('bg-success').text('Active');
                    } else {
                        badge.removeClass('bg-success').addClass('bg-danger').text('Inactive');
                    }
                }
            }
        });
    });
  });
</script>
@endsection