@extends('web.layouts.layout')
@section('content')

    <main>



        <!-- ---------- cart page ----------- -->
        <section class="checkout-pg py-4">
            <div class="container">
                <form id="calculate_form" action="{{route('web.checkout.order')}}" method="post" onsubmit="formAction(this)">
                    <input type="hidden" name="payment_way_id" value="3" id="payment_way_id">
                    <input type="hidden" name="coupon" value="{{$request->coupon}}" id="coupon">
                    <input type="hidden" name="date" value="{{$request->date}}" id="date">

                    <div class="row gx-0">
                        <div class="col-lg-9">
                            <div class="main-content pe-lg-4 mb-4">
                                <div class="line-title mb-4"> <h5 class="bg-white pe-3">{{__('web.complete_order')}}</h5> </div>
                                <div class="checkout-item">
                                    <div class="icon-title-st1">
                                        <h6 class=""> <span class="ico me-2 cr-gray"> <i class="fas fa-map-marker"></i> </span> <span class="txt"> {{__('web.address')}} </span> <small class="cr-gray ms-3 opacity-50"> ({{__('web.addresses_status.'.$address->delivery_status)}}) </small> </h6>

                                        @if(count($addresses))
                                            <div class="dropdown ms-auto">
                                                <button class="border-0 bg-transparent cr-blue dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                    <i class="fal fa-pen me-1 small"></i> <span class="txt"> {{__('web.change')}} </span>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    @foreach($addresses as $row)
                                                        <li><a class="dropdown-item" href="{{route('web.address.change').'?address_id='.$row->id}}">{{__('web.address')}} {{__('web.addresses.'.$row->delivery_status)}}</a></li>
                                                    @endforeach
                                                </ul>

                                            </div>
                                        @endif
                                    </div>

                                    <div class="gray-box adress-info p-4 bg-light1">
                                        @include('web.pages.components.address', ['page' => 'checkout'])

{{--                                        <a href="{{route('address.create')}}" class="butn butn-line col-lg-4 mt-4">--}}
{{--                                            <span> <i class="far fa-plus me-2"></i> {{__('web.address_create')}} </span>--}}
{{--                                        </a>--}}
                                    </div>
                                </div>

                                <div class="checkout-item">
                                    <div class="icon-title-st1">
                                        <h6 class=""> <span class="ico me-2 cr-gray"> <i class="fas fa-box-open-full"></i> </span> <span class="txt"> {{__('web.orderDetails')}} </span> </h6>
                                    </div>
                                    @foreach($products as $row)
                                        <div class="gray-box p-4 bg-light1 mt-4">
                                        <h6 class="mb-1"> {{__('web.num')}} {{$loop->index + 1}} <small class="cr-gray"> ({{$row->sum('count')}} {{__('web.products')}}) </small> </h6>
                                        <p> {{__('web.get_it')}} <span class="cr-blue"> {{$tomorrow}} </span> </p>
                                        <div class="prods mt-4">
                                            <div class="row gx-3">
                                                @foreach($row as $product)
                                                    <div class="col-lg-6">
                                                        <div class="item bg-white">
                                                            <div class="row">
                                                                <div class="col-lg-4">
                                                                    <div class="img">
                                                                        <img src="{{asset($product->product->image ?? '/assets/web/images/products/1.jpg')}}" alt="">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-8">
                                                                    <div class="info py-4 pe-4">
                                                                        <div class="fs-6 mb-3"> {{$product->product->currentDescription->title}} </div>
                                                                        <div class="price-wrapper"> <span class="price"> {{$product->product->price['cost'] * $product->count }} </span> <small> {{__('web.sar')}} </small> </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                        <a  class="brand">
                                            <img src="{{ asset($row[0]->product->brand->logo) }}" alt="">
                                        </a>
                                    </div>
                                    @endforeach
                                </div>
                                <div class="checkout-item">
                                    <div class="icon-title-st1">
                                        <h6 class=""> <span class="ico me-2 cr-gray"> <i class="fas fa-credit-card"></i> </span> <span class="txt"> {{__('web.checkout')}} </span> </h6>
                                    </div>
                                    <div class="payment-way gray-box p-4 bg-light1">
                                        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                                            @foreach($payment_ways as $key=>$row)
                                                <li class="nav-item" role="presentation">
                                                    <button onclick="changeStatus(this)" data-id="{{$row->id}}" class="nav-link {{$key == 0 ? 'active':'' }}" id="pills-home-tab{{$row->id}}" data-bs-toggle="pill" data-bs-target="#pills-home{{$row->id}}" type="button" role="tab" aria-controls="pills-home{{$row->id}}" aria-selected="true">

                                                        <span class="icon"> <img src="{{asset($row->image)}}" alt=""> </span>
                                                        <div class="txt">
                                                            <h6>{{$row->title}}</h6>
                                                            <small class="txt cr-gray"> {{$row->description}} </small>
                                                        </div>

                                                    </button>
                                                </li>
                                            @endforeach

                                        </ul>
                                        <div class="tab-content" id="pills-tabContent">
                                            @foreach($payment_ways as $key=>$row)
                                                <div class="tab-pane fade {{$key == 0 ? 'show active' : ''}}" id="pills-home{{$row->id}}" role="tabpanel" aria-labelledby="pills-contact-tab{{$row->id}}" tabindex="0">
                                                    <h5> {{$row->title}} </h5>
                                                    <div class="text"> {{$row->description}} </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                                <div class="btns">
                                    <div class="row align-items-center">
                                        <div class="col-lg-6">
                                            <button type="submit" class="butn w-100 mt-4 d-none d-lg-block">
                                                <span> {{__('web.press_to_order')}} </span>
                                            </button>
                                        </div>

                                        <div class="col-lg-6">
                                            <h5 class="mt-4"> {{__('web.total_order')}} : <span class="cr-blue" id="total_order">  </span> <small>{{__('web.sar')}}</small> </h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="sticky-card mb-4">
                                <div class="price-box">
                                    <button type="submit" class="butn w-100">
                                        <span> {{__('web.press_to_order')}} </span>
                                    </button>
                                    <div id="calculate"></div>
                                </div>
                                <div class="text-item mt-4">
                                    <h6 class="cr-gray"> <i class="fas fa-lock"></i> <span class="txt ms-2"> {!! $page->currentDescription->title !!} </span> </h6>
                                    <small class="cr-gray pe-lg-4 mt-2"> {!! $page->currentDescription->description !!} </small>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </section>


        @include('web.layouts.footer_banner')
    </main>


@endsection

@section('inject_js')
    <script>
        let url_calculate = "{{route('web.cart.calculate')}}"
        let url_coupon = "{{route('web.check.coupon')}}"
    </script>
    <script src="{{url('')}}/assets/web/js/custom/cart.js"></script>
@endsection