@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: 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;
        }
    }

    .gstbill .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;
    }
</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">
                    <form>
                        @csrf
                        <div class="row">
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <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(17,19);
                            @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  nowrap w-100 gstbill">
                            <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>Inv.No<br><input type="text" class="form-control" id="invoice_no" placeholder="Search" style="width: 100px; height: 25px"></th>
                                    <th>Ass.Value </th>
                                    <th>SGST Amount</th>
                                    <th>CGST Amount</th>
                                    <th>IGST Amount</th>
                                    <th>Total GST</th>
                                    <th>Adjusted</th>
                                    <th>Cr.Note Amt</th>
                                    <th>Inv.Amt</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>GST.Inv D/L</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>
</div>

<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('test.client.send.mail')}}" novalidate enctype="multipart/form-data">
                @csrf
                <input type="hidden" id="start_date_mail" name="start_date_mail" class="form-control" value="">
                <input type="hidden" id="end_date_mail" name="end_date_mail" class="form-control" value="">

                <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>

@endsection

@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">
    $(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']);
        }
    }

    var ajaxGstBill = "{{ route('test.client.gstbill.ajax') }}";
    var csrfToken = $("[name=_token]").val();

    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, #start_date_mail").val(formattedFirstDate);
    $("#end_date, #end_date_mail").val(formattedCurrentDate);

    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": ajaxGstBill,
            "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": "invoice_no"},
            {"mData": "payable_amount"},
            {"mData": "sgst"},
            {"mData": "cgst"},
            {"mData": "igst"},
            {"mData": "gst_amount"},
            {"mData": "adjust_amount"},
            {"mData": "previous_credit_note_amount"},
            {"mData": "subscription_plan_amount"},
            {"mData": "name"},
            {"mData": "pincode"},
            {"mData": "invoice_file", "bSortable": false},
        ]
    });

    table.on('xhr', function() {
        var responseData = table.ajax.json();

        if (responseData.recordsTotal != 0) {
            $('#modalSendMail').prop('disabled', false);

            $("#total_ass_amount").html(responseData['totalAmounts'].total_ass_assured);
            $("#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, #total_sgst_amount, #total_cgst_amount, #total_igst_amount, #total_gst_amount, #total_adjusted_amount, #total_inv_amount").html('');
        }
    });

    // Export Area 
    $("#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();
    });

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

    $("#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").val("");
        }

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

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

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

    $('#invoice_date').click(function() {
        event.stopPropagation();
    });
    $('#invoice_date').on('keyup', function() {
        table.columns(0).search(this.value).draw();
    });

    $('#invoice_no').click(function() {
        event.stopPropagation();
    });
    $('#invoice_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();
    });

    $(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());
                    }
                }
            }
            var column = table.column($(this).attr('data-column'));
            column.visible(!column.visible());
        });

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

    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();
        }
    }

    function clearSearch() {
        $("#invoice_date , #invoice_no , #party_name , #pincode ").val('');
        table.search('').columns().search('').draw();
    }

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

    function clearFilterField() {
        $("#start_date , #end_date , #start_date_mail , #end_date_mail , #total_ass_amount , #total_sgst_amount , #total_cgst_amount , #total_igst_amount , #total_gst_amount , #total_gst_amount , #total_adjusted_amount , #total_inv_amount").val('');
        $('#modalSendMail').prop('disabled', true);
        $('#datatable').DataTable().draw();
    }
</script>
@endsection