@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 ">Edit Clients</div>
                            <small>Dashboard-Clients Manager-Edit</small>
                        </div>
                        <div class="row g-0">
                            <div class="col-9 row mt-4 pb-3">
                                <form class="col-9 row mt-4 pb-3" id="update-companyForm" method="POST" enctype="multipart/form-data">
                                    @csrf
                                    <input type="hidden" value="{{$company->id}}" id="company-id">
                                    <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" class="fname form-control mt-1" value="{{$company->fname}}">
                                    </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" class="mname form-control mt-1" value="{{$company->mname}}">
                                    </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" class="lname form-control mt-1" value="{{$company->lname}}">
                                    </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"class="mobile form-control mt-1" value="{{$company->mobile}}">
                                    </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" class="phone form-control mt-1" value="{{$company->phone}}">
                                    </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" class="email form-control mt-1" value="{{$company->email}}">
                                    </div>

                                    {{-- <div class="col-md-4 form-group mb-3">
                                        <label for="client_white_card" class="text-dark">Document_1</label>

                                        <div class="document d-flex justify-content-between input-group">
                                            <span style="font-size:14px" class="ms-2 mt-1" id="file-label1">No file
                                                chosen</span>
                                            <label style="border-radius:5px;font-size:12px"
                                                class="input-group-text btn bg-success text-white btn-sm"
                                                for="client_white_card_upload">
                                                Upload<img src="{{ url('/assets/img/upload-icon.png') }}"class=""
                                                    alt="Thumnail Preview" width="15px" height="15px" />

                                            </label>
                                            <input type="file" name="doc_1" class="doc_1 form-control visually-hidden"
                                                id="client_passport_upload"
                                                accept=".pdf, .doc, .docx, .jpg, .jpeg, .png, .gif, .mp4, .avi, .mov, .wmv"
                                                onchange="updateFileName1(this)">
                                        </div>
                                    </div>


                                    <div class="col-md-4 form-group mb-3">
                                        <label for="client_white_card" class="text-dark">Document_2</label>

                                        <div class="document d-flex justify-content-between input-group">
                                            <span style="font-size:14px" class="ms-2 mt-1"
                                                id="file-label2"class="file-label d-flex justify-content-start">No file
                                                chosen</span>

                                            <label style="border-radius:5px;font-size:12px"
                                                class="input-group-text btn bg-success text-white btn-sm"
                                                for="client_white_card_upload">
                                                Upload<img src="{{ url('/assets/img/upload-icon.png') }}"class=""
                                                    alt="Thumnail Preview" width="15px" height="15px" />

                                            </label>
                                            <input type="file" name="doc_2" class="doc_2 form-control visually-hidden"
                                                id="client_driving_license_upload"
                                                accept=".pdf, .doc, .docx, .jpg, .jpeg, .png, .gif, .mp4, .avi, .mov, .wmv"
                                                onchange="updateFileName2(this)">
                                        </div>
                                    </div>

                                    <div class="col-md-4 form-group mb-3">
                                        <label for="client_white_card" class="text-dark">Document_3</label>

                                        <div class="document d-flex justify-content-between input-group">
                                            <span style="font-size:14px" class="ms-2 mt-1"
                                                id="file-label3"class="file-label d-flex flex-start">No file chosen</span>

                                            <label style="border-radius:5px;font-size:12px"
                                                class="input-group-text btn bg-success text-white btn-sm"
                                                for="client_white_card_upload">
                                                Upload<img src="{{ url('/assets/img/upload-icon.png') }}"class=""
                                                    alt="Thumnail Preview" width="15px" height="15px" />

                                            </label>
                                            <input type="file" name="doc_3"
                                                class="doc_3 form-control visually-hidden" id="client_white_card_upload"
                                                accept=".pdf, .doc, .docx, .jpg, .jpeg, .png, .gif, .mp4, .avi, .mov, .wmv"
                                                onchange="updateFileName3(this)">
                                        </div>
                                    </div> --}}



                               
                            </div>
                            <div class="col-md-3 mt-4 pb-3">
                                <div id="thumbnail-preview" class="mt-3">
                                    <img id="current-logo" 
                                        src="{{ url($company->logo_img) ? url($company->logo_img) : url('/assets/img/upload-image.png') }}" 
                                        class="img-thumbnail" alt="Thumbnail Preview" style="width: 200px; height: 200px;" />
                                </div>

                                <input type="file" name="logo_img" class="logo_img form-control mt-1" id="thumbnail"
                                    style="display:none;" accept="image/*" onchange="previewThumbnaillOGO()" />
                                <label style="color:#3276B1;" for="thumbnail" class="">
                                    <img src="{{ url('/assets/img/upload2-icon.png') }}" alt="Upload Icon" width="25px" height="25px" />
                                    Upload image
                                </label>
                            </div>        

                            <style>

                            </style>
                            <div class="border-top p-3 d-flex justify-content-end">
                                <a  class="btn btn-secondary me-2 text-white" type="button" onclick="window.location='{{ url('/') }}/company'">Cancel</a>
                                <button id="editcompany" onclick="_update()"type="button"class="btn btn-primary waves-effect">Update</button>
                            </div>
                            </form>

                        </div>

                    </div>

                </div>
         

@endsection
@section('main-page-content')
@section('css-js')


    <script>
        @if (session('success'))
            toastr.success("{{ session('success') }}");
        @endif

        @if (session('error'))
            toastr.error("{{ session('error') }}");
        @endif



        // 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 fileInput = document.getElementById('thumbnail');
        const previewContainer = document.getElementById('current-logo'); // Use the current logo image

        // Check if a file is selected
        if (fileInput.files && fileInput.files[0]) {
            const reader = new FileReader();

            // Set up the reader to update the thumbnail preview when the image is loaded
            reader.onload = function(e) {
                previewContainer.src = e.target.result; // Update the src of the image preview
            };

            // Read the selected file as a data URL
            reader.readAsDataURL(fileInput.files[0]);
        } else {
            // If no file is selected, keep the current logo unchanged
            previewContainer.src = "{{ url($company->logo_img) }}"; // Fallback to existing image
        }
    }                                   

    function _update() {
    var formData = new FormData($('#update-companyForm')[0]);
    var lrequestId = $('#company-id').val();
    $.ajax({
        url: "{{ url('api/company-update') }}/" + lrequestId,
        type: 'POST',
        data: formData,
        dataType: 'json',
        contentType: false,
        processData: false,
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        success: function(response) {
            // toastr.success(response.message);
            window.location.href = "{{ url('/') }}/company";
        },
        error: function(response) {
        if (response.status == 500) {
                        toastr.error("Something went wrong")
                    }
                    else
                    {
                        toastr.error(response.responseJSON.message)
                    }
        }
    });
}


      

        function getParams(name) {
            var url = new URL(window.location.href);
            return url.searchParams.get(name);
        }

      
    </script>

    <style>

    </style>
@endsection