@extends('admin.admin_dashboard')

@section('admin')
<div class="content-body">
  <div class="container-fluid">
    <div class="card">
      <div class="card-header"><h4 class="card-title">Manage Assign Section</h4></div>
      <div class="card-body">
        <form action="{{ route('admin.store.assign.section') }}" method="post" id="assignSectionForm">
          @csrf
          <div class="row">
            <div class="mb-3 col-md-4">
              <label class="form-label">Class:</label>
              <select id="inputStateClass" name="class_id" class="default-select form-control wide" required>
                <option value="">Select class...</option>
                @foreach ($allClass as $class)
                  <option value="{{ $class->id }}" @if(isset($class_id) && $class_id == $class->id) selected @endif>
                    {{ $class->name }}
                  </option>
                @endforeach
              </select>
            </div>

            <div class="mb-3 col-md-2">
              <label class="form-label">Status:</label>
              <select id="statusSelect" name="status" class="default-select form-control wide">
                <option value="1" @if(isset($status) && $status == 1) selected @endif>Active</option>
                <option value="0" @if(isset($status) && $status == 0) selected @endif>Inactive</option>
              </select>
            </div>
          </div>

          <div class="row">
            <div class="mb-3 col-md-12">
              <label class="form-label">Sections:</label>
              <div class="row">
                @foreach ($allSection as $section)
                  <div class="col-md-3">
                    <div class="form-check custom-checkbox mb-2">
                      <input type="checkbox" class="form-check-input" id="customCheckBox{{ $section->id }}" value="{{ $section->id }}" name="section_id[]"
                        @if(in_array($section->id, $assignedSections ?? [])) checked @endif>
                      <label class="form-check-label" for="customCheckBox{{ $section->id }}">{{ $section->name }}</label>
                    </div>
                  </div>
                @endforeach
              </div>
            </div>
          </div>

          <div class="row" style="text-align: right;">
            <div class="mb-3 col-md-12">
              <button type="submit" class="btn btn-primary">Save</button>
              <a href="{{ route('admin.assign.section.list') }}" class="btn btn-secondary">Back</a>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
@endsection

@section('customjs')
<script>
$(document).ready(function() {
    $('#inputStateClass').on('change', function() {
        var classId = $(this).val();
        if (!classId) {
            $('input[name="section_id[]"]').prop('checked', false);
            return;
        }

        var url = "{{ url('/admin/assign-section/fetch-assigned') }}/" + classId;
        $.get(url, function(res) {
            // uncheck all first
            $('input[name="section_id[]"]').prop('checked', false);
            if (res.assigned && res.assigned.length) {
                res.assigned.forEach(function(id) {
                    $('#customCheckBox' + id).prop('checked', true);
                });
            }
            if (typeof res.status !== 'undefined') {
                $('#statusSelect').val(res.status);
            }
        });
    });

    // trigger change on load if a class is preselected
    var pre = '{{ $class_id ?? '' }}';
    if (pre) {
        $('#inputStateClass').trigger('change');
    }
});
</script>
@endsection