@extends('store.layouts.container')

@section('content')
    <!--<div class="side-title">-->
    <!--    <h3>{{ $head ?? '' }}</h3>-->
    <!--</div>-->


    <div class="border-item">
        <div class="d-flex justify-content-between mb-5">
            <div class="">
                <h1 class="title "> Order #20192 </h1>
                <div class="bread fw-bold mt-2">
                    <a href="#" class="item color-primary me-2"> Dashboard </a> /
                    <a href="#" class="item color-primary ms-2 me-2"> Orders </a> /
                    <span class="item color-gray ms-2"> Order #20192 </span>
                </div>
            </div>
            <a href="#0" class="butn mt-4">
                <div class="cont mt-2">
                    <span> Cancel Order </span>
                </div>
            </a>
        </div>
        <div class="row">
            <div class="col-lg-8">
                <div class="det_box ">
                    <div class="row">
                        <!--<div class="col-lg-3">-->
                        <!--    <div class="item">-->
                        <!--        <p class="label"> Status </p>-->
                        <!--        <div class="data">-->
                        <!--            <span class="badge red_badge py-2 px-3"> Processing </span>-->
                        <!--            <button class="view_butn color-gray ms-3 "> <i class="fa-solid fa-eye"></i>  </button>-->
                        <!--        </div>-->
                        <!--    </div>-->
                        <!--</div>-->
                        <div class="col-lg-3">
                            <div class="item">
                                <p class="label mb-2"> Order Date </p>
                                <div class="data"> <b> 12 Jan 2024, 10:00 </b> </div>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="item">
                                <p class="label mb-2"> Order Number </p>
                                <div class="data"> 
                                    <b> #20192 </b>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="item">
                                <p class="label mb-1"> Order status </p>
                                <small class="alert alert-warning d-inline-block py-1 rounded-pill"> Pending Approval </small>
                            </div>
                        </div>
    
                    </div>
    
                    
                </div>
    
                <div class="order_items_box mt-4">
                    <h5 class="mb-4"> Order Items </h5>
    
                    <div class="table-responsive">
                        <table class="table ">
                            <tbody>
                                <tr>
                                    <td>
                                        <div class="prod_data">
                                            <img src="https://www.speickshop.de/media/image/product/1038/lg/speick-original-handcreme-75ml.jpg" alt="" height="80px" class="prod_img" />
                                        </div>
                                    </td>
                                    <td> 
                                        <div class="txt_cont">
                                            <small class="d-block color-gray mb-1">Product Name</small>    
                                            <h6 class="name"> hand Cream  </h6>
                                        </div>
                                    </td>
                                    <td> 
                                        <div class="txt_cont">
                                            <small class="d-block color-gray mb-1">Quantity</small>    
                                            <h6 class="name"> 20 box </h6>
                                        </div>
                                    </td>
                                    <td> 
                                        <div class="txt_cont">
                                            <small class="d-block color-gray mb-1">Total</small>    
                                            <h6 class="name"> 1000 SAR  </h6>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
    
                </div>
    
                <div class="summary_box mt-4">
                    <h5 class="mb-4"> Order Summary </h5>
    
                    <div class="">
                        <div class="item d-flex justify-content-between align-items-center">
                            <h6 class="color-gray"> Subtotal </h6>
                            <span class="fw-bold"> SAR 1,063.00 </span>
                        </div>
                        <div class="item d-flex justify-content-between align-items-center">
                            <h6 class="color-gray"> Shipping (Regular) </h6>
                            <span class="fw-bold"> SAR 25.00 </span>
                        </div>
                        <div class="item d-flex justify-content-between align-items-center">
                            <h6 class="color-gray"> Tax (5%) </h6>
                            <span class="fw-bold"> SAR 51.25 </span>
                        </div>
                        <div class="item d-flex justify-content-between align-items-center">
                            <h6 class="color-gray">  Total </h6>
                            <span class="fw-bold"> SAR 1,076.25 </span>
                        </div>

                    </div>
                </div>

                <div class="address_box mt-4">
                    <h5 class="mb-4">   Address  </h5>

                    <div class="item">
                        <i class="fas fa-map-marker icon mainColor mt-1"></i>
                        <h6 class="title"> Shipping Address </h6>
                        <div class="p">
                            Riyadh, Al-Ulaya District, Prince Sultan Street, Building No. 12 <br>
                            Phone Number: +966590658432
                        </div>
                    </div>

                </div>
            </div>
            <div class="col-lg-4">
                <div class="information_box">
                    <h5 class="mb-4"> Payment Methods </h5>
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                      <li class="nav-item w-50" role="presentation">
                        <button class="nav-link w-100 active" id="pay1-tab" data-toggle="tab" data-target="#pay1">Bank Transfer</button>
                      </li>
                      <li class="nav-item w-50" role="presentation">
                        <button class="nav-link w-100" id="pay2-tab" data-toggle="tab" data-target="#pay2">Online</button>
                      </li>
                    </ul>
                    <div class="tab-content" id="myTabContent">
                      <div class="tab-pane fade show active" id="pay1"> 
                        <div class="pt-4">
                            <div class="item">
                                <i class="fas fa-user icon mainColor"></i>
                                <div class="txt_cont">
                                    <h6 class="label text-capitalize mb-1"> account name </h6>
                                    <p class="data">  Mohamed.ali@mail.com </p>
                                </div>
                            </div>
                            <div class="item">
                                <i class="fas fa-align-right icon mainColor"></i>
                                <div class="txt_cont">
                                    <h6 class="label text-capitalize mb-1"> Account number </h6>
                                    <p class="data"> 45214521 </p>
                                </div>
                            </div>
                            <div class="item">
                                <i class="fas fa-university icon mainColor"></i>
                                <div class="txt_cont">
                                    <h6 class="label text-capitalize mb-1"> Bank name </h6>
                                    <p class="data"> Bank name </p>
                                </div>
                            </div>
                            <div class="item">
                                <i class="fas fa-align-right icon mainColor"></i>
                                <div class="txt_cont">
                                    <h6 class="label text-capitalize mb-1"> IBAN number </h6>
                                    <p class="data"> 1254 </p>
                                </div>
                            </div>
                        </div>
                        <div class="form-group up_group mt-4">
                            <input type="file" name="img[]" class="file">
                            <div class="input-group">
                                <span class="input-group-append"> Upload file </span>
                                <input type="text" class="input_ques" disabled placeholder=" file name " aria-label="Upload File" aria-describedby="basic-addon1">
                            </div>
                        </div>
                        <a href="#0" class="butn mt-4 w-100">
                            <div class="cont mt-2">
                                <span> Payment </span>
                            </div>
                        </a>
                      </div>
                      <div class="tab-pane fade" id="pay2"> 
                        <div class="pt-4">
                            <img src="https://go.omar.alyomhost.org/assets/store_admin/images/payment.png" alt="" class="pay-img">
                        </div>
                        <a href="#0" class="butn mt-4 w-100">
                            <div class="cont mt-2">
                                <span> Payment </span>
                            </div>
                        </a>
                      </div>
                    </div>
                </div>

                <!--<div class="butns_box">-->
                <!--    <a href="#0" class="butn mt-4">-->
                <!--        <div class="cont mt-2">-->
                <!--            <span> Payment </span>-->
                <!--        </div>-->
                <!--    </a>-->
                <!--</div>-->
            </div>
        </div>
    </div>

@endsection

@section('inner_js')
    <!-- Editor JS orders -->
    <script src="{{ asset('/assets/admin/js/lib/tinymce.min.js') }}"></script>-
    <script>
        var route_prefix = "{{ url(config('lfm.prefix')) }}";
        var url = "{{url('/')}}/";
    </script>
    <script src="{{ asset('assets/admin/js/editor.js') }}"></script>
    <script src="{{ asset('assets/admin/js/lfm.js') }}"></script>

@endsection