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

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

        <div class="row">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0 font-size-18">
                    <a href="javascript:void(0);" onclick="history.back();" class="btn btn-primary px-3 waves-effect waves-light btn-sm backToButton" title="Back Button" id="backToButton"><i class="mdi mdi-arrow-left font-size-20"></i></a>&nbsp;&nbsp;&nbsp; {{$data['title']}}
                </h4>

                {{-- <div class="col-md-1">
                    <div class="page-title-right">
                        <button class="btn btn-primary px-4 form-control" onclick="return addImportBtn();" type="button">+ Import</button>
                    </div>
                </div> --}}

                <div class="modal fade" id="modalImport" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalImportLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <a href="{{ route('download.family.group') }}" class="btn btn-success btn-large pull-right" style="font-weight: 600;"><i class="icon-download-alt"> </i> Download Example File </a>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>

                            <form id="formImport" action="{{route('import.family.group')}}" method="POST" class="needs-validation m-0" novalidate>
                                @csrf
                                <input type="hidden" class="form-control" id="input_type" name="input_type" value="">
                                <div class="modal-body">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="mb-3">
                                                <label class="form-label">Upload CSV File</label>
                                                <input type="file" class="form-control" id="csv_file" name="csv_file" accept=".csv">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                                    <button type="button" class="btn btn-primary px-4" id="validationbtn">Validation</button>
                                    <button type="button" class="btn btn-primary px-4" id="uploadFamilyGroupbtn">Upload</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </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>

        <form action="{{route('family.group.save')}}" method="POST" id="formFamilyGroup" class="needs-validation" novalidate>
            @csrf
            <input type="hidden" class="form-control" id="family_group_id" name="family_group_id" value="">
            <div class="row">
                <div class="col-md-10">
                    <div class="mb-3">
                        <label class="form-label">Family Group Name<span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="family_group_name" name="family_group_name" placeholder="Family group name" value="" required autocomplete="off" />
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="mb-3">
                        <label class="form-label spaceRemove" id="spaceRemove">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                        <button type="submit" class="btn btn-primary form-control" id="btnFamilyGroupSave">Insert</button>
                    </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 class="table-light">
                                <tr>
                                    <th>Id</th>
                                    <th>Name</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>
    </div>
</div>

@endsection

@section('custom-scripts')
<script src="{{ asset('assets/js/pages/form-validation.init.js') }}?v=3"></script>
<script src="{{ asset('assets/js/pages/jquery.form.js') }}"></script>
<script src="{{ asset('assets/libs/parsleyjs/parsley.min.js') }}"></script>
<script src="{{ asset('assets/js/import/import-family-group.js') }}"></script>

<script type="text/javascript">
    var ajaxURLGetFamilyGroups = '{{route("family.groups.ajax")}}';
    var ajaxURLFamilyGroupDetail = '{{route("family.group.detail")}}';
    var changeFamilyGroupStatusURL = '{{route("change.family.group.status")}}';
    var ajaxUrlFamilyGroup = "{{route('family.group.save')}}";
    var csrfToken = $("[name=_token").val();

    resetInputForm();

    $('#family_group_name').on('input', function() {
        $("#family_group_name").removeClass('is-invalid');
        var inputValue = $(this).val();
        var capitalizedValue = capitalizeString(inputValue);
        $(this).val(capitalizedValue);
    });
    
    var table = $('#datatable').DataTable({
        "aoColumnDefs": [{"bSortable": false,"aTargets": [5]}],
        "order": [[1, 'asc']],
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "scrollY": function() { return $(window).height() - 400},
        "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": ajaxURLGetFamilyGroups,
            "type": "POST",
            "data": {"_token": csrfToken}
        },
        "aoColumns": [
            {"mData": "id"},
            {"mData": "name"},
            {"mData": "status"},
            {"mData": "created_by"},
            {"mData": "modified_by"},
            {"mData": "action", "bSortable" : false}
        ]
    });

    table.on('xhr', function() {
        var responseData = table.ajax.json();

        if (responseData['recordsTotal'] == 0) {
            $('#dropdownMenuButton1').hide();
        }
    });

    $('#btnFamilyGroupSave').on('click', function(e) {
        e.preventDefault();

        $.ajax({
            type: 'POST',
            url: ajaxUrlFamilyGroup,
            _token: csrfToken,
            data: $('#formFamilyGroup').serialize(),
            beforeSend: function(){
                showLoader();
            },
            success: function(resultData) {
                hideLoader();
                $("#formFamilyGroup").addClass('was-validated');
                $("#family_group_name").removeClass('is-valid');

                if (resultData['status'] == 1) {
                    $("#formFamilyGroup").removeClass('was-validated');
                    $("#family_group_name").removeClass('is-invalid');

                    toastr["success"](resultData['msg']);
                    resetInputForm();
                    $('#datatable').DataTable().ajax.reload(null, false);
                    $("#btnFamilyGroupSave").html("Insert");
                } else if (resultData['status'] == 0) {
                    $("#formFamilyGroup").removeClass('was-validated');
                    $("#family_group_name").addClass('is-invalid').removeClass('is-valid');
                    toastr["error"](resultData['msg']);
                }
            }
        });
    });

    $('#family_group_name').bind('keypress', testInput);

    function testInput(event) {
        var value = String.fromCharCode(event.which);
        var pattern = new RegExp(/[a-zåäö ]/i);
        return pattern.test(value);
    }    

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

    function editView(id) {
        resetInputForm();

        $.ajax({
            type: 'GET',
            url: ajaxURLFamilyGroupDetail + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    $("#family_group_id").val(resultData['data']['id']);
                    $("#family_group_name").val(resultData['data']['name']);
                }
                $("#btnFamilyGroupSave").html("Update");
            }
        });
    }

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

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

        $.ajax({
            type: 'GET',
            url: changeFamilyGroupStatusURL + "?id=" + id + "&family_group_status=" + family_group_status,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                }
            }
        });
    }
</script>
@endsection