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

<style>
    p {
        font-size: 14px;
        font-weight: 500;
        text-align: left;
        margin-bottom: 0.5rem;
    }

    h4 {
        font-size: 22px;
        font-weight: 600;
        margin-bottom: unset;
        text-transform: uppercase;
    }

    .select2-container .select2-selection--multiple .select2-search__field {
        width: 200px !important;
    }
</style>

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

        <div class="row">
            <div class="card">
                <div class="card-body" style="padding: 1.25rem 0.5rem;">
                    <div class="row">
                        <div class="col-md-11">
                            <div class="row">
                                <div class="col-md-2">
                                    <div class="mb-3">
                                        <label class="form-label">Start Date</label>
                                        <input type="text" class="form-control" name="start_date" id="start_date" placeholder="Start date" value="{{ date('d-m-Y') }}" autocomplete="off">
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="mb-3">
                                        <label class="form-label">End Date</label>
                                        <input type="text" class="form-control" name="end_date" id="end_date" placeholder="End date" value="" autocomplete="off">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label for="select_option" class="form-label">Select Option<span class="text-danger">*</span></label>
                                        <select class="form-control" name="select_option" id="select_option">
                                            <option value="" selected>Select Family Option</option>
                                            <option value="Family Group List">Family Group List</option>
                                            <option value="Family Head List">Family Head List</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-5" id="showGroupListGroup">
                                    <div class="mb-3">
                                        <label for="family_group_id" class="form-label">Family Group<span class="text-danger">*</span></label>
                                        <select class="form-control select2-ajax" id="family_group_id" name="family_group_id" required multiple></select>
                                        <div class="invalid-feedback">This value is required.</div>
                                    </div>
                                </div>
                                <div class="col-md-6" id="showGroupListFamily">
                                    <div class="mb-3">
                                        <label for="family_group_client_id" class="form-label">Select Family<span class="text-danger">*</span></label>
                                        <select class="form-control select2-ajax" id="family_group_client_id" name="family_group_client_id" multiple required></select>
                                        <div class="invalid-feedback">This value is required.</div>
                                    </div>
                                </div>
                                <div class="col-md-5" id="showFamilyListFamily">
                                    <div class="mb-3">
                                        <label for="family_client_id" class="form-label">Select Family<span class="text-danger">*</span></label>
                                        <select class="form-control select2-ajax" id="family_client_id" name="family_client_id" multiple required></select>
                                        <div class="invalid-feedback">This value is required.</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-1">
                            <div class="mb-3">
                                <label class="form-label extra_space" id="spaceRemove">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                <button type="button" onclick="clearFilterFields();" class="form-control btn btn-primary" id="btnClear">Clear</button>
                            </div>
                        </div>
                    </div>
                    
                    <hr>

                    <div class="table-responsive">
                        <table id="datatable" class="table align-middle table-nowrap table-striped display nowrap w-100">
                            <thead class="table-light">
                                <tr>
                                    <th>No.</th>
                                    <th>Sub. Date</th>
                                    <th>Places</th>
                                    <th>F/R</th>
                                    <th>Company</th>
                                    <th>Sub-Agent</th>
                                    <th>Due Date</th>
                                    <th>Group</th>
                                    <th>Name</th>
                                    <th>Mobile No.</th>
                                    <th>Segment</th>
                                    <th>Premium</th>
                                    <th>Remark</th>
                                    <th>Veh No.</th>
                                    <th>Veh. Nm</th>
                                    <th>Plan Number</th>
                                    <th>Policy No.</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                        @csrf
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('custom-scripts')
<script type="text/javascript">
    var ajaxSearchFamilyGroup = "{{route('search.family.group')}}";
    var ajaxSearchClients = "{{route('search.clients')}}";
    var ajaxSearchAllClients = "{{route('search.all.clients')}}";

    setDefaultDates();
    hideSelections();
    $('#select_option').select2();

    function clearFilterFields() {
        setDefaultDates();
        hideSelections();

        $('#family_group_id').empty();
        $('#select_family').empty();
        $('#family_client_id').empty();
        $('#family_group_client_id').empty();

        $("#select_option").val($("#select_option option:first").val());
        $("#select_option").trigger('change');

        //Load Datatable Here... 
    }

    function setDefaultDates(){
        $('#start_date').datepicker({
            format: 'dd-mm-yyyy',
            autoclose: true,
        }).on('changeDate', function (e) {
            $('#end_date').datepicker('setStartDate', e.date);
        });

        $('#end_date').datepicker({
            format: 'dd-mm-yyyy',
            autoclose: true,
        }).on('changeDate', function (e) {
            $('#start_date').datepicker('setEndDate', e.date);
        });

        const currentStartDate = new Date();
        currentStartDate.setDate(1);
        $('#start_date').datepicker("setDate", currentStartDate);

        const currentEndDate = new Date();
        currentEndDate.setMonth(currentEndDate.getMonth() + 1);
        currentEndDate.setDate(0);

        const formattedEndDate = ("0" + currentEndDate.getDate()).slice(-2) + "-" + ("0" + (currentEndDate.getMonth() + 1)).slice(-2) + "-" + currentEndDate.getFullYear();
        $('#end_date').datepicker("setDate", formattedEndDate);
    }

    function hideSelections(){
        $('#showGroupListGroup').hide();
        $('#showGroupListFamily').hide();
        $('#showFamilyListFamily').hide();
    }

    $("#select_option").change(function() {
        const selectOptionValue = $(this).val();

        if(selectOptionValue == "Family Group List"){
            $('#showGroupListGroup').show();
            $('#showFamilyListFamily').hide();
            $('#family_client_id').empty();
        }else if(selectOptionValue == "Family Head List"){
            $('#showFamilyListFamily').show();
            $('#showGroupListGroup').hide();
            $('#showGroupListFamily').hide();
            $('#family_group_id').empty();
            $('#select_family').empty();
            $('#family_group_client_id').empty();
        }
    });
    
    $("#family_group_id").change(function() {
        $('#family_group_client_id').empty();
        $('#showGroupListFamily').show();
    });

    $("#family_group_id").select2({
        ajax: {
            url: ajaxSearchFamilyGroup,
            dataType: 'json',
            delay: 0,
            data: function(params) {
                return {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 family group',
    });

    $("#family_group_client_id").select2({
        ajax: {
            url: ajaxSearchClients,
            dataType: 'json',
            delay: 0,
            data: function(params) {
                return {
                    "get_all_client": function() {
                        return 0;
                    },
                    "group_id": function() {
                        return $("#family_group_id").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 policy holder name',
    });
    
    $("#family_client_id").select2({
        ajax: {
            url: ajaxSearchAllClients,
            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 policy holder name',
    });
</script>
@endsection