@extends('website.layouts.index')
@section('content')
    <div class="bg-img">
        <img src="{{asset('assets/img/bg/work-bg-03.png')}}" alt="img" class="bgimg1">
        <img src="{{asset('assets/img/bg/work-bg-03.png')}}" alt="img" class="bgimg2">
        <img src="{{asset('assets/img/bg/feature-bg-03.png')}}" alt="img" class="bgimg3">
    </div>

    <!-- Breadcrumb -->
    <div class="breadcrumb-bar">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-12">
                    <h2 class="breadcrumb-title">Booking Details</h2>
                    <nav aria-label="breadcrumb" class="page-breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{route('professional.service')}}">Bookings</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Booking Details</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <div class="content">

        <div class="container">
            <div class="row">

                <!-- Service Profile -->
                <div class="col-md-8">
                    <div class="serv-profile">
                        <h2>{{$booking->title}}</h2>
                        <ul>
                            <li>
                                <span class="badge">Home Clean</span>
                            </li>
                            <li class="service-map"><i class="feather-map-pin"></i> {{$booking->address}}</li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="serv-action">
                        <ul>
                            <li>
                                <a href="#"><i class="feather-heart"></i></a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- /Service Profile -->
            </div>

            <div class="row">

                <!-- Service Details -->
                <div class="col-lg-8">
                    <div class="service-wrap">
                        <h5>Service Details</h5>
                        <p>{{$booking->description}}</p>
                    </div>
                    {{-- <div class="service-wrap provide-service">
                        <h5>Service Provider</h5>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="provide-box">
                                    <img src="assets/img/profiles/avatar-02.jpg" class="img-fluid" alt="img">
                                    <div class="provide-info">
                                        <h6>Member Since</h6>
                                        <div class="serv-review"><i class="fa-solid fa-star"></i> <span>4.9 </span>(255
                                            reviews)</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="provide-box">
                                    <span><i class="feather-user"></i></span>
                                    <div class="provide-info">
                                        <h6>Member Since</h6>
                                        <p>Apr 2020</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="provide-box">
                                    <span><i class="feather-map-pin"></i></span>
                                    <div class="provide-info">
                                        <h6>Address</h6>
                                        <p>Hanover, Maryland</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="provide-box">
                                    <span><i class="feather-mail"></i></span>
                                    <div class="provide-info">
                                        <h6>Email</h6>
                                        <p><a href="https://html.truelysell.com/cdn-cgi/l/email-protection"
                                                class="__cf_email__"
                                                data-cfemail="c3b7abacaea2b0ab83a6bba2aeb3afa6eda0acae">[email&#160;protected]</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <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>
                            <div class="col-md-4">
                                <div class="social-icon provide-social">
                                    <ul>
                                        <li>
                                            <a href="#" target="_blank"><i class="feather-instagram"></i> </a>
                                        </li>
                                        <li>
                                            <a href="#" target="_blank"><i class="feather-twitter"></i> </a>
                                        </li>
                                        <li>
                                            <a href="#" target="_blank"><i class="feather-youtube"></i></a>
                                        </li>
                                        <li>
                                            <a href="#" target="_blank"><i class="feather-linkedin"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div> --}}
                    <div class="service-wrap">
                        <h5>Requests</h5>
                        <ul>
                            <li class="review-box">
                                <div class="review-profile">
                                    <div class="review-img">
                                        <img src="{{asset('assets/img/profiles/avatar-02.jpg')}}" class="img-fluid" alt="img">
                                        <div class="review-name">
                                            <h6>Dennis</h6>
                                        </div>
                                    </div>
                                    <div class="rating">
                                        <i class="fas fa-star filled"></i>
                                        <i class="fas fa-star filled"></i>
                                        <i class="fas fa-star filled"></i>
                                        <i class="fas fa-star filled"></i>
                                        <i class="fas fa-star filled"></i>
                                    </div>
                                </div>
                                <h5 class="my-1">$150</h5>
                                <p>Lorem ipsum dolor sit amet, consectetur adipicing elit, sed do eiusmod tempor incididunt
                                    ut labore et dolore magna aliqa. Ut enim ad minim veniam, quis nostrud exercitation
                                    ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
                                <div class="recommend-item">
                                    <div class="recommend-info">
                                        <p>Accept Offer</p>
                                        <a href="#" class="text-bg-success"><i class="feather-thumbs-up"></i> Accept</a>
                                        <a href="#" class="text-bg-danger"><i class="feather-thumbs-down"></i> Reject</a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <div class="text-center">
                            <a href="customer-reviews.html" class="btn btn-primary btn-review">View All Reviews</a>
                        </div>
                    </div>

                </div>
                <!-- /Service Details -->

                <div class="col-lg-4 theiaStickySidebar">

                    <!-- Service Availability -->
                    <div class="card card-provide mb-0">
                        <div class="card-body">
                            <div class="provide-widget">
                                <div class="service-amount">
                                    <h5>${{number_format($booking->amount, 2, '.', ',');}}</h5>
                                </div>
                            </div>
                            <div class="package-widget">
                                <h5>Available Service Packages</h5>
                                <ul>
                                    <li>{{$booking->story}} Storey</li>
                                    <li>{{$booking->bedroom}} Bedroom</li>
                                    <li>{{$booking->bathroom}} Bathrooms</li>
                                    @foreach ($booking->extras as $extra)
                                        <li>{{$extra->name}}</li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

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