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

<style>
    #sub_agent_email::placeholder,
    #username::placeholder{
        text-transform: none;
    }
</style>

<div class="page-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <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="backbtn" id="backToButton"><i class="mdi mdi-arrow-left font-size-20"></i></a>&nbsp;&nbsp;&nbsp; {{$data['title']}}
                    </h4>

                    <div class="page-title-right">
                        <!-- <a class="btn btn-primary px-4 form-control" onclick="return addSubAgent();" type="button"><span>+ Sub Agent User</span></a> -->
                        <a class="btn btn-primary px-4 form-control" href="{{ route('master.sub.agents') }}" type="button"><span>+ Sub Agent User</span></a>
                    </div>
                </div>
            </div>
        </div>

        <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>Username</th>
                                    <th>Name</th>
                                    <th>City</th>
                                    <th>Mobile</th>
                                    <th>Whatsapp</th>
                                    <th>Email</th>
                                    <th>Agency level</th>
                                    <th>Photo</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>

<div class="modal fade" id="modalSubAgent" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalSubAgentLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalSubAgentLabel">Sub Agent User</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <form id="formSubAgent" action="{{route('master.sub.agent.save')}}" method="POST" class="needs-validation" novalidate>
                <div class="modal-body">
                    @csrf
                    <input type="hidden" name="uploaded_sub_agent_photo" id="uploaded_sub_agent_photo" value="">
                    <input type="hidden" class="form-control" id="sub_agent_id" name="sub_agent_id" value="">

                    <div class="row">
                        <div class="col-md-12">
                            <input type="hidden" name="agent_login_type" id="yes" value="Yes">
                        </div>
                    </div>

                    <div class="row" id="credDiv">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="username" class="form-label">Sub Agent Username<span class="text-danger">*</span><span style="font-size: 12px;color: #808080bd;">(Type a username that isn't in the user or sub-agent tables.)</span></label>
                                <input type="text" class="form-control" id="username" name="username" placeholder="Username" value="" required="" autocomplete="off" style="text-transform: lowercase;">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <div class="d-flex justify-content-between">
                                    <label for="password" class="form-label">Sub Agent Password<span class="text-danger">*</span><span id="showPwdToSupUsr" style="font-size: 12px;color: #808080bd;"></span></label>
                                    <label for="passwordReset" class="form-label" id="passwordResetLable"><input class="form-check-input" type="checkbox" name="passwordReset" id="passwordReset"> Reset Password</label>
                                </div>
                                <div class="input-group auth-pass-inputgroup">
                                    <input type="password" class="form-control" placeholder="Enter password" id="password" name="password" autocomplete="off" required minlength="6" maxlength="14">
                                    <button class="btn btn-light" id="eye1" type="button" title="eye1"><i class="mdi mdi-eye-off-outline"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label" for="sub_agent_name">Sub Agent Name<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="sub_agent_name" name="sub_agent_name" placeholder="Sub agent name" value="" required autocomplete="off">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-md-10">
                                    <div class="mb-3">
                                        <label for="city_id" class="form-label">Select City<span class="text-danger">*</span></label>
                                        <select class="form-control select2-ajax" id="city_id" name="city_id" required></select>
                                        <div class="invalid-feedback">This value is required.</div>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="mb-3">
                                        <label  class="form-label spaceRemove" id="spaceRemove">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                        <button class="btn btn-primary px-4 form-control" onclick="return addCity();" type="button"><span>Add</span></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="sub_agent_mobile_number" class="form-label">Mobile number<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="sub_agent_mobile_number" maxlength="10" onkeypress="return isNumber(event);" name="sub_agent_mobile_number" placeholder="Mobile number" value="" required autocomplete="off">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="sub_agent_whatsapp_number" class="form-label">Whatsapp number</label>
                                <input type="text" class="form-control" id="sub_agent_whatsapp_number" maxlength="10" onkeypress="return isNumber(event);" name="sub_agent_whatsapp_number" placeholder="Whatsapp number" value="" autocomplete="off">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="sub_agent_email" class="form-label">Email</label>
                                {{-- <input type="text" class="form-control" id="sub_agent_email" name="sub_agent_email" placeholder="Email address" value="" onkeyup="if (/[^a-zA-Z0-9.@-]/g.test(this.value)) this.value = this.value.replace(/[^a-zA-Z0-9.@-]/g,'')" autocomplete="off"> --}}
                                <input type="email" class="form-control" id="sub_agent_email" name="sub_agent_email" placeholder="Email address" autocomplete="off" style="text-transform: lowercase;">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="sub_agent_agency_level_id" class="form-label">Select Agency Level</label>
                                <select class="form-control select2-ajax" id="sub_agent_agency_level_id" name="agency_level_id"></select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="sub_agent_photo" class="form-label">Sub Agent Photo <span style="font-size: 12px;color: #808080bd;">(JPG, PNG, or JPEG)</span></label>
                                <input type="file" class="form-control" id="sub_agent_photo" name="sub_agent_photo" value="" accept="image/jpeg,image/png,">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    @if(getActualExpirationDate() >= date('Y-m-d H:i:s'))
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary px-3" id="sub_agent_save">Save</button>
                    @else
                        <p class="text-center text-danger font-size-14 fw-bold m-0 ">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>
                    @endif
                </div>
            </form>
        </div>
    </div>
</div>

<!-- add city -->
<div class="modal fade" id="modalCity" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalCityLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalCityLabel">City</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="return viewSubAgentModal()"></button>
            </div>

            <form id="formCity" action="{{ route('master.city.save') }}" method="POST" class="needs-validation" novalidate>
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label for="city_name" class="form-label">City Name<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="city_name" name="city_name" placeholder="City name" value="" required>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal" onclick="return viewSubAgentModal()">Close</button>
                    <button type="submit" class="btn btn-primary px-3">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

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

<script type="text/javascript">
    var changeSubAgentStatusURL = "{{ route('master.change.sub.agent.status') }}";
    var ajaxURLSubAgentDetail = "{{ route('master.sub.agent.detail') }}";
    var ajaxURLGetSubAgents = "{{ route('sub.agent.user.ajax') }}";
    var ajaxSearchAgencyLevel = "{{ route('search.agency.level') }}";
    var ajaxSearchCity = "{{ route('search.city') }}";
    var csrfToken = $("[name=_token").val();

    $('#passwordResetLable').hide();

    $('#username').on('keypress input', function(e) {
        $(this).removeClass('is-invalid');
        if (e.type === 'input') {
            setTimeout(function() {
                var inputValue = $(this).val();
                var sanitizedValue = inputValue.replace(/[^\w]/gi, '');
                $(this).val(sanitizedValue);
            }.bind(this), 0);
        } else {
            var charCode = e.which || e.keyCode;
            if ((charCode === 32) || !(charCode >= 48 && charCode <= 57) && !(charCode >= 65 && charCode <= 90) && !(charCode >= 97 && charCode <= 122)) {
                e.preventDefault();
            }
        }
    });   

    $('#credDiv').show();

    resetInputForm();

    function addSubAgent() {
        resetInputForm();

        $('#passwordResetLable').hide();
        $('#password').attr('readonly', false);

        $("#username, #sub_agent_mobile_number, #sub_agent_whatsapp_number, #sub_agent_email").removeClass('is-valid, is-invalid');
        $("#modalSubAgent").modal('show');
    }

    function viewSubAgentModal(){
        $("#modalSubAgent").modal('show');
        $("#modalCity").modal('hide');
    }

    function resetInputForm() {
        $('#sub_agent_id').val('');
        $("#city_id, #sub_agent_agency_level_id").empty().trigger("change");
        $("#formSubAgent, #formCity").removeClass('was-validated').trigger("reset");
    }

    function subAgentDelete(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) {
        var deleteGeneralPolicy = "{{ route('delete.sub.agent.user') }}";
        $.ajax({
            type: 'GET',
            url: deleteGeneralPolicy + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                    $('#datatable').DataTable().ajax.reload(null, false);
                }
            }
        });
    }
    
    function addCity() {
        $('#formCity').trigger("reset").removeClass('was-validated');
        $("#modalCity").modal('show');      
        $("#modalSubAgent").modal('hide');  
    }

    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();
            $("#modalSubAgent").modal('hide');

            $('#datatable').DataTable().ajax.reload(null, false);
            
            $("#btnSubAgentSave").html("Insert");

            if ("#" + $form[0].id + "" == "#formCity") {
                $("#modalCity").modal('hide');
                $("#modalSubAgent").modal('show');
                $("#city_id").empty();
                
                var newOption = new Option("" + responseText['data']['text'] + "", "" + responseText['data']['id'] + "", false, false);
                $('#city_id').append(newOption).trigger('change');
            }

        } else if (responseText['status'] == 0) {
            
            if(responseText['msg'] == 'Sub agent name already exists'){
                $("#formSubAgent").removeClass('was-validated');
                $("#sub_agent_name").removeClass('is-valid').addClass('is-invalid');
            }

            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);

                        if (key === 'sub_agent_mobile_number') {
                            // $("#formSubAgent").removeClass('was-validated');
                            $("#sub_agent_mobile_number").addClass('is-invalid').removeClass('is-valid');
                        } else if (key === 'sub_agent_whatsapp_number') {
                            $("#formSubAgent").removeClass('was-validated');
                            $("#sub_agent_whatsapp_number").addClass('is-invalid').removeClass('is-valid');
                        }else if (key === 'username'){
                            $("#formSubAgent").removeClass('was-validated');
                            $("#username").addClass('is-invalid').removeClass('is-valid');
                        }else if (key === 'sub_agent_email'){
                            $("#formSubAgent").removeClass('was-validated');
                            $("#sub_agent_email").addClass('is-invalid').removeClass('is-valid');
                        }else if (key === 'sub_agent_name'){
                            $("#formSubAgent").removeClass('was-validated');
                            $("#sub_agent_name").addClass('is-invalid').removeClass('is-valid');
                        }else if (key === 'city_id'){
                            $("#formSubAgent").removeClass('was-validated');
                            $("#city_id").addClass('is-invalid').removeClass('is-valid');
                        }else{
                            $("#sub_agent_mobile_number, #sub_agent_whatsapp_number, #sub_agent_email").removeClass('is-invalid');
                        }
                    }
                }
            } else {
                toastr["error"](responseText['msg']);
            }
        }
    }

    function editView(id) {
        addSubAgent();
        resetInputForm();

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

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

                    if(resultData['data']['auth_user_id'] == 1 && resultData['data']['auth_user_type'] == 1){
                        var password = resultData['data']['sub_agent_password'];
                        if(password == null){
                            password = '';
                        }
                        $('#showPwdToSupUsr').html(" (Password :- "+ password +")");
                    }

                    if(resultData['data']['id'] > 0 ){
                        $('#password').attr('readonly', true);
                        $('#passwordResetLable').show();
                    }else{
                        $('#passwordResetLable').hide();
                    }

                    $('#credDiv').show();
                    $("#username").val(resultData['data']['username']);
                    $("#sub_agent_id").val(resultData['data']['id']);
                    $("#sub_agent_name").val(resultData['data']['name']);
                    $("#sub_agent_email").val(resultData['data']['email']);
                    $("#sub_agent_mobile_number").val(resultData['data']['mobile_number']);
                    $("#sub_agent_whatsapp_number").val(resultData['data']['whatsapp_number']);
                    $("#uploaded_sub_agent_photo").val(resultData['data']['sub_agent_photo']);

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

                    if (resultData['data']['agency_level_id'] != 0) {
                        var newOption = new Option("" + resultData['data']['agency_level_name'] + "", "" + resultData['data']['agency_level_id'] + "", false, false);
                        $('#sub_agent_agency_level_id').append(newOption).trigger('change');
                    }
                }
                $("#btnSubAgentSave").html("Update");
            }
        });
    }

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

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

    var table = $('#datatable').DataTable({
        "aoColumnDefs": [{"bSortable": false,"aTargets": [8,12]}],
        "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": ajaxURLGetSubAgents,
            "type": "POST",
            "data": {"_token": csrfToken}
        },
        "aoColumns": [
            {"mData": "id"},
            {"mData": "username"},
            {"mData": "name"},
            {"mData": "city_name"},
            {"mData": "mobile_number"},
            {"mData": "whatsapp_number"},
            {"mData": "email"},
            {"mData": "agency_level_name"},
            {"mData": "sub_agent_photo"},
            {"mData": "status"},
            {"mData": "created_by"},
            {"mData": "modified_by"},
            {"mData": "action"}
        ]
    });

    $(document).ready(function() {
        var options = {
            beforeSubmit: showRequest,
            success: showResponse
        };

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

        $("form input").on("keyup change", function() {
            var form = $(this).closest("form");

            if (form.find("input.is-invalid").length > 0) {
                $("#btnSubAgentSave").attr('disabled',true);
            } else {
                $("#btnSubAgentSave").attr('disabled',false);
            }
        });

        $(document).keydown(function(e) {
            var code = e.keyCode || e.which;

            if (code == 27) {
                $("#modalCity").modal('hide');
            }
        });    

        $('#sub_agent_mobile_number, #sub_agent_whatsapp_number').on('input paste', function(){
            let value = $(this).val();

            // Remove leading zeros but keep "0" if it's the only digit
            value = notAllZeroAmt(value);

            // Set the cleaned value back to the input field
            $(this).val(value);            
        });
    });
</script>
@endsection