@extends('website.layouts.index')
@section('content')
    <div class="content">
        <div class="container">
            <div class="row">

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

                    <div class="login-back">
                        <a href="{{route('service')}}"><i class="feather-arrow-left"></i> Back</a>
                    </div>

                    <!-- Booking Step -->
                    <ul class="step-register row">
                        <li class="active col-md-4 first-step">
                            <div class="multi-step-icon">
                                <img src="{{ asset('assets/img/icons/calendar-icon.svg') }}" alt="img">
                            </div>
                            <div class="multi-step-info">
                                <h6>Appointment</h6>
                                <p>Choose time & date for the service</p>
                            </div>
                        </li>
                        <li class="col-md-4 second-step">
                            <div class="multi-step-icon">
                                <img src="{{ asset('assets/img/icons/wallet-icon.svg') }}" alt="img">
                            </div>
                            <div class="multi-step-info">
                                <h6>Appointment time date</h6>
                                <p>Select Payment Gateway</p>
                            </div>
                        </li>
                        <li class="col-md-4 third-step">
                            <div class="multi-step-icon">
                                <img src="{{ asset('assets/img/icons/book-done.svg') }}" alt="img">
                            </div>
                            <div class="multi-step-info">
                                <h6>Done </h6>
                                <p>Completion of Booking</p>
                            </div>
                        </li>
                    </ul>

                    <!-- /Booking Step -->

                    <div class="first-block">
                        <!-- Appointment -->
                        <div class="booking-service">
                            <div class="row align-items-center">
                                <div class="col-lg-6">
                                    <div class="service-book">
                                        <div class="service-book-img">
                                            <img src="{{ asset($service->image ? $service->image : 'assets/img/services/service.jpg') }}"
                                                alt="img">
                                        </div>
                                        <div class="serv-profile">
                                            <span class="badge">Home Clean</span>
                                            <h2>{{ $service->title }}</h2>
                                            <ul>
                                                <li class="serv-pro">
                                                    <img src="{{ asset('assets/img/profiles/avatar-01.jpg') }}"
                                                        alt="img">
                                                    <div class="serv-pro-info">
                                                        <h6>Thomas Herzberg</h6>
                                                        <p class="serv-review"><i class="fa-solid fa-star"></i> <span>4.9
                                                            </span>(255 reviews)</p>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="row align-items-center">
                                        <div class="col-md-7 col-sm-6">
                                            <div class="provide-box">
                                                <span><i class="feather-phone"></i></span>
                                                <div class="provide-info">
                                                    <h6>Phone</h6>
                                                    <p>+1 888 888 8888</p>
                                                </div>
                                            </div>
                                            <div class="provide-box">
                                                <span><i class="feather-mail"></i></span>
                                                <div class="provide-info">
                                                    <h6>Email</h6>
                                                    <p>thomas@gmail.com</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-5 col-sm-6">
                                            <div class="provide-box">
                                                <span><i class="feather-map-pin"></i></span>
                                                <div class="provide-info">
                                                    <h6>Address</h6>
                                                    <p>{{ $service->address }}</p>
                                                </div>
                                            </div>
                                            <div class="provide-box">
                                                <span><img src="{{ asset('assets/img/icons/service-icon.svg') }}"
                                                        alt="img"></span>
                                                <div class="provide-info">
                                                    <h6>Service Amount</h6>
                                                    <h5>${{ number_format($service->amount, 2, '.', ',') }} </h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="book-form">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="col-form-label">City</label>
                                        <select class="select">
                                            <option>Select City</option>
                                            <option>Tornoto</option>
                                            <option>Texas</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="col-form-label">State</label>
                                        <select class="select">
                                            <option>Select State</option>
                                            <option>Tornoto</option>
                                            <option>Texas</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="col-form-label">Country</label>
                                        <select class="select">
                                            <option>Select Country</option>
                                            <option>US</option>
                                            <option>UK</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /Appointment -->


                        <!-- Appointment Date & Time -->
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="book-title">
                                    <h5>Appointment Date</h5>
                                </div>
                                <div id="datetimepickershow"></div>
                            </div>
                            <div class="col-lg-8">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="book-title">
                                            <h5>Appointment Time</h5>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <input type="time" class="form-control w-100" />
                                    </div>
                                    <div class="col-md-6">
                                        <input type="time" class="form-control w-100" />
                                    </div>
                                </div>
                                <div class="book-submit text-end">
                                    <a href="#" class="btn btn-secondary">Cancel</a>
                                    <div class="btn btn-primary go-to-second">Book Appointment</div>
                                </div>


                            </div>
                        </div>
                        <!-- /Appointment Date & Time -->
                    </div>

                    <div class="second-block" style="display: none;">
                        <div class="row">
							<div class="col-lg-10 mx-auto">
								<div class="row">
									<div class="col-lg-6">
										<h5 class="pay-title">Payment Methods</h5>
										<div class="payment-card payment-bg">
											<div class="payment-head">
												<div class="payment-title">
													<label class="custom_radio">
														<input type="radio" name="payment"  class="card-payment" checked="">
														<span class="checkmark"></span>
													</label>
													<h6>Wallet</h6>
												</div>
											</div>
										</div>
										<div class="payment-card">
											<div class="payment-head">
												<div class="payment-title">
													<label class="custom_radio">
														<input type="radio" name="payment" class="card-payment">
														<span class="checkmark"></span>
													</label>
													<h6>Cash On Delivery</h6>
												</div>
											</div>
										</div>
										<div class="payment-card">
											<div class="payment-head">
												<div class="payment-title">
													<label class="custom_radio credit-card-option" >
														<input type="radio" name="payment" class="card-payment">
														<span class="checkmark"></span>
													</label>
													<h6>Credit / Debit Card</h6>
												</div>
											</div>
										</div>
										<div class="payment-list" style="display:none">
											<div class="row align-items-center">
												<div class="col-md-12">
													<div class="form-group">
														<label class="col-form-label">Name on Card</label>
														<input class="form-control" type="text" placeholder="Enter Name on Card">
													</div>
												</div>
												<div class="col-md-8">
													<div class="form-group">
														<label class="col-form-label">Card Number</label>
														<input class="form-control" placeholder="**** **** **** ****" type="text">
													</div>
												</div>
												<div class="col-md-4 text-end">
													<div class="form-group">
														<label class="col-form-label">&nbsp;</label>
														<img src="{{asset('assets/img/payment-card.png')}}" class="img-fluid" alt="">
													</div>
												</div>
												<div class="col-md-6">
													<div class="form-group">
														<label class="col-form-label">Expiration date</label>
														<input class="form-control" placeholder="MM/YY" type="text">
													</div>
												</div>
												<div class="col-md-6">
													<div class="form-group">
														<label class="col-form-label">Security code</label>
														<input class="form-control" placeholder="CVV" type="text">
													</div>
												</div>
											</div>
										</div>
									</div>			
									<div class="col-lg-6">
										<h5 class="pay-title">Booking Summary</h5>
										<div class="summary-box">
											<div class="booking-info">
												<div class="service-book">
													<div class="service-book-img">
														<img src="{{ asset($service->image ? $service->image : 'assets/img/services/service.jpg') }}" alt="img">
													</div>
													<div class="serv-profile">
														<span class="badge">Home Clean</span>
														<h2>{{$service->title}}</h2>
														<ul>
															<li class="serv-pro">
																<img src="{{asset('assets/img/profiles/avatar-01.jpg')}}" alt="img">
															</li>
															<li class="serv-review"><i class="fa-solid fa-star"></i> <span>4.9 </span>(25 reviews)</li>
															<li class="service-map"><i class="feather-map-pin"></i> Alabama, USA</li>
														</ul>
													</div>
												</div>
											</div>
											<div class="booking-summary">
												<ul class="booking-date">
													<li>Date <span>07/09/2022</span></li>
													<li>Time <span>12.30 Pm - 01. 00 PM</span></li>
													<li>Service Provider <span>Thomas Herzberg</span></li>
												</ul>
												<ul class="booking-date">
													<li>Subtotal <span>$150.00</span></li>
													<li>Coupoun Discount <span>$5.00</span></li>
													<li>Services Charges <span>$3.00</span></li>
												</ul>
												<div class="booking-total">
													<ul class="booking-total-list">
														<li>
															<span>Total</span>
															<span class="total-cost">$148.00</span>
														</li>
													</ul>
												</div>
											</div>
										</div>		
										<div class="booking-coupon">
											<div class="form-group w-100">
												<div class="coupon-icon">
													<input type="text" class="form-control" placeholder="Coupon Code">
													<span><img src="{{asset('assets/img/icons/coupon-icon.svg')}}" alt=""></span>
												</div>
											</div>
											<div class="form-group">
												<button  class="btn btn-primary apply-btn">Apply</button>
											</div>	
										</div>	
										<div class="save-offer">
											<p><i class="fa-solid fa-circle-check"></i> Your total saving on this order $5.00</p>
										</div>
										<div class="booking-pay">
											<div class="btn btn-primary btn-pay w-100 go-to-third">Proceed to Pay $148</div>
											{{-- <a href="javascript:void(0);" class="btn btn-secondary btn-skip">Skip</a> --}}
										</div>						
									</div>						
								</div>						
							</div>						
						</div>		
                    </div>
                    <div class="third-block" style="display: none;">
                        <div class="row">
							<div class="col-md-10 mx-auto">
								<div class="row align-items-center">
									<div class="col-md-6">
										<div class="booking-done">
											<h6>Successfully Completed Payment</h6>
											<p>Your Booking has been Successfully Competed</p>					
											<div class="book-submit">
												<a href="{{route('home')}}" class="btn btn-primary"><i class="feather-arrow-left-circle"></i> Go to Home</a>
												{{-- <a href="customer-booking.html" class="btn btn-secondary">Booking History</a> --}}
											</div>
										</div>
									</div>
									<div class="col-md-6">
										<div class="booking-done">
											<img src="{{asset('assets/img/booking-done.png')}}" class="img-fluid" alt="">
										</div>
									</div>
								</div>
							</div>						
						</div>			
                    </div>
                </div>
                <!-- /Booking -->

            </div>
        </div>
    </div>
@endsection
@section('custom_script')
<script>
    $(document).ready(function(){
        $('.go-to-second').click(function(){
            $('.first-block').hide();
            $('.second-block').show();
            $('.first-step').removeClass('active');
            $('.second-step').addClass('active');
        });

        $('.go-to-third').click(function(){
            $('.second-block').hide();
            $('.third-block').show();
            $('.second-step').removeClass('active');
            $('.third-step').addClass('active');
        });
    });
</script>
@endsection