@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')
    
        <!-- start row -->
        @if (getSpacesFolder() == 'Localhost')
            <form action="{{ route('master.insurance.company.save') }}" method="POST" id="formInsuranceCompany" class="needs-validation" novalidate>
                @csrf
                <input type="hidden" class="form-control" id="insurance_company_id" name="insurance_company_id" value="">

                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-2">
                            <label for="insurance_company_name" class="form-label">Company Short Name<span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="insurance_company_name" name="insurance_company_name" placeholder="Company short name" value="" required autocomplete="off">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-2">
                            <label for="insurance_company_full_name" class="form-label">Company Full Name<span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="insurance_company_full_name" name="insurance_company_full_name" placeholder="Company full name" value="" required autocomplete="off">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-2">
                            <label for="insurance_company_payment_link" class="form-label">Payment Link</label>
                            <input type="text" class="form-control" placeholder="Payment link" value="" name="insurance_company_payment_link" id="insurance_company_payment_link" autocomplete="off">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <input type="hidden" class="form-control" id="hidden_company_logo" name="hidden_company_logo" value="">
                            <label for="company_logo" class="form-label">Company Logo<span style="font-size: 12px;color: #808080bd;">(JPG, PNG, JPEG or PDF)</span></label>
                            <input type="file" class="form-control" id="company_logo" name="company_logo" value="" accept="image/jpeg,image/png,application/pdf">
                        </div>
                    </div>
                </div>
                
                <div class="row mb-3">
                    <div class="col-md-10">
                        <div class="form-check mt-2">
                            <input class="form-check-inline me-2" type="radio" name="insurance_company_type" id="insurance_company_type1" value="Life" checked>
                            <label class="form-check-label font-size-16 me-4" for="insurance_company_type1">Life</label>
                            <input class="form-check-inline me-2" type="radio" name="insurance_company_type" id="insurance_company_type2" value="General">
                            <label class="form-check-label font-size-16 me-4" for="insurance_company_type2">General</label>
                            <input class="form-check-inline me-2" type="radio" name="insurance_company_type" id="insurance_company_type3" value="Investment">
                            <label class="form-check-label font-size-16 me-4" for="insurance_company_type3">Investment</label>
                            <input class="form-check-inline me-2" type="radio" name="insurance_company_type" id="insurance_company_type5" value="TPA">
                            <label class="form-check-label font-size-16 me-4" for="insurance_company_type5">TPA</label>
                            <input class="form-check-inline" type="radio" name="insurance_company_type" id="insurance_company_type4" value="Other Company">
                            <label class="form-check-label font-size-16" for="insurance_company_type4">Other Company</label>
                        </div>
                    </div>

                    @if(getActualExpirationDate() >= date('Y-m-d H:i:s'))
                        <div class="col-md-2">
                            <div class="mb-2">
                                <button type="submit" class="btn btn-primary form-control" id="btnInsuranceCompanySave">Insert</button>
                            </div>
                        </div>
                    @else
                        <div class="col-md-2">
                            <div class="mb-2">
                                <button type="button" class="btn btn-primary form-control" disabled>Insert</button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <p class="text-center text-danger font-size-14 fw-bold mb-0 p-3">Your current plan has expired. To resume disabled operations, you have the option to renew your existing plan or upgrade to a new one. Simply visit our 'Renew' or 'Upgrade' tab to proceed.</p>
                            </div>
                        </div>
                    @endif
                    
                </div>
            </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>Short Name</th>
                                    <th>Full Name</th>
                                    <th>Company Type</th>
                                    <th>Payment Link</th>
                                    <th>Company Logo</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>

<!-- ADD Comapny Email MODAL -->
<div class="modal fade" id="modalAddCompanyEmail" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalAddCompanyEmail" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg mx-auto" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalCompanyEmailLabel">Add Company Email</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <form id="formAddCompanyEmail" action="{{route('master.insurance.company.email.save')}}" method="POST" class="needs-validation" novalidate>
                    @csrf
                    <input type="hidden" class="form-control" id="company_id" name="company_id">
                    <input type="hidden" class="form-control" id="company_email_id" name="company_email_id">

                    <div class="row">
                        <div class="col-md-5">
                            <div class="mb-3">
                                <label for="insurance_company_email" class="form-label">Company Email<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="insurance_company_email" name="insurance_company_email" placeholder="Enter Company Email" value="" required autocomplete="off">
                            </div>
                        </div>
                        <div class="col-md-5">
                            <div class="mb-3">
                                <label for="email_status" class="form-label">Status<span class="text-danger">*</span></label>
                                <select class="form-control select2-ajax" id="email_status" name="email_status" required>
                                    <option value=""></option>
                                    <option value="Inquiry">Inquiry</option>
                                    <option value="Claim Inquiry">Claim Inquiry</option>
                                    <option value="Claim Intimation">Claim Intimation</option>
                                </select>
                                <div class="invalid-feedback">This value is required.</div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="mb-3">
                                <label for="email_save" class="form-label extra_space">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                <button type="submit" id="email_save" class="btn btn-primary form-control">Save</button>
                            </div>
                        </div>
                    </div>
                </form>

                <div class="dropdown-divider"></div>
                
                <div class="table-responsive">
                    <table id="datatable1" class="table align-middle table-nowrap table-striped display nowrap w-100">   
                        <thead>
                            <tr>
                                <th>Action</th>
                                <th>Email</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                    @csrf
                </div>
            </div>

            <div class="modal-footer">
                <button type="button"  class="btn btn-light" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- END Comapny Email MODAL -->

@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 ajaxURLGetInsuranceCompanies = "{{ route('master.insurance.companies.ajax') }}";
    var ajaxURLInsuranceCompanyDetail = "{{ route('master.insurance.company.detail') }}";
    var changeInsuranceCompanyStatusURL = "{{ route('master.change.insurance.company.status') }}";
    var CompanyEmailDetails ="{{route('master.insurance.company.email.details')}}";
    var ajaxURLGetCompanyEmail="{{route('master.insurance.companies.email.ajax')}}";
    var emailDelete="{{route('delete.company.email')}}";
    var csrfToken = $("[name=_token").val();
    var table,table1;
    var emailErrorShown = false;

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

    $("#email_status").select2({placeholder:"Select email status"});

    $("#insurance_company_email").bind("keyup blur", function() {
        var email = $(this).val();
        var lowercaseValue = email.toLowerCase();
        $(this).val(lowercaseValue);

        if (email.trim() === "") {
            $(this).prop('required', false);
            $(this).removeClass("is-invalid");
            $("#email_save").attr("disabled",false);
            emailErrorShown = false;
        } else {
            $(this).prop('required', true);

            if (validateEmail(email)) {
                $("#email_save").attr("disabled",false);
                $(this).removeClass("is-invalid");
                emailErrorShown = false;
            } else {
                if (!emailErrorShown) {
                    $("#email_save").attr("disabled",true);
                    $(this).addClass("is-invalid");
                    toastr['error']("Please enter a valid email address");
                    emailErrorShown = true;
                }
            }
        }
    });

    resetInputForm();

    function resetInputForm() {
        $('#formInsuranceCompany').trigger("reset").removeClass('was-validated');
        $('#insurance_company_id').val('');
    }

    $(document).ready(function() {
        var options = {
            beforeSubmit: showRequest, // pre-submit callback
            success: showResponse // post-submit callback
        };

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

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

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

    // post-submit callback
    function showResponse(responseText, statusText, xhr, $form) {
        hideLoader();

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

            if(responseText['msg'] == "company email successfully saved"){
                AddEmail(responseText['data'] ['company_id']);

                $('#datatable1').DataTable().ajax.reload(null, false);
            }
        } else if (responseText['status'] == 0) {
            toastr["error"](responseText['msg']);
        }
    }

    function editView(id) {
        resetInputForm();
        
        window.scrollTo({top: 0, behavior: 'smooth'});

        $.ajax({
            type: 'GET',
            url: ajaxURLInsuranceCompanyDetail + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    $("#insurance_company_id").val(resultData['data']['id']);
                    $("#insurance_company_name").val(resultData['data']['name']);
                    $("#insurance_company_full_name").val(resultData['data']['full_name']);
                    $("#hidden_company_logo").val(resultData['data']['company_logo']);
                    $("#insurance_company_email").val(resultData['data']['company_email']);
                    $("#insurance_company_payment_link").val(resultData['data']['payment_link']);

                    if(resultData['data']['company_type'] == "Other Company"){
                        $('input:radio[id="insurance_company_type4"]').prop('checked', true);
                    }else{
                        $(`input:radio[value=${resultData['data']['company_type']}]`).prop('checked', true);
                    }
                }
                $("#btnInsuranceCompanySave").html("Update");
            }
        });
    }

    function editViewEmail(id){
        $.ajax({
            type: 'GET',
            url: CompanyEmailDetails + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    $("#formAddCompanyEmail").trigger('reset');
                    $("#formAddCompanyEmail").removeClass('was-validated');
                    $("#modalCompanyEmailLabel").html("Edit Company Email #"+ id);
                    $("#email_save").html('Update');
                    
                    $("#company_email_id").val(id);
                    $("#company_id").val(resultData['data']['company_id']);
                    $("#insurance_company_email").val(resultData['data']['email']);
                    $('#email_status').val(resultData['data']['email_status']).trigger('change');
                } else {
                    toastr["error"](resultData['msg']);
                }
            }
        });
    }

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

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

    function AddEmail(id){
        setTimeout(function () {
            $('#datatable1').DataTable().columns.adjust().draw();
        }, 200);

        $("#modalAddCompanyEmail").modal('show');
        $("#formAddCompanyEmail").trigger('reset').removeClass('was-validated');

        $("#modalCompanyEmailLabel").html("Add Company Email #"+ id);
        $("#email_save").html('Save');

        $("#company_id").val(id);
        $("#company_email_id").val('');

        if($("#company_email_id").val() == ''){
            $('#email_status').val('').trigger("change");
        }
        
        EmailDataTable(id);
    }

    function EmailDataTable(id){
        if (table1) {
            table1.clear().destroy();
        }

        table1= $('#datatable1').DataTable({
            "order":[[ 2, 'desc' ]],
            "ordering": false,
            "processing": true,
            "serverSide": true,
            "scrollX": true,
            "scrollY": function() {return $(window).height() - 430},
            "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": ajaxURLGetCompanyEmail + "?id=" +  id,
                "type": "POST",
                "data": {"_token": csrfToken}
            },  
            "aoColumns" : [
                {"mData" : "action"},
                {"mData" : "email"},
                {"mData" : "email_status"},
            ]
        });
    }

    function changeStatus(id) {
        var insurance_company_status = document.getElementById("insurance_company_status" + id);

        if (insurance_company_status.checked) {
            insurance_company_status = 1;
        } else {
            insurance_company_status = 0;
        }

        $.ajax({
            type: 'GET',
            url: changeInsuranceCompanyStatusURL + "?insurance_company_id=" + id + "&insurance_company_status=" + insurance_company_status,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                }
            }
        });
    }

    $('#insurance_company_name, #insurance_company_full_name').bind('keyup blur', function() {
        var node = $(this);
        node.val(node.val().replace(/[^a-zA-Z\s-]/g, ''));
    });
   

    table = $('#datatable').DataTable({
        "aoColumnDefs": [{"bSortable": false,"aTargets": [7]}],
        "order": [[1, '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": ajaxURLGetInsuranceCompanies,
            "type": "POST",
            "data": {"_token": csrfToken,}
        },
        "aoColumns": [
            {"mData": "id"},
            {"mData": "name"},
            {"mData": "full_name"},
            {"mData": "company_type"},
            {"mData": "payment_link", "bVisible":false},
            {"mData": "company_logo"},
            {"mData": "status", "bVisible":false},
            {"mData": "created_by", "bVisible":false},
            {"mData": "modified_by", "bVisible":false},
            {"mData": "action", "bSortable" : false}
        ]
    });
</script>
@endsection