@extends('includes.layout') <!-- Extend the layout -->

@section('content')
    <div class="bg-main-body">
        <div class="container rounded">
            <div class="row py-5">
                <!-- Start cart -->
                <div class="col-md-7">
                    <div class="p-2">

                        <div class="row">
                            <div class="col-12 mb-1">
                                <div class="row">
                                    <div class="col-2">
                                        <p>Cart</p>
                                    </div>
                                    
                                    <div class="col-10 text-end">
                                        <p class="mb-0 text-dim tx-12"><span class="fw-bold">Service Provider:</span>
                                            @foreach ($vender as $index => $vendor)
                                                {{ $vendor->name }}
                                                @if (!$loop->last)
                                                    ,
                                                @endif
                                            @endforeach
                                        </p>
                                    </div>

                                </div>
                                <div class="bg-dim p-2">
                                    <div class="row">
                                        <div class="col-8">
                                            <p class="text-decoration-none   fw-bold   active mb-0 tx-12">Services</p>
                                        </div>
                                        <div class="col-2">
                                            <p class="mb-0 fw-bold tx-12">Quantity </p>
                                        </div>
                                        <div class="col-2">
                                            <p class="mb-0   fw-bold  tx-12">Price</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Start Row -->
                        @php
                            $totalPrice = 0;
                        @endphp
                        <form action="{{ route('make.order') }}" method="POST">
                            @csrf
                            @foreach ($checkout as $checkoutval)
                            {{-- @dd($checkoutval) --}}
                                @php  $totalPrice += (int)$checkoutval['price']; @endphp
                                <div class="dashed-dot mt-1 px-1">
                                    <div class="row align-items-center pb-1">
                                        <div class="col-8">
                                        <input type="hidden" name="incData[]"
                                                value="{{ $checkoutval['incData'] }}">
                                            <input type="hidden" name="service_id[]"
                                                value="{{ $checkoutval['serviceId'] }}">
                                            <input type="hidden" name="subservice_id[]"
                                                value="{{ $checkoutval['subserviceId'] }}">
                                            <input type="hidden" name="quantity[]" value="{{ $checkoutval['quantity'] }}">
                                            <input type="hidden" name="price[]" value="{{ $checkoutval['price'] }}">
                                            <input type="hidden" name="duration[]"
                                                value="{{ $checkoutval['duration'] }}">
                                            <input type="hidden" name="venderid[]" value="{{ $checkoutval['vender_id'] }}">

                                            <p class="tx-13  mb-0">{{ $checkoutval['serviceName'] }} </p>
                                            <!-- <p class="tx-13 text-dim mb-0">{{-- $checkoutval['subserviceName'] --}}</p> -->
                                            <span class="tx-12 text-dim"><i
                                                    class="fa fa-clock"></i>N/A min                                        </span>
                                        </div>
                                        <div class="col-2">
                                            <span class="mx-1  tx-14">{{ $checkoutval['quantity'] }} items</span>
                                        </div>
                                        <div class="col-2">
                                           
                                            @php 
                                                $total = $checkoutval['price'];
                                                $unitPrice = (float) $checkoutval['price'] / (int) $checkoutval['quantity'];
                                            @endphp

                                            <span class="mx-1 tx-14">
                                                {{-- $unitPrice }} * {{ $checkoutval['quantity'] --}} {{--=--}} {{ $total }}
                                            </span>

                                        </div>
                                    </div>
                                </div>
                            @endforeach

                            <!-- End Row-->
                            <!-- Start Row -->

                            <!-- End Row -->

                            <div class="row align-items-center mt-3">
                                <div class="col-10 text-start">
                                    <p class="tx-13 fw-bold mb-0">Total</p>
                                    <p class="tx-13 text-dim mb-1">{{ count($checkout) }} items</p>

                                </div>
                                <div class="col-2" >

                                    <p class="tx-14"><strong>₹{{ $totalPrice }}</strong></p>
                                </div>

                            </div>

                    </div>
                    <!-- End cart -->
                </div>

                <div class="col-md-5">
                    <div class="bg-white rounded p-2">
                        <div class="p-1">
                            <div class="row">
                                <div class="col-12">
                                    <p>Select Your Appointment Date</p>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12 mb-2">
                                    <label class="form-label">Booking Date</label>
                                    <input class="form-control" type="date" name="booking_date" id="BookingDate">
                                    @if ($errors->has('booking_date'))
                                        <span class="error"
                                            style="color: red;">{{ $errors->first('booking_date') }}</span>
                                    @endif
                                </div>
                                {{--  <div class="col-md-12 mb-3">
                                    <label class="form-label">Time</label>
                                    <input class="form-control" type="time" name="booking_time">
                                </div>  --}}
                                <div class="text-center ">
                                    <h6 id="selectedDate"></h6>

                                    <button class="btn hax tx-13 px-5 my-2 text-white" type="submit">Payment</button>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                </form>
                <!-- End cart -->

            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

    <script>
        $(document).ready(function() {
            $("#BookingDate").on("change", function() {

                // Get the selected date value
                var selectedDate = $(this).val();


                // Parse the original date using Moment.js
                var parsedDate = moment(selectedDate);

                // Format the date in a month-wise format
                var formattedDate = parsedDate.format("DD MMMM YYYY");

                // Update the content of the span with the selected date
                $("#selectedDate").text(formattedDate);
            });
        });
    </script>
@endsection