@extends('admin.layout.master')
@section('content')
    <div class="d-flex flex-column-fluid">
        <!--begin::Container-->
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <!--begin::Card-->
                    <div class="card card-custom gutter-b example example-compact">
                        <div class="card-header">
                            <h3 class="card-title">@lang('admin.create_order')</h3>
                            <div class="card-toolbar">
                                <div class="example-tools justify-content-center">
                                    <span class="example-toggle" data-toggle="tooltip" title="View code"></span>
                                    <span class="example-copy" data-toggle="tooltip" title="Copy code"></span>
                                </div>
                            </div>
                        </div>
                        <form method="post" style="padding: 20px" id="addform" data-parsley-validate="">
                            {{csrf_field()}}
                            {{method_field('post')}}
                            <div class="modal-body">
                                <div class="alert alert-danger" id="error" style="display: none">

                                </div>
                                <div class="box-body">

                                    <div class="row">
                                        <div class="col-md-6">
                                            <h3 style="text-align: center">تفاصيل المستخدم</h3>
                                            <div class="form-group">
                                                <label for="">@lang('admin.users')</label>
                                                <select class="form-control select2" name="user_id" id="catId">
                                                    <option value=" ">@lang('admin.users')</option>
                                                    @foreach(\App\Models\User::whereRoleIs('clients')->get() as $user)
                                                        <option value="{{$user->id}}" >{{$user->name}}</option>
                                                    @endforeach
                                                </select>
                                            </div>



                                            <div class="form-group">
                                                <label for="">@lang('admin.patmentMethod')</label>
                                                <select class="form-control select2" name="payment_method" id="catId">
                                                    <option value=" ">@lang('admin.patmentMethod')</option>
                                                    @foreach(\App\Models\PaymentMethod::where('status' , 1)->get() as $pay)
                                                        <option value="{{$pay->id}}" >{{$pay->title}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-md-6">

                                            <section>

                                                <div class="form-group">
                                                    <label for="exampleFormControlSelect1" data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in">@lang('admin.countries')</label>
                                                    <select data-aos-delay="100" data-aos-duration="800" name="country_id"  data-url="{{route('clients-get-regions')}}" data-slug="country" data-aos="zoom-out-up" class="form-control mb-4" id="country_id">
                                                        <option value=" ">Choose</option>
                                                        @foreach(\App\Models\Country::where('status',1)->get() as $country)
                                                            <option value="{{$country->id}}">{{$country->name}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>



                                                <div class="form-group" style="display: none" id="governments_div">
                                                    <label for="exampleFormControlSelect1" data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in">@lang('admin.governments')</label>
                                                    <select data-aos-delay="100" data-aos-duration="800"  name="governments_id" data-url="{{route('clients-get-regions')}}"  data-slug="governments" data-aos="zoom-out-up" class="form-control mb-4" id="government_id">
                                                        <option value=" ">Choose</option>



                                                    </select>
                                                </div>
                                                <div class="form-group" style="display: none" id="region_div">
                                                    <label for="exampleFormControlSelect2" data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in">@lang('admin.regions')</label>
                                                    <select data-aos-delay="100" data-aos-duration="800" id="region_id" name="region_id"data-aos="zoom-out-up" class="form-control mb-4" >

                                                    </select>
                                                </div>
                                                <label data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in" for="street_1">@lang('admin.block')</label>
                                                <div class="input-group mb-4" data-aos-delay="100" data-aos-duration="800" data-aos="zoom-out-up">
                                                    <input id="street_1" type="text" class="form-control" placeholder="@lang('admin.block')"  name="block">
                                                </div>
                                                <label data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in" for="street_2">@lang('admin.street_name')</label>
                                                <div class="input-group mb-4" data-aos-delay="100" data-aos-duration="800" data-aos="zoom-out-up">
                                                    <input id="street_2" type="text" class="form-control" placeholder="@lang('admin.street_name')" name="Street_number">
                                                </div>
                                                <label data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in" for="street_3">@lang('admin.gade')</label>
                                                <div class="input-group mb-4" data-aos-delay="100" data-aos-duration="800" data-aos="zoom-out-up">
                                                    <input id="street_3" type="text" class="form-control" placeholder="@lang('admin.gade')" name="gada">
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <label data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in" for="numm">@lang('admin.building') <span>(@lang('front.chooses'))</span></label>
                                                        <div class="input-group mb-4" data-aos-delay="100" data-aos-duration="800" data-aos="zoom-out-up">
                                                            <input id="numm" type="text" class="form-control" placeholder="@lang('admin.building') " name="house_number">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in" for="home">@lang('admin.floor')  <span>(@lang('front.chooses'))</span></label>
                                                        <div class="input-group mb-4" data-aos-delay="100" data-aos-duration="800" data-aos="zoom-out-up">
                                                            <input id="home" type="text" class="form-control" placeholder="@lang('admin.floor') " name="floor_number">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <textarea class="form-control w-100" id="exampleFormControlTextarea1" name="note" placeholder="@lang('front.note')" data-aos-delay="100" data-aos-duration="800" data-aos="zoom-out-up"></textarea>
                                                </div>
                                            </section>

                                        </div>




                                    <hr>

                                        <div class="col-md-12">
                                                <h4 style="text-align: center">@lang('admin.products')</h4>


                                            <div id="product">
                                                <div class="row">
                                                    <div class="data_related" style="    width: 100%;">
                                                        <!-- Search form -->
                                                        <div class="form-group">
                                                            <input class="form-control" id="search_value" type="text" placeholder="Search" aria-label="Search">
                                                            <button class="btn btn-dark btn-sm" id="do_search"><i class="fa fa-search"></i></button>
                                                            <img class="loader hidden" src="{{asset('770.gif')}}" style="width: 40px">
                                                        </div>
                                                        <hr>
                                                    </div>
                                                </div>

                                                <div class="row"  id="related_data_ul">

                                                </div>

                                            </div>

                                        </div>




                                    </div>






                                </div>

                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">@lang('admin.close')</button>
                                <button type="submit" class="btn btn-primary">@lang('admin.save')</button>
                            </div>
                        </form>

                        <!--end::Form-->
                    </div>
                    <!--end::Card-->

                </div>
            </div>
        </div>
        <!--end::Container-->
    </div>

@endsection
@push('js')
    <script>
        $('body').on('change','#country_id',function(e){
            e.preventDefault();
            var id = $(this).val();
            var url = $(this).data('url');
            var lang = $(this).data('lang');
            var slug = $(this).data('slug');

            // alert(url);
            $.ajax({
                url: url,
                method: "get",
                data: {
                    id:id,
                    slug:slug,
                },
                context:this,
                dataType: 'json',
                //
                // cache       : false,
                // contentType : false,
                // processData : false,

                success: function (response) {
                    // console.log(response);
                    $('#governments_div').hide();
                    $('#government_id').empty();

                    $('#region_div').hide();
                    $('#region_id').empty();

                    if(response.status == false){

                        toastr.warning("لايوجد  محافظات");

                    }else {
                        if (response.status == true) {


                            $('#governments_div').show();
                            $('#government_id').empty();
                            $('#government_id').append(`<option value=" ">اختر محافظتك</option>`);
                            $.each(response.data,function (key,value) {

                                $('#government_id').append(`
                                      <option value="${value.id}">${value.name}</option>
                                        `);
                            });



                        }

                    }

                    // window.location.reload();
                },

            });


        });

        $('body').on('change','#government_id',function(e){
            e.preventDefault();
            var id = $(this).val();
            var url = $(this).data('url');
            var lang = $(this).data('lang');
            var slug = $(this).data('slug');

            // alert(url);
            $.ajax({
                url: url,
                method: "get",
                data: {
                    id:id,
                    slug:slug,
                },
                context:this,
                dataType: 'json',
                //
                // cache       : false,
                // contentType : false,
                // processData : false,

                success: function (response) {
                    // console.log(response);
                    $('#region_div').hide();
                    $('#region_id').empty();
                    if(response.status == false){
                        toastr.warning("لايوجد  مناطق");

                    }else {
                        if (response.status == true) {



                            $('#region_div').show();
                            $('#region_id').empty();
                            $('#region_id').append(`<option value=" ">اختر منطقتك</option>`);
                            $.each(response.data,function (key,value) {

                                $('#region_id').append(`
                                      <option value="${value.id}">${value.name}</option>
                                        `);
                            });



                        }

                    }

                    // window.location.reload();
                },

            });


        });

        $('body').on('click','#do_search',function (e) {
            e.preventDefault();

            var val = $('#search_value').val();

            if (val != '' || val !== null){
                $.ajax({
                    url:"{{route('product-search')}}",
                    dataType:"json",
                    type:"post",
                    data:{
                        search:val,
                        {{--id : "{{$rows->id}}",--}}
                    },
                    beforeSend:function () {
                        $('.loader').removeClass('hidden');
                    },success:function(response){

                        if (response.data != ""){
                            $('.loader').addClass('hidden');
                            $.each(response.data,function (key,value) {
                                $('#related_data_ul').append(`
                                <div class="col-md-6" style="float: right">
                                    <lable>
                                        <img src="${value.image_path}" style="width:200px;height: 200px">
                                        <input type="checkbox" name="ids[]" value="${value.id}">${value.name}
                                        </lable>
                                        <br>
                                        <lable>
                                            @lang('admin.defualt_Thread_count')
                                        </lable>
                                        <input type="number" name="treats[]" value="">

                                        <br>
                                        <lable>
                                            @lang('admin.nameOfCart')
                                         </lable>


                                <input type="number" name="nameOfRole[]" value="">

                            </div>`)
                            });

                        }else{
                            $('.loader').addClass('hidden');
                            new Noty({
                                type: 'warning',
                                layout: 'topRight',
                                text: "@lang('admin.Sorry')",
                                timeout: 2000,
                                killer: true
                            }).show();
                        }

                    }
                })
            }
        });

    </script>
@endpush