@extends('layouts.admin_default')
    @section('content')
        <div class="content-wrapper container-xxl p-0">
            <div class="content-header row">
                <div class="content-header-left col-md-9 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                            <h2 class="content-header-title float-start mb-0">Client</h2>
                            <div class="breadcrumb-wrapper">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
                                    <li class="breadcrumb-item"><a href="{{ route('client.index') }}">Client</a></li>
                                    <li class="breadcrumb-item active"><a href="javascript:void(0);">Add</a></li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-body">
                <section id="multiple-column-form">
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    {!! Form::open(['method'=>'POST','route'=>['client.store'], 'class'=>'form-first FormValidate', 'files'=>true]) !!}
                                        <div class="row">
                                            <div class="col-md-6 col-12">
                                                <div class="mb-1">
                                                    <label class="form-label" for="first-name-column">First Name <span class="error">*</span></label>
                                                    {!! Form::text('first_name', null, ['class'=>'form-control']) !!}
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-12">
                                                <div class="mb-1">
                                                    <label class="form-label" for="first-name-column">Middle Name <span class="error">*</span></label>
                                                    {!! Form::text('middle_name', null, ['class'=>'form-control']) !!}
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-12">
                                                <div class="mb-1">
                                                    <label class="form-label" for="first-name-column">Last Name <span class="error">*</span></label>
                                                    {!! Form::text('last_name', null, ['class'=>'form-control']) !!}
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-12">
                                                <div class="mb-1">
                                                    <label class="form-label" for="first-name-column">Email Id<span class="error">*</span></label>
                                                    {!! Form::text('email_id', null, ['class'=>'form-control']) !!}
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-12">
                                                <div class="mb-1">
                                                    <label class="form-label" for="first-name-column">Mobile Number <span class="error">*</span></label>
                                                    {!! Form::text('mobile_no', null, ['class'=>'form-control only_numbers']) !!}
                                                </div>
                                            </div>
                                            <div class="col-lg-6 col-md-12 mb-1 mb-sm-0">
                                                <div class="row input_image">
                                                    <div class="col-md-6">
                                                        <label for="image_label">Profile Image </label>
                                                        <div class="input-group">
                                                            {!! Form::text('profile_image', null, ['id' => 'image1', 'class' => 'form-control selected_image', 'aria-label' => 'Image', 'aria-describedby' => 'button-image', 'readonly']) !!}
                                                            <div class="input-group-append">
                                                                <button class="btn btn-outline-secondary" type="button" id="button-image1">Choose File</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label for="image_label"></label>
                                                        <div class="input-group-append">
                                                            <button class="btn btn-danger remove_image" type="button">Delete</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-12">
                                                <div class="mb-1">
                                                    <label class="form-label" for="basicSelect">Status <span class="error">*</span></label>
                                                    {{Form::select('status', status(), '', ['class' => 'form-control filter-select', 'placeholder'=>'Please Select'])}}
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <button type="submit" class="btn btn-primary">Submit</button>
                                                <button type="reset" class="btn btn-outline-secondary">Reset</button>
                                                <a href="{{ route('user.index') }}" class="btn btn-outline-secondary">Back</a>
                                            </div>
                                        </div>
                                    {{ Form::close() }}
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <!-- Basic Floating Label Form section end -->
            </div>
        </div>

        <script src="{{ asset('admin/app-assets/vendors/js/forms/validation/jquery.validate.js') }}"></script>

        <style type="text/css">
            .error{
                color: red;
            }
        </style>

        <script type="text/javascript">
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.validator.addMethod("validEmail", function(value, element) {
                if (value == '') return true;
                var temp1;
                temp1 = true;
                var ind = value.indexOf('@');
                var str2 = value.substr(ind + 1);
                var str3 = str2.substr(0, str2.indexOf('.'));
                if (str3.lastIndexOf('-') == (str3.length - 1) || (str3.indexOf('-') != str3.lastIndexOf('-'))) return false;
                var str1 = value.substr(0, ind);
                if ((str1.lastIndexOf('_') == (str1.length - 1)) || (str1.lastIndexOf('.') == (str1.length - 1)) || (str1.lastIndexOf('-') == (str1.length - 1))) return false;
                str = /(^[a-zA-Z0-9]+[\.\.\._-]{0,1})+([a-zA-Z0-9]+[\.\.\._-]{0,1})*@([a-zA-Z0-9]+[-]{0,1})+(\.[a-zA-Z0-9]+)*(\.[a-zA-Z]{2,3})$/;
                temp1 = str.test(value);
                return temp1;
            }, "Please enter valid email address");

            $('.FormValidate').validate({
                rules: {
                    "first_name": {
                        required : true,
                    },
                    "middle_name": {
                        required : true,
                    },
                    "last_name": {
                        required : true,
                    },
                    "email_id": {
                        required : true,
                        email:true,
                        validEmail: true,
                    },
                    "mobile_no": {
                        required : true,
                        digits: true,
                        minlength: 10,
                        maxlength: 20,
                    },
                    "status": {
                        required : true,
                    },
                },
                messages: {
                    "first_name": {
                        required: "Please Enter First Name",
                    },
                    "middle_name": {
                        required: "Please Enter Middle Name",
                    },
                    "last_name": {
                        required: "Please Enter Last Name",
                    },
                    "email_id": {
                        required: "Please Enter Email Id",
                        "remote": jQuery.validator.format("{0} is already exist."),
                        email:"Please Enter Valid Email Address",
                        validEmail:"Please Enter Valid Email Address",
                    },
                    "mobile_no": {
                        required: "Please Enter Mobile Number",
                        "remote": jQuery.validator.format("{0} is already exist."),
                        digits: "Please Enter Only Digits",
                        minlength: jQuery.validator.format("Please Enter Valid 10 digit Mobile Number"),
                        maxlength: jQuery.validator.format("Please Enter Valid 4 digit Mobile Number"),
                    },
                    "status": {
                        required: "Please Select Status",
                    },
                }
            });
        </script>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                // image button
                document.getElementById('button-image1').addEventListener('click', (event) => {
                    event.preventDefault();

                    inputId = 'image1';

                    window.open('/file-manager/fm-button', 'fm', 'width=1400,height=800');
                });
            });

            // input
            let inputId = '';

            // set file link
            function fmSetLink($url) {
                document.getElementById(inputId).value = $url;
            }

            $(".remove_image").click(function(){
                var imgTable = $(this).closest('.input_image');
                imgTable.find('.selected_image').val('');
            });
        </script>
    @endsection