@extends('layouts.web')

@section('content')
<section class="intenal-heading">
    <div class="container">
        <div class="col-12">
            <h2>Appointment</h2>
            <a href="{{ route('homepage') }}">Home</a>> <span>Appointment</span>
        </div>
    </div>
</section>

<section class="contact-info contact-page-main 100-vh">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="steps-main-cart">
                    <div class="row mt-3">
                        <div class="col-12">
                            <h2 class="booking-heading">Your appointment details:</h2>
                        </div>
                    </div>
                    <table class="table">
                        <thead>
                            <tr>
                                <th scope="col">Product</th>
                                <th scope="col">Price</th>
                                <th scope="col">Quantity</th>
                                <th scope="col">Subtotal</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row">
                                    <div class="d-inline float-start">
                                    <img src="{{ $data['product_img'] }}" width="100" />
                                    </div>
                                    <div  class="d-inline float-start ms-0 ms-md-3">
                                    <h4>{{$data['service']->name}}</h4>
                                    <p>Appointment Details:</p>
                                    <p>Date: {{ $data['appointment_date']}}</p>
                                    <p>Time: {{ date('h:i A',strtotime($data['from_time'])) }}</p>
                                    </div>
                                </th>
                                <td>{{ '$'.number_format($data['price'], 2) }}</td>
                                <td>1</td>
                                <td>{{ '$'.number_format($data['price'], 2) }}</td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="row">
                        <div class="col-md-6 col-12"></div>
                        <div class="col-md-6 col-12">
                            <div class="booking-services-card booking-cart text-end">
                                <h4>Cart Totals</h4>
                                <table class="table">

                                    <tbody>
                                        <tr>
                                            <td scope="row">Subtotal</td>
                                            <td class="text-right">{{ '$'.number_format($data['price'], 2) }}</td>
                                        </tr>
                                        <tr>
                                            <td scope="row">Total</td>
                                            <td class="text-right">{{ '$'.number_format($data['price'], 2) }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-4 mt-3 text-start">
                            <button type="button" class="btn book-back" onclick=" window.history.back()">Back</button>
                        </div>

                        <div class="col-8 mt-3 text-right">
                            <form action="{{ route('checkout') }}" method="post">
                                @csrf
                                <button type="submit" class="btn book-next">Proceed to checkout</button>
                            </form>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection