@extends('layouts.admin')

@section('styles')

@endsection

@section('content')
    <div class="container-fluid">
      
        <style>
            .table thead tr td {
                padding: 0px 0px 15.2px 0px;
            }
            .select2-search__field {
    width: auto !important; /* Override inline width */
    min-width: 0; /* Optional: Prevent large default width */
}
        </style>
          <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-10">
                                @include('elements.admin-breadcrumb')
                            </div>
                            @can('admin.chapter.create')
                            <div class="col-2  text-end">
                                <a class="btn btn-primary" wire:navigate href="{{ route('admin.chapter.create') }}"><i class="fa fa-plus"></i> {{ __('Add New') }}</a>
                            </div>
                            @endcan
                          
                        </div>
                    </div>
                    <div class="card-body">
                        @include('elements.alert')



                        <form class="mb-15" id="kt_chapter_delete" action="{{ route('admin.chapter.delete') }}" method="POST">
                            @csrf
                            @method('post')
                            <table class="table  w-100 nowrap  no-footer">
                                <tbody>
                                    <tr>
                                        <td class="col-md-4">
                                            <select id="filter_active" class="form-select form-control-sm datatable-input">
                                                <option value="">- Select Status -</option>
                                                <option value="1">Active</option>
                                                <option value="0">Inactive</option>
                                            </select>
                                        </td>
                                      
    
                                        <td>
                                            
                                            <button type="button" class="btn btn-dark" id="kt_reset">Reset</button>
                                            <button class="btn btn-danger" id="kt_delete" style="display: none" type="submit" name="submit" value="delete">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <table id="common_datatable" class="table table-striped w-100"
                            data-column="id,name,status,createdByName,created_at"
                            data-column-name="id,name,status,createdByName,created_at,actions"

                            data-extra-param="filter_active"
                            data-extra-param-name="status"
                            
                            data-control="{{route('admin.chapter.list')}}" data-sorting="4" data-sorting-type="DESC"
                             data-serial-number="1" data-except-sorting-columns="8"
                            role="grid"
                            aria-describedby="common_datatable_info">
                            
                                <thead>
                                    
    
                                    <tr>
                                        <th>
                                            <input class="form-check-input" type="checkbox" name="checkAll" id="checkAll">
                                        </th>
                                        <th>Name</th>
                                        <th>Status</th>
                                        <th>Created By</th>
                                        <th>Created On</th>
                                        
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
    
                                </tbody>
                            </table>
                        </form>


                    </div> <!-- end card body-->
                </div> <!-- end card -->
            </div><!-- end col-->
        </div> <!-- end row-->
    </div>

    
<div class="modal fade" id="assignTopicModal" tabindex="-1" aria-labelledby="assignTopicModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Topics</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="{{route('admin.topic_chapter.storTopic')}}" method="POST">
                    @csrf
                    <div class="mb-3">
                        <input type="hidden" name="chapter_id" id="chapter_id" value="">
                        <label for="topics" class="col-form-label">Select Topics:</label>
                        <select id="topic_id[]" name="topic_id[]" class="form-control select2-multiple"
                            data-toggle="select2" multiple="multiple" data-placeholder="Choose ...">

                            @foreach ($topics as $topic)
                            <option value="{{ $topic->id }}">
                                {{ $topic->title }}
                            </option>
                            @endforeach

                        </select>
                    </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')

<script>
    $(document).ready(function() {
        $('#assignTopicModal').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget); // Button that triggered the modal
            var chapterId = button.data('id');
            
            $("#assignTopicModal #chapter_id").val(chapterId);
        });
        $('#assignTopicModal').on('hidden.bs.modal', function() {
        // Reset the form fields
        $(this).find('form')[0].reset();
        
        // Reset Select2 fields (if any)
        $(this).find('select').val(null).trigger('change');
    });
    });
    
</script>
  

  
@endsection