@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">Service Details</h2>
                    <nav aria-label="breadcrumb" class="page-breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{route('professional.service')}}">Services</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Service 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>{{$service->title}}</h2>
                        <ul>
                            <li>
                                <span class="badge">Home Clean</span>
                            </li>
                            <li class="service-map"><i class="feather-map-pin"></i> {{$service->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>{{$service->description}}</p>
                    </div>
                    <div class="service-wrap provide-service">
                        <h5>User</h5>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="provide-box">
                                    <img src="{{asset($service->creator->profile_image ?? 'assets/img/user.png')}}" class="img-fluid" alt="img">
                                    <div class="provide-info">
                                        <h6>{{$service->creator->first_name.' '.$service->creator->last_name}} </h6>
                                        <div class="serv-review"><i class="fa-solid fa-star"></i> <span>4.9 </span>(0
                                            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>{{\Carbon\Carbon::parse($service->creator->created_at)->format('F Y')}}</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>{{$service->creator->address}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @if (isset($service->service_requests) && count($service->service_requests) > 0)
                    <div class="row mt-2">
                        <div class="col-md-10 mx-auto">
                            <div class="row align-items-center">
                                <div class="col-md-6">
                                    <div class="booking-done">
                                        <h6>Quote Submittied</h6>
                                        <p>Your have already submitted a quote for this service.</p>					
                                        <div class="book-submit">
                                            <a href="{{route('service')}}" class="btn btn-primary"><i class="feather-arrow-left-circle"></i> Go to Services</a>
                                            <a href="{{route('professional.booking')}}" class="btn btn-secondary">Bookings</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>
                    @else
                    
                    <div class="contact-queries">
                        <h2>Quote on service</h2>
                        <form action="{{route('professional.send-quote')}}" method="POST">
                            @csrf
                            <input type="hidden" value="{{$service->id}}" name="service_id"/>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="col-form-label">Amount</label>
                                        <input class="form-control" name="amount" type="number" min="0" placeholder="Enter Amount">
                                        @error('amount')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="form-group">
                                        <label class="col-form-label">Cover Letter</label>
                                        <textarea class="form-control" name="cover_letter" rows="4" placeholder="Cover Letter"></textarea>
                                        @error('cover_letter')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-12 text-end">
                                    <button class="btn btn-primary" type="submit">Send Quote<i class="feather-arrow-right-circle ms-2"></i></button>
                                </div>
                            </div>
                        </form>
                    </div>
                    @endif
                </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($service->amount, 2, '.', ',');}}</h5>
                                </div>
                            </div>
                            <div class="package-widget">
                                <h5>Available Service Packages</h5>
                                <ul>
                                    <li>{{$service->story}} Storey</li>
                                    <li>{{$service->bedroom}} Bedroom</li>
                                    <li>{{$service->bathroom}} Bathrooms</li>
                                    @foreach ($service->extras as $extra)
                                        <li>{{$extra->name}}</li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

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