@extends('reachassuree_agent/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;
        }
        
        #G_Datatable_wrapper .row:first-child .col-sm-12, #G_Datatable_wrapper .row:last-child .col-sm-12{
            width: 100% !important;
        }

        #L_Datatable_wrapper .row:first-child .col-sm-12, #L_Datatable_wrapper .row:last-child .col-sm-12{
            width: 100% !important;
        }

        #I_Datatable_wrapper .row:first-child .col-sm-12, #I_Datatable_wrapper .row:last-child .col-sm-12{
            width: 100% !important;
        }
    }

    .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#other-commission,
    button#general-commission,
    button#investment-commission{
        font-size: 16px;
        color: #000;
    }

	.nav{
        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-color: unset;
		border: none;
		color: #fff !important;
    	background-color: var(--bs-blue);
		border-radius: 0.6rem;
	}

	.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;
	}

    /* .justify-content {
        justify-content: end;
    } */

    @media (max-width: 1630px){
        #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">
                    <div class="col-md-8">
                        <h4 class="mb-sm-0 font-size-18"><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>

        <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="row">
                        <div class="col-md-10">
                            <ul class="nav nav-tabs mb-3" id="myTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link waves-effect" id="general-commission" data-bs-toggle="tab" data-bs-target="#generalCommission" type="button" role="tab" aria-controls="profile" aria-selected="false">General Insurance Commission</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link waves-effect" id="life-commission" data-bs-toggle="tab" data-bs-target="#lifeCommission" type="button" role="tab" aria-controls="contact" aria-selected="false">Life Insurance Commission</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link waves-effect" id="investment-commission" data-bs-toggle="tab" data-bs-target="#investmentCommission" type="button" role="tab" aria-controls="intellectual-property-policy-tab" aria-selected="false">Investment Commission</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link waves-effect" id="other-commission" data-bs-toggle="tab" data-bs-target="#otherCommission" type="button" role="tab" aria-controls="intellectual-property-policy-tab" aria-selected="false">Other Commission</button>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="tab-content" id="myTabContent">
                        <!-- general insurance commission -->
                        <div class="tab-pane fade" id="generalCommission" role="tabpanel" aria-labelledby="general-commission">
                            @if(getSpacesFolder() != "Localhost")
                                @include('../reachassuree_agent/master/comman/coming-soon')
                            @else
                                <div class="table-responsive">
                                    <table id="G_Datatable" class="table align-middle table-nowrap table-striped display nowrap w-100">  
                                        <thead>
                                            <tr>
                                                <th>Action</th>
                                                <th>Commission Type</th>
                                                <th>Premium Amount</th>
                                                <th>Commissionable Value</th>
                                                <th>Commissionable Comm.</th>
                                                <th>Commission Recieved Value</th>
                                                <th>Commission Recieved Comm.</th>
                                                <th>Commission Difference Value</th>
                                                <th>Commission Difference Comm.</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </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">Premium Amount<br><div id="general_premium_amount_total"></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">Commissionable Value<br><div id="general_commi_value"></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">Commissionable Comm.<br><div id="general_commi_comm"></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">Commission Recieved Value<br><div id="general_commi_recived_value"></div></div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col">
                                            <div class="card text-white bg-secondary mb-3">
                                                <div class="card-header text-center font-size-13">Commission Recieved Comm.<br><div id="general_commi_recived_comm"></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">Commission Difference Value<br><div id="general_commi_diff_value"></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">Commission Difference Comm.<br><div id="general_commi_diff_comm"></div></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>

                        <!-- life insurance commission -->
                        <div class="tab-pane fade" id="lifeCommission" role="tabpanel" aria-labelledby="life-commission">
                            @if(getSpacesFolder() != "Localhost")
                                @include('../reachassuree_agent/master/comman/coming-soon')
                            @else
                                <div class="table-responsive">
                                    <table id="L_Datatable" class="table align-middle table-nowrap table-striped display nowrap w-100">  
                                        <thead>
                                            <tr>
                                                <th>Action</th>
                                                <th>Commission Type</th>
                                                <th>Premium Amount</th>
                                                <th>Commissionable Value</th>
                                                <th>Commissionable Comm.</th>
                                                <th>Commission Recieved Value</th>
                                                <th>Commission Recieved Comm.</th>
                                                <th>Commission Difference Value</th>
                                                <th>Commission Difference Comm.</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </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">Premium Amount<br><div id="life_premium_amount_total"></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">Commissionable Value<br><div id="life_commi_value"></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">Commissionable Comm.<br><div id="life_commi_comm"></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">Commission Recieved Value<br><div id="life_commi_recived_value"></div></div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col">
                                            <div class="card text-white bg-secondary mb-3">
                                                <div class="card-header text-center font-size-13">Commission Recieved Comm.<br><div id="life_commi_recived_comm"></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">Commission Difference Value<br><div id="life_commi_diff_value"></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">Commission Difference Comm.<br><div id="life_commi_diff_comm"></div></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>

                        <!-- investment commission -->
                        <div class="tab-pane fade" id="investmentCommission" role="tabpanel" aria-labelledby="investment-commission">
                            @if(getSpacesFolder() != "Localhost")
                                @include('../reachassuree_agent/master/comman/coming-soon')
                            @else
                                <div class="table-responsive">
                                    <table id="I_Datatable" class="table align-middle table-nowrap table-striped display nowrap w-100">
                                        <thead>
                                            <tr>
                                                <th>Action</th>
                                                <th>Commission Type</th>
                                                <th>Investment Amount</th>
                                                <th>Commissionable Value</th>
                                                <th>Commissionable Comm.</th>
                                                <th>Commission Recieved Value</th>
                                                <th>Commission Recieved Comm.</th>
                                                <th>Commission Difference Value</th>
                                                <th>Commission Difference Comm.</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </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">Investment Amount<br><div id="investment_premium_amount_total"></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">Commissionable Value<br><div id="investment_commi_value"></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">Commissionable Comm.<br><div id="investment_commi_comm"></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">Commission Recieved Value<br><div id="investment_commi_recived_value"></div></div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col">
                                            <div class="card text-white bg-secondary mb-3">
                                                <div class="card-header text-center font-size-13">Commission Recieved Comm.<br><div id="investment_commi_recived_comm"></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">Commission Difference Value<br><div id="investment_commi_diff_value"></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">Commission Difference Comm.<br><div id="investment_commi_diff_comm"></div></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>

                        <!-- other commission -->
                        <div class="tab-pane fade" id="otherCommission" role="tabpanel" aria-labelledby="other-commission">
                            @include('../reachassuree_agent/master/comman/coming-soon')
                        </div>
                    </div>
                </div>
            </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 G_Ajax = "{{route('general.entry.list.ajax')}}";

        var G_Datatable = $('#G_Datatable').DataTable({
            "language": { searchPlaceholder: "Search Manually" },
            "order":[[ 0, 'desc' ]],
            "ordering": false,
            "processing": true,
            "serverSide": true,
            "scrollX": true,
            "scrollY": function() {return $(window).height() - 350;},
            "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": G_Ajax,
                "type": "POST",
                "data": {
                    "_token": csrfToken,
                    "is_deleted" : isDeleted,
                }
            },  
            "aoColumns" : [
                {"mData" : "action"},
                {"mData" : "commission_type_name"},
                {"mData" : "premium_amount_total"},
                {"mData" : "commi_value"},
                {"mData" : "commi_comm"},
                {"mData" : "commi_recived_value"},
                {"mData" : "commi_recived_comm"},
                {"mData" : "commi_diff_value"},
                {"mData" : "commi_diff_comm"},
            ]
        });

        G_Datatable.on('xhr', function() {
            var responseGeneralData = G_Datatable.ajax.json();

            $("#general_premium_amount_total").html(responseGeneralData['totalAmounts'].premium_amount_total);
            $("#general_commi_value").html(responseGeneralData['totalAmounts'].commi_value);
            $("#general_commi_comm").html(responseGeneralData['totalAmounts'].commi_comm);
            $("#general_commi_recived_value").html(responseGeneralData['totalAmounts'].commi_recived_value);
            $("#general_commi_recived_comm").html(responseGeneralData['totalAmounts'].commi_recived_comm);
            $("#general_commi_diff_value").html(responseGeneralData['totalAmounts'].commi_diff_value);
            $("#general_commi_diff_comm").html(responseGeneralData['totalAmounts'].commi_diff_comm);
        });

        var L_Ajax = "{{route('life.entry.list.ajax')}}";

        var L_Datatable = $('#L_Datatable').DataTable({
            "language": {searchPlaceholder: "Search Manually"},
            "order":[[ 0, 'desc' ]],
            "ordering": false,
            "processing": true,
            "serverSide": true,
            "scrollX": true,
            "scrollY": function() {return $(window).height() - 350;},
            "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": L_Ajax,
                "type": "POST",
                "data": {
                    "_token": csrfToken,
                    "is_deleted" : isDeleted,
                }
            },  
            "aoColumns" : [
                {"mData" : "action"},
                {"mData" : "commission_type_name"},
                {"mData" : "premium_amount_total"},
                {"mData" : "commi_value"},
                {"mData" : "commi_comm"},
                {"mData" : "commi_recived_value"},
                {"mData" : "commi_recived_comm"},
                {"mData" : "commi_diff_value"},
                {"mData" : "commi_diff_comm"},
            ]
        });

        L_Datatable.on('xhr', function() {
            var responseLifeData = L_Datatable.ajax.json();

            $("#life_premium_amount_total").html(responseLifeData['totalAmounts'].premium_amount_total);
            $("#life_commi_value").html(responseLifeData['totalAmounts'].commi_value);
            $("#life_commi_comm").html(responseLifeData['totalAmounts'].commi_comm);
            $("#life_commi_recived_value").html(responseLifeData['totalAmounts'].commi_recived_value);
            $("#life_commi_recived_comm").html(responseLifeData['totalAmounts'].commi_recived_comm);
            $("#life_commi_diff_value").html(responseLifeData['totalAmounts'].commi_diff_value);
            $("#life_commi_diff_comm").html(responseLifeData['totalAmounts'].commi_diff_comm);
        });

        var I_Ajax = "{{route('investment.entry.list.ajax')}}";

        var I_Datatable = $('#I_Datatable').DataTable({
            "language": {searchPlaceholder: "Search Manually"},
            "order":[[ 0, 'desc' ]],
            "ordering": false,
            "processing": true,
            "serverSide": true,
            "scrollX": true,
            "scrollY": function() {return $(window).height() - 350;},
            "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": I_Ajax,
                "type": "POST",
                "data": {
                    "_token": csrfToken,
                    "is_deleted" : isDeleted,
                }
            },  
            "aoColumns" : [
                {"mData" : "action"},
                {"mData" : "commission_type_name"},
                {"mData" : "premium_amount_total"},
                {"mData" : "commi_value"},
                {"mData" : "commi_comm"},
                {"mData" : "commi_recived_value"},
                {"mData" : "commi_recived_comm"},
                {"mData" : "commi_diff_value"},
                {"mData" : "commi_diff_comm"},
            ]
        });

        I_Datatable.on('xhr', function() {
            var responseInvestmentData = I_Datatable.ajax.json();

            $("#investment_premium_amount_total").html(responseInvestmentData['totalAmounts'].premium_amount_total);
            $("#investment_commi_value").html(responseInvestmentData['totalAmounts'].commi_value);
            $("#investment_commi_comm").html(responseInvestmentData['totalAmounts'].commi_comm);
            $("#investment_commi_recived_value").html(responseInvestmentData['totalAmounts'].commi_recived_value);
            $("#investment_commi_recived_comm").html(responseInvestmentData['totalAmounts'].commi_recived_comm);
            $("#investment_commi_diff_value").html(responseInvestmentData['totalAmounts'].commi_diff_value);
            $("#investment_commi_diff_comm").html(responseInvestmentData['totalAmounts'].commi_diff_comm);
        });

        updateURLWithActiveTabId();

        $('#general-commission').click(function() {
            handleTabClick('#general-commission', '#generalCommission', 'general-commission');
            
            setTimeout(function () {
                var G_Datatables = $('#G_Datatable').DataTable();
                G_Datatables.columns.adjust().draw();
            }, 200);
        });

        $('#life-commission').click(function() {
            handleTabClick('#life-commission', '#lifeCommission', 'life-commission');

            setTimeout(function () {
                var L_Datatables = $('#L_Datatable').DataTable();
                L_Datatables.columns.adjust().draw();
            }, 200);
        });

        $('#investment-commission').click(function() {
            handleTabClick('#investment-commission', '#investmentCommission', 'investment-commission');

            setTimeout(function () {
                var I_Datatables = $('#I_Datatable').DataTable();
                I_Datatables.columns.adjust().draw();
            }, 200);
        });

        $('#other-commission').click(function() {
            handleTabClick('#other-commission', '#otherCommission', 'other-commission');
        });
    });

    function deleteCommissionListRecord(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) {
                remove(id);
            }
        });
    }

    var delCommListRecord = "{{route('delete.commission.list')}}";
    
    function remove(id) {
        $.ajax({
            type: 'GET',
            url: delCommListRecord + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                    $('#G_Datatable , #L_Datatable , #I_Datatable').DataTable().ajax.reload(null, false);
                }
            }
        });
    }

    function updateURLWithActiveTabId() {
        const currentUrl = window.location.href;
        const url = new URL(currentUrl);
        var typeValue = url.searchParams.get('type');

        if(typeValue == null || typeValue == "general-commission"){
            handleTabClick('#general-commission', '#generalCommission', 'general-commission');
        }else if(typeValue == "life-commission"){
            handleTabClick('#life-commission', '#lifeCommission', 'life-commission');
        }else if(typeValue == "investment-commission"){
            handleTabClick('#investment-commission', '#investmentCommission', 'investment-commission');
        }else if(typeValue == "other-commission"){
            handleTabClick('#other-commission', '#otherCommission', 'other-commission');
        }
    }

    function clearActiveTabClass(){
        $('.nav-link.waves-effect').removeClass('active');
        $('.tab-pane').removeClass('active show');
    }

    function handleTabClick(tabId, contentId, urlType) {
        clearActiveTabClass();

        $(tabId).addClass('active');
        $(contentId).addClass('active show');

        const currentUrl = window.location.href;
        const url = new URL(currentUrl);
        url.searchParams.set('type', urlType);
        
        history.replaceState(null, null, url.toString());
    }
</script>
@endsection