@extends('dashboard.master')
@section('title', 'Teacher Salary Details')

@push('css')
    <link rel="stylesheet" href="{{ asset('backend/DataTables/datatables.min.css') }}">
    <link rel="stylesheet" href="{{ asset('backend/css/toggle.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.min.css" integrity="sha512-O03ntXoVqaGUTAeAmvQ2YSzkCvclZEcPQu1eqloPaHfJ5RuNGiS4l+3duaidD801P50J28EHyonCV06CUlTSag==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.0/css/toastr.css" rel="stylesheet" />
@endpush

@section('content')
<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid">
            <div class="page-title-wrapper">
                <div class="page-title-heading">
                    <div class="page-title-icon">
                        <i class="nav-icon fas fa-mosque"></i>
                    </div>
                    <span><b>Teacher Salary Details</b></span>
                </div>

                <div class="page-title-actions">
                    <a title="Create Button" href="{{ route('teacher.salary.create') }}" type="button" class="btn btn-sm btn-success">
                        <i class="fas fa-plus mr-1"></i>
                        Create
                    </a>
                </div>
            </div>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid">
            <div class="card">
                <div class="card-body">

                    <table class="table table-bordered table-striped data-table table-hover" style="width: 40%">
                        <thead>
                            <tr>
                                <td width="30%">Teacher</td>
                                <td>{{ $teacher->name ?? '' }}</td>
                            </tr>
                            <tr>
                                <th width="30%">Phone</th>
                                <th>{{ $teacher->phone ?? '' }}</th>
                            </tr>
                            <tr>
                                <td width="30%">Month</td>
                                <th>{{ \Carbon\carbon::parse($month)->format('F, Y') }}</th>
                            </tr>
                        </thead>
                    </table>
                    <hr> <br>
                    <table id="data_table" class="table table-bordered table-striped data-table table-hover">
                        <thead>
                            <tr>
                                <th>SN</th>
                                <th>Date</th>
                                <th>Amount</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
</div>

@push('js')
<script src="{{ asset('backend/DataTables/datatables.min.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js" integrity="sha512-Zq9o+E00xhhR/7vJ49mxFNJ0KQw1E1TMWkPTxrWcnpfEFDEXgUiwJHIKit93EW/XxE31HSI5GEOW06G6BF1AtA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.0/js/toastr.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

<script>
    $(document).ready(function () {
        var dTable = $('#data_table').DataTable({
            order: [],
            lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
            processing: true,
            responsive: false,
            serverSide: true,
            scroller: {
                loadingIndicator: false
            },
            language: {
                processing: '<i class="ace-icon fa fa-spinner fa-spin orange bigger-500" style="font-size:60px;text-align:center;"></i>'
            },
            pagingType: "full_numbers",
            ajax: {
                url: "{{ route('teacher.salary.details', ['month' => $month, 'teacher_id' => $teacher->id]) }}",
                type: "get"
            },
            columns: [
                { data: 'DT_RowIndex', name: 'DT_RowIndex', searchable: false },
                { data: 'date', name: 'date' },
                { data: 'amount', name: 'amount' },
                { data: 'action', searchable: false, orderable: false }
            ],
            dom: "<'row'<'col-sm-2'l><'col-sm-7 text-center'B><'col-sm-3'f>>tipr",
            buttons: [
                { extend: 'copy', className: 'btn-sm btn-info', title: 'Salary List', header: true, footer: true },
               
                { extend: 'print', className: 'btn-sm btn-danger', title: 'Salary List', pageSize: 'A2', header: true, footer: true, orientation: 'landscape', exportOptions: { columns: ':visible' } },
                { extend: 'colvis', className: 'btn-sm btn-warning', text: 'Column Visibility', title: 'Column Visibility', columns: ':not(:first-child)' }
            ],
        });
    });

    $('#data_table').on('click', '.btn-delete[data-remote]', function (e) {
        e.preventDefault();

        const url = $(this).data('remote');
        swal({
            title: `Are you sure?`,
            text: "Want to delete this record?",
            buttons: true,
            dangerMode: true,
        }).then((willDelete) => {
            if (willDelete) {
                $.ajax({
                    url: url,
                    type: 'get',
                    dataType: 'json',
                    data: { submit: true, _method: 'delete', _token: "{{ csrf_token() }}" }
                }).always(function (data) {
                    // $('#data_table').DataTable().ajax.reload();
                    if (data.success === true) {
                        toastr.success(data.message, { positionClass: 'toast-bottom-full-width', });
                        window.location.href = "{{ route('teacher.salary') }}";
                    } else {
                        toastr.error(data.message, { positionClass: 'toast-bottom-full-width', });
                    }
                });
            }
        });
    });

    @if(Session::has('success'))
        toastr.options = {
            "closeButton": true,
            "progressBar": true,
            "timeOut": 2000
        };
        toastr.success("{{ session('success') }}");
    @endif

    @if(Session::has('error'))
        toastr.options = {
            "closeButton": true,
            "progressBar": true
        };
        toastr.error("{{ session('error') }}");
    @endif
</script>
@endpush
@endsection