@extends('../layout/' . $layout)

@section('subhead')
<title>Atarud MIS - Teachers List</title>
<link href="{{ asset('dist/css/dataTables.min.css') }}" rel="stylesheet">
@endsection
<link rel="stylesheet" href="{{ asset('dist/persianDatepicker/css/persianDatepicker-default.css') }}" />

@section('subcontent')

<div class="flex items-center mt-8">
    <h2 class="intro-y text-lg font-medium mr-auto">Teachers List</h2>
    <a href="javascript:;" data-tw-toggle="modal" data-tw-target="#new-exam" class="btn btn-primary w-24 ml-auto">
        <i data-lucide="plus-circle" class="w-4 h-4 mr-1"></i> Add
    </a>
</div>

<ul class="nav nav-tabs" role="tablist">
    <li id="example-1-tab" class="nav-item flex-1" role="presentation">
        <button class="nav-link w-full py-2 active" data-tw-toggle="pill" data-tw-target="#example-tab-1" type="button"
            role="tab" aria-controls="example-tab-1" aria-selected="true">
            Active Teachers
        </button>
    </li>
    <li id="example-2-tab" class="nav-item flex-1" role="presentation">
        <button class="nav-link w-full py-2" data-tw-toggle="pill" data-tw-target="#example-tab-2" type="button"
            role="tab" aria-controls="example-tab-2" aria-selected="false">
            Deactive Teachers
        </button>
    </li>
</ul>
<div class="tab-content border-l border-r border-b">

    <div id="example-tab-1" class="tab-pane leading-relaxed p-5 active" role="tabpanel" aria-labelledby="example-1-tab">

        <div class="container">
            <div class="row">
                <div class="col-12 table-responsive">
                    <table class="table table-bordered teacher_datatable">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th>fname</th>
                                <th>Email</th>
                                <th>phone</th>
                                <th width="100px">Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div id="example-tab-2" class="tab-pane leading-relaxed p-5 box" role="tabpanel" aria-labelledby="example-2-tab">
        <div class="container ">
            <div class="row">
                <div class="col-12 table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th>fname</th>
                                <th>Email</th>
                                <th>phone</th>

                                <th width="100px">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                            $c= 0;
                            @endphp
                            @foreach ($deactive_teachers as $row )
                            <tr>
                                <td>{{ ++$c }}</td>
                                <td>{{ $row->name }}</td>
                                <td>{{ $row->fname }}</td>
                                <td>{{ $row->phone }}</td>
                                <td>{{ $row->email }}</td>
                                <td>  <div class="dropdown">';
                                     <button class="dropdown-toggle btn btn-primary" aria-expanded="false" data-tw-toggle="dropdown">Action</button>
                                     <div class="dropdown-menu w-40"> <ul class="dropdown-content"><li>
                                     <a href="javascript:;" onclick="addContract('.$row->id.');" data-teacherid="'.$row->id.'" data-tw-toggle="modal" data-tw-target="#basic-modal-preview" class="dropdown-item">Add Contract</a></li>
                                     <a href="{{route('teacher.edit',$row->id)}}" class="dropdown-item">Edit</a></li>
                                     <a href="javascript:;"  onclick="return deleteRecord('.$row->id.' );" class="dropdown-item"  data-tw-toggle="modal" data-tw-target="#delete-confirmation-modal">Delete</a></li>
                                     <li><a href="'.route('teacher.details',$row->id).'" class="dropdown-item">Details</a></li></ul></div></div>

                                </td>
                            </tr>
                            @endforeach

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@include('../pages/teacher/create')
@include('../pages/teacher/contract')
@include('../pages/teacher/delete')
@endsection


@section('script')
<script src="{{ asset('dist/js/jquery.js') }}"></script>
<script src="{{ asset('dist/js/dataTables.min.js') }}"></script>
<script src="{{ asset('dist/persianDatepicker/js/persianDatepicker.js') }}"></script>
<script>
    function deleteRecord(id){
        document.getElementById('id').value = id;
    }
    $(function () {

        $(".pdpF2").persianDatepicker({
            months: ["حمل", "ثور", "جوزا", "سرطان", "اسد", "سنبله", "میزان", "عقرب", "قوس", "جدی", "دلو", "حوت"],
            dowTitle: ["شنبه", "یکشنبه", "دوشنبه", "سه شنبه", "چهارشنبه", "پنج شنبه", "جمعه"],
            shortDowTitle: ["ش", "ی", "د", "س", "چ", "پ", "ج"],
            showGregorianDate: !1,
            persianNumbers: !0,
            formatDate: "YYYY-MM-DD",
            selectedBefore: !1,
            selectedDate: null,
            startDate: null,
            endDate: null,
            prevArrow: '\u25c4',
            nextArrow: '\u25ba',
            theme: 'default',
            alwaysShow: !1,
            selectableYears: null,
            selectableMonths: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
            cellWidth: 25, // by px
            cellHeight: 20, // by px
            fontSize: 13, // by px
            isRTL: !1,
            calendarPosition: {
                x: 0,
                y: 0,
            },
            onShow: function () {},
            onHide: function () {},
            onSelect: function () {},
            onRender: function () {}
    });


    });
</script>

<script type="text/javascript">
    function addContract(id){
            $('#teacher_id').val(id);
        }
        $(function() {
            var table = $('.teacher_datatable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('teacher') }}",
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'fname',
                        name: 'fname'
                    },
                    {
                        data: 'email',
                        name: 'email'
                    },
                    {
                        data: 'phone',
                        name: 'phone'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ]
            });
        });
</script>
@endsection