@extends('layouts.admin')
@section('title' ,$title)

<style>

    .btn-action-action-order{
        height: 50px !important;
    }

    .btn-select-payment-method{
        max-height: 100px;
        width: 100%;
        cursor : pointer;
        background: #eee;
        text-align: left;
        position: relative;
        display: block;
        padding: 0.5rem 1rem;
        color: #212529;
        text-decoration: none;
        text-transform: uppercase;
        font-weight: 700;
        border: 1px solid rgba(0,0,0,.200);
        margin-bottom: 5px;
        border-radius: 0.25em;
        /* max-width: 200px !important; */
        /*height: 200px !important;*/
    }

    .btn-select-payment-method .type-icon{
        color : var(--success);
    }
    .btn-select-payment-method:hover .type-icon,
    .btn-select-payment-method.active .type-icon{
        color : var(--white) !important;
    }
    .btn-select-payment-method:hover,
    .btn-select-payment-method.active{
        background: var(--success) !important;
        color : var(--white) !important;
    }

    .product-card {
        /* width: 150px; */
        position: relative;
        box-shadow: 0 2px 7px #dfdfdf;
        /* margin: 50px auto; */
        background: #fafafa;
    }

    .product-card:hover {
        box-shadow: 0 2px 7px var(--success);
        /* margin: 50px auto; */
        background: var(--success);

    }

    .product-card:hover .product-name,.product-card:hover  .product-price{
        color: white !important;
    }

    .product-tumb {
        display: flex;
        /*align-items: center;*/
        align-items: baseline;
        justify-content: center;
        /*height: 300px;*/
        /* padding: 15px; */
        background: #f0f0f0;
    }

    .product-tumb img {
        max-width: 100%;
        max-height: 100%;
        height: 150px !important;
        width: 170px !important;
    }

    .product-details {
        padding: 30px;
    }

    .card {
        border-radius: 7px !important;
        border-color: #e1e7ec;
    }

    @media only screen and (min-width: 350px) and (max-width: 1025px) {

        .block .block-title{
            font-size: 15px !important;
        }

        .product-tumb img {
            max-width: 100%;
            max-height: 100%;
            height: 100px !important;
            width: 130px !important;
        }
        .product-card .product-name,.product-card .product-price,
        .btn-select-payment-method .type-name{
            font-size: 12px !important
        }

        .btn-select-payment-method .method-img{
            height: 40px !important;
            width: 70px !important;
        }

        .btn-select-paymeny-methodv2{

        }
    }

</style>

@section('content')

    <div class="row"  x-data>
        <div class="col-lg-6 col-sm-6 form-group">
            @include("backend.orders.create.blocs.point-of-sales")
        </div>
        <div class="col-lg-6 col-sm-6 m-b-10">
            @include("backend.orders.create.blocs.customer")
        </div>
        <div class="col-lg-12">
            <div class="row">
                <div class="col-lg-6 col-xxl-7 col-md-12 col-sm-12 form-group">
                    @include("backend.orders.create.blocs.products-list")
                </div>

                <div class="col-lg-6 col-xxl-5 col-md-12 col-sm-12">
                    <div class="row">
{{--                        <div class="col-lg-12 m-b-10">--}}
{{--                            @include("backend.orders.create.blocs.customer")--}}
{{--                        </div>--}}

                        <div class="col-lg-12 m-b-20">
                            @include("backend.orders.create.blocs.order.index")
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>



@endsection
@push('js')
    <script >
        var currency = '{{getSettingsOf("currency")}}';


        const OrderService =  ( args = {} ) => {
                                return {

                                      data : ('data' in args) ? args.data : {},

                                      submit_url : ('submit_url' in args) ? args.submit_url : "{{route("admin.orders.store")}}",
                                      order : ('order' in args) ? args.order : null,
                                      displayMessageOnfailed : ('displayMessageOnFailed' in args) ? args.displayMessageOnFailed : true,
                                      displayMessageOnCompleted : ('displayMessageOnCompleted' in args) ? args.displayMessageOnCompleted : true,

                                      onSuccess (response,callback){
                                          if (!callback) callback = function (res) { };
                                          callback(response);
                                      },
                                      onCompleted (response,callback){
                                          if (!callback) callback = function (res) { };
                                          callback(response);
                                      },
                                      onFailed (response,callback){
                                          if (!callback) callback = function (res) { };
                                          callback(response);
                                      },
                                      onError (error,callback){
                                          if (!callback) callback = function (err) { };
                                          callback(error);
                                      },

                                      onDisconnected (response,callback){
                                          if (!callback) callback = function (err) { };
                                          callback(response);
                                      },

                                      sendWithConfirmDialog (dialog_options = {}){
                                          const that = this;
                                          const default_options = {
                                              title : "Confirmation",
                                              text : "Submit this Order ?",
                                          }
                                          dialog_options = {...default_options , ...dialog_options};
                                          const {title,text} = dialog_options;
                                          return confirmAction({
                                              title,
                                              text,
                                              preConfirm : () => {
                                                  swal.fire({
                                                      text: '{{__("Do not close this popup !")}}',
                                                      icon: 'info',
                                                      showConfirmButton : false,
                                                      reverseButtons : true,
                                                      allowOutsideClick : false,
                                                      didOpen (){
                                                          swal.showLoading();
                                                          that.sendOrder();
                                                      },
                                                      willClose (){
                                                          swal.hideLoading();
                                                      },
                                                  })

                                              },
                                          });

                                      },

                                      async sendOrder(){
                                          const body = this.data
                                          //const uri_is_loshost = "{{request()->is("localhost")}}"

                                          {{--if (isOnline() || "{{app()->isLocal()}}"){--}}
                                          if (isOnline()){

                                              const response = await  request(this.submit_url,{ body, method:"post"},false)
                                                                      .catch (error => {
                                                                          this.onError(error);
                                                                          if (this.displayMessageOnfailed){
                                                                              swal.confirmButton = true;
                                                                              swal.showValidationMessage(`${error}`)
                                                                              swal.hideLoading();
                                                                              swal.showConfirmButton = true;
                                                                          }
                                                                      });
                                              const success = response?.success ?? false;
                                              if(success){
                                                  this.onSuccess(response)
                                              }else{
                                                  this.onFailed(response)
                                              }

                                              if (this.displayMessageOnCompleted){
                                                  swal.fire({
                                                      icon : success ? "success" : "error",
                                                      title : success ? "{{__('Order Submitted')}}" : "Oops..." ,
                                                      html : "<span class='fs-14'>"+response.message+"</span>" ,
                                                      showConfirmButton : true,
                                                  });
                                              }

                                              this.onCompleted(response);
                                             // return ;
                                          }else{
                                              this.onDisconnected({
                                                  code : "DISCONNECTED",
                                                  message : "{{__('Internet not available.')}}"
                                              });
                                          }

                                      },
                                  }
                             };

        $("#sidebarToggle").trigger('click');


        document.addEventListener('alpine:init', () => {

            $('[data-toggle="tooltip"]').tooltip({html:true,});
            $('[data-toggle="popover"]').popover({html:true,});

            Alpine.store("data_page",{

               async init (){
                    const alpine = this;
                    const time = 1000 * 60;
                    await alpine.refresh();
                    setInterval(async () => await alpine.refresh(), time)
                },
                async refresh (){
                    const alpine = this;
                    const data = await request("{{route("admin.orders.get-data-page")}}",{},false);

                    if ( ('products' in data) && (data.products.length))  alpine.products = data.products;
                    if ( ('customers' in data) && (data.customers.length))  alpine.customers = data.customers;
                    if ( ('warehouses' in data) && (data.warehouses.length))  alpine.warehouses = data.warehouses;
                    if ( ('points_of_sales' in data) && (data.points_of_sales.length))  alpine.points_of_sales = data.points_of_sales;
                    if ( ('stocks' in data) && (data.stocks.length))  alpine.stocks = data.stocks;
                },
                products : null,
                customers : null,
                warehouses : null,
                points_of_sales : null,
                stocks :null,
                categories : null,
                admin : @json($admin),

                {{--products : @json($products),--}}
                {{--customers : @json($customers),--}}
                {{--warehouses : @json($warehouses),--}}
                {{--points_of_sales : @json($points_of_sales),--}}
                {{--stocks : @json($stocks),--}}
                {{--categories : @json($categories),--}}
                {{--admin : @json($admin),--}}
            })




        })
    </script>
@endpush