@extends('company.layout.layout')

@push('title')
{{trans('order.add_new_reservations')}}
@endpush

@push('breadcrumbs')
    <li class="breadcrumb-item  ">
        <a href="{{route('admin.home')}}" class="text-muted"> {{trans('order.home')}} </a>
    </li>

    <li class="breadcrumb-item  ">
        <a href="{{('admin.reservations.index')}}" class="text-muted"> {{trans('order.reservations')}} </a>
    </li>
@endpush

@push('css')
    <!--begin::Page Custom Styles(used by this page)-->
    <link href="{{asset('/admin/assets')}}/css/pages/wizard/wizard-4.css" rel="stylesheet" type="text/css" />
    <!--end::Page Custom Styles-->
    

    <style>

        #searchResult{
        list-style: none;
        padding: 0px;
        width: 250px;
        position: absolute;
        margin: 0;
        z-index: 1000;

        }

        #searchResult li{
        background: lavender;
        padding: 4px;
        margin-bottom: 1px;
        z-index: 1000;

        }

        #searchResult li:nth-child(even){
        background: cadetblue;
        color: white;
        z-index: 1000;

        }

        #searchResult li:hover{
        cursor: pointer;
        }

        #txt_search {
        padding: 5px;
        width: 250px;
        letter-spacing: 1px;
        }



    </style>


@endpush

@push('content')

{{-- 
            <div>
                <input type="text" id="txt_search" name="txt_search">
            </div>
            <ul id="searchResult"></ul> --}}

            <div class="clear"></div>
            <div id="userDetail"></div>



        @include('company.pages.reservations.form')

@endpush

@push('scripts')
    <!--begin::Page Scripts(used by this page)-->
    <script src="{{asset('/admin/assets')}}/js/pages/custom/user/edit-user.js"></script>
    <!--end::Page Scripts-->


    
    <script type="text/javascript">
        $(document).ready(function(){

            $("#txt_search").keyup(function(){
                var search = $(this).val();

                if(search != ""){

                    $.ajax({
                        url: '{{ route('company.clientsearch') }}',
                        type: 'post',
                        data: {search:search, type:1},
                        dataType: 'json',
                        success:function(response){

                            var len = response.length;
                            $("#searchResult").empty();
                            for( var i = 0; i<len; i++){
                                var id = response[i]['id'];
                                var name = response[i]['name'];

                                $("#searchResult").append("<li value='"+id+"'>"+name+"</li>");

                            }

                            // binding click event to li
                            $("#searchResult li").bind("click",function(){
                                setText(this);
                            });


                        }
                    });
                }

            });


        });


        function setText(element){

            var value = $(element).text();
            var userid = $(element).val();



            client_name = $("[name='client_name']")
            client_phone = $("[name='client_phone']")
            client_address = $("[name='client_address']")
            client_type  = $("[name='client_type']")
            // client_email = $("[name='client_email']")

            // Request User Details
            $.ajax({
                url: '{{ route('company.clientsearch') }}',
                type: 'post',
                data: {userid:userid, type:2},
                dataType: 'json',
                success: function(response){

                    var len = response;

                    
                    if(response){

                        var client_name_ = response['name'];
                        var client_phone_ = response['phone'];
                        var client_address_ = response['address'];
                        var client_type_ = response['type'];
                        var client_email_ = response['email'];



                        client_name .val(client_name_)
                        client_phone.val(client_phone_)
                        client_address.val(client_address_)
                        client_type .val(client_type_)
                        // client_email.val(client_email)

                        $("#searchResult").empty();
                        
                    }
                }

            });
        }

    </script>
@endpush