@extends('layouts.portal_theme_01')
@section('customcss')
    <style>
        .card-img-top {
            height: 200px; /* Ensures all images are the same height */
            object-fit: cover; /* Maintains aspect ratio and ensures image fills the container */
        }

        .card-body {
            display: flex;
            flex-direction: column;
            justify-content: space-between; /* Aligns content properly inside the card */
        }
    </style>
    @section('content')
        @php
            $cart = $data['cart']??[];
            $total =0;
        @endphp

        <div class="container pb-5">
            @if($cart)
                @php
                    $cart = $data['cart']??[];
                    $products = $data['products']??[];
                    $total =0;
                  $product_ids = [];
                  $name_parts = explode(" ", $cart['cust_name'])??[];
                @endphp

            <div class="row mt-3">
                <div class="col-lg-7">
                    @foreach($products as $product)
                        @php
                            $product_ids[] = $product['product_id'];
                        @endphp
                        <div class="card">
                            <div class="card-header">

                                <div class="d-flex flex-row mb-3 justify-content-between">
                                    <div class="p-2"><h2>{{ $product['product_name'] }}</h2></div>
                                    <div class="p-2">
                                        <button   class="btn btn-danger "  data-bs-toggle="modal" data-bs-target="#confDelCart" >
                                            <i class="bi bi-trash color-danger"></i>
                                        </button>
                                    </div>

                                </div>


                            </div>
                            <div class="card-body">
                                <div class="d-flex flex-row mb-3">

                                    @if(!empty($product['images']))
                                        <div class="p-2">
                                            <img width="90px" height="90px" class="img-thumbnail"
                                                 alt="{{ $product['product_name'] }}"
                                                 src="{{ $product['images'][0]['image_url'] }}">
                                        </div>
                                    @endif

                                    <div class="p-2">
                                        <table class="table">
                                            <tr>
                                                <th>Qty</th>
                                                <th>Unit Cost</th>
                                                <th>Package Cost</th>
                                                <th>GST</th>
                                                <th>Discount</th>
                                                <th>Offer Price</th>
                                            </tr>
                                            <tr>
                                                <td>{{ $product['qty'] }}</td>
                                                <td>{{ $product['unit_cost'] }}</td>
                                                <td>{{ $product['package_cost'] }}</td>
                                                <td>{{ $product['cgst'] + $product['sgst'] }}</td>
                                                <td>{{ $product['discount'] }}</td>
                                                <td class="text-end">
                                                    @php
                                                        $total = (( $product['unit_cost']  + $product['cgst'] + $product['sgst'] - $product['discount']) * $product['qty'] ) + $product['package_cost'];
                                                    @endphp
                                                    <strong>{{  $total }}</strong> ₹
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                    @endforeach

                </div>
                <div class="col-lg-4">
                    {{--  <form action="{{ URL::to('/webview/start-checkout') }}" method="get">--}}
                    <form action="{{ URL::to('/shopping/start-checkout') }}" method="post">
                        @csrf
                        <div class="card">
                            <div class="card-body">
                                <p class="h7 fw-bold mb-1">Pay this Invoice</p>
                                <p class="textmuted h8 mb-2">Make payment for this invoice by filling in the details</p>
                                <div class="form">
                                    <div class="row">
                                        <label for="firstname" class="col-sm-4 col-form-label col-form-label-sm">
                                            First Name:
                                        </label>
                                        <div class="col-sm-8">
                                            <input type="text" class="form-control" required id="firstname"
                                                   name="firstname" value="{{ $name_parts[0]??"" }}">
                                        </div>
                                    </div>
                                    <div class="row mt-2">
                                        <label for="lastname" class="col-sm-4 col-form-label col-form-label-sm">
                                            Last Name:
                                        </label>
                                        <div class="col-sm-8">
                                            <input type="text" class="form-control" required id="lastname"
                                                   name="lastname" value="{{ $name_parts[2]??"" }}">
                                        </div>
                                    </div>

                                    <div class="row mt-2">
                                        <label for="email"
                                               class="col-sm-4 col-form-label col-form-label-sm">Email:</label>
                                        <div class="col-sm-8">
                                            <input type="email" class="form-control" id="email" name="email" required>
                                        </div>
                                    </div>

                                    <div class="row mt-2">
                                        <label for="phone"
                                               class="col-sm-4 col-form-label col-form-label-sm">Phone:</label>
                                        <div class="col-sm-8">
                                            <input type="text" class="form-control" required id="phone" name="phone"
                                                   value="{{$cart['cust_phone']}}">
                                        </div>
                                    </div>

                                    <div class="row mt-2">
                                        <div class="col-sm-12 text-center mt-2">
                                    <input type="hidden" name="amount" value="{{ $total  }}">
                                    <button class="btn btn-success rounded-pill  h8" type="submit" value="paynow">
                                        Checkout
                                    </button>
                                    </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
            @else

                    <div class="row">

                        <div class="col-md-12">


                                    <div class="col-sm-12 empty-cart-cls text-center">
                                        <img src="{{ URL::to('/public/ecom/images/cart.png') }}" width="130" height="130" class="img-fluid mb-4 mr-3">
                                        <h3><strong>Your Cart is Empty</strong></h3>
                                        <h4>Add some ehtnic cloths which make you :)</h4>
                                        <a  href="{{ URL::to('/products/browse') }}?{{ http_build_query(['category' => ['ethnic-dress']]) }}" class="btn btn-primary cart-btn-transform m-3" data-abc="true">continue shopping</a>


                                    </div>


                        </div>

                    </div>

            @endif
        </div>

        <form method="POST"  action="{{ URL::to('/shopping/remove-cart') }}" >
            @csrf
        <div class="modal fade" id="confDelCart" tabindex="-1" aria-labelledby="DelCart" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="DelCart">Confirm Cart Deletion</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body text-center">

                        <i class="bi bi-bag-x-fill fs-1"></i>
                        <br/>
                        Are you sure you want to delete this cart?
                        You have to add product to cart again to continue shopping.
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>
                        <button type="submit" value="delete" class="btn btn-primary">Yes</button>
                    </div>
                </div>
            </div>
        </div>
        </form>



    @endsection

    @section('script')
        <script>


        </script>
    @endsection