@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>My Services</h6>
                </div>
            </div>
            <div class="col-md-8 d-flex align-items-center justify-content-md-end flex-wrap">
                <a href="{{route('service-book')}}" class="btn btn-primary add-set"><i class="feather-plus me-2"></i>Add Service</a>
            </div>
        </div>
    </div>
    <!-- /Page Header -->
    
    
    <div class="row">
        <div class="col-md-12">
            <div class="tab-list">
                <ul class="nav">
                    <li>
                        <a href="#" class="active" data-bs-toggle="tab" data-bs-target="#active-service">Actice Services</a>
                    </li>
                    <li>
                        <a href="#" data-bs-toggle="tab" data-bs-target="#inactive-service">Inactive Services</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="tab-content pt-0">				
        <div class="tab-pane active" id="active-service">				
            <div class="row">				
                    
                @foreach ($bookings as $booking)
                    
                <!-- Favorite Item -->
                <div class="col-xl-4 col-md-6">
                    <div class="service-widget pro-service">
                        <div class="service-img">
                            <a href="{{route('professional.service-detail',['id'=>$booking->id])}}">
                                <img class="img-fluid serv-img" alt="Service Image" src="{{asset($booking->image ?? 'assets/img/services/service.jpg')}}">
                            </a>
                            <div class="fav-item">
                                <div class="item-info">
                                    <a href="categories.html"><span class="item-cat">Home Clean</span></a>
                                    <a href="categories.html"><span class="item-cat">{{$booking->service_type == 'domestic' ? 'Domestic' : 'Commercial'}}</span></a>
                                </div>
                                <span class="serv-rating"><i class="fa-solid fa-star"></i>4.9</span>
                            </div>
                        </div>
                        <div class="service-content">
                            <h3 class="title">
                                <a href="{{route('professional.service',['id'=>$booking->id])}}">{{$booking->title}}</a>
                            </h3>
                            <div class="addrs-item">
                                <p><i class="feather-map-pin"></i>{{$booking->address}}</p>
                                <h6 class="price">${{number_format($booking->amount,2,'.',',')}}</h6>
                            </div>
                            <div class="serv-info">
                                <div>
                                    <a href="provider-edit-service.html" class="serv-edit"><i class="feather-edit"></i> Edit</a>
                                    <a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#in-active"><span><i class="feather-alert-circle"></i> Active</span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /Favorite Item -->
                @endforeach
                        
            </div>
        </div>
        
       <!-- Inactive Service -->
    <div class="modal fade custom-modal" id="in-active">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header border-bottom-0 justify-content-between">
                    <h5 class="modal-title">Inactive Service</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">
                    <div class="write-review">
                        <form action="https://html.truelysell.com/template3/provider-services.html">
                            <p>Are you sure want to inactive this service?</p>
                            <div class="modal-submit text-end">
                                <a href="#" class="btn btn-secondary me-2" data-bs-dismiss="modal">Cancel</a>
                                <button type="submit" class="btn btn-primary">Yes</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /Inactive Service -->
    
    <!-- Active Service -->
    <div class="modal fade custom-modal" id="active">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header border-bottom-0 justify-content-between">
                    <h5 class="modal-title">Active Service</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">
                    <div class="write-review">
                        <form action="https://html.truelysell.com/template3/provider-services.html">
                            <p>Are you sure want to active this service?</p>
                            <div class="modal-submit text-end">
                                <a href="#" class="btn btn-secondary me-2" data-bs-dismiss="modal">Cancel</a>
                                <button type="submit" class="btn btn-primary">Yes</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /Inactive Service -->
    
    <!-- Delete Service -->
    <div class="modal fade custom-modal" id="del-service">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header border-bottom-0 justify-content-between">
                    <h5 class="modal-title">Delete Service</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">
                    <div class="write-review">
                        <form action="https://html.truelysell.com/template3/provider-services.html">
                            <p>Are you sure want to Delete this service?</p>
                            <div class="modal-submit text-end">
                                <a href="#" class="btn btn-secondary me-2" data-bs-dismiss="modal">Cancel</a>
                                <button type="submit" class="btn btn-primary">Yes</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
        
    </div>
    <!-- Pagination -->
    {{-- <div class="row">
        <div class="col-sm-6">
            <div class="review-entries">
                <span>Show</span>
                <select>
                    <option>07</option>
                    <option>08</option>
                </select>
                <span>entries</span>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="review-pagination">
                <p>1 - 09 of 09</p>
                <ul class="pagination">
                    <li class="page-item">
                        <a class="page-link" href="#">1</a>
                    </li>
                    <li class="page-item active">
                        <a class="page-link" href="#">2 <span class="visually-hidden">(current)</span></a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">3</a>
                    </li>
                </ul>						
            </div>
        </div>
    </div> --}}
    <!-- /Pagination -->
</div>
@endsection