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

    @media (max-width: 1362px)   {
        #myTab {
            align-items: stretch;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            overflow-x: auto !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;
    }

    button#life-commission,
    button#general-commission,
    button#investment-commission,
    button#sub-agent-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;
	}

</style>

@php 
    $privileges = getPrivileges();
@endphp


<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" style="width: max-content;">
                        <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>
                        @if(Auth::user()->type == 1)
                            <a class="btn btn-primary px-5 waves-effect float-end d-flex justify-content-end" id="goToGeneralSetting" href="" type="button" style="width: max-content;">Add Setting</a>                               
                        @else
                            @if(!empty($privileges && array_key_exists(53,$privileges)))
                                @if(array_key_exists(58,$privileges[53]))
                                    <a class="btn btn-primary px-5 waves-effect float-end d-flex justify-content-end" id="goToGeneralSetting" href="" type="button" style="width: max-content;">Add Setting</a>
                                @endif
                            @endif
                        @endif
                </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 px-3 py-4">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-xl-10">
                            <ul class="nav nav-tabs mb-3 d-none" id="myTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link waves-effect" id="sub-agent-commission" data-bs-toggle="tab" data-bs-target="#subAgentCommission" type="button" role="tab" aria-controls="intellectual-property-policy-tab" aria-selected="false">Sub Agent Commission</button>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade" id="subAgentCommission" role="tabpanel" aria-labelledby="sub-agent-commission">

                            @if(getSpacesFolder() != "Localhost")
                                @include('../reachassuree_agent/master/comman/coming-soon')
                            @else
                                <div class="table-responsive">
                                    <table id="SA_Datatable" class="table table-responsive align-middle table-nowrap table-striped display nowrap w-100">
                                        <thead class="table-light">
                                            <tr>
                                                <th>Action</th>
                                                <th>Status</th>
                                                <th>Transaction Date<br><input type="text" class="form-control" name="sa_transaction_date" placeholder="Search" style="width: 100px !important; height: 25px"></th>
                                                <th>Transaction No<br><input type="text" class="form-control" name="sa_transaction_no" placeholder="Search" style="width: 100px !important; height: 25px"></th>
                                                <th>Department<br><input type="text" class="form-control" name="sa_department" placeholder="Search" style="width: 100px !important; height: 25px"></th>
                                                <th>Sub Agent<br><input type="text" class="form-control" name="sa_sub_agent" placeholder="Search" style="width: 100px !important; height: 25px"></th>
                                                <th>Insurance Company<br><input type="text" class="form-control" name="sa_insurance_company" placeholder="Search" style="width: 100px !important; height: 25px"></th>
                                                <th>Division<br><input type="text" class="form-control" name="sa_division" placeholder="Search" style="width: 100px !important; height: 25px"></th>
                                                <th>Segment<br><input type="text" class="form-control" name="sa_segment" placeholder="Search" style="width: 100px !important; height: 25px"></th>
                                                <th>Product<br><input type="text" class="form-control" name="sa_product" placeholder="Search" style="width: 100px !important; height: 25px"></th>
                                                <th>From Date<br><input type="text" class="form-control" name="sa_from_date" placeholder="Search" style="width: 100px !important; height: 25px"></th>
                                                <th>To Date<br><input type="text" class="form-control" name="sa_to_date" placeholder="Search" style="width: 100px !important; height: 25px"></th>
                                                <th>Commission Type<br><input type="text" class="form-control" name="sa_comm_type" placeholder="Search" style="width: 100px !important; height: 25px"></th>
                                                <th>Commission<br><input type="text" class="form-control" name="sa_commission" placeholder="Search" style="width: 100px !important; height: 25px"></th>
                                                <th>Sub Agent Commission<br><input type="text" class="form-control" name="sa_reg_sub_agent_comm" placeholder="Search" style="width: 100px !important; height: 25px"></th>
                                                <th>Target Setting<br><input type="text" class="form-control" name="sa_add_target_setting" placeholder="Search" style="width: 100px !important; height: 25px"></th>
                                                <th>Lumsum Comission<br><input type="text" class="form-control" name="sa_add_lum_sum_commission" placeholder="Search" style="width: 100px !important; height: 25px"></th>
                                                <th>Addi/Prom. Comission<br><input type="text" class="form-control" name="sa_add_prom_commission" placeholder="Search" style="width: 100px !important; height: 25px"></th>
                                                <th>Remarks<br><input type="text" class="form-control" name="sa_remarks" placeholder="Search" style="width: 100px !important; height: 25px"></th>
                                                <th>Created By<br><input type="text" class="form-control" name="sa_created_by" placeholder="Search" style="width: 100px !important; height: 25px"></th>
                                                <th>Modified By<br><input type="text" class="form-control" name="sa_modified_by" placeholder="Search" style="width: 100px !important; height: 25px"></th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            @endif

                        </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">
    var csrfToken = $('meta[name="csrf-token"]').attr('content');
    var isDeleted = '{{$data["is_deleted"]}}';
</script>

<!-- Sub Agent Commission -->
<script type="text/javascript">
    var subAgentCommissionListAjax="{{ route('sub.agent.commission.list.ajax') }}";
    var changeSubAgentStatusURL= "{{ route('change.sub.agent.commission.status') }}";
    var deleteSubAgentCommission="{{ route('delete.sub.agent.commission') }}";

    var SA_Datatable = $('#SA_Datatable').DataTable({
        "aoColumnDefs": [{ "bSortable": true, "aTargets": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20] }],
        "order":[[ 2, 'desc' ]],
        "ordering": true,
        "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": subAgentCommissionListAjax,
            "type": "POST",
            "data": {"_token": csrfToken,"is_deleted" : isDeleted,}
        },  
        "aoColumns" : [
            {"mData" : "action", "bSortable" : false},
            {"mData" : "status", "bSortable" : false},
            {"mData" : "transaction_date"},
            {"mData" : "transaction_no"},
            {"mData" : "department"},
            {"mData" : "sub_agent"},
            {"mData" : "insurance_company"},
            {"mData" : "division"},
            {"mData" : "segment"},
            {"mData" : "product"},
            {"mData" : "from_date"},
            {"mData" : "to_date"},
            {"mData" : "comm_type"},
            {"mData" : "commission"},
            {"mData" : "reg_sub_agent_comm"},
            {"mData" : "add_target_setting"},
            {"mData" : "add_lum_sum_commission"},
            {"mData" : "add_prom_commission"},
            {"mData" : "remarks"},
            {"mData" : "created_by"},
            {"mData" : "modified_by"},
        ]
    });
    
    function changeSubAgentStatus(id){
        var status = document.getElementById("status"+id);
        if(status.checked){
            status = 1;
        }else{
            status = 0;
        }
        $.ajax({
            type: 'GET',
            url: changeSubAgentStatusURL + "?id=" + id + "&status=" + status,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                }  
            }
        });
    }

    function subAgentCommissionDelete(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) {
                removeSubAgentCommission(id);
            }
        });
    }

    function removeSubAgentCommission(id){
        $.ajax({
            type: 'GET',
            url: deleteSubAgentCommission + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                    $('#SA_Datatable').DataTable().ajax.reload(null, false);
                }  
            }
        });
    }

    var SAColumns = [
        'sa_transaction_date', 'sa_transaction_no', 'sa_department', 'sa_sub_agent', 'sa_insurance_company', 'sa_division', 'sa_segment', 'sa_product', 
        'sa_from_date', 'sa_to_date', 'sa_comm_type', 'sa_commission', 'sa_reg_sub_agent_comm', 'sa_add_target_setting', 'sa_add_lum_sum_commission', 
        'sa_add_prom_commission', 'sa_remarks', 'sa_created_by', 'sa_modified_by'
    ];

    SAColumns.forEach(function (columnName, index) {
        $('input[name="' + columnName + '"]').click(function (event) {
            event.stopPropagation();
        });

        $('input[name="' + columnName + '"]').on('keyup input', function () {
            SA_Datatable.columns(index + 2).search(this.value).draw();
        });
    });

</script>

<!-- for tab selection  -->
<script type="text/javascript">
    $(document).ready(function () {
        updateURLWithActiveTabId();

        $('#sub-agent-commission').click(function() {
            handleTabClick('#sub-agent-commission', '#subAgentCommission', 'sub-agent-commission');
        });
    });

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

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

        if(typeValue == null || typeValue == "sub-agent-commission"){
            handleTabClick('#sub-agent-commission', '#subAgentCommission', 'sub-agent-commission');
        }
    }

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

        if(contentId == '#subAgentCommission'){
            $('#goToGeneralSetting').attr("href", "{{ route('sub.agent.commission.setting.index') }}");   
           
            setTimeout(function () {
                var SA_Datatables = $('#SA_Datatable').DataTable();
                SA_Datatables.columns.adjust().draw();
            }, 200);
        }
    }
</script>
@endsection