@extends('web.layouts.base')

@section('titre')
    Panier
@endsection

@section('styles')
    <script src="{{ asset('assets/js/layout.js')}}"></script>
    <!-- custom Css-->
    <link href="{{ asset('assets/css/custom.min.css')}}" rel="stylesheet" type="text/css">
@endsection
@section('content')
    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                        <h4 class="mb-sm-0">Panier</h4>

                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="{{ route('home') }}">Dashboard</a></li>
                                <li class="breadcrumb-item active">Panier</li>
                            </ol>
                        </div>

                    </div>
                </div>
            </div>
            <!-- end page title -->
            @if (session('success'))
                <div class="alert alert-success alert-dismissible alert-label-icon rounded-label fade show" role="alert">
                    <i class="ri-notification-off-line label-icon"></i><strong>Opération réussi</strong>
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            <div class="row mb-3">
                <div class="col-xl-8">
                    <div class="row align-items-center gy-3 mb-3">
                        <div class="col-sm">
                            <div>
                                <h5 class="fs-14 mb-0">Votre panier contient (03 items)</h5>
                            </div>
                        </div>
                        <div class="col-sm-auto">
                            <a href="{{ route('achats.index')}}" class="link-primary text-decoration-underline">Continuer les achats</a>
                        </div>
                    </div>

                    @php $total = 0 @endphp
                    @if (session('cart'))
                        @foreach(session('cart') as $id => $details)
                            @php $total += $details['price'] * $details['quantity'] @endphp
                            <div class="card product">
                                <div class="card-body">
                                    <div class="row gy-3">
                                        <div class="col-sm-auto">
                                            <div class="avatar-lg bg-light rounded p-1">
                                                <img src="{{ asset('upload/'.$details['photo'])}}" alt="" class="img-fluid d-block">
                                            </div>
                                        </div>
                                        <div class="col-sm">
                                            <h5 class="fs-14 text-truncate"><a href="ecommerce-product-detail.html" class="text-dark">{{$details['product_name']}}</a></h5>
                                            <ul class="list-inline text-muted">
                                                <li class="list-inline-item">Type : <span class="fw-medium">{{ $details['type'] }}</span></li>
{{--                                                <li class="list-inline-item">Size : <span class="fw-medium">M</span></li>--}}
                                            </ul>

                                            <div class="input-step">
                                                <button type="button" class="minus">–</button>
                                                <input type="number" id="qty" name="qty" data-update="{{ $id }}"  class="product-quantity quantity cart_update" value="{{ $details['quantity'] }}" min="1" max="100">
                                                <button type="button" class="plus">+</button>
                                            </div>
                                        </div>
                                        <div class="col-sm-auto">
                                            <div class="text-lg-end">
                                                <p class="text-muted mb-1">Prix :</p>
                                                <h5 class="fs-14"><span id="ticket_price" class="product-price">{{ $details['price'] }}</span> $</h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- card body -->
                                <div class="card-footer">
                                    <div class="row align-items-center gy-3">
                                        <div class="col-sm">
                                            <div class="d-flex flex-wrap my-n1">
                                                <div data-id="{{ $id }}">
                                                    <button class="btn btn-danger cart_remove" {{--data-bs-toggle="modal" data-bs-target="#removeItemModal"--}}><i class="ri-delete-bin-fill text-white align-bottom me-1"></i> Retirer</button>
                                                </div>
                                                {{--<div>
                                                    <a href="#" class="d-block text-body p-1 px-2"><i class="ri-star-fill text-muted align-bottom me-1"></i> Add Wishlist</a>
                                                </div>--}}
                                            </div>
                                        </div>
                                        <div class="col-sm-auto">
                                            <div class="d-flex align-items-center gap-2 text-muted">
                                                <div>Total :</div>
                                                <h5 class="fs-14 mb-0">$<span class="">{{$details['price'] * $details['quantity']}}</span></h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- end card footer -->
                            </div>
                        @endforeach

                    @endif

                    <!-- end card -->

                    {{--<div class="card product">
                        <div class="card-body">
                            <div class="row gy-3">
                                <div class="col-sm-auto">
                                    <div class="avatar-lg bg-light rounded p-1">
                                        <img src="{{ asset('assets/images/products/img-7.png')}}" alt="" class="img-fluid d-block">
                                    </div>
                                </div>
                                <div class="col-sm">
                                    <h5 class="fs-14 text-truncate"><a href="ecommerce-product-detail.html" class="text-dark">Noise NoiseFit Endure Smart Watch</a></h5>

                                    <ul class="list-inline text-muted">
                                        <li class="list-inline-item">Color : <span class="fw-medium">Black</span></li>
                                        <li class="list-inline-item">Size : <span class="fw-medium">32.5mm</span></li>
                                    </ul>

                                    <div class="input-step">
                                        <button type="button" class="minus">–</button>
                                        <input type="number" class="product-quantity" value="1" min="0" max="100">
                                        <button type="button" class="plus">+</button>
                                    </div>
                                </div>
                                <div class="col-sm-auto">
                                    <div class="text-lg-end">
                                        <p class="text-muted mb-1">Item Price:</p>
                                        <h5 class="fs-14">$<span class="product-price">94.99</span></h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- card body -->
                        <div class="card-footer">
                            <div class="row align-items-center gy-3">
                                <div class="col-sm">
                                    <div class="d-flex flex-wrap my-n1">
                                        <div>
                                            <a href="#" class="d-block text-body p-1 px-2" data-bs-toggle="modal" data-bs-target="#removeItemModal"><i class="ri-delete-bin-fill text-muted align-bottom me-1"></i> Remove</a>
                                        </div>
                                        <div>
                                            <a href="#" class="d-block text-body p-1 px-2"><i class="ri-star-fill text-muted align-bottom me-1"></i> Add Wishlist</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-auto">
                                    <div class="d-flex align-items-center gap-2 text-muted">
                                        <div>Total :</div>
                                        <h5 class="fs-14 mb-0">$<span class="product-line-price">94.99</span></h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- end card footer -->
                    </div>--}}
                    <!-- end card -->

                    {{--<div class="card product">
                        <div class="card-body">
                            <div class="row gy-3">
                                <div class="col-sm-auto">
                                    <div class="avatar-lg bg-light rounded p-1">
                                        <img src="{{ asset('assets/images/products/img-3.png')}}" alt="" class="img-fluid d-block">
                                    </div>
                                </div>
                                <div class="col-sm">
                                    <h5 class="fs-14 text-truncate"><a href="ecommerce-product-detail.html" class="text-dark">350 ml Glass Grocery Container</a></h5>

                                    <ul class="list-inline text-muted">
                                        <li class="list-inline-item">Color : <span class="fw-medium">White</span></li>
                                        <li class="list-inline-item">Size : <span class="fw-medium">350 ml</span></li>
                                    </ul>

                                    <div class="input-step">
                                        <button type="button" class="minus">–</button>
                                        <input type="number" class="product-quantity" value="1" min="0" max="100">
                                        <button type="button" class="plus">+</button>
                                    </div>
                                </div>
                                <div class="col-sm-auto">
                                    <div class="text-lg-end">
                                        <p class="text-muted mb-1">Item Price:</p>
                                        <h5 class="fs-14">$<span class="product-price">24.99</span></h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- card body -->
                        <div class="card-footer">
                            <div class="row align-items-center gy-3">
                                <div class="col-sm">
                                    <div class="d-flex flex-wrap my-n1">
                                        <div>
                                            <a href="#" class="d-block text-body p-1 px-2" data-bs-toggle="modal" data-bs-target="#removeItemModal"><i class="ri-delete-bin-fill text-muted align-bottom me-1"></i> Remove</a>
                                        </div>
                                        <div>
                                            <a href="#" class="d-block text-body p-1 px-2"><i class="ri-star-fill text-muted align-bottom me-1"></i> Add Wishlist</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-auto">
                                    <div class="d-flex align-items-center gap-2 text-muted">
                                        <div>Total :</div>
                                        <h5 class="fs-14 mb-0">$<span class="product-line-price">24.99</span></h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- end card footer -->
                    </div>--}}
                    <!-- end card -->

                    <form action="{{ route('achats.store') }}" method="POST">
                        @csrf
                        @method('POST')
                        <div class="text-end mb-4">
                            <button type="submit" class="btn btn-primary btn-label right ms-auto"><i class="ri-arrow-right-line label-icon align-bottom fs-16 ms-2"></i> Commander</button>
                        </div>
                    </form>

                </div>
                <!-- end col -->

                <div class="col-xl-4">
                    <div class="sticky-side-div">
                        <div class="card">
                            {{--<div class="card-header border-bottom-dashed">
                                <h5 class="card-title mb-0">Résumé de la commande</h5>
                            </div>
                            <div class="card-header bg-soft-light border-bottom-dashed">
                                <div class="text-center">
                                    <h6 class="mb-2">Have a <span class="fw-semibold">promo</span> code ?</h6>
                                </div>
                                <div class="hstack gap-3 px-3 mx-n3">
                                    <input class="form-control me-auto" type="text" placeholder="Enter coupon code" aria-label="Add Promo Code here...">
                                    <button type="button" class="btn btn-primary w-xs">Apply</button>
                                </div>
                            </div>--}}
                            <div class="card-body pt-2">
                                <div class="table-responsive">
                                    <table class="table table-borderless mb-0">
                                        <tbody>
                                        <tr>
                                            <td>Sous Total :</td>
                                            <td class="text-end" id="">{{ $total }} $</td>
                                        </tr>
                                        <tr class="d-none">
                                            <td>Discount <span class="text-muted">(VELZON15)</span> : </td>
                                            <td class="text-end" id="">- $ 53.99</td>
                                        </tr>
                                        <tr class="d-none">
                                            <td>Shipping Charge :</td>
                                            <td class="text-end" id="">$ 65.00</td>
                                        </tr>
                                        <tr class="d-none">
                                            <td>Estimated Tax (12.5%) : </td>
                                            <td class="text-end" id="">$ 44.99</td>
                                        </tr>
                                        <tr class="table-active">
                                            <th>Total (USD) :</th>
                                            <td class="text-end">
                                                            <span class="fw-semibold" id="">
                                                                {{ $total }} $
                                                            </span>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- end table-responsive -->
                            </div>
                        </div>

                        {{--<div class="alert border-dashed alert-primary" role="alert">
                            <div class="d-flex align-items-center">
                                <lord-icon src="../../../nkmsrxys.json" trigger="loop" colors="primary:#121331,secondary:#8c68cd" style="width:80px;height:80px"></lord-icon>
                                <div class="ms-2">
                                    <h5 class="fs-14 text-primary fw-semibold"> Buying for a loved one?</h5>
                                    <p class="text-black mb-1">Gift wrap and personalised message on card, <br>Only for <span class="fw-semibold">$9.99</span> USD </p>
                                    <button type="button" class="btn ps-0 btn-sm btn-link text-primary text-uppercase">Add Gift Wrap</button>
                                </div>
                            </div>
                        </div>--}}
                    </div>
                    <!-- end stickey -->

                </div>
            </div>
            <!-- end row -->
        </div>
        <!-- container-fluid -->
    </div>
    <!-- End Page-content -->

    <div id="removeItemModal" class="modal fade zoomIn" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mt-2 text-center">
                        <lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#f7b84b,secondary:#f06548" style="width:100px;height:100px"></lord-icon>
                        <div class="mt-4 pt-2 fs-15 mx-4 mx-sm-5">
                            <h4>Etes-vous sûr ?</h4>
                            <p class="text-muted mx-4 mb-0">Etes vous sur de vouloir retirer ce produit ?</p>
                        </div>
                    </div>
                    <div class="d-flex gap-2 justify-content-center mt-4 mb-2">
                        <button type="button" class="btn w-sm btn-light" data-bs-dismiss="modal">Annuler</button>
                        <button type="button" class="btn w-sm btn-danger" id="remove-product">Oui, le retirer!</button>
                    </div>
                </div>

            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
@endsection

@section('scripts')

    {{-- <script src="{{ asset('assets/js/app.js') }}"></script> --}}

    <script type="text/javascript">

       $('.cart_remove').click(function (e) {
            e.preventDefault();
            var token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

            var ele = $(this);

            if(confirm('Voulez-vous vraiment retirer cet article ?')) {
                $.ajax({
                    url: '/backend/remove-from-cart/',
                    method: "DELETE",
                    data: {
                        _token: token,
                        id: ele.parent('div').attr('data-id')
                    },
                    success: function(response) {
                        window.location.reload()
                    }
                });
            }
        });



       $(document).ready(function()
       {
           /*$('.cart_update').change(function (e) {
               console.log('print');
               e.preventDefault();
               var token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

               var ele = this.getAttribute('data-id');

               $.ajax({
                   url: '{{ route('update_cart') }}',
                   method: "patch",
                   data: {
                       _token: token,
                       id: ele,
                       quantity: this.value
                   },
                   success: function(response) {
                       window.location.reload()
                   }
               });
           });*/
       });
    </script>
    <script src="{{ asset('assets/libs/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('assets/libs/simplebar/simplebar.min.js') }}"></script>
    <script src="{{ asset('assets/libs/node-waves/waves.min.js') }}"></script>
    <script src="{{ asset('assets/libs/feather-icons/feather.min.js') }}"></script>
    <script src="{{ asset('assets/js/pages/plugins/lord-icon-2.1.0.js') }}"></script>
    <script src="{{ asset('assets/js/plugins.js') }}"></script>
    <script src="{{ asset('assets/libs/prismjs/prism.js') }}"></script>
    <script src="{{ asset('assets/libs/list.pagination.js/list.pagination.min.js') }}"></script>
    <script src="{{ asset('dt/js/notifications/toastr/toastr.js') }}"></script>
    <!-- input step init -->
    <script src="{{ asset('assets/js/pages/form-input-spin.init.js')}}"></script>

    <!-- ecommerce cart js -->
{{--    <script src="{{ asset('assets/js/pages/ecommerce-cart.init.js')}}"></script>--}}


@endsection