@extends('front.layout.pages')
@section('title')
    @if (Mcamara\LaravelLocalization\Facades\LaravelLocalization::getCurrentLocale() == 'ar')
        السلة
    @else
        Cart
    @endif
@stop

@section('css')
    <style>
        th {
            text-align: center;
        }

        a {
            text-decoration: none !important;
        }

        .top-sec {
            background-color: #FAFAFA;

        }

        .top-sec .title {
            color: #2C113E !important;
            font-size: 25px;
            font-weight: lighter;
        }

        .top-sec i {
            color: #2C113E !important;

        }

        .top-sec .sup-title {
            color: #716F72 !important;

        }

        .table>:not(caption)>*>* {
            padding: 1.5rem 0.5rem !important;


        }

        .counter {
            width: 150px;
            display: flex;
            align-items: center;
            margin: 10px auto;

        }

        .counter input {
            width: 50px;
            line-height: 30px;
            font-size: 20px;
            display: block;
            font-size: 25px;
            user-select: none;
            background-color: white;
            border: 1px solid #DDDDDD;
            border-radius: 8px;
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            -ms-border-radius: 8px;
            -o-border-radius: 8px;
            cursor: pointer;
            padding: 8px 8px;
            text-align: center;
            margin-left: 5px;
            margin-right: 5px;
        }

        .counter span {
            color: red;
            display: block;
            font-size: 25px;
            user-select: none;
            background-color: #FAFAFA;
            border: 1px solid #DDDDDD;
            border-radius: 8px;
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            -ms-border-radius: 8px;
            -o-border-radius: 8px;
            padding: 5px 8px;
            cursor: pointer;
        }

        .delete {
            width: 40px;
            height: 40px;
            text-align: center;
            color: red;
            border-radius: 50%;
            padding-top: 7px;
            background-color: #eee;
            margin: 10px auto;
        }
    </style>
@stop
@section('content')

    <section class="top-sec py-5 wow fadeInUp " data-wow-duration="2s" data-wow-delay=".5s">
        <div class="container text-center ">
            <div class="row  align-items-center ">
                <div class="col-lg-6 @if (Mcamara\LaravelLocalization\Facades\LaravelLocalization::getCurrentLocale() == 'ar') text-lg-end @else text-lg-start @endif">
                    <p class="title">{{ __('Shopping Cart') }}</p>
                </div>
                <div class="col-lg-6 @if (Mcamara\LaravelLocalization\Facades\LaravelLocalization::getCurrentLocale() == 'ar') text-lg-start @else text-lg-end @endif">
                    <p>
                        <a href="#" class="sup-title"> <span>{{ __('Home') }} </span></a>

                        <i class="bi @if (Mcamara\LaravelLocalization\Facades\LaravelLocalization::getCurrentLocale() == 'ar') bi-caret-left-fill @else bi-caret-right-fill @endif mx-3"></i>
                        <a href="#" class="sup-title"> <span>{{ __('Cart') }}</span></a>
                    </p>
                </div>

            </div>
        </div>
    </section>


    <section style="padding-bottom: 100px;">

        <div class="container mt-5">
            <div class="d-flex">
                <h4 class="me-3">{{ __('Shopping Cart') }}</h4>
                <span style="color: #716F72;">({{ count($carts) }} {{ __('products') }})</span>
            </div>

            <div class="shadow-lg mt-3 p-5 " style="border-radius: 10px;">
                <table class="table table-bordered   " style="padding-top: 10px;">
                    <thead class="table-light " style="color:rgb(112, 109, 109) ;">
                        <tr class="">
                            <th scope="col">{{ __('Product') }}</th>
                            <th scope="col">{{ __('Product Name') }}</th>
                            <th scope="col">{{ __('Price') }}</th>
                            <th scope="col">{{ __('Quantity') }}</th>
                            <th scope="col">{{ __('Total') }} </th>
                            <th scope="col">{{ __('Action') }}</th>

                        </tr>
                    </thead>
                    <tbody class="text-center ">
                        @forelse ($carts as $cart)
                            <tr>
                                <td>
                                    <img src="{{ asset('storage/' . $cart->product->main_image) }}" width="50"
                                        class="img-fluid" alt="">
                                </td>
                                <td>
                                    <a href="{{ route('view.product',$cart->product_id) }}">
                                        @if (Mcamara\LaravelLocalization\Facades\LaravelLocalization::getCurrentLocale() == 'ar')
                                            {{ $cart->product->name_ar }}
                                        @else
                                            {{ $cart->product->name_en }}
                                        @endif
                                    </a>
                                </td>
                                <td>{{ $cart->price ?? 0 }}</td>
                                <td>
                                    <div class="counter">
                                        <span class="down" onClick='decreaseCount(event, this,{{ $cart->product_id }})'>-</span>
                                        <input type="text" value="{{ $cart->quentity }}">
                                        <span class="up" onClick='increaseCount(event, this, {{ $cart->product_id }})'>+</span>
                                    </div>
                                </td>
                                <td>{{ ($cart->price ?? 0) * $cart->quentity }}</td>
                                <td>
                                    <a href="{{ route('view.cart.destroy', $cart->id) }}">
                                        <div class="delete">
                                            <i class="bi bi-trash-fill"></i>
                                        </div>
                                    </a>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="6">{{ __('No item In Cart') }}</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>


                <div class=" mt-5">
                    <h4 class="me-3">{{ __('Cart details') }} </h4>

                    <div class="d-flex justify-content-start mt-5">
                        <div class=" d-flex flex-column border border-1 p-4 " style="color: #716F72; font-weight: bold;">
                            <div class="d-flex justify-content-between mb-2">
                                <h5 class="me-5">{{ __('Total Products') }} :</h5>
                                <h5>{{ count($carts) }}</h5>
                            </div>
                            @php
                                $totel = 0;
                                foreach ($carts as $value) {
                                    # code...
                                    $totel += $value->quentity * ($value->price ?? 0);
                                }
                            @endphp
                            <div class="d-flex justify-content-between border-1 border-top pt-3 text-dark ">
                                <h4 class="me-5">{{ __('Total Price') }} :</h4>
                                <h4>{{ $totel }}</h4>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="d-flex mt-5">
                    <a href="#" class="btn btn-danger w-25 p-2 fs-5 fw-bold " data-bs-toggle="modal"
                        data-bs-target="#product_order">{{ __('pay complete') }}</a>
                </div>
            </div>
            <div class="modal fade" id="product_order" tabindex="-1" aria-labelledby="exampleModalLabel"
                aria-hidden="true">
                <div class="modal-dialog  modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-body">
                            <form action="{{ route('view.checkout.order') }}" id="checkout_order" method="POST">
                                @csrf
                                <div class="container text-center">
                                    <div class="mt-2 mb-4 border-1 border-bottom py-3">
                                        <h2 style="color: var(--color1);" class="fw-bold">{{ __('Check Out Cart') }}</h2>
                                    </div>
                                    <div class="row text-start my-5">
                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="name" class="form-label">{{ __('Name') }}</label>
                                                <input type="text" class="form-control shadow-none" name="full_name"
                                                    id="full_name" aria-describedby="emailHelp" required>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="exampleInputEmail1"
                                                    class="form-label">{{ __('Email address') }}</label>
                                                <input type="email" class="form-control shadow-none" name="email"
                                                    id="email" aria-describedby="emailHelp" required>

                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="exampleInputPassword1"
                                                    class="form-label">{{ __('Phone No') }}</label>
                                                <input type="text " class="form-control shadow-none" name="phone"
                                                    id="phone" required>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="exampleInputPassword1"
                                                    class="form-label">{{ __('Company Name') }}</label>
                                                <input type="text " class="form-control shadow-none" name="company_name"
                                                    id="company_name">
                                            </div>
                                        </div>

                                        <div class="col-12">
                                            <div class="mb-3">
                                                <label for="exampleInputPassword1"
                                                    class="form-label">{{ __('Description') }}</label>
                                                <textarea rows="5" class="form-control shadow-none" name="message" id="message"></textarea>
                                            </div>
                                        </div>
                                        <div class="col-lg-6 mt-3">
                                            <div class="h-captcha my-0"
                                                data-sitekey="194e8efb-f32d-4d44-8ffb-b54694c2f321">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-center mb-4 ">
                                    <button type="submit" class="btn btn-top1 py-3 rounded-3 shadow shadow-sm fs-4"
                                        style="padding: 0 5rem;" id="checkout_order_submit"
                                        onclick="submitCheckoutOrder()">{{ __('Submit') }}</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>


        </div>

    </section>
@stop


@section('js')
<script>
    function increaseCount(a, b, id) {
        var input = b.previousElementSibling;
        var value = parseInt(input.value, 10);
        value = isNaN(value) ? 0 : value;
        value++;
        input.value = value;
        $.ajax({
            type: 'post',
                url: "{{ route('view.cart.increase.quentity') }}",
            data: {
                '_token': "{{csrf_token()}}",
                'id' :id
            },
            success: function (data) {
            }, error: function (reject) {
            }
        });
    }

    function decreaseCount(a, b, id) {
        var input = b.nextElementSibling;
        var value = parseInt(input.value, 10);
        if (value > 1) {
            value = isNaN(value) ? 0 : value;
            value--;
            input.value = value;
        }


        $.ajax({
            type: 'post',
                url: "{{ route('view.cart.decrease.quentity') }}",
            data: {
                '_token': "{{csrf_token()}}",
                'id' : id
            },
            success: function (data) {

            }, error: function (reject) {
            }
        });
    }

  </script>
@stop