@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 type="button" class="btn btn-primary px-4 form-control" href="{{ route('commission.setting', ['type'=>'sub-agent-commission'])}}"><span>Add Commission</span></a>
                    </div>
                </div>
            </div>
        </div>

        @include('../reachassuree_agent/master/sub_agents/submit_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>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>

<!-- 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"></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">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/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 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('master.sub.agents.ajax') }}";
    var ajaxSearchAgencyLevel = "{{ route('search.agency.level') }}";
    var ajaxSearchCity = "{{ route('search.city') }}";
    var csrfToken = $("[name=_token").val();
    
    var table = $('#datatable').DataTable({
        "aoColumnDefs": [{"bSortable": false,"aTargets": [2, 7, 11]}],
        "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": 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" , "bSortable" : false}
        ]
    });

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

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

        $('#formSubAgent .modal-footer').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);            
        });
    });

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

            $('#datatable').DataTable().ajax.reload(null, false);

            if ("#" + $form[0].id + "" == "#formCity") {            
                $("#modalCity").modal('hide');
                $('#city_id').empty();

                var newOption = new Option("" + responseText['data']['text'] + "", "" + responseText['data']['id'] + "", false, false);
                $('#city_id').append(newOption).trigger('change');
            }else{
                resetSubAgentInputForm();
            }
            
            $("#btnSubAgentSave").html("Insert");

        } 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 === 'password'){
                            $("#formSubAgent").removeClass('was-validated');
                            $("#password").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, #city_id").removeClass('is-invalid', 'is-valid');
                        }
                    }
                }
            } else {
                toastr["error"](responseText['msg']);
            }
        }
        getLoginType();
    }

    function editView(id) {
        resetSubAgentInputForm();
        $('#password').attr('readonly', true);

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

        $.ajax({
            type: 'GET',
            url: ajaxURLSubAgentDetail + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    if(resultData['data']['username'] != null){
                        $('#passwordResetLable').show();
                        $("#yes").prop("checked", true);
                    }else{
                        $("#no").prop("checked", true);
                    }
                    
                    var is_username = 0;
                    if(resultData['data']['username'] != null){
                        is_username = 1;
                    }

                    getLoginType();

                    if(getLoginType() == "Yes"){
                        $("#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_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']);
                }
            }
        });
    }

    function addCity() {
        $("#city_name").removeClass('is-invalid , is-valid');
        $('#formCity').trigger("reset").removeClass('was-validated');
        $("#modalCity").modal('show');        
    }

</script>
@endsection