@extends('includes/layout')
@section('main-page-content')
<style>
    .document {
        border-radius: 10px;
        border: 1px solid #B6BBC4;
        padding: 5px 10px 5px 5px;
    }


    .input-group-text.btn:hover {
        background-color: #337ab7;
        color: #fff;
        border-color: #2e6da4;
    }
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    input[type=number] {
        -moz-appearance: textfield;
    }
</style>

                <div class="container-xxl flex-grow-1 container-p-y">
                    <div class="card mb-4 ">
                        <div class="border-bottom p-3">
                            <div class="h4 pb-0 mb-0 ">Add New Clients</div>
                            <small>Dashboard-Clients Manager-Add</small>
                        </div>

                        <div class="row g-0">
                            <div class="col-12 col-md-9 row mt-4 pb-3">
                                <form class="col-12 row mt-4 pb-3" id="companyForm" enctype="multipart/form-data">
                                    @csrf
                                    <div class="col-md-4 form-group mb-3">
                                        <label for="client_fname" class="text-dark">First Name<span class="text-danger">*</span></label>
                                        <input type="text" name="first_name" id="client_fname" class="fname input-form form-control mt-1">
                                    </div>
                                    <div class="col-md-4 form-group mb-3">
                                        <label for="client_mname" class="text-dark">Middle Name</label>
                                        <input type="text" name="middle_name" id="client_mname" class="mname input-form form-control mt-1">
                                    </div>
                                    <div class="col-md-4 form-group mb-3">
                                        <label for="client_lname" class="text-dark">Last Name<span class="text-danger">*</span></label>
                                        <input type="text" name="last_name" id="client_lname" class="lname input-form form-control mt-1">
                                    </div>
                                    <div class="col-md-4 form-group mb-3">
                                        <label for="client_mobile" class="text-dark">Mobile<span class="text-danger">*</span></label>
                                        <input type="number" name="mobile" id="client_mobile" class="mobile input-form form-control mt-1">
                                    </div>
                                    <div class="col-md-4 form-group mb-3">
                                        <label for="client_phone" class="text-dark">Phone<span class="text-danger">*</span></label>
                                        <input type="number" name="phone" id="client_phone" class="phone input-form form-control mt-1">
                                    </div>
                                    <div class="col-md-4 form-group mb-3">
                                        <label for="client_email" class="text-dark">Email<span class="text-danger">*</span></label>
                                        <input type="email" name="email" id="client_email" class="email input-form form-control mt-1">
                                    </div>

                            </div>

                            <div class="col-md-3 mt-4 pb-3">

                                <div id="thumbnail-preview" class="mt-3">
                                    <img src="{{url('/assets/img/upload-image.png')}}"class="" alt="Thumnail Preview"
                                        style="width:65%;height:auto" />

                                </div>

                                <input type="file" name="logo_img" class="logo_img form-control mt-1" id="thumbnail"
                                    style="display:none;"  onchange="previewThumbnaillOGO()" />
                                <label style="color:#3276B1;" for="thumbnail"class="">
                                    <span class="mdi mdi-cloud-upload"></span>
                                    Upload image</label>
                            </div>
                            <div class="border-top p-3 d-flex justify-content-end">
                                <button type="button"  class="btn btn-secondary me-2" onclick="window.location='{{ url('/') }}/company'">Cancel</button>
                                <button type="button" onclick="saveCompany()"class="btn btn-primary waves-effect">Save</button>
                            </div>
                            </form>
                        </div>

                    </div>

                </div>


@endsection

@section('main-page-content')

@section('css-js')
    <script>
        function saveCompany()
        {
            event.preventDefault();
            const formData = new FormData(document.getElementById('companyForm'));

            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                type: 'POST',
                url: "{{ url('/api/companie-store') }}",
                data: formData,
                contentType: false,
                processData: false,
                success: function (response) {
                var client_id = response.client_id;
                window.location.href = "{{ url('/') }}/client-view/" + client_id;

            },

            error: function(response) {
            if (response.status == 500) {
                    toastr.error("Something went wrong")
                    }
                    else
                    {
                    toastr.error(response.responseJSON.message)
                    }
                }


            });
        }



        // function updateFileName1(input) {
        //     var fileName = input.files[0].name;
        //     var maxLength = 10;
        //     var label1 = input.closest('.document').querySelector('#file-label1');

        //     if (fileName.length > maxLength) {

        //         fileName = fileName.substring(0, maxLength) + '...';
        //     }

        //     label1.textContent = fileName;

        // }

        // function updateFileName2(input) {
        //     var fileName = input.files[0].name;
        //     var maxLength = 10;

        //     var label2 = input.closest('.document').querySelector('#file-label2');

        //     if (fileName.length > maxLength) {

        //         fileName = fileName.substring(0, maxLength) + '...';
        //     }

        //     label2.textContent = fileName;
        // }


        // function updateFileName3(input) {
        //     var fileName = input.files[0].name;
        //     var maxLength = 10;
        //     var label3 = input.closest('.document').querySelector('#file-label3');
        //     if (fileName.length > maxLength) {

        //         fileName = fileName.substring(0, maxLength) + '...';
        //     }
        //     label3.textContent = fileName;
        // }




        function previewThumbnaillOGO() {
            const thumbnailInput = document.querySelector('input[name="logo_img"]');
            const thumbnailPreview = document.getElementById('thumbnail-preview');
            const file = thumbnailInput.files[0];

            if (file) {
                const reader = new FileReader();
                reader.onload = function() {
                    thumbnailPreview.innerHTML =
                        `<img src="${reader.result}" class="" alt="Thumbnail Preview" style="width: 200px;height: 200px;">`;
                };
                reader.readAsDataURL(file);
            }
        }
    </script>

<style>

     @media only screen and (max-width: 280px){
    .input-form{
        width: 225px;
    }
   }
   @media only screen and (min-width: 281px) and (max-width: 320px){
    .input-form{
        width: 264px;
    }
   }
   @media only screen and (min-width: 321px) and (max-width: 360px){
    .input-form {
    width: 305px;
}
   }

   @media only screen and (min-width: 361px) and (max-width: 375px){
    .input-form{
        width: 318px;
    }
   }
   @media only screen and (min-width: 376px) and (max-width: 390px){
    .input-form {
    width: 336px;
}
   }
   @media only screen and (min-width: 391px) and (max-width: 414px){
.input-form {
    width: 358px;
}
   }
   @media only screen and (min-width: 415px) and (max-width: 430px){
    .input-form{
        width: 372px;
    }
   }
   @media only screen and (min-width: 431px) and (max-width: 540px){
    .input-form{
        width: 483px;
    }
   }
</style>



@endsection