@extends('layout.app')

@section('title', 'Expense Voucher List')

@push('header_script')
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/dataTables.bs5.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/dataTables.bs5-custom.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/buttons/dataTables.bs5-custom.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/assets/sweetalert/sweet-alert.css') }}" type="text/css">
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/daterange/daterange.css') }}">
@endpush

@section('content')

    <div class="app-hero-header d-flex align-items-center">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="javascript:void(0);">Expense Voucher List</a>
            </li>
        </ol>
        <div class="ms-auto d-lg-flex flex-row">
            <div class="d-flex flex-row gap-1 day-sorting">
                <a href="{{ route('expense-voucher.create') }}" class="btn btn-sm btn-primary">
                    <i class="ri-add-circle-fill"></i> Add
                </a>
            </div>
        </div>
    </div>

    <div class="app-body">
        <div class="row gx-3">

            <div class="col-sm-2">
                <label class="form-label" for="date_period">Period</label>
                <select id="date_period" class="form-select">
                    <option value="all" selected>All</option>
                    <option value="today">Today</option>
                    <option value="yesterday">Yesterday</option>
                    <option value="last_7">Last 7 Days</option>
                    <option value="last_30">Last 30 Days</option>
                    <option value="this_month">This Month</option>
                    <option value="last_month">Last Month</option>
                    <option value="custom">Custom Range</option>
                </select>
            </div>
            <div class="col-sm-2">
                <label class="form-label" for="from_date">From Date</label>
                <input type="text" id="from_date" class="form-control datepicker" value="{{ $financial_year_start }}">
            </div>
            <div class="col-sm-2">
                <label class="form-label" for="to_date">To Date</label>
                <input type="text" id="to_date" class="form-control datepicker" value="{{ date('d-m-Y') }}">
            </div>

            <div class="col-sm-12 mt-2">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="datatable" class="table truncate m-0 align-middle">
                                <thead>
                                    <tr>
                                        <th>S.No.</th>
                                        <th>Date</th>
                                        <th>Voucher No.</th>
                                        <th>Net Total</th>
                                        <th>Paid</th>
                                        <th>Balance</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                                <tfoot>
                                    <tr>
                                        <th colspan="3" class="text-end">Total:</th>
                                        <th id="total-net">0.00</th>
                                        <th id="total-paid">0.00</th>
                                        <th id="total-balance">0.00</th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

@endsection

@push('footer_script')
    <script src="{{ asset('theme/assets/vendor/datatables/dataTables.min.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/datatables/dataTables.bootstrap.min.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/datatables/custom/custom-datatables.js') }}"></script>
    <script src="{{ asset('theme/assets/sweetalert/sweet-alert.min.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>

    <script>
        $(document).ready(function() {
            $('#from_date, #to_date').daterangepicker({
                singleDatePicker: true,
                autoUpdateInput: true,
                locale: {
                    format: 'DD-MM-YYYY'
                }
            });

            $('#date_period').on('change', function() {
                var val = $(this).val();
                var start, end;
                
                switch(val) {
                    case 'today':
                        start = moment();
                        end = moment();
                        break;
                    case 'yesterday':
                        start = moment().subtract(1, 'days');
                        end = moment().subtract(1, 'days');
                        break;
                    case 'last_7':
                        start = moment().subtract(6, 'days');
                        end = moment();
                        break;
                    case 'last_30':
                        start = moment().subtract(29, 'days');
                        end = moment();
                        break;
                    case 'this_month':
                        start = moment().startOf('month');
                        end = moment().endOf('month');
                        break;
                    case 'last_month':
                        start = moment().subtract(1, 'month').startOf('month');
                        end = moment().subtract(1, 'month').endOf('month');
                        break;
                    case 'all':
                        start = moment("{{ $financial_year_start }}", "DD-MM-YYYY");
                        end = moment();
                        break;
                    default:
                        return;
                }
                
                $('#from_date').data('daterangepicker').setStartDate(start);
                $('#from_date').data('daterangepicker').setEndDate(start);
                $('#from_date').val(start.format('DD-MM-YYYY'));
                
                $('#to_date').data('daterangepicker').setStartDate(end);
                $('#to_date').data('daterangepicker').setEndDate(end);
                $('#to_date').val(end.format('DD-MM-YYYY'));
                
                $('#datatable').DataTable().draw();
            });

            $('#from_date, #to_date').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('DD-MM-YYYY'));
                $('#date_period').val('custom');
                $('#datatable').DataTable().draw();
            });

            $('#from_date, #to_date').on('change', function() {
                $('#datatable').DataTable().draw();
            });
        });
    </script>

    <script>
        $('#datatable').DataTable({
            processing: true,
            serverSide: true,
            stateSave:  true,
            responsive: true,

            ajax: {
                url: '{{ route('expense-voucher.getData') }}',
                data: function (d) {
                    d.daterange = $('#from_date').val() + ' - ' + $('#to_date').val();
                }
            },

            columns: [
                { data: 'DT_RowIndex', name: 'DT_RowIndex', searchable: false },
                { data: 'voucher_date', name: 'voucher_date' },
                { data: 'voucher_no',   name: 'voucher_no' },
                // { data: 'party_name',   name: 'party_name' },
                { data: 'net_total',    name: 'net_total' },
                { data: 'total_paid',   name: 'total_paid' },
                { data: 'balance',      name: 'balance' },
                { data: 'action',       name: 'action', orderable: false, searchable: false },
            ],

            drawCallback: function () {
                let api = this.api();

                let netTotal = api.column(3, { page: 'current' }).data()
                    .reduce((a, b) => parseFloat(a) + parseFloat(b), 0);

                let paidTotal = api.column(4, { page: 'current' }).data()
                    .reduce((a, b) => parseFloat(a) + parseFloat(b), 0);

                let balanceTotal = api.column(5, { page: 'current' }).data()
                    .reduce((a, b) => parseFloat(a) + parseFloat(b), 0);

                $('#total-net').html(netTotal.toFixed(2));
                $('#total-paid').html(paidTotal.toFixed(2));
                $('#total-balance').html(balanceTotal.toFixed(2));
            }
        });

        function deleteIt(id) {
            swal({
                    title: "Are you sure?",
                    text: "You will not be able to recover this data!",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: '#DD6B55',
                    confirmButtonText: 'Yes, I am sure!',
                    cancelButtonText: "No, cancel it!",
                    closeOnConfirm: false,
                    closeOnCancel: false,
                    cancelButtonClass: 'btn-default btn-md waves-effect',
                    confirmButtonClass: 'btn-danger btn-md waves-effect waves-light',
                },
                function(isConfirm) {
                    if (isConfirm) {
                        $.ajax({
                            url: '{{ url('expense-voucher') }}/' + id,
                            type: 'delete',
                            dataType: "JSON",
                            data: {
                                "_token": "{{ csrf_token() }}"
                            },
                            success: function() {
                                $("#datatable").DataTable().draw(false);
                                swal("Deleted!", "Data has been deleted!", "success");
                            },
                            error: function() {
                                swal("Error", "Could not delete the record.", "error");
                            }
                        });
                    } else {
                        swal("Cancelled", "Data is safe :)", "error");
                    }
                });
        }
    </script>
@endpush