@extends('layouts.dashboard')
@section('content') 
<div class="container">    
    <div class="contentbox">
        <div class="contentboxheading"><i class="las la-user-plus"></i> New Client 
            <a class="btn btn-primary pull-right mt-2 mr10" data-bs-toggle="modal" data-bs-target="#addManual_modal">Add Authorized Client</a>
        </div> 
        <div class="contentboxinner">
            @if(session('success'))
            <div class="alert alert-success">{{session('success')}}</div>
            @endif
            @if(session('error'))
            <div class="alert alert-danger">{{session('error')}}</div>
            @endif
            <div class="form-container mb-5">
                <form class="row g-3" id="sendAuthForm">
                    @csrf
                    <div class="row g-3" >
                        <div class="col-md-3">
                            <label for="mobile" class="form-label ml10">Mobile<span style="color:red">*</span></label>
                            <input type="text" class="form-control numbers" minlength="10" maxlength="10" id="mobile" name="mobile" placeholder="Mobile">
                        </div>
                        <div class="col-md-3">
                            <label for="email" class="form-label ml10">Email<span style="color:red">*</span></label>
                            <input type="text" class="form-control" id="email" name="email" placeholder="Email">
                        </div>
                        <div class="col-md-3">
                            <label for="email" class="form-label ml10">Received By<span style="color:red">*</span></label>
                            <select class="form-control" id="received_by" name="received_by">
                                <option value="">-Select-</option>
                                <option value="email">Email</option>
                                <option value="SMS">SMS</option>
                            </select>
                        </div>
                        <div class="col-md-3 mt-4">     
                            <button type="button" class="btn btn-primary mt-4" id="btn_sendAuth">Send for Authorization <div class="spinner-border text-light" role="status" style="display:none;height:20px;width:20px;"><span class="sr-only">Loading...</span></div></button>                    
                        </div>
                    </div> 
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="addManual_modal">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title">Add Authorized Client</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form class="row g-3" id="addClientForm" enctype="multipart/form-data">
                    @csrf
                    <div class="form-container">
                        <div class="row g-3" >
                            <div class="col-md-4">
                                <label for="fname" class="form-label ml10">First Name<span style="color:red">*</span></label>
                                <input type="text" class="form-control" id="txt_fname" name="txt_fname" placeholder=" First name">
                            </div>   

                            <div class="col-md-4">
                                <label for="lname" class="form-label ml10">Last Name<span style="color:red">*</span></label>
                                <input type="text" class="form-control" id="txt_lname" name="txt_lname" placeholder="Last Name">
                            </div>

                            <div class="col-md-4">
                                <label for="txt_DOB" class="form-label ml10">DOB<span style="color:red">*</span></label>
                                <input required type="date" class="form-control" id="txt_DOB" max="2025-03-15"  name="txt_dob">
                            </div>

                            <div class="col-md-4">
                                <label for="gender" class="form-label ml10">Gender<span style="color:red">*</span></label>
                                <select class="form-control selectpicker" id="ddl_gender" name="txt_gender">
                                    <option value="">Select</option>
                                    @foreach($sex_list as $key=>$val)
                                    <option value="{{$key}}">{{$val}}</option>
                                    @endforeach
                                </select>
                            </div>
                        
                            <div class="col-md-4">
                                <label for="email" class="form-label ml10">Email<span style="color:red">*</span></label>
                                <input type="email" class="form-control" id="txt_email" name="email" placeholder="example@example.xom">
                            </div>  
                            
                            <div class="col-md-4">
                                <label for="lbl_contact" class="form-label ml10">Mobile<span style="color:red">*</span></label>
                                <input type="text" class="form-control numbers" id="txt_contact" minlength="10" maxlength="12" name="mobile" placeholder="000-00000">
                            </div>
                            
                            <div class="col-md-4">
                                <label for="street" class="form-label ml10">Address<span style="color:red">*</span></label>
                                <input type="text" class="form-control" id="txt_street" name="txt_street" placeholder="Street">
                            </div>

                            <div class="col-md-4">
                                <label for="city" class="form-label ml10">City<span style="color:red">*</span></label>
                                <input type="text" class="form-control" id="txt_city" name="txt_city" placeholder="City">
                            </div>

                            <div class="col-md-4">
                                <label for="state" class="form-label ml10">State<span style="color:red">*</span></label>
                                <select class="form-control selectpicker" name="txt_state" id="ddl_State" data-live-search="true">
                                    <option value="">Select</option>
                                    @foreach($state_list as $key=>$val)
                                    <option value="{{$key}}">{{$val}}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-4">
                                <label for="zipcode" class="form-label ml10">Zip Code<span style="color:red">*</span></label>
                                <input type="text" class="form-control numbers" maxlength="6" id="txt_zipcode" name="txt_zipcode" placeholder="Zip Code">
                            </div>

                            <div class="col-md-4">
                                <label for="zipcode" class="form-label ml10">Signed Document<span style="color:red">*</span></label>
                                <input type="file" class="form-control" id="signed_document" name="signed_document" placeholder="Upload Document">
                            </div>
                        </div>
                    </div>
                    
                    <div class="text-center mt-3">
                        <button type="button" type="submit" class="btn btn-primary mt-4 mb-4" id="btn_saveClient">Save <div class="spinner-border spinner-border-sm text-light d-none" role="status"><span class="visually-hidden">Loading...</span></div></button>
                        <button type="button" class="btn btn-primary mt-4 mb-4 mr-3" data-bs-dismiss="modal">Cancel</button> 
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('footer_scripts')
<script>
$(document).ready(function () {
    $(document).on('click', '#btn_saveClient', function(){
        $('#btn_saveClient .spinner-border').show();
        var formData = new FormData($('#addClientForm')[0]);
        formData.append('signed_document', $('input[type=file]')[0].files[0]);
        $.ajax({
            type: 'POST',
            dataType: 'json',
            data: formData,
            contentType: false,
            processData: false,
            url: APP_URL+"/add-client-save",
            success: function(res) {
                $('#btn_saveClient .spinner-border').hide();
                if(res.status){
                    window.location.reload();
                }
            },
            error: function(res) {
                $('#btn_saveClient .spinner-border').hide();
                ajax_error2(res);
            }
        });
    });

    $(document).on('click', '#btn_sendAuth', function(){
        if($('#sendAuthForm').valid()){
            $('#btn_sendAuth .spinner-border').show();
            $.ajax({
                type: 'POST',
                dataType: 'json',
                data: $('#sendAuthForm').serialize(),
                url: APP_URL+"/send-authorization",
                success: function(res) {
                    $('#btn_sendAuth .spinner-border').hide();
                    if(res.status){
                        window.location.reload();
                    }
                },
                error: function(res) {
                    $('#btn_sendAuth .spinner-border').hide();
                    ajax_error2(res);
                }
            });
        }
    });

    $('#sendAuthForm').validate({
        rules: {
            email: {
                required: true,
                email:true
            },
            mobile: {
                required: true,
                number:true,
                minlength: 10,
                maxlength: 10,
            },
            received_by: {
                required: true
            }
        },
        messages: {
            email: {
                required: 'Email is required field.',
                email: 'Please enter valid email address.'
            },
            mobile: {
                required: 'Mobile is required field.',
                number: 'Please enter valid mobile number.',
                minlength: 'Please enter valid mobile number.',
                maxlength: 'Please enter valid mobile number.'
            },
            received_by: {
                required: 'Received by is required field.',
            }
        },
        errorElement: 'span',
        errorPlacement: function (error, element) {
        error.addClass('invalid-feedback');
        element.closest('.col-md-3').append(error);
        },
        highlight: function (element, errorClass, validClass) {
            $(element).addClass('is-invalid');
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).removeClass('is-invalid');
        }
    });  

});
</script>
@endsection