@extends('dashboard.master')
@section('title', 'Money Receipt List 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>Money Receipt List Details</b></span>
                </div>

                <div class="page-title-actions">
                    <a title="Create Button" href="{{ route('payment.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%">Student</td>
                                <td>{{ $studentName }}</td>
                            </tr>
                            <tr>
                                <th width="30%">Class</th>
                                <th>{{ $studentClass }}</th>
                            </tr>
                            <tr>
                                <td width="30%">Session</td>
                                <th>{{ $session }}</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>Total Amount</th>
                                <th>Receive Amount</th>
                                <th>Discount Amount</th>
                                <th>Due 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,
            scrollX: true,
            autoWidth: false,
            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('payment.list.details', ['month' => $month, 'student_id' => $student_id]) }}",
                type: "get"
            },
            columns: [
                { data: 'DT_RowIndex', name: 'DT_RowIndex', searchable: false },
                { data: 'date', name: 'date' },
                { data: 'total_amount', name: 'total_amount' },
                { data: 'receive_amount', name: 'receive_amount' },
                { data: 'discount_amount', name: 'discount_amount' },
                { data: 'due_amount', name: 'due_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: 'Money Received List', header: true, footer: true },
                
                {
                    extend: 'excel',
                    className: 'btn-sm btn-success',
                    title: 'Money Received List',
                    header: true,
                    footer: true,
                    exportOptions: {
                         columns: [0, 1, 2, 3] 
                        }
                     },
                { extend: 'print', className: 'btn-sm btn-danger', title: 'Money Received 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: 'POST',
                    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', });
                    } 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