@extends('admin.layouts.master')

@section('title') {{__('students.students')}} @endsection
@section('css')

    <link rel="stylesheet" href="{{asset('backend/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css')}}" />
    <link rel="stylesheet" href="{{asset('backend/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css')}}" />
    <link rel="stylesheet" href="{{asset('backend/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css')}}" />

@endsection
@section('content')


    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="row g-5 mb-5">
            <div class="col-sm-6 col-xl-3">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex align-items-start justify-content-between">
                            <div class="content-left">
                                <span class="text-heading">العدد الجملي</span>
                                <div class="d-flex align-items-center my-1">
                                    <h4 class="mb-0 me-2">{{\App\Models\Student::count()}}</h4>

                                </div>

                            </div>
                            <div class="avatar">
                              <span class="avatar-initial rounded bg-label-primary">
                                <i class="icon-base ti tabler-users icon-26px"></i>
                              </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-xl-3">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex align-items-start justify-content-between">
                            <div class="content-left">
                                <span class="text-heading">عدد المباشرين</span>
                                <div class="d-flex align-items-center my-1">
                                    <h4 class="mb-0 me-2">0</h4>
                                    <p class="text-success mb-0">(0%)</p>
                                </div>
                            </div>
                            <div class="avatar">
                              <span class="avatar-initial rounded bg-label-success">
                                <i class="icon-base ti tabler-user-plus icon-26px"></i>
                              </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-xl-3">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex align-items-start justify-content-between">
                            <div class="content-left">
                                <span class="text-heading">عدد المغادرين</span>
                                <div class="d-flex align-items-center my-1">
                                    <h4 class="mb-0 me-2">0</h4>
                                    <p class="text-danger mb-0">(0%)</p>
                                </div>
                            </div>
                            <div class="avatar">
                              <span class="avatar-initial rounded bg-label-danger">
                                <i class="icon-base ti tabler-user-check icon-26px"></i>
                              </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-xl-3">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex align-items-start justify-content-between">
                            <div class="content-left">
                                <span class="text-heading">عدد المرتقين</span>
                                <div class="d-flex align-items-center my-1">
                                    <h4 class="mb-0 me-2">0</h4>
                                    <p class="text-info mb-0">(0%)</p>
                                </div>

                            </div>
                            <div class="avatar">
                              <span class="avatar-initial rounded bg-label-info">
                                <i class="icon-base ti tabler-user-search icon-26px"></i>
                              </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Products List Table -->
        <div class="card">
            <div class="card-header border-bottom">
                <h5 class="card-title mb-3">{{__('students.students')}}</h5>
                <button id="advancedSearch" class="btn btn-primary">{{__('general.actions.advancedSearch')}}</button>
            </div>
            <div class="card-datatable table-responsive">
                <table class="datatables-records table">
                    <thead class="border-top">
                    <tr>
                        <th>#</th>
                        <th>{{__('general.fields.first_name')}}</th>
                        <th>{{__('students.Nationality')}}</th>
                        <th>{{__('students.Address')}}</th>
                        <th>{{__('students.Father\'s Name')}}</th>
                        <th>{{__('students.Father\'s Phone')}}</th>
                        <th>{{__('students.Mother\'s Name')}}</th>
                        <th>{{__('students.Mother\'s Phone')}}</th>
                        <th>{{__('general.actions.control')}}</th>
                    </tr>
                    </thead>
                    <tfoot style="display: table-row-group;" class="d-none">
                        <tr>
                            <th class="searchable">ID</th>
                            <th class="searchable">{{__('general.fields.first_name')}}</th>
                            <th class="searchable">{{__('students.Nationality')}}</th>
                            <th class="searchable">{{__('students.Address')}}</th>
                            <th class="searchable">{{__('students.Father\'s Name')}}</th>
                            <th class="searchable">{{__('students.Father\'s Phone')}}</th>
                            <th class="searchable">{{__('students.Mother\'s Name')}}</th>
                            <th class="searchable">{{__('students.Mother\'s Phone')}}</th>
                            <th>{{__('general.actions.control')}}</th>
                        </tr>

                    </tfoot>
                    <tbody>

                    </tbody>
                </table>
            </div>
            <!-- Offcanvas to add new Expense -->
            <div
                    class="offcanvas offcanvas-end"
                    tabindex="-1"
                    id="offcanvasAddRecord"
                    aria-labelledby="offcanvasAddRecordLabel">
                <div class="offcanvas-header">
                    <h5 id="offcanvasAddRecordLabel" class="offcanvas-title"> {{__('general.actions.add')}} {{__('students.students')}}</h5>
                    <button
                            type="button"
                            class="btn-close text-reset"
                            data-bs-dismiss="offcanvas"
                            aria-label="Close"></button>
                </div>
                <div class="offcanvas-body mx-0 flex-grow-0 pt-0 h-100">
                    <form class="add-new-Brand pt-0 form-block" id="addNewRecordForm"  method="POST" action="{{route('admin.students.store')}}">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label" for="name">{{__('general.fields.first_name')}}</label>
                            <input
                                    type="text"
                                    class="form-control"
                                    placeholder="{{__('general.fields.first_name')}}"
                                    name="name"
                                    id="name"
                                    required
                                    aria-label="" />
                        </div>
{{--                        <div class="mb-3">--}}
{{--                            <label class="form-label" for="last_name">{{__('general.fields.last_name')}}</label>--}}
{{--                            <input--}}
{{--                                    type="text"--}}
{{--                                    class="form-control"--}}
{{--                                    placeholder="{{__('general.fields.last_name')}}"--}}
{{--                                    name="last_name"--}}
{{--                                    id="last_name"--}}
{{--                                    required--}}
{{--                                    aria-label="" />--}}
{{--                        </div>--}}


                        <!-- Unique ID -->
                        <div class="mb-3">
                            <label class="form-label" for="student-unique-id">{{__('students.Unique ID')}}</label>
                            <input type="text" class="form-control" id="student-unique-id" name="unique_id" placeholder="1234567890" />
                        </div>



                        <!-- Gender -->
                        <div class="mb-3">
                            <label class="form-label" for="student-gender">{{__('students.Gender')}}</label>
                            <select id="student-gender" name="gender" class="form-select">
                                <option value="male">{{__('students.Male')}}</option>
                                <option value="female">{{__('students.Female')}}</option>
                            </select>
                        </div>

                        <!-- Birth Date -->
                        <div class="mb-3">
                            <label class="form-label" for="student-birth-date">{{__('students.Birth Date')}}</label>
                            <input type="date" class="form-control" id="student-birth-date" name="birth_date" />
                        </div>

                        <!-- Nationality -->
                        <div class="mb-3">
                            <label class="form-label" for="student-nationality">{{__('students.Nationality')}}</label>
                            <input type="text" class="form-control" id="student-nationality" name="nationality" placeholder="تونسية" value="تونسية" />
                        </div>



                        <!-- Guardian -->
                        <div class="mb-3">
                            <label class="form-label" for="student-guardian">{{__('students.Guardian Name')}}</label>
                            <input type="text" class="form-control" id="student-guardian" name="guardian_name" placeholder="{{__('students.Guardian Name')}}" />
                        </div>

                        <!-- Father -->
                        <div class="mb-3">
                            <label class="form-label" for="father-name">{{__('students.Father\'s Name')}}</label>
                            <input type="text" class="form-control" id="father-name" name="father_name" placeholder="{{__('students.Father\'s Name')}}" />
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="father-job">{{__('students.Father\'s Job')}}</label>
                            <input type="text" class="form-control" id="father-job" name="father_job" placeholder="{{__('students.Father\'s Job')}}" />
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="father-phone">{{__('students.Father\'s Phone')}}</label>
                            <input type="text" class="form-control" id="father-phone" name="father_phone" placeholder="{{__('students.Father\'s Phone')}}" />
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="father-email">{{__('students.Father\'s Email')}}</label>
                            <input type="email" class="form-control" id="father-email" name="father_email" placeholder="{{__('students.Father\'s Email')}}" />
                        </div>

                        <!-- Mother -->
                        <div class="mb-3">
                            <label class="form-label" for="mother-name">{{__('students.Mother\'s Name')}}</label>
                            <input type="text" class="form-control" id="mother-name" name="mother_name" placeholder="{{__('students.Mother\'s Name')}}" />
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="mother-job">{{__('students.Mother\'s Job')}}</label>
                            <input type="text" class="form-control" id="mother-job" name="mother_job" placeholder="{{__('students.Mother\'s Job')}}" />
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="mother-phone">{{__('students.Mother\'s Phone')}}</label>
                            <input type="text" class="form-control" id="mother-phone" name="mother_phone" placeholder="{{__('students.Mother\'s Phone')}}" />
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="mother-email">{{__('students.Mother\'s Email')}}</label>
                            <input type="email" class="form-control" id="mother-email" name="mother_email" placeholder="{{__('students.Mother\'s Email')}}" />
                        </div>

                        <!-- Address -->
                        <div class="mb-3">
                            <label class="form-label" for="student-address">{{__('students.Address')}}</label>
                            <textarea class="form-control" id="student-address" name="address" rows="2" placeholder="{{__('students.Address')}}"></textarea>
                        </div>

                        <!-- Notes -->
                        <div class="mb-3">
                            <label class="form-label" for="student-notes">{{__('students.Notes')}}</label>
                            <textarea class="form-control" id="student-notes" name="notes" rows="3"></textarea>
                        </div>


                        <button type="submit" class="btn btn-primary me-sm-3 me-1 data-submit btn-form-block-spinner">{{__('general.actions.submit')}} </button>
                        <button type="reset" class="btn btn-label-secondary" data-bs-dismiss="offcanvas">{{__('general.actions.cancel')}} </button>
                    </form>
                </div>
            </div>
            <!-- Offcanvas to add new Expense -->
            <div
                    class="offcanvas offcanvas-end"
                    tabindex="-1"
                    id="offcanvasUpdateRecord"
                    aria-labelledby="offcanvasUpdateRecordLabel">
                <div class="offcanvas-header">
                    <h5 id="offcanvasUpdateRecordLabel" class="offcanvas-title">{{__('general.actions.edit')}} {{__('students.students')}} </h5>
                    <button
                            type="button"
                            class="btn-close text-reset"
                            data-bs-dismiss="offcanvas"
                            aria-label="Close"></button>
                </div>
                <div class="offcanvas-body mx-0 flex-grow-0 pt-0 h-100" id="updateRecordDiv">

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

@endsection
@section('script')
    <script src="{{asset('backend/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js')}}"></script>


    <script>
        var table = $('.datatables-records').DataTable({

            processing: true,
            serverSide: true,

            ajax: "{{ route('admin.students') }}",
            columns: [

                { data: 'id', name: 'id' },
                { data: 'name', name: 'name' },
                { data: 'nationality', name: 'nationality' },
                { data: 'address', name: 'address' },
                { data: 'father_name', name: 'father_name' },
                { data: 'father_phone', name: 'father_phone' },
                { data: 'mother_name', name: 'mother_name' },
                { data: 'mother_phone', name: 'mother_phone' },

                { data: 'action', name: 'action', orderable: false, searchable: false }

            ],
            order: [[1, 'desc']],
            dom:
                '<"row me-2"' +
                '<"col-md-2"<"me-3"l>>' +
                '<"col-md-10"<"dt-action-buttons text-xl-end text-lg-start text-md-end text-start d-flex align-items-center justify-content-end flex-md-row flex-column mb-3 mb-md-0"fB>>' +
                '>t' +
                '<"row mx-2"' +
                '<"col-sm-12 col-md-6"i>' +
                '<"col-sm-12 col-md-6"p>' +
                '>',
            language: {
                sLengthMenu: '_MENU_',
                search: '',
                searchPlaceholder: '{{__('general.search')}}...'
            },
            // Buttons with Dropdown
            buttons: [
                {
                    extend: 'collection',
                    className: 'btn btn-label-secondary dropdown-toggle mx-3 waves-effect waves-light',
                    text: '<i class="ti ti-screen-share me-1 ti-xs"></i>{{__('general.actions.export')}}',
                    buttons: [
                        {
                            extend: 'print',
                            text: '<i class="ti ti-printer me-2" ></i>Print',
                            className: 'dropdown-item',
                        },
                        {
                            extend: 'csv',
                            text: '<i class="ti ti-file-text me-2" ></i>Csv',
                            className: 'dropdown-item',
                        },
                        {
                            extend: 'excel',
                            text: '<i class="ti ti-file-spreadsheet me-2"></i>Excel',
                            className: 'dropdown-item',
                        },
                        {
                            extend: 'pdf',
                            text: '<i class="ti ti-file-code-2 me-2"></i>Pdf',
                            className: 'dropdown-item',
                        },
                        {
                            extend: 'copy',
                            text: '<i class="ti ti-copy me-2" ></i>Copy',
                            className: 'dropdown-item',
                        }
                    ]
                },
                {
                    text: '<i class="ti ti-plus me-0 me-sm-1 ti-xs"></i><span class="d-none d-sm-inline-block">{{__('general.actions.add')}} {{__('students.students')}}</span>',
                    className: 'add-new btn btn-primary waves-effect waves-light',
                    attr: {
                        'data-bs-toggle': 'offcanvas',
                        'data-bs-target': '#offcanvasAddRecord'
                    }
                }
            ],

            aLengthMenu: [
                [10, 25, 50, 100, 200, -1],
                [10, 25, 50, 100, 200, "All"]
            ],

            responsive:false,
            initComplete: function () {
                // Apply the search
                this.api()
                    .columns()
                    .every(function () {
                        var that = this;
                        $('.searching-input', this.footer()).on('keyup change clear', function () {
                            if (that.search() !== this.value) {
                                that.search(this.value).draw();
                            }
                        });
                    });
            },
        });
        $('.datatables-records tfoot .searchable').each(function () {
            var title = $(this).text();
            $(this).html('<input class="form-control searching-input" type="text" placeholder="' + title + '" />');
        });
        $('#advancedSearch').on('click', function() {
            $('.datatables-records tfoot').toggleClass('d-none');
        });
    </script>
@endsection