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

<div class="page-content">
    <div class="container-fluid">
        <!-- start page title -->
            @include('../reachassuree_agent/master/comman/header')
        <!-- end page title -->

        <!-- start row -->
        <form action="{{ route('master.segment.save') }}" accept-charset="utf-8" method="POST" id="formSegment" class="needs-validation" novalidate>
            @csrf
            <input type="hidden" class="form-control" id="segment_id" name="segment_id" value="">

            <div class="row">
                <div class="col-md-5">
                    <div class="mb-3">
                        <label for="division_id" class="form-label">Select Division<span class="text-danger">*</span></label>
                        <select class="form-control select2-ajax" id="division_id" name="division_id" required></select>
                        <div class="invalid-feedback">This value is required.</div>
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="mb-3">
                        <label for="segment_name" class="form-label">Segment Name<span class="text-danger">*</span></label>
                        <input type="text" class="form-control" placeholder="Segment Name" value="" name="segment_name" id="segment_name" required autocomplete="off">
                    </div>
                </div>

                @if(getActualExpirationDate() >= date('Y-m-d H:i:s'))
                    <div class="col-md-2">
                        <div class="mb-3">
                            <label  class="form-label extra_space">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                            <button type="submit" class="btn btn-primary form-control" id="btnSegmentSave">Insert</button>
                        </div>
                    </div>
                @else
                    <div class="col-md-2">
                        <div class="mb-3">
                            <label class="form-label spaceRemove" id="spaceRemove">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                            <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>

            <div class="row" id="WcArea">
                <div class="col-md-12">
                    <div class="mb-3">
                        <label class="form-label">Type of this segment ?<span class="text-danger">*</span></label>
                        <div class="form-check">
                            <div class="form-check-inline">
                                <input class="form-check-inline form-check-input" type="radio" name="wc_segment_type" id="wc" value="WC" checked>
                                <label class="form-check-label me-5" for="wc">WC<small>(Workmen Compensation)</small></label>
                            </div>
                            <div class="form-check-inline">
                                <input class="form-check-inline form-check-input" type="radio" name="wc_segment_type" id="nonwc" value="Non WC">
                                <label class="form-check-label me-5" for="nonwc">Non WC<small>(Workmen Compensation)</small></label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row" id="TPLArea">
                <div class="col-md-12">
                    <div class="mb-3">
                        <label class="form-label">Type of this segment ?<span class="text-danger">*</span></label>
                        <div class="form-check">
                            <div class="form-check-inline">
                                <input class="form-check-inline form-check-input" type="radio" name="tpl_segment_type" id="0" value="Package Policy" checked>
                                <label class="form-check-label me-5" for="0">Package</label>
                            </div>
                            <div class="form-check-inline">
                                <input class="form-check-inline form-check-input" type="radio" name="tpl_segment_type" id="1" value="TPL Policy">
                                <label class="form-check-label me-5" for="1">TPL<small>(Third party liability)</small></label>
                            </div>
                            <div class="form-check-inline">
                                <input class="form-check-inline form-check-input" type="radio" name="tpl_segment_type" id="2" value="SAOD Policy">
                                <label class="form-check-label me-5" for="2">SAOD<small>(Standalone On Damage)</small></label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <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>Division Name</th>
                                    <th>Segment Name</th>
                                    <th>Segment Type</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 ajaxURLGetSegments = "{{ route('master.segments.ajax') }}";
    var ajaxURLSegmentDetail = "{{ route('master.segment.detail') }}";
    var changeSegmentStatusURL = "{{ route('master.change.segment.status') }}";
    var ajaxSearchDivision = "{{ route('search.division') }}";
    var csrfToken = $("[name=_token").val();

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

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

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

        $("#division_id").select2({
            ajax: {
                url: ajaxSearchDivision,
                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 division',
        });

        $('#WcArea').hide();
        $('#TPLArea').hide();
        $('#division_id').on('change', function() {
            var divisionId = $(this).val();

            if(divisionId == 3) { // Vehicle Insurance	
                $('#WcArea').hide();
                $('#TPLArea').show();
            }else if (divisionId == 4) { // Other General Insurance
                $('#WcArea').show();
                $('#TPLArea').hide();
            }else{
                $('#WcArea').hide();
                $('#TPLArea').hide();
            }
        });
    });

    resetInputForm();

    function resetInputForm() {
        $('#formSegment').trigger("reset");
        $("#formSegment").removeClass('was-validated');
        $("#division_id").empty().trigger("change");
        $("#segment_id").val("");
    }

    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);
            
            $("#btnSegmentSave").html('Insert');

        } else if (responseText['status'] == 0) {
            toastr["error"](responseText['msg']);
        }
    }

    function editView(id) {
        resetInputForm();

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

        $.ajax({
            type: 'GET',
            url: ajaxURLSegmentDetail + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    $("#segment_id").val(resultData['data']['id']);
                    $("#segment_name").val(resultData['data']['name']);

                    var newOption = new Option("" + resultData['data']['division_name'] + "", "" + resultData['data']['division_id'] + "", false, false);
                    $('#division_id').append(newOption).trigger('change');

                    if(resultData['data']['division_id'] == 3){
                        $('input[name="tpl_segment_type"][value="'+resultData['data']['type']+'"]').prop('checked', true);
                    }else if(resultData['data']['division_id'] == 4){
                        $('input[name="wc_segment_type"][value="'+resultData['data']['type']+'"]').prop('checked', true);
                    }
                }
                $("#btnSegmentSave").html("Update");
            }
        });
    }

    function changeStatus(id) {
        var segment_status = document.getElementById("segment_status" + id);
       
        if (segment_status.checked) {
            segment_status = 1;
        } else {
            segment_status = 0;
        }

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

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