@extends('web.layouts.container')
@section('css')
    <style>

        .thanks-pg{
            padding: 100px 0;
        }

        .thanks-pg .inner{
            padding: 5vw;
            box-shadow: 0 0 30px #0001;
            border-radius: 20px;
            background-color: #fff;
        }

        .thanks-pg .info{
            line-height: 2;
        }

        .thanks-pg .img{
            text-align: center;
            height: 100px;
            margin-bottom: 10px;
            opacity: 0.7;
        }

        .thanks-pg .order_summary{
            padding: 30px;
            border-radius: 15px;
            background-color: #f9f9f9;
            margin-top: 30px;
        }

        .thanks-pg .order_summary li{
            display: flex;
            justify-content: space-between;
            padding: 15px 0;
            border-bottom: 1px solid #9993;
            font-size: 14px;
        }

        .thanks-pg .order_summary li:last-of-type{
            border: 0;
        }
        .color_p{
            width: 20px;
            height: 20px;
            border-radius: 50%;
        }
        
        p{
            margin-bottom: 0;
        }
        
        .table-bordered td, .table-bordered th {
            border: 0;
        }
        
        @media only screen and (max-width: 480px) {

            .thanks-pg .order_summary li{
                font-size: 12px;
                display: block;
            }

            .thanks-pg .order_summary li strong{
                display: block;
                margin-bottom: 10px;
            }
            
            .thanks-pg .table {
                font-size: 10px;
            }
            
            .h4, h4 {
                font-size: 1rem;
            }
        }
    </style>
@endsection
@section('content')
    <section class="thanks-pg bg-light">
        <div class="container">
            <div class="inner">
                <div class="row justify-content-center">
                    <div class="col-lg-8">
                        <div class="img">
                            <img src="{{asset('assets/web/images/icons/success.png')}}" alt="">
                        </div>
                        <div class="info text-center">
                            <h3 class="mt-3"> {{$details['user_name']}} </h3>
                            <h5 class="mt-3">{{__('products.thanks_page_welcome')}}</h5>
                            <h6 class="mt-3"> {{__('products.thanks_page_title')}}</h6>

                            {{--                            <p class="mt-3"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas aspernatur maxime hic iste ullam accusamus vel nisi tempora! Natus, distinctio. </p>--}}
                        </div>

                    </div>
                    <table class="table table-striped table-bordered text-center mt-5 col-md-10">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>{{__('products.name')}}</th>
                            <th>{{__('products.colors')}}</th>
                            <th>{{__('products.description')}}</th>
                            <th>{{__('products.quantity')}}</th>
                            <th>{{__('products.price')}}</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($details['items']['names'] as $key => $item)
                            <tr>
                                <td>{{$loop->iteration}}</td>
                                <td>{{$item}}</td>
                                <td class="color_td d-flex justify-content-center"><p style="background-color: {{$details['items']['colors'][$key]}}" class="color_p"></p></td>
                                <td>{{$details['items']['description'][$key]}}</td>
                                <td>{{$details['items']['amount'][$key]}}</td>
                                <td>{{$details['items']['price'][$key]}}</td>
                            </tr>
                        @endforeach

                        </tbody>
                    </table>
                </div>
                <div class="row justify-content-center">
                    <div class="col-lg-11">
                        <div class="order_summary">
                            <h4 class="mb-3">{{__('products.order_summary')}}</h4>
                            <ul class="m-0">
                                <li>
                                    <strong> {{__('products.items_numbers')}} : </strong>
                                    <span>{{$details['items_counts']}}</span>
                                </li>
                                <li>
                                    <strong> {{__('products.total')}} : </strong>
                                    <span>{{$details['net_total'] .' '. __('products.sar')}}</span>
                                </li>
                                <li>
                                    <strong> {{__('products.added_value')}} : </strong>
                                    <span>{{$details['added_value_amount'] .' '. __('products.sar')}}</span>
                                </li>
                                <li>
                                    <strong> {{__('products.shipping_value')}} : </strong>
                                    <span> {{$details['shipping_value'] .' '. __('products.sar')}} </span>
                                </li>
                                <li>
                                    <strong> {{__('products.sum_total')}} : </strong>
                                    <span> {{$details['order_total'] .' '. __('products.sar')}} </span>
                                </li>
                                <li>
                                    <strong> {{ __('products.expected_delivery_time')}} : </strong>
                                    <span> {{$expectedTime}} </span>
                                </li>
                                <li>
                                    <strong> {{__('products.address')}} : </strong>
                                    <span> {{$details['address']}}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('inner_js')

@endsection