@extends('website.layouts.index')
@section('content')
    @include('professional.layouts.menu')
    <div class="content container-fluid">

        <!-- Page Header -->
        <div class="page-header">
            <div class="row">
                <div class="col-md-4">
                    <div class="provider-subtitle">
                        <h6>Booking List</h6>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Page Header -->


        <div class="row">
            <div class="col-md-12">
                <!-- Booking List -->
                @foreach ($bookings as $each)
                    <div class="booking-list">
                        <div class="booking-widget">
                            <div class="booking-img">
                                <a href="{{route('service-detail',$each->id)}}">
                                    <img src="{{ asset($each->service->image ?? 'assets/img/services/service.jpg') }}"
                                        alt="User Image">
                                </a>
                                <div class="fav-item">
                                    <a href="javascript:void(0)" class="fav-icon">
                                        <i class="feather-heart"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="booking-det-info">
                                <h3>
                                    <a href="{{route('service-detail',$each->id)}}">{{ $each->service->title }} </a>
                                    @if ($each->status == 'pending')
                                        <span class="badge badge-warning">Pending</span>
                                    @elseif($each->status == 'accepted')
                                        <span class="badge badge-primary">In progress</span>
                                    @elseif($each->status == 'rejected')
                                        <span class="badge badge-danger">Rejected</span>
                                    @elseif($each->status == 'cancelled')
                                        <span class="badge badge-danger">Cancelled</span>
                                    @elseif($each->status == 'cancelled')
                                        <span class="badge badge-success">Completed</span>
                                    @endif
                                </h3>
                                <ul class="booking-details">
                                    <li>
                                        <span class="book-item">Booking Date</span> : {{ $each->service->date }},
                                        {{ $each->service->start_time }}-{{ $each->service->end_time }}
                                    </li>
                                    <li>
                                        <span class="book-item">Amount</span> :
                                        ${{ number_format($each->offered_amount, 2, '.', ',') }}
                                        
                                        {{-- <span class="badge-grey">COD</span> --}}
                                    </li>
                                    <li>
                                        <span class="book-item">Location</span> : {{ $each->service->address }}
                                    </li>
                                    <li>
                                        <span class="book-item">Customer</span> :
                                        <div class="user-book">
                                            <div class="avatar avatar-xs">
                                                <img class="avatar-img rounded-circle" alt="User Image"
                                                    src="{{ asset($each->service->creator->profile_image ?? 'assets/img/user.png') }}">
                                            </div>
                                            {{ $each->service->creator->first_name . ' ' . $each->service->creator->last_name }}
                                        </div>
                                        <p>{{ $each->service->creator->email }}</p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="booking-action">
                            @if ($each->status == 'completed')
                                <a href="javascript:void(0);" class="btn btn-primary" data-bs-toggle="modal"
                                data-bs-target="#add-review"><i class="feather-plus-circle"></i> Add Review</a>
                            @endif
                            <a href="javascript:void(0);" class="btn btn-secondary">Cancel</a>
                        </div>
                    </div>
                @endforeach

            </div>
        </div>

        <!-- Pagination -->
        <div class="row justify-content-end">
            <div class="col-sm-6">
                <div class="review-pagination">
                    {{ $bookings->links() }}
                </div>
            </div>
        </div>
        <!-- /Pagination -->

        <!-- Add Review -->
        <div class="modal fade custom-modal" id="add-review">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content doctor-profile">
                    <div class="modal-header border-bottom-0 justify-content-between">
                        <h5 class="modal-title">Write A Review</h5>
                        <button type="button" class="close-btn" data-bs-dismiss="modal" aria-label="Close"><i
                                class="feather-x"></i></button>
                    </div>
                    <div class="modal-body pt-0">
                        <form action="#">
                            <div class="write-review">
                                <div class="review-add">
                                    <div class="rev-img">
                                        <img src="{{ asset('assets/img/services/service.jpg') }}" alt="">
                                    </div>
                                    <div class="rev-info">
                                        <h6>Computer Services</h6>
                                        <p>Newyork, USA</p>
                                    </div>
                                </div>
                                <div class="form-group form-info">
                                    <label class="col-form-label">Rate The Service</label>
                                    <div class="rating rating-select mb-0">
                                        <a href="javascript:void(0);"><i class="fas fa-star filled"></i></a>
                                        <a href="javascript:void(0);"><i class="fas fa-star filled"></i></a>
                                        <a href="javascript:void(0);"><i class="fas fa-star filled"></i></a>
                                        <a href="javascript:void(0);"><i class="fas fa-star filled"></i></a>
                                        <a href="javascript:void(0);"><i class="fas fa-star filled"></i></a>
                                    </div>
                                </div>
                                <div class="form-group form-info">
                                    <label class="col-form-label">Write your Review</label>
                                    <textarea class="form-control" rows="4" placeholder="Please write your review"></textarea>
                                </div>
                                <div class="modal-submit text-end">
                                    <button type="submit" class="btn btn-primary">Send</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Add Review -->

    </div>
@endsection