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

@section('subhead')
    <title>Atarud MIS - Rap 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">

        <a href="javascript:;" data-tw-toggle="modal" data-tw-target="#new-exam" class="btn btn-primary w-24 ml-auto mr-2">
            <i data-lucide="plus-circle" class="w-4 h-4 mr-1"></i> Add
        </a>
        
    </div>

    <div class="flex items-center mt-8">
        <h2 class="intro-y text-lg font-medium mr-auto">Rap List</h2>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-12 table-responsive">
                <table class="table table-bordered rap_datatable" id="">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Teacher</th>
                            <th>Employee</th>
                            <th>Amount</th>
                            <th>Date</th>
                            <th>Type</th>
                            <th width="100px">Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
    @include('../pages/rap/create')
    
@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 () {

        $(".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">
        $('#emps').hide();
        $('#teachers').hide();

        $('#employeeType').on('change',function(){
            if(this.value =='employee'){
                $('#emps').show();
                $('#teachers').hide();
            }
            if(this.value =='teacher'){
                $('#emps').hide();
                $('#teachers').show();
            }

        });

        $(function() {
            var table = $('.rap_datatable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ url('/rap') }}",
                },
                columns: [
                    {data: 'id', name: 'id'},
                    {data: 'teacher_id', name: 'teacher_id'},
                    {data: 'employee_id', name: 'employee_id'},
                    {data: 'amount', name: 'amount'},
                    {data: 'date', name: 'date'},
                    {data: 'type', name: 'type'},
                    {data: 'action', name: 'action', orderable: false, searchable: false},
                ]
            });
        });

    </script>
@endsection