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

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

        @include('../reachassuree_agent/master/comman/header')
       
        @if(getSpacesFolder() == "Localhost")
            @include('../reachassuree_agent/master/optional_cover/form')
        @endif
       
        <div class="row">
            <div class="card">
                <div class="card-body">
                    <br>
                    <div class="table-responsive">
                        <table id="datatable" class="table align-middle table-nowrap display nowrap w-100">
                            <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>Department</th>
                                    <th>Division</th>
                                    <th>Segment</th>
                                    <th>Insurance Company</th>
                                    <th>Optional Covers</th>
                                    <th>Status</th>
                                    <th>Created By</th>
                                    <th>Modified By</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                        @csrf
                    </div>
                </div>
            </div>
        </div>
        <!-- end row -->
    </div>
</div>

@endsection

@section('custom-scripts')
<script src="{{ asset('assets/libs/parsleyjs/parsley.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 = $("[name=_token").val();
    var ajaxSearchDivision = "{{ route('search.division') }}";
    var getTableDataUrl = "{{ route('master.optional.cover.ajax') }}";
    var getRecordDetailsAjax = "{{ route('master.optional.cover.detail') }}";
    var changeStatusUrl = "{{ route('master.change.optional.cover.status') }}";
    var ajaxSearchInsuranceCompany = "{{ route('search.insurance.company') }}";

    var table = $('#datatable').DataTable({
        "aoColumnDefs": [{"bSortable": false,"aTargets": [5]}],
        "order": [[0, 'asc']],
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "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": getTableDataUrl,
            "type": "POST",
            "data": {"_token": csrfToken}
        },
        "aoColumns": [
            {"mData": "id"},
            {"mData": "department_name"},
            {"mData": "division_name",
                    "render": function(data, type, full, meta) {
                        if (type === 'display' && data != null && data.length > 20) {
                            return '<span title="' + data + '">' + data.substr(0, 20) + '...</span>';
                        } else {
                            return data;
                        }
                    }
            },
            {"mData": "search_segment",
                    "render": function(data, type, full, meta) {
                        if (type === 'display' && data != null && data.length > 20) {
                            return '<span title="' + data + '">' + data.substr(0, 20) + '...</span>';
                        } else {
                            return data;
                        }
                    }
            },
            {"mData": "search_company",
                    "render": function(data, type, full, meta) {
                        if (type === 'display' && data != null && data.length > 20) {
                            return '<span title="' + data + '">' + data.substr(0, 20) + '...</span>';
                        } else {
                            return data;
                        }
                    }
            },
            {"mData": "optional_covers"},
            {"mData": "status"},
            {"mData": "created_by"},
            {"mData": "modified_by"},
            {"mData": "action", "bSortable" : false}
        ]
    });

    $(document).ready(function() {

        $('#optional_covers').on('input', function() {
            var inputValue = $(this).val();
            var capitalizedValue = capitalizeString(inputValue);
            $(this).val(capitalizedValue);
        });   

        $('#optional_cover_footer, #insCompanyArea').hide();

        var options = {
            beforeSubmit: showRequest, // pre-submit callback
            success: showResponse // post-submit callback
        };

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

        resetInputForm();

        $("#optional_division_id").on("change", function() {
            $("#optional_segment_id").empty();
        });
        
        $("#optional_department_name").select2({placeholder: 'Select Department'});
        $("#optional_department_name").on("change", function() {

            $("#optional_division_id, #optional_insurance_company_id, #optional_segment_id").empty();

            if($(this).val() == "Life"){
                $('#insCompanyArea').show();
                $('#segmentArea, #divisionArea').hide();
                $('#divSection').removeClass('col-md-6').addClass('col-md-10');

                $('#optional_division_id').html('');

                var optionsHTML = '';
                optionsHTML += '<option value="' + 1 + '" selected>' + "Life Insurance" + '</option>';
                $('#optional_division_id').html(optionsHTML);

                insuranceCompanySearch();
            }else{

                $('#divSection').removeClass('col-md-10').addClass('col-md-6');
                $('#insCompanyArea').hide();
                $('#segmentArea, #divisionArea').show();
                
                segmentSearch();
            }
        });

        $("#optional_division_id").on("select2:open", function(e) {
            if (!$("#optional_department_name option:selected").length) {
                toastr.error("Please select a Department first!");
            }
        }); 
       
        $("#optional_insurance_company_id").on("select2:open", function(e) {
            if (!$("#optional_department_name option:selected").length) {
                toastr.error("Please select a Department first!");
            }
        }); 

        insuranceCompanySearch();
        segmentSearch();
        divisionSearch();
    });

    function segmentSearch() {
        $("#optional_segment_id").select2({
            ajax: {
                url: "{{ route('search.optional.segment') }}",
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        "division_id": function() {
                            return $("#optional_division_id").val()
                        },
                        search_value: params.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 segment',
            closeOnSelect: false
        });
    }

    function insuranceCompanySearch(){
        $("#optional_insurance_company_id").select2({
            ajax: {
                url: ajaxSearchInsuranceCompany,
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        "company_type": function() {
                            return $('#optional_department_name').val();
                        },
                        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 insurance company',
            closeOnSelect: false
        });
    }

    function divisionSearch(){
        $("#optional_division_id").select2({
            ajax: {
                url: ajaxSearchDivision,
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        "department": function() {
                            return $('#optional_department_name').val();
                        },
                        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: 'Select Division',
            closeOnSelect: false
        });
    }

    function clearInsCompany(){
        $('#optional_insurance_company_id').empty();    
    }

    function resetInputForm() {
        $('#optional_cover_id').val('');
        $('#optional_department_name').val('').trigger('change');
        $('#optional_division_id, #optional_insurance_company_id').empty();    

        $('#formOptionalCover').trigger("reset").removeClass('was-validated');
    }

    function showRequest(formData, jqForm, options) {
        showLoader();

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

    function showResponse(responseText, statusText, xhr, $form) {
        hideLoader();

        if (responseText['status'] == 1) {
            toastr["success"](responseText['msg']);
            
            resetInputForm();
            
            $('#datatable').DataTable().ajax.reload(null, false);
            $("#btnOptionalCoverSave").html("Insert");

        } else if (responseText['status'] == 0) {
            if (typeof responseText['data'] !== "undefined") {
                var size = Object.keys(responseText['data']).length;
                if (size > 0) {
                    for (var [key, value] of Object.entries(responseText['data'])) {
                        toastr["error"](value);
                    }
                }
            } else {
                toastr["error"](responseText['msg']);
            }
        }
    }

    function editView(id) {

        resetInputForm();

        window.scrollTo({ top: 0, behavior: 'smooth' });

        $.ajax({
            type: 'GET',
            url: getRecordDetailsAjax + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {

                    $("#optional_cover_id").val(resultData['data']['id']);
                    $("#optional_covers").val(resultData['data']['optional_covers']);
                    
                    if(resultData['data']['department_name'] != 'General' || resultData['data']['department_name'] != 'Life'){
                        $('#optional_department_name option').each(function() {
                            if ($(this).val() == resultData['data']['department_name']) {
                                $(this).prop('selected', true);
                            }
                        });
                        
                        $('#optional_department_name').trigger('change');
                    }

                    // Insurance Company
                    $('#optional_insurance_company_id').empty();

                    var companyData = resultData['data']['company'];
                    var optionsHTML = '';
                    for(var i = 0; i < companyData.length; i++){
                        var company = companyData[i];

                        optionsHTML += '<option value="' + company.id + '" selected>' + company.full_name + '</option>';
                        $('#optional_insurance_company_id').html(optionsHTML);
                    }
                    
                    
                    // Division
                    $('#optional_division_id').empty();

                    var divisionData = resultData['data']['division'];
                    var optionsHTML = '';
                    for(var i = 0; i < divisionData.length; i++){
                        var division = divisionData[i];

                        optionsHTML += '<option value="' + division.id + '" selected>' + division.name + '</option>';
                        $('#optional_division_id').html(optionsHTML);
                    }
                    
                    // Segment
                    $('#optional_segment_id').empty();

                    var segmentData = resultData['data']['segment'];

                    var optionsHTML = '';
                    for(var i = 0; i < segmentData.length; i++){
                        var segment = segmentData[i];
                        var division = segment.division_id;

                        if(division == 3){
                            optionsHTML += '<option value="' + segment.id + '" selected>' + segment.name + ' ' +  segment.type+ '</option>';

                        }else{
                            optionsHTML += '<option value="' + segment.id + '" selected>' + segment.name + '</option>';

                        }

                        $('#optional_segment_id').html(optionsHTML);
                    }

                }
                $("#btnOptionalCoverSave").html("Update");
            }
        });
    }

    function changeStatus(id) {
        var status = document.getElementById("status" + id);
        if (status.checked) {
            status = 1;
        } else {
            status = 0;
        }
       
        $.ajax({
            type: 'GET',
            url: changeStatusUrl + "?id=" + id + "&status=" + status,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                }
            }
        });
    }
    
</script>
@endsection