@extends('admin.layouts.master')

@section('title') Starter Page @endsection
@section('css')
@endsection
@section('content')

    <div class="container-xxl flex-grow-1 container-p-y">
        <h3>{{__('sections.section')}} : {{$section->name}}</h3>
        <div class="row">
            <!-- User Sidebar -->

            <!--/ User Sidebar -->
            <!-- User Content -->
            <div class="col-xl-12 col-lg-12 col-md-12 order-0 order-md-1">
                <!-- User Pills -->
                <ul class="nav nav-pills flex-column flex-md-row mb-4">
                    <li class="nav-item">
                        <a class="nav-link @if($type=='details') active @endif" href="{{route('admin.sections.show',['section'=>$section->id,'type'=>'details'])}}"
                        ><i class="ti ti-list ti-xs me-1"></i>تفاصيل القسم</a
                        >
                    </li>

                    <li class="nav-item">
                        <a class="nav-link @if($type=='weekly') active @endif" href="{{route('admin.sections.show',['section'=>$section->id,'type'=>'weekly'])}}"
                        ><i class="ti ti-currency-dollar ti-xs me-1"></i> جدول الحصص الاسبوعية</a
                        >
                    </li>

                </ul>
                <!--/ User Pills -->
                @if($type=='details')
                    @include('admin.components.tabs.sections.details',compact('section'))
                @elseif($type=='weekly')
                    @include('admin.components.tabs.sections.weekly',compact('section'))
                @endif
            </div>
            <!--/ User Content -->



        </div>

        <!-- Modal -->


        <!-- /Modal -->
    </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: '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>
    <script>
        function printSection(sectionId) {
            const section = document.getElementById(sectionId);

            if (!section) return;

            const printWindow = window.open('', '_blank');
            printWindow.document.write(`
            <html>
                <head>
                    <title>Print Timetable</title>
                    <style>
                        table {
                            width: 100%;
                            border-collapse: collapse;
direction: rtl;
                        }
                        th, td {
                            border: 1px solid #000;
                            padding: 8px;
                            text-align: center;
                        }
                        th {
                            background-color: #f0f0f0;
                        }
                        body {
                            font-family: Arial, sans-serif;
                            padding: 20px;
                        }
                    </style>
                </head>
                <body>
                    ${section.innerHTML}
                </body>
            </html>
        `);
            printWindow.document.close();
            printWindow.focus();
            printWindow.print();
            printWindow.close();
        }
    </script>
@endsection