@extends('frontend.frontend_layout')

@section('content')
<main id="main">
    <!-- ======= About Section ======= -->
    <section class="pt-150">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <div class="section-title title-style-center_text style2">
                        <div class="title-header">
                            <h2 class="title">Checkout</h2>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="section-right">
                        <div class="checkout-content checkout-cart">
                            <h2 class="secondary-title">Shopping Cart</h2>
                            <div class="box-inner">
                                <div class="cart-container" id="cart">
                                    <table class="table table-bordered table-responsive">
                                        <thead>
                                            <tr class="text-center">
                                                <th>Image</th>
                                                <th>Product Name</th>
                                                {{-- <th>Menu</th> --}}
                                                <th>Price</th>
                                                <th>Qty</th>
                                                <th>Total</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @php
                                                $totalPrice = 0;
                                            @endphp
                                            @foreach ($getCartItems as $item)
                                            <tr>
                                                <td>
                                                    @if (isset($item->product->image) && file_exists($item->product->image))
                                                        <img class="img-fluid" width="50" src="{{ asset($item->product->image) }}" />
                                                    @else
                                                        <img class="img-fluid" width="50" src="{{ asset('common/no-image.jpg') }}" />
                                                    @endif
                                                </td>
                                                <td class="txt-cart">{{ $item->product->name }}</td>
                                                {{-- <td class="txt-cart">Fish</td> --}}
                                                <td class="txt-cart">$ {{ $item->product->price }}</td>
                                                <td class="txt-cart">{{ $item->quantity }}</td>
                                                <td class="txt-cart">$ {{ $item->product->price * $item->quantity }}</td>
                                            </tr>  
                                            @php
                                                $totalPrice = $totalPrice + ($item->product->price * $item->quantity);
                                            @endphp
                                            @endforeach                                            
                                        </tbody>
                                    </table>
                                    <table class="table table-bordered table-hover">
                                        <tfoot>
                                            <tr>
                                                <td colspan="4" class="text-left">Total:</td>
                                                <td class="text-right" style="text-align: right;">$ {{ $totalPrice }}</td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <div class="section-left">
                        <div class="checkout-content checkout-payment-form">
                            <h2 class="secondary-title">Payment Method</h2>
                            @if ($errors->any())
                                <div class="alert alert-danger alert-dismissible fade show pt-2" role="alert">
                                    <strong>Error: </strong> Please check input filed! Then try again.
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"
                                        aria-label="Close"></button>
                                </div>
                            @endif
                            <form action="{{ route('order.store') }}" method="post">
                                @csrf
                                <div class="box-inner">
                                    <div id="payment-new" style="display: block">
                                        <div class="form-group pb-3 pt-3 company-input display-flex">
                                            <div class="form-check pb-2" style="">
                                                <input class="form-check-input" type="radio" name="order_type" id="pickup" value="pickup" required />
                                                <label class="form-check-label" for="pickup">
                                                    Pickup (15 Minutes)
                                                </label>
                                            </div> 
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" required name="order_type" id="delivery" value="delivery" />
                                                <label class="form-check-label" for="delivery">
                                                    Delivery (30 Minutes)
                                                </label>
                                            </div> 
                                        </div>
                                        <div id="delivery_address_info" class="display-none">
                                            <div class="form-group pb-3 company-input">
                                                <input type="tel" name="phone" id="checkout-phone" placeholder="Phone *"
                                                    class="form-control" @auth value="{{ Auth::user()->phone }}" @endauth />
                                                    @error('phone')
                                                        <div class="text-danger">{{ $message }}</div>
                                                    @enderror
                                            </div>
                                            <div class="form-group pb-3">
                                                <input type="text" name="name" id="checkout-name"  placeholder="Name *"
                                                    class="form-control" @auth value="{{ Auth::user()->name }}" @endauth />
                                                    @error('name')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <div class="form-group pb-3">
                                                <input type="email" placeholder="Email *" name="email" id="checkout-email"  class="form-control" @auth value="{{ Auth::user()->email }}" @endauth />
                                                @error('email')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>                                       
                                            <div class="form-group pb-3">
                                                <textarea name="address" id="checkout-address" placeholder="Address *"
                                                    class="form-control" rows="2">@auth {{ Auth::user()->address }} @endauth</textarea>
                                                @error('address')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                             <div class="form-group pb-3 company-input">
                                                <input type="text" name="city" id="checkout-city" placeholder="city *"
                                                    class="form-control" @auth value="{{ Auth::user()->city }}"
                                                    @endauth />
                                                @error('city')
                                                <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <div class="form-group pb-3 company-input">
                                                <input type="text" name="state" id="checkout-state" placeholder="state *"
                                                    class="form-control" @auth value="{{ Auth::user()->state }}"
                                                    @endauth />
                                                @error('state')
                                                <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <div class="form-group pb-3 company-input">
                                                <input type="text" name="zip_code" id="checkout-zip-code" placeholder="Zip code *"
                                                    class="form-control" @auth value="{{ Auth::user()->zip_code }}"
                                                    @endauth />
                                                @error('zip_code')
                                                <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="form-group pb-3 pt-3 company-input">
                                            <label class="pb-2" style="font-weight: 700; color: #444444">Payment Method :</label>
                                            {{-- <div class="form-check pb-2">
                                                <input class="form-check-input" type="radio" name="payment_method" id="cod" value="COD" />
                                                <label class="form-check-label" for="cod">
                                                   Cash On Delivery
                                                </label>
                                            </div>  --}}
                                            <div class="form-check pb-2">
                                                <input class="form-check-input" type="radio" required name="payment_method" id="papal" value="Paypal" />
                                                <label class="form-check-label" for="papal">
                                                   Paypal
                                                </label>
                                            </div> 
                                            <div class="form-check pb-2">
                                                <input class="form-check-input" type="radio" required name="payment_method" id="stripe" value="Stripe" />
                                                <label class="form-check-label" for="stripe">
                                                    Credit card
                                                </label>
                                            </div> 
                                        </div>
                                        <div class="text-center">
                                            <button type="submit" class="book-a-table-btn bg-success mt-4">Order Confirm</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End About Section -->
</main>
<!-- End #main -->
@endsection

{{-- // $(".show_search_product").html(result); --}}
@section('page-scripts')
<script>
    // console.log('kddd');
    //  search product by ajax
    $("body").on("keyup", "#checkout-phone", function () {
        let checkoutPhoneValue = $("#checkout-phone").val();
        console.log(checkoutPhoneValue);
        // return false;
        $.ajax({
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
            },
            type: "POST",
            url: '{{route("get-search-user-details")}}',
            data: {
                phone: checkoutPhoneValue,
            },
            success: function (result) {
                $("#checkout-name").val(result.name);
                $("#checkout-email").val(result.email);
                $("#checkout-address").val(result.address);
                $("#checkout-city").val(result.city);
                $("#checkout-state").val(result.state);
                $("#checkout-zip-code").val(result.zip_code);
            },
        });
    });
</script>
@endsection