@extends('reachassuree_agent_sub/layouts.main')
@section('title', $data['title'])
@section('content')

<meta name="csrf-token" content="{{ csrf_token() }}">

<style>
    @media (max-width: 575px) {
        .col-12.d-flex {
            display: unset !important;
        }
        .d-flex.justify-content {
            justify-content: center;
            margin: 15px 0;
        }
    }
    @media (max-width: 768px) {
        .nav {
            margin: 0 auto;
            display: block !important;
        }
        li.nav-item {
            border-right: unset !important;
        }
        .page-title-box .col-md-6:first-child .page-title-right {
            margin: 15px 0;
        }
    }
    .col-md-2.tab-pane.fade.show.active {
        display: block;
    }
    .col-md-2.tab-pane.fade {
        display: none;
    }
    .col-form-label {
        padding-top: calc(0.375rem + 1px);
        padding-bottom: calc(0.375rem + 1px);
        margin-bottom: 0;
        font-size: inherit;
        line-height: 1.5;
    }
    .f-14 {
        font-size: 14px;
        font-weight: 600;
    }
    input#general_document_number {
        cursor: default;
    }
    div#myTabContent {
        background-color: #f1f5fe;
        padding: 1rem;
        border-radius: 0.8rem;
    }
    button#life-commission,
    button#general-commission{
        font-size: 16px;
        color: #000;
    }
    .nav {
        padding: 10px 0px 5px 0px;
        /* padding: 10px 0; */
        width: fit-content;
        border-radius: 0.8rem;
        background-color: #f1f5fe;
    }
    li.nav-item {
        border-right: 1px solid #074193;
        padding: 0 15px;
    }
    li.nav-item:last-child {
        border-right: none;
    }
    .nav-tabs {
        border-bottom: 0;
    }
    .nav-link {
        padding: 0.5rem 1.2rem;
        font-weight: 500;
    }
    .nav-tabs .nav-item.show .nav-link,
    .nav-tabs .nav-link.active {
        border: none;
        border-color: unset;
        border-radius: 0.6rem;
        color: #fff !important;
        background-color: var(--bs-blue);
    }
    .nav-tabs .nav-link:focus,
    .nav-tabs .nav-link:hover {
        border-color: unset;
        border: 0;
    }
    .nav-tabs .nav-link {
        border-radius: 0.6rem;
        border: 0;
    }
    @media (max-width: 1365px){
        #myTab {
            align-items: stretch;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            overflow-x: auto !important;
        }
    }
</style>

<div class="page-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 page-title-box">
                <div class="row justify-content-between">
                    <h4 class="mb-sm-0 font-size-18 w-auto"><a href="javascript:void(0);" onclick="history.back();"class="btn btn-primary px-3 waves-effect waves-light btn-sm backToButton" id="backToButton"><i class="mdi mdi-arrow-left font-size-20"></i></a>&nbsp;&nbsp;&nbsp; {{ $data['title'] }}</h4>
                </div>
            </div>
        </div>

        <div class="row justify-content-end">
            <a href="javascript:void(0);" onclick="return learningVideo()" class="btn-youtube-pulse btn-youtube-pulse-border">
                <i class="mdi mdi-youtube"></i>
            </a>
        </div>

        <!-- start row -->
        <div class="row" id="card">
            <div class="card p-3">
                <div class="col-md-12">
                    <div class="tab-content" id="myTabContent">

                        <div class="row">
                            <div class="col-md-3">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="mb-3">
                                            <label for="filter_from_date" class="form-label">From Date<span class="text-danger">*</span></label>
                                            <input class="form-control" type="text" name="filter_from_date" id="filter_from_date" value="" placeholder="dd-mm-yyyy" autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="mb-3">
                                            <label for="filter_end_date" class="form-label">To Date<span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" name="filter_end_date" id="filter_end_date" value="" placeholder="dd-mm-yyyy" required autocomplete="off">
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>


                        <div class="table-responsive">
                            <div class="G_Datatable">
                                <table id="G_Datatable" class="table align-middle table-nowrap table-striped display nowrap w-100">
                                    <thead>
                                        <tr>
                                            <th>Transaction<br>Confirmation</th>
                                            <th>Department</th>
                                            <th>Start Date</th>
                                            <th>End Date</th>
                                            <th>Sub Agent</th>
                                            <th>Receivable Commission</th>
                                            <th>Total Received</th>
                                            <th>Remain to Received</th>
                                            <th>Remark</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                            @csrf
                        </div>

                        <div class="col-md-12 mt-5 d-none">
                            <div class="row">
                                <div class="col">
                                    <div class="card text-white bg-secondary mb-3">
                                        <div class="card-header text-center font-size-13">Total Policy Amount<br><div id="general_total_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">Target Amount<br><div id="general_total_target_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">Target Commission<br><div id="general_target_commmission"></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">Lum Sum<br><div id="general_lum_sum"></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">Receivable Commission<br><div id="general_recei_comm"></div></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12 mt-3">
                            <div class="row">
                                <div class="col-xl-3 col-sm-3">
                                    <div class="card text-white bg-secondary mb-0">
                                        <div class="card-header text-center font-size-14">Receivable Commission<br>
                                            <div id="total_payable_commission"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-3 col-sm-3">
                                    <div class="card text-white bg-secondary mb-0">
                                        <div class="card-header text-center font-size-14">Total Received<br>
                                            <div id="paid_total"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-3 col-sm-3">
                                    <div class="card text-white bg-secondary mb-0">
                                        <div class="card-header text-center font-size-14">Remain To Received<br>
                                            <div id="remain_to_pay_total"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="queryModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <input type="hidden" name="client_id" id="client_id" value="">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Transaction Confirmation</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="mb-3">
                        <label for="message-text" class="col-form-label">Raised Query:</label>
                        <textarea class="form-control" id="query" maxlength="250" required></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel Request</button>
                <button type="button" class="btn btn-primary">Confirm</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('custom-scripts')
<script src="{{ asset('assets/libs/parsleyjs/parsley.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/kendo.all.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/form-validation.init.js') }}?v=2"></script>
<script src="{{ asset('assets/js/pages/jquery.form.js') }}"></script>

<script type="text/javascript">
    $(document).ready(function () {
        var isDeleted = "{{$data['is_deleted']}}";
        var csrfToken = $('meta[name="csrf-token"]').attr('content');

        var table = $('#G_Datatable').DataTable({
            "order":[[ 1, 'desc' ]],
            "ordering": true,
            "processing": true,
            "serverSide": true,
            "scrollX": true,
            "scrollY": function() {return $(window).height() - 515;},
            "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": "{{ route('ajaxsubagent.payment.history') }}",
                "type": "POST",
                "data": {
                    "_token": csrfToken,
                    "from_date": function() {return $('#filter_from_date').val();},
                    "end_date": function() {return $('#filter_end_date').val();},
                },
            },
            "aoColumns": [
                {"mData": "action", sortable: false},
                {"mData": "department"},
                {"mData": "from_date"},
                {"mData": "end_date"},
                {"mData": "sub_agent", "visible": false},
                {"mData": "payable_commission"},
                {"mData": "total_paid"},
                {"mData": "remain_to_pay"},
                {"mData": "remark"},
            ],
        });

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

            $("#total_payable_commission").html(responseData['totalAmounts']['total_payable_commission']);
            $("#paid_total").html(responseData['totalAmounts']['paid_total']);
            $("#remain_to_pay_total").html(responseData['totalAmounts']['remain_to_pay_total']);
        });

        $('#filter_from_date, #filter_end_date').on('change keyup input', function() {
            if(checkPaymentHistoryValidation() == true) {
                var table = $('#G_Datatable').DataTable();
                table.columns.adjust().draw();
            }
        });

        assignDatePicker();

        $("#department").select2({
            dropdownParent: $("#make-payment-modal .modal-body")
        });
        setupDatePair($('#from_date'), $('#end_date'));
        setupDatePair($('#filter_from_date'), $('#filter_end_date'));

        $('#sub_agent_id').select2({
            ajax: {
                url: "{{ route('search.sub.agent') }}",
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        search_value: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;

                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Search For Sub Agent',
            dropdownParent: $("#make-payment-modal .modal-body")
        });

        $('#MakePaymentModal').on('click', function (e) {
            $('#make-payment-modal').modal('show');
            resetAllData();
        });

        $('#savePaymentHistory').on('click', function(e) {
            e.preventDefault();
            var generalFormData = new FormData($('#savePaymentHistoryData')[0]);

            $.ajax({
                type: 'POST',
                url: "{{ route('save.subagent.payment.history') }}",
                data: generalFormData,
                processData: false,
                contentType: false,
                beforeSend: function(){
                    showLoader();
                },
                success: function(resultData) {
                    if (resultData['status'] == 1){
                        table.columns.adjust().draw();
                        
                        resetAllData();
                        toastr["success"](resultData['msg']);

                        $("#savePaymentHistoryData").removeClass('was-validated');
                        $('#make-payment-modal').modal('hide');

                        hideLoader();
                    } else if (resultData['status'] == 0) {
                        hideLoader();

                        if (typeof resultData['data'] !== "undefined") {
                            var size = Object.keys(resultData['data']).length;
                            if (size > 0) {
                                for (var [key, value] of Object.entries(resultData['data'])) {
                                    toastr["error"](value);
                                }
                            }
                        } else {
                            toastr["error"](resultData['msg']);
                        }
                        $("#savePaymentHistoryData").addClass('was-validated');
                    }
                }
            });
        });

        $('#department, #sub_agent_id, #from_date, #end_date, #make_a_payment').on('change input keyup', function(event) {
            var changedElement = $(event.target).attr('id');

            var fromDate = $('#from_date').val();
            var endDate = $('#end_date').val();
            var department = $('#department').val();
            var subAgentId = $('#sub_agent_id').val();
            var recordId = $('#record_id').val();
        
            function isValidDate(dateString) {
                var regex = /^(\d{2})-(\d{2})-(\d{4})$/;
                if(!regex.test(dateString)) {
                    return false;
                }

                var parts = dateString.split('-');
                var day = parseInt(parts[0], 10);
                var month = parseInt(parts[1], 10) - 1;
                var year = parseInt(parts[2], 10);

                var date = new Date(year, month, day);
                return date.getFullYear() === year && date.getMonth() === month && date.getDate() === day;
            }

            if(subAgentId != '' && subAgentId != undefined && isValidDate(fromDate) && isValidDate(endDate)){

                $.ajax({
                    type: 'GET',
                    url: "{{ route('get.commission.subagent.payment.history') }}",
                    data : {
                        from_date : fromDate,
                        end_date : endDate,
                        department : department,
                        sub_agent_id : subAgentId,
                        record_id : recordId,
                    },
                    success: function(resultData) {
                        if (resultData['status'] == 1) {
                            var payableComm = resultData['payable_commission'];
                            if(payableComm > 0){
                                $('#payable_commission').val(payableComm.toFixed(2));
                            }else{
                                $('#payable_commission').val(0);
                            }
                           
                            var remainToPay = resultData['remain_to_pay'];
                            $('#remain_to_pay').val(remainToPay.toFixed(2));
                        }  
                    }
                });
            }else{
                $('#payable_commission').val(0.00);
            }

            if(changedElement == 'make_a_payment'){
                var payableCommission = parseFloat($('#payable_commission').val());
                var paymentAmt = parseFloat($('#make_a_payment').val());
                
                if(payableCommission > 0){
                    if(payableCommission < paymentAmt){

                        toastr["error"]("Payment amount can not be greater than payable commission");
                        $('#make_a_payment').val('');
                    }
                }
            }
        });

        $('#queryModal .btn-primary').click(function(){
            var queryTextareaValue = $('#query').val();
            if (queryTextareaValue === '') {
                toastr["error"]("Please enter a query before confirming.");
                event.preventDefault();
            } else {
                $('#queryModal').modal('hide');
                var formData = {
                    "action": $(this).hasClass('btn-secondary') ? 'cancel' : 'confirm',
                    "_token": $('[name="_token"]').val(),
                    "client_id": $('#client_id').val(),
                    "query": $('#query').val(),
                };

                $.ajax({
                    type: 'POST',
                    url: "{{ route('raised.payment.query') }}",
                    data: formData,
                });

                $('#query').val('');
                $('#G_Datatable').DataTable().draw();
            }
        });

        $('#queryModal .btn-secondary').click(function(){

            $('#queryModal').modal('hide');

            var queryTextareaValue = $('#query').val();
            var formData = {
                client_id: $('#client_id').val(),
                query: $('#query').val(),
                action: $(this).hasClass('btn-secondary') ? 'cancel' : 'confirm',
                _token: $('[name="_token"]').val()
            };

            $.ajax({
                type: 'POST',
                url: "{{ route('raised.payment.query') }}",
                data: formData,
                success: function(response) {}
            });

            $('#query').val('');
            $('#G_Datatable').DataTable().draw();
        });
    });
    
    $(document).on("input paste", ".amount", function() {

        var amount = $(this).val();
        var numericAmount = amount.replace(/^0+|[^0-9.]/g, '');
        numericAmount = numericAmount.replace(/^0+/, '');

        var parts = numericAmount.split('.');
        parts[0] = parts[0].slice(0, 8);
        if (parts.length > 1) {
            parts[1] = parts[1].slice(0, 2);
            parts = [parts[0], parts.slice(1).join('')];
        }

        numericAmount = parts.join('.');
        $(this).val(numericAmount);
    });

    function checkPaymentHistoryValidation(){

        var fromDate = $('#filter_from_date').val();
        var endDate = $('#filter_end_date').val();

        var fromDateValid = isValidDateFormat(fromDate);
        var endDateValid = isValidDateFormat(endDate);

        if(fromDate && fromDateValid && endDate && endDateValid) {
            return true;
        }else{
            return false;
        }
    }

    function isValidDateFormat(dateString) {
        var dateFormatRegex = /^\d{2}-\d{2}-\d{4}$/;
        return dateFormatRegex.test(dateString);
    }

    function editRecord(id) {
        $('#make-payment-modal').modal('show');

        $.ajax({
            type: 'GET',
            url: "{{ route('detail.subagent.payment.history') }}" + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {

                    $("#department").val(resultData['data']['department']).trigger('change');

                    var newOption = new Option(resultData['data']['sub_agent'], resultData['data']['sub_agent_id'], false, false);
                    $('#sub_agent_id').append(newOption).trigger('change');

                    $("#record_id").val(resultData['data']['id']);
                    $("#payable_commission").val(resultData['data']['payable_commission']);

                    var totalPaid = resultData['data']['total_paid'];
                    $("#total_paid").val(totalPaid.toFixed(2));
                    $("#remain_to_pay").val(resultData['data']['remain_to_pay']);
                    $("#remark").val(resultData['data']['remark']);

                    $("#from_date").val(resultData['data']['from_date']);
                    $("#from_date").datepicker("setDate", resultData['data']['from_date']);

                    $("#end_date").val(resultData['data']['end_date']);
                    $("#end_date").datepicker("setDate", resultData['data']['end_date']);
                }
            }
        });
    }

    function resetAllData() {

        $("#savePaymentHistoryData").removeClass('was-validated');

        $('#sub_agent_id').empty();
        $('#department').val("General").trigger('change');
        $('#from_date, #end_date, #transaction_date').datepicker('destroy');
        $('#record_id, #payable_commission, #total_paid, #remain_to_pay, #make_a_payment, #remark').val('');

        assignDatePicker();
    }

    function assignDatePicker(){
        var datepickerIds = [
            "transaction_date",
            "from_date",
            "end_date",
        ];
    
        datepickerIds.forEach(function(id) {
            $("#" + id).val("");
            $("#" + id).datepicker({
                format: "dd-mm-yyyy",
                autoclose: true,
                orientation: 'bottom',
                container: '#make-payment-modal'
            }).on('changeDate', function() {
                $('.datepicker').hide();
            });
        });
    }

    function setupDatePair(startDateInput, endDateInput) {
        var datepickerConfig = {
            format: 'dd-mm-yyyy',
            autoclose: true
        };

        startDateInput.datepicker(datepickerConfig).on('changeDate', function(e) {
            var endDate = endDateInput.datepicker('getDate');
            if (e.date > endDate) {
                endDateInput.datepicker('setDate', null);
                endDateInput.val("");
            }
        });

        endDateInput.datepicker(datepickerConfig).on('changeDate', function(e) {
            var startDate = startDateInput.datepicker('getDate');
            if (e.date < startDate) {
                startDateInput.datepicker('setDate', null);
                startDateInput.val("");
            }
        });
    }

    function recordDelete(id) {
        swal.fire({
            title: "Are you sure want to delete this?",
            text: "You won't be able to revert this!",
            showCancelButton: true,
            confirmButtonColor: "#526BDF",
            cancelButtonColor: "#EC6767",
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "No, cancel it!",
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    type: 'GET',
                    url: "{{ route('delete.subagent.payment.history') }}" + "?id=" + id,
                    success: function(resultData) {
                        if (resultData['status'] == 1) {
                            toastr["success"](resultData['msg']);

                            var table = $('#G_Datatable').DataTable();
                            table.columns.adjust().draw();
                        }
                    }
                });
            }
        });
    }

    function handleConfirmProcess(recordID) {
        Swal.fire({
            text: "Are you sure confirm this transaction?",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "Yes, Confirm it!",
            cancelButtonText: "Cancel Request",
        }).then((result) => {
            if (result.isConfirmed) {
                Swal.fire({
                    title: "Confirm!",
                    text: "Your request has been Confirmed.",
                    icon: "success"
                });

                confirmAjax(recordID, "confirm");
            } else if (result.dismiss === Swal.DismissReason.cancel) {
                confirmAjax(recordID, "cancel");
            }
        });
    }

    function confirmAjax(id, type) {
        var confirmFormData = {
            "action": type, "client_id": id,
            "_token": $('[name="_token"]').val(),
        };

        $.ajax({
            type: 'POST',
            url: "{{ route('confirm.payment.transaction') }}",
            data: confirmFormData,
        });

        $('#G_Datatable').DataTable().draw();
    }

    function handleQueryProcess(recordID) {

        $('#client_id').val(recordID);
        var getClientQuery = "{{ route('get.payment.query') }}";

        $.ajax({
            type: 'GET',
            url: getClientQuery + "?id=" + recordID,
            success: function(response) {
                if(response['data']['subagent_confirmation'] == 1){
                    $('#query').val('');
                    $('#query').val(response['data']['subagent_query']);
                }
            }
        });
    }
    
</script>
@endsection