@extends('layout.template')
@section('content')
<!-- Header Layout Content -->
<div class="mdk-header-layout__content">

    <div data-push data-responsive-width="992px" class="mdk-drawer-layout js-mdk-drawer-layout">
        <div class="mdk-drawer-layout__content page ">

            <div class="container-fluid page__container">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">Home</a></li>
                    <li class="breadcrumb-item active">Receipt</li>
                </ol>

                <div class="card border-left-3 border-left-primary card-2by1">
                    <div class="card-body">
                        <div class="media flex-wrap align-items-center">
                            <div class="media-body col-md-9">
                                <h3> <strong>Receipt</strong></h3>

                            </div>
                            <div class="media-right mt-10 mt-xs-plus-0 col-md-4" style="display: inline-flex;">
                                <a class="btn btn-success" href="{{route('admin.add-receipt')}}">Add Receipt</a>
                                <button class="btn btn-danger" title="Delete selected rows" data-toggle="modal" data-target="#deleteAll"><i class="fas fa-trash"></i></button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="tab-content card-body">
                        <div class="table-responsive border-bottom" data-toggle="lists" data-lists-values="[&quot;js-lists-values-employee-name&quot;]">
                            <table class="table mb-0 data-table paid" style="width:100%;">
                                <thead>
                                    <tr>
                                        <th style="width: 18px;">
                                            <input type="checkbox" name="datatablecheckbox" data-target="#staff" id="checkAll" data-domfactory-upgraded=" toggle-check-all">
                                        </th>
                                        <th>Sl.no</th>
                                        <th>Receipt No</th>
                                        <th>Payment Type
                                        </th>
                                        <th>Member/Entity</th>
                                        <th>Paid Amount</th>
                                        <th>Paid Date</th>
                                        <th>ACTIONS</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>

                        </div>

                    </div>
                </div>
                <!-- Modal -->
                <div class="modal fade flip" tabindex="-1" id="deleteMemberModal" role="dialog">
                    <div class="modal-dialog">

                        <!-- Modal content-->
                        <div class="modal-content">
                            <div class="modal-body p-5 text-center">
                                <lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#405189,secondary:#f06548" style="width:90px;height:90px"></lord-icon>
                                <div class="mt-4 text-center">
                                    <h4>Are you sure you want to delete this item ?</h4>
                                    <div class="hstack gap-2 justify-content-center remove">
                                        <button class="btn btn-link link-success fw-medium text-decoration-none" data-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i>
                                            Close</button>
                                        <button typr="submit" class="btn btn-danger" id="delete-record" data-dismiss="modal">Yes,
                                            Delete It</button>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
                <!-- Modal -->
                <div class="modal fade flip" id="viewModal" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">Receipt Details</h4>
                                <button type="button" class="close" data-dismiss="modal">×</button>
                            </div>
                            <div class="modal-body " id="content">

                            </div>
                        </div>
                    </div>
                </div>
                <!--end modal -->
                <!-- Modal -->
                <div class="modal fade flip" id="deleteAll" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-body p-5 text-center">
                                <lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#405189,secondary:#f06548" style="width:90px;height:90px"></lord-icon>
                                <div class="mt-4 text-center">
                                    <h4>Are you sure you want to delete these items ?</h4>
                                    <div class="hstack gap-2 justify-content-center remove">
                                        <button class="btn btn-link link-success fw-medium text-decoration-none" data-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i>
                                            Close</button>
                                        <button typr="submit" class="btn btn-danger" id="deleteMultiple" data-dismiss="modal">Yes,
                                            Delete It</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--end modal -->

            </div>

        </div>
        <script type="text/javascript">
            $(function() {

                var table = $('.paid').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: "{{ route('admin.get-receipt') }}",
                    columns: [{

                            data: 'checkbox',
                            name: 'checkbox',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'DT_RowIndex',
                            name: 'DT_RowIndex'
                        },
                        {
                            data: 'receipt_no',
                            name: 'receipt_no'
                        },
                        {
                            data: 'payment',
                            name: 'payment'
                        },
                        {
                            data: 'member',
                            name: 'member'
                        },
                        {
                            data: 'amount',
                            name: 'amount'
                        },
                        {
                            data: 'paid_date',
                            name: 'paid_date'
                        },
                        {
                            data: 'action',
                            name: 'action',
                            orderable: false,
                            searchable: false
                        },
                    ],
                    "select": {
                        'style': 'multi',
                        'selector': 'td:first-child' //only checkbox can select row
                    },
                });

            });
            $("#deleteMultiple").click(function() {
                arr = [];
                var arr = $("input[name='datatablecheckbox[]']:checked").map(function() {
                    return this.value;
                }).get();
                $.ajax({
                    type: 'GET',
                    data: {
                        ids: arr
                    },
                    url: "{{ route('admin.delete-multiple-receipts') }}",
                    success: function(result) {
                        $('#checkAll').prop('checked', false);
                        if (result > 0) {
                            $(".alert-success").text("Record deleted successfully.");
                        } else {
                            $(".alert-danger").text("Something went wrong.");
                        }

                        $('.data-table').DataTable().ajax.reload();
                    }
                });
            });

            var deleteID;
            $('body').on('click', '#getDeleteId', function() {
                deleteID = $(this).data('id');
                $('#deleteMemberModal').modal('show');
            })
            $('#delete-record').click(function(e) {
                e.preventDefault();

                var id = deleteID;
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url: "{{ route('admin.delete-receipt') }}",
                    method: "GET",
                    data: {
                        'id': id
                    },
                    success: function(result) {
                        $('#deleteMemberModal').modal('hide');
                        if (result == 1) {
                            $(".alert-success").text("Record deleted successfully.");
                        } else {
                            $(".alert-danger").text("Something went wrong.");
                        }

                        $('.data-table').DataTable().ajax.reload();

                    }
                });
            });


            $('body').on('click', '#getDetails', function() {
                id = $(this).data('id');
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url: "{{ route('admin.show-receipt') }}",
                    method: "GET",
                    data: {
                        'id': id
                    },
                    success: function(result) {
                        $('#viewModal').modal('show');
                        $('#content').html(result.html);
                    }
                });
            })
        </script>
        @endsection