


<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{
        height: 100px !important;
    }

    .product-tumb img,.product-tumbd {
        max-width: 100%;
        max-height: 100%;
        /*height: 100px !important;*/
        height: 100% !important;
        /*width: 100% !important;*/
        /*width: 170px !important;*/
    }

    .product-details {
        padding: 30px;
    }

    .card {
        border-radius: 7px !important;
        border-color: #e1e7ec;
    }
    .block .block-title{
        /*font-size: 20px !important;*/
    }
    @media only screen and (min-width: 350px) and (max-width: 1025px) {

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

        .product-tumb img,.product-tumbd {
            max-width: 100%;
            max-height: 100%;
            height: 100px !important;
            width: 100% !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;
        }

    }

</style>

<div class="row" x-data>
    <div class="col-lg-12 form-group"></div>
    <div class="col-lg-12">
        <div class="row">
            <div class="col-sm-6 col-lg-6 col-xxl-7 form-group">
                <div class="row">
{{--                    <div class="col-md-12 col-xxl-12 form-group">--}}
{{--                        @include("backend.orders.create.blocs.customer")--}}
{{--                    </div>--}}
{{--                    <div class="col-md-12 col-xxl-6 form-group">--}}
{{--                        <div class="card">--}}
{{--                            <div class="card-body p-2">--}}
{{--                                @include("backend.orders.create.blocs.form-setting-po-warehouse")--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
                    <div class="col-lg-12">
                        @include("backend.orders.create.blocs.products-list")
                    </div>
                </div>

            </div>
            <div class="col-sm-6 col-lg-6 col-xxl-5 form-group" id="block-card-sales">
                @include("backend.orders.create.blocs.order.index")
                @include("backend.orders.create.blocs.form-setting-offline-orders-schedule")
            </div>
            {{--                <div class="col-sm-12 col-lg-2 col-xxl-2 form-group">--}}
            {{--                    @include("backend.orders.create.blocs.offline-sales")--}}
            {{--          $admin      </div>--}}

            {{--                <div class="fixed-bottom" style="bottom: 20rem !important;">--}}
            {{--                    <div class="float-right" >--}}
            {{--                        <button class="btn btn-outline-dark rounded"--}}
            {{--                                type="button"--}}
            {{--                                data-bs-toggle="offcanvas"--}}
            {{--                                data-bs-target="#offcanvas-settings-ordering"--}}
            {{--                                aria-controls="offcanvas-settings-ordering"--}}
            {{--                                style="height: 50px">--}}
            {{--                            <strong><span class="fa fa-cog"></span></strong>--}}
            {{--                        </button>--}}
            {{--                    </div>--}}
            {{--                </div>--}}

            <x-offcanvas  id="offcanvas-displayed-invoice"
                          :closable="true"
                          data-bs-scroll="true"
                          data-bs-backdrop="true"
                          class="offcanvas-end offcanvas-size-xl">
                <x-slot name="title">{{__("Invoice")}}</x-slot>

                <div x-data="{
                        get order(){
                         return this.$store.invoice.order
                         }
                        }">
                    <div class="row">
                        <div class="col-lg-12" id="invoice-block">
                            <x-invoice />
                        </div>
                       <template x-if="order">
                           <div class="col-lg-12">
                               <button class="btn btn-warning rounded-sm btn-block text-uppercase btn-action-action-order"
                                       @click="printHtmlBlock('invoice-block','INVOICE-'+order.reference)">
                                   <span x-text="'Print invoice ('+order.reference+')'"></span>
                                   <i class="m-l-2 fa fa-print"></i>
                               </button>
                           </div>
                       </template>
                    </div>
                </div>

            </x-offcanvas>

            {{--                <x-offcanvas--}}
            {{--                    id="offcanvas-settings-ordering"--}}
            {{--                    :closable="true"--}}
            {{--                    data-bs-scroll="true"--}}
            {{--                    data-bs-backdrop="true"--}}
            {{--                    class="offcanvas-end">--}}
            {{--                    <x-slot name="title">{{__("Order Board Settings")}}</x-slot>--}}
            {{--                    <div class="p-0">--}}
            {{--                        <div class="accordion" id="accordionPanelsStayOpenExample">--}}
            {{--                            <div class="accordion-item">--}}
            {{--                                <h2 class="accordion-header"--}}
            {{--                                    id="panelsStayOpen-headingOne">--}}
            {{--                                    <button class="accordion-button"--}}
            {{--                                            type="button"--}}
            {{--                                            data-bs-toggle="collapse"--}}
            {{--                                            data-bs-target="#panelsStayOpen-collapseOne"--}}
            {{--                                            aria-expanded="true"--}}
            {{--                                            aria-controls="panelsStayOpen-collapseOne">--}}
            {{--                                        {{__("Current Warehouse Stock & Point Sale")}}--}}
            {{--                                    </button>--}}
            {{--                                </h2>--}}
            {{--                                <div id="panelsStayOpen-collapseOne"--}}
            {{--                                     class="accordion-collapse collapse show"--}}
            {{--                                     aria-labelledby="panelsStayOpen-headingOne">--}}
            {{--                                    <div class="accordion-body p-2">--}}
            {{--                                        @include("backend.orders.create.blocs.form-setting-po-warehouse")--}}
            {{--                                    </div>--}}
            {{--                                </div>--}}
            {{--                            </div>--}}
            {{--                            <div class="accordion-item">--}}
            {{--                                <h2 class="accordion-header" id="panelsStayOpen-headingTwo">--}}
            {{--                                    <button class="accordion-button collapsed"--}}
            {{--                                            type="button"--}}
            {{--                                            data-bs-toggle="collapse"--}}
            {{--                                            data-bs-target="#panelsStayOpen-collapseTwo"--}}
            {{--                                            aria-expanded="false"--}}
            {{--                                            aria-controls="panelsStayOpen-collapseTwo">--}}
            {{--                                        {{__("Offilines Orders Schedule")}}--}}
            {{--                                    </button>--}}
            {{--                                </h2>--}}
            {{--                                <div id="panelsStayOpen-collapseTwo"--}}
            {{--                                     class="accordion-collapse collapse"--}}
            {{--                                     aria-labelledby="panelsStayOpen-headingTwo">--}}
            {{--                                    <div class="accordion-body p-2">--}}
            {{--                                        @include("backend.orders.create.blocs.form-setting-offline-orders-schedule")--}}
            {{--                                    </div>--}}
            {{--                                </div>--}}
            {{--                            </div>--}}
            {{--                        </div>--}}
            {{--                    </div>--}}

            {{--                </x-offcanvas>--}}
        </div>
    </div>
</div>


@include('backend.orders.create.script-alpine-js')
