@extends('reachassuree_admin/layouts.main')
@section('title', $data['title'])
@section('content')
<style>
    .row{
        align-items: center;
    }
    .dataTables_scrollBody {
        position: relative;
        overflow: auto;
        width: 100%;
        max-height: 496px;
        height: 413px !important;
    }
    .dropdown-checklist {
        padding: 0px 12px;
        line-height: 0px;
    }

    .dropdown-checklist input {
        margin-left: 3px;
    }

    .pos-middle {
        vertical-align: middle;
    }

    .scrollable-menu {
        height: auto;
        max-height: 400px;
        overflow-x: hidden;
    }

    ::-webkit-scrollbar {
        width: 16px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #d6dee1;
        border-radius: 20px;
        border: 6px solid transparent;
        background-clip: content-box;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #a8bbbf;
    }

    ::-webkit-scrollbar-track {
        background-color: transparent;
    }

    @media only screen and (max-width: 575px) {
        .page-title-right {
            text-align: center;
        }

        div#datatable_length {
            text-align: right;
        }

        div#datatable_filter {
            text-align: right;
        }

        .mb-3.d-flex {
            width: 200px;
            margin: 0 0 0 auto;
        }
    }

    @media only screen and (max-width: 767px) {
        .page-title-right {
            text-align: center;
        }

        div#datatable_length {
            text-align: right;
        }

        div#datatable_filter {
            text-align: right;
        }

        .mb-3.d-flex {
            width: 200px;
            margin: 0 0 0 auto;
        }
    }

    @media only screen and (max-width: 680px) {
        .page-title-right {
            text-align: center;
        }

        div#datatable_length {
            text-align: right;
        }

        div#datatable_filter {
            text-align: right;
        }

        .mb-3.d-flex {
            width: 200px;
            margin: 0 0 0 auto;
        }
    }

    @media only screen and (max-width: 1200px) {

        button#btnClear {
            width: max-content;
        }

        .float-end {
            width: -webkit-fill-available;
            text-align: end;
        }

        button#modalSendMail {
            width: max-content;
        }
    }

    @media only screen and (max-width: 1600px) {
        button#modalSendMail {
            width: max-content;
        }
    }

    .credit-note .btn-primary {
        color: #2762e4 !important;
        background-color: #bcd4ff !important;
        border-color: #bcd4ff !important;
        padding-top: 3px;
        padding-bottom: 3px;
        font-weight: 500;
        font-size: 10px;
    }



    .swal2-title {
        color: #526BDF;
        font-size: 24px;
        font-weight: bold;
    }

    .swal2-text {
        font-size: 16px;
    }

    .swal2-confirm {
        background-color: #526BDF;
        color: #fff;
    }

    .swal2-cancel {
        background-color: #EC6767;
        color: #fff;
    }
</style>

<div class="page-content client-tr ">
    <div class="container-fluid">

        <!-- start page title -->
        @include('../reachassuree_admin/comman/header')


        <!-- end page title -->
        <!-- start row -->

        <div class="row" id="card">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">

                            <div class="mb-3">
                                <form>
                                    @csrf
                                    <input type="hidden" name="_token" id="csrf-token" value="" />
                                    <label for="start_date" class="form-label">From Inovice Date</label>
                                    <input type="text" class="form-control" name="start_date" id="start_date" placeholder="Start date" value="">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="mb-3">
                                <label for="end_date" class="form-label">To Invoice Date</label>
                                <input type="text" class="form-control" name="end_date" id="end_date" placeholder="End date" value="">
                            </div>
                        </div>
                        <div class="col-md-1">
                            <div class="mb-3">
                                <label class="form-label">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                <button type="button" onclick="clearFilterField();" class="form-control btn btn-primary" id="btnClear">Clear</button>
                            </div>
                        </div>

                        @php
                        $check_privileges = userPrivilegesReturn(20,22);
                        @endphp
                        @if (($check_privileges == 1) || (Session::get('admin_type') == 0))
                        <div class="col-md-1">
                            <div class="mb-3">
                                <label class="form-label">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                <button type="button" class="form-control btn btn-primary" id="modalSendMail" data-bs-toggle="modal" data-bs-target="#composemodal">Send Mail</button>
                            </div>
                        </div>
                        @endif


                        <div class="col-md-4 float-end">
                            <div class="float-end">
                                <button class="btn btn-secondary" onclick="return openFullScreen();" type="button"><span class="mdi mdi-arrow-expand-all"></span></button>
                                <button class="btn btn-secondary" onclick="return clearSearch();" type="button"><span class="mdi mdi-brush"></button>
                                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"><span class="mdi mdi-file-download-outline"></span></button>

                                <div class="dropdown-menu custom-dropdown-toggle-top" aria-labelledby="dropdownMenuButton1">
                                    <a href="#" class="dropdown-item" id="csv" style="width:150px;">Export CSV</a>
                                    <a href="#" class="dropdown-item" id="excel" style="width:150px;">Export Excel</a>
                                    <a href="#" class="dropdown-item" id="pdf" style="width:150px;">Export PDF</a>
                                    <a href="#" class="dropdown-item" id="print" style="width:150px;">Print</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    </form>
                    <br>
                    <div class="table-responsive">
                        <table id="datatable" class="table align-middle table-nowrap table-hover table-striped  credit-note nowrap w-100">
                            <thead class="table-light">

                                <tr>

                                    <th>Sr.No</th>
                                    <th>Inv.Date <br><input type="text" class="form-control" id="invoice_date" placeholder="Search" style="width: 100px; height: 25px"></th>
                                    <th>Credit Note No<br><input type="text" class="form-control" id="credit_note_no" placeholder="Search" style="width: 100px; height: 25px"></th>
                                    <th>Ass.Amt </th>
                                    <th>SGST</th>
                                    <th>CGST</th>
                                    <th>IGST</th>
                                    <th>Total GST</th>
                                    <th>Adjusted</th>
                                    <th>Inv.Amt</th>
                                    <th>Gst Inv No</th>
                                    <th>Gst Date</th>
                                    <th>Party Name<br><input type="text" class="form-control" id="party_name" placeholder="Search" style="width: 100px; height: 25px"></th>

                                    <th>PIN<br><input type="text" class="form-control" id="pincode" placeholder="Search" style="width: 100px; height: 25px"></th>
                                    <th>Refund Amount</th>
                                    <th>Credit Note D/L</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                        @csrf
                    </div>
                    <div class="col-md-12 mt-5">
                        <div class="row">
                            <div class="col">
                                <div class="card text-white bg-secondary mb-3">
                                    <div class="card-header text-center font-size-13">Ass. Amount<br>
                                        <div id="total_ass_amount"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="card text-white bg-dark mb-3">
                                    <div class="card-header text-center font-size-13">SGST Amount<br>
                                        <div id="total_sgst_amount"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="card text-white bg-secondary mb-3">
                                    <div class="card-header text-center font-size-13">CGST Amount<br>
                                        <div id="total_cgst_amount"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="card text-white bg-dark mb-3">
                                    <div class="card-header text-center font-size-13">IGST Amount<br>
                                        <div id="total_igst_amount"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="card text-white bg-secondary mb-3">
                                    <div class="card-header text-center font-size-13">Total GST<br>
                                        <div id="total_gst_amount"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="card text-white bg-dark mb-3">
                                    <div class="card-header text-center font-size-13">Adjusted Amount<br>
                                        <div id="total_adjusted_amount"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="card text-white bg-dark mb-3">
                                    <div class="card-header text-center font-size-13">Invoice Amount<br>
                                        <div id="total_inv_amount"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>

    <!-- end row -->
    <!-- Modal -->
    <div class="modal fade" id="composemodal" tabindex="-1" role="dialog" aria-labelledby="composemodalTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="composemodalTitle">Message</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="closef"></button>
                </div>
                <form method="post" id="formSendEmail" action="{{route('credit.send.mail')}}" novalidate enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" id="start_date_mail" name="start_date_mail" class="form-control" value="{{date('01-m-Y', strtotime('-1 month'))}}">
                    <input type="hidden" id="end_date_mail" name="end_date_mail" class="form-control" value="{{date('d-m-Y', strtotime('-1 month'))}}">

                    <div class="modal-body">
                        <div>
                            <div class="mb-3">
                                <input type="email" class="form-control" name="email" id="email" placeholder="To" required>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="closefill">Close</button>
                        <button type="submit" class="btn btn-primary" id="btnsendMail">Send <i class="fab fa-telegram-plane ms-1"></i></button>
                        <div id="msgSubmit" class="h3 text-center hidden"></div>
                        <div class="clearfix"></div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- end modal -->


</div>
</div>
</div>
<!-- container-fluid -->
</div>
<!-- End Page-content -->



@endsection('content')
@section('custom-scripts')

<script src="{{ asset('ra-assets/libs/parsleyjs/parsley.min.js') }}"></script>
<script src="{{ asset('ra-assets/js/pages/form-validation.init.js') }}"></script>
<script src="{{ asset('ra-assets/js/pages/jquery.form.js') }}"></script>
<script src="{{ asset('ra-assets/js/pages/email-editor.init.js')}}"></script>
<script type="text/javascript">
    var refundPayment = '{{route("manually.refund.payment")}}';
  
     $(document).ready(function() {
        $('#modalSendMail').prop('disabled', true);

        var options = {
            beforeSubmit: showRequest,
            success: showResponse
        };

        $('#formSendEmail').submit(function() {
            $(this).ajaxSubmit(options);
            return false;
        });
    });

    function showRequest(formData, jqForm, options) {
        $('#preloader').show();
        $('#preloader').css('background-color', '#ffffff69');
        $('#status').show();

        var queryString = $.param(formData);
        return true;
    }

    function showResponse(responseText, statusText, xhr, $form) {
        $('#status').hide();
        $('#preloader').hide();
        if (responseText['status'] == 1) {
            toastr['success'](responseText['msg']);
            $("#btnsendMail").prop("disabled", false).html('<i class="ri-arrow-right-s-line"></i>   Send');
            $("#formSendEmail").trigger("reset").removeClass('was-validated');
            $("#composemodal").modal('hide');
        } else if (responseText['status'] == 0) {
            toastr["error"](responseText['msg']);
        }
    }

    $("#closefill").click(function() {
        $("#formSendEmail").trigger("reset");
        $("#btnsendMail").prop("disabled", false);
        $("#btnsendMail").html(
            '<i class="ri-arrow-right-s-line"></i>   Send'
        );
    });

    $("#closef").click(function() {
        $("#formSendEmail").trigger("reset");
        $("#btnsendMail").prop("disabled", false);
        $("#btnsendMail").html(
            '<i class="ri-arrow-right-s-line"></i>   Send'
        );
    });

    $("#email").on('input', function() {
        var agent_email = $(this).val();
        if (agent_email !== '') {
            $("#btnsendMail").prop("disabled", false);
            $("#btnsendMail").html(
                '<i class="ri-arrow-right-s-line"></i>   Send'
            );
        }
    });

    var currentDate = new Date();
    var firstDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);

    function formatDate(date) {
        var day = date.getDate();
        var month = date.getMonth() + 1;
        var year = date.getFullYear();

        if (day < 10) {
            day = '0' + day;
        }
        if (month < 10) {
            month = '0' + month;
        }

        return day + '-' + month + '-' + year;
    }

    var formattedFirstDate = formatDate(firstDate);
    var formattedCurrentDate = formatDate(currentDate);

    $("#start_date").val(formattedFirstDate);
    $("#end_date").val(formattedCurrentDate);



    function reloadTable() {
        $('#datatable').DataTable().ajax.reload(null, false);
    }

    $("#start_date").datepicker({
        format: "dd-mm-yyyy",
        endDate: currentDate,
    }).on('changeDate', function() {
        $('.datepicker').hide();
    });
    $("#end_date")
        .datepicker({
            format: "dd-mm-yyyy",
            endDate: currentDate,
        })
        .on("changeDate", function() {
            $(".datepicker").hide();
        });

    $("#start_date").on('change', function() {
        var startDate = $(this).val();
        var endDate = $('#end_date').val();
        if (startDate >= endDate) {
            $("#end_date").datepicker("destroy");
            $("#end_date").val("");
        }

        $("#end_date").attr("disabled", !startDate).datepicker("destroy").datepicker({
            format: "dd-mm-yyyy",
            startDate: startDate,
        }).on('changeDate', function() {
            $('.datepicker').hide();
        });
    });

    $("#start_date_mail").val(formattedFirstDate);
    $("#end_date_mail").val(formattedCurrentDate);
    $('#start_date').change(function() {
        $("#start_date_mail").val($("#start_date").val());
    });

    $('#end_date').change(function() {
        $("#end_date_mail").val($("#end_date").val());
    });

    function clearFilterField() {
        $("#start_date").val('');
        $("#end_date").val('');
        $("#start_date_mail").val('');
        $("#end_date_mail").val('');
        $("#total_ass_amount").html('');
        $("#total_sgst_amount").html('');
        $("#total_cgst_amount").html('');
        $("#total_igst_amount").html('');
        $("#total_gst_amount").html('');
        $("#total_adjusted_amount").html('');
        $("#total_inv_amount").html('');
        $('#modalSendMail').prop('disabled', true);
        $('#datatable').DataTable().ajax.reload(null, false);
        $('#datatable').DataTable().draw();
    }
    var ajaxCreditNote = '{{route("credit.note.ajax")}}';
    var csrfToken = $("[name=_token]").val();

    var table = $('#datatable').DataTable({
        buttons: [{extend: 'csvHtml5'}, {  extend: 'excelHtml5' },{extend: 'pdfHtml5',  orientation: 'landscape',  pageSize: 'A2'},{extend: 'print', orientation: 'landscape',pageSize: 'A2' },],
        "aoColumnDefs": [{"bSortable": false,"aTargets": []}],
        "order": [[0, 'desc']],
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "scrollY": function() {return $(window).height() - 320;},
        "lengthMenu": [[10, 50, 100, 150],[10, 50, 100, 150]],
        "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
        "ajax": {
            "url": ajaxCreditNote,
            "type": "POST",
            "data": {
                "_token": csrfToken,
                "end_date": function() {return $("#end_date").val();},
                "start_date": function() {return $("#start_date").val();},
            }
        },
        "aoColumns": [
            { "mData": "id" },
            { "mData": "created_at" },
            { "mData": "credit_note_no" },
            { "mData": "payable_amount" },
            { "mData": "sgst" },
            { "mData": "cgst" },
            { "mData": "igst" },
            { "mData": "gst_amount" },
            { "mData": "adjust_amount" },
            { "mData": "subscription_plan_amount" },
            { "mData": "gst_inv_no" },
            { "mData": "gst_date" },
            { "mData": "name" },
            { "mData": "pincode" },
            { "mData": "refund_payment_amount" },
            { "mData": "credit_note_file","bSortable": false, },
            { "mData": "status","bSortable": false,},
            { "mData": "action","bSortable": false,},
        ]
    });
    //download data as file
    $("#csv").on('click', function() {
        var table = $('#datatable').DataTable();
        table.button('.buttons-csv').trigger();
    });
    $("#excel").on('click', function() {
        var table = $('#datatable').DataTable();
        table.button('.buttons-excel').trigger();
    });
    $("#pdf").on('click', function() {
        var table = $('#datatable').DataTable();
        table.button('.buttons-pdf').trigger();
    });
    $("#print").on('click', function() {
        var table = $('#datatable').DataTable();
        table.button('.buttons-print').trigger();
    });

    //- clear search fileds
    function clearSearch() {
        $("#invoice_date").val('');
        $("#invoice_no").val('');
        $("#credit_note_no").val('');
        $("#party_name").val('');
        $("#pincode").val('');
        table.search('')
            .columns()
            .search('')
            .draw();
    }
    //- search in column
    $('#invoice_date').click(function() {
        event.stopPropagation();
    });
    $('#invoice_date').on('keyup', function() {
        table
            .columns(0)
            .search(this.value)
            .draw();
    });
    $('#credit_note_no').click(function() {
        event.stopPropagation();
    });
    $('#credit_note_no').on('keyup', function() {
        table
            .columns(1)
            .search(this.value)
            .draw();
    });
    $('#party_name').click(function() {
        event.stopPropagation();
    });
    $('#party_name').on('keyup', function() {
        table
            .columns(2)
            .search(this.value)
            .draw();
    });

    $('#pincode').click(function() {
        event.stopPropagation();
    });
    $('#pincode').on('keyup', function() {
        table
            .columns(3)
            .search(this.value)
            .draw();
    });
    //- toggle datatable columns
    $(document).ready(function() {
        $('input.toggle-vis').on('click', function(e) {

            var unHiddenValues = [2, 3, 4, 5];
            if ($(this).attr('data-column') == -1) {
                for (let index = 0; index <= 37; index++) {
                    if (unHiddenValues.indexOf(index) == -1) {
                        var column = table.column(index);
                        column.visible(!column.visible());
                    }
                }
            }

            // Get the column API object
            var column = table.column($(this).attr('data-column'));
            // Toggle the visibility
            column.visible(!column.visible());
        });
    });
    //- show data according to date wise filter from selection

    $("#start_date").change(function() {
        $('#datatable').DataTable().ajax.reload(null, false);
    });
    $("#end_date").change(function() {
        $('#datatable').DataTable().ajax.reload(null, false);
    });


    //- show data on full screen
    function openFullScreen() {
        var element = document.getElementById("card");
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.webkitRequestFullscreen) {
            /* Safari */
            element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {
            /* IE11 */
            element.msRequestFullscreen();
        }
    }

    table.on('xhr', function() {
        var responseData = table.ajax.json();
        if (responseData.recordsTotal != 0) {
            $('#modalSendMail').prop('disabled', false);
            $("#total_ass_amount").html(responseData['totalAmounts'].payable_amount);
            $("#total_sgst_amount").html(responseData['totalAmounts'].total_sgst_amount);
            $("#total_cgst_amount").html(responseData['totalAmounts'].total_cgst_amount);
            $("#total_igst_amount").html(responseData['totalAmounts'].total_igst_amount);
            $("#total_gst_amount").html(responseData['totalAmounts'].total_gst_amount);
            $("#total_adjusted_amount").html(responseData['totalAmounts'].total_adjusted_amount);
            $("#total_inv_amount").html(responseData['totalAmounts'].total_inv_amount);
        } else {
            $('#modalSendMail').prop('disabled', true);
            $("#total_ass_amount").html('');
            $("#total_sgst_amount").html('');
            $("#total_cgst_amount").html('');
            $("#total_igst_amount").html('');
            $("#total_gst_amount").html('');
            $("#total_adjusted_amount").html('');
            $("#total_inv_amount").html('');
        }

    });


    //- refund payment manually
    function refund(id, refund_amount) {

        swal.fire({
            title: "Are you sure want to " + refund_amount + " Rs.  Refund Payment ?",
            text: "You won't be able to revert this!",
            showCancelButton: true,
            confirmButtonColor: "#526BDF",
            cancelButtonColor: "#EC6767",
            confirmButtonText: "Yes, Refund it!",
            cancelButtonText: "No, cancel it!",
        }).then((result) => {
            if (result.isConfirmed) {
                refundProcess(id);
            }
        });
    }


    function refundProcess(id) {
        $.ajax({
            type: 'GET',
            url: refundPayment + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                    $('#datatable').DataTable().ajax.reload(null, false);
                } else {
                    toastr["error"](resultData['msg']);
                }
            }
        });
    }
</script>

@endsection