@extends('user.layouts.main')

@section('contents')
    <div class="dashboard_wrapper border_start p-3">
        <div class="card border-0">
            <div class="card-header bg-white">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="card-title my-2">Service  Request list </h5>
                    <a href="{{route('user.new_request')}}" class="btn btn-sm btn-primary border-0"> New Request </a>
                </div>
            </div>
            <div class="card-body">
                <div class="user_wrapper">
                    <div class="row g-3 gy-md-0 mb-4">
                        <div class="col-sm-6 col-md-6 col-lg-4 col-xl-3 mb-3">
                            <div class="dashboard_card px-3 py-3 bg-primary bg-opacity-10 border border-primary border-opacity-50 rounded-2 position-relative">
                                <div class="content">
                                    <div class="title text-nowrap"> Total Service </div>
                                    <div class="count_num"> {{$totalService}} </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-6 col-lg-4 col-xl-3 mb-3">
                            <div class="dashboard_card px-3 py-3 bg-success bg-opacity-10 border border-success border-opacity-50 rounded-2 position-relative">
                                <div class="content">
                                    <div class="title text-nowrap"> Completed Service </div>
                                    <div class="count_num"> {{$completeService}} </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-6 col-lg-4 col-xl-3 mb-3">
                            <div class="dashboard_card px-3 py-3 bg-warning bg-opacity-10 border border-warning border-opacity-50 rounded-2 position-relative">
                                <div class="content">
                                    <div class="title text-nowrap"> Pending Services </div>
                                    <div class="count_num"> {{$pandingService}} </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-6 col-lg-4 col-xl-3 mb-3">
                            <div class="dashboard_card px-3 py-3 bg-danger bg-opacity-10 border border-danger border-opacity-50 rounded-2 position-relative">
                                <div class="content">
                                    <div class="title text-nowrap"> Canceled Services </div>
                                    <div class="count_num"> {{$cancelService}} </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body table-responsive p-0">
                        <table id="dataTables" class="table table-hover text-nowrap table-bordered jsgrid-table">
                            <thead>
                            <tr>
                                <th class="text-center"> # </th>
                                <th class="text-start"> Title </th>
                                <th class="text-center"> Category </th>
                                <th class="text-center"> Date </th>
                                <th class="text-center"> Time </th>
                                <th class="text-center"> Status </th>
                                <th class="text-center"> Action </th>
                            </tr>
                            </thead>
                            <tfoot>
                            <tr>
                                <th class="text-center"> # </th>
                                <th class="text-start"> Title </th>
                                <th class="text-center"> Category </th>
                                <th class="text-center"> Date </th>
                                <th class="text-center"> Time </th>
                                <th class="text-center"> Status </th>
                                <th class="text-center"> Action </th>
                            </tr>
                            </tfoot>
                            <tbody>
                                @forelse  ($services as $item)
                                    <tr class="text-center">
                                        <td> {{$loop->iteration}} </td>
                                        <td class="text-start"> {{$item->service_title}} </td>
                                        <td> {{$item->serviceCategory->name}} </td>
                                        <td> {{ date('d M Y', strtotime($item->request_date)) }} </td>
                                        <td> {{$item->request_time}} </td>
                                        <td>
                                            @if ($item->status == '1')
                                                <span class="text-success">Complete</span>
                                            @elseif ($item->status == '2')
                                                <span class="text-danger">Cancel</span>
                                            @elseif ($item->status == '4')
                                                <span class="text-danger">Running</span>
                                            @else
                                                <span class="text-warning">Bid Running</span>
                                            @endif
                                        </td>
                                        <td class="text-center p-0">
                                            <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Bid"></span>
                                            <a href="{{route('user.service_view', $item->id)}}" class="btn btn-sm mx-1 btn-dark border-0 py-1 px-2 my-2 fs-12 text-white  {{ $item->bids->count() <= 0 ? 'opacity-50' : '' }}">
                                                {{ str_pad($item->bids->count(), 2, '0', STR_PAD_LEFT) }}
                                            </a>
                                            @php
                                                $user_id =$item->bids->where('status', 'accepted')->first();
                                            @endphp
                                            @if ($item->status == '4' && $user_id?->work_status == '1')
                                                <a href="{{route('user.service_review', ['service_id' => $item->id, 'id' => $user_id?->user_id])}}" class="btn btn-sm mx-1 btn-primary border-0 py-1 px-2 my-2 fs-12 text-white"
                                                    data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Mark As Complete">
                                                    <i class="fa-regular fa-circle-check"></i>
                                                </a>
                                            @endif
                                            <a href="{{ route('user.service_status', $item->id) }}" class="btn btn-sm mx-1 btn-info border-0 py-1 px-2 my-2 fs-12 text-white"
                                                data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="View">
                                                <i class="fa-solid fa-eye"></i>
                                            </a>
                                            <a href="{{ route('user.edit_request', $item->id) }}" class="btn btn-sm mx-1 btn-warning border-0 py-1 px-2 my-2 fs-12 text-white"
                                            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Edit">
                                                <i class="fa-solid fa-pen-to-square"></i>
                                            </a>
                                            @if($item->status != '1' && $item->status != '2' && $item->status != '4')
                                            <a href="{{route('user.cancelRequest', $item->id)}}" class="btn btn-sm mx-1 btn-danger border-0 py-1 px-2 my-2 fs-12 text-white cancel-request"
                                            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Cancel Request">
                                            <i class="fa-solid fa-ban"></i>
                                            </a>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="text-center text-muted py-4">
                                            <h5>No services found. Please check back later.</h5>
                                        </td>
                                    </tr>
                                @endforelse

                                {{-- <tr class="text-center">
                                    <td> 2 </td>
                                    <td class="text-start"> I need to clean my garage </td>
                                    <td> Garage Clean </td>
                                    <td> 14.11.2024 </td>
                                    <td> 10.00am </td>
                                    <td> Completed </td>
                                    <td class="text-center p-0">
                                        <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Bid">
                                            <a href="#" class="btn btn-sm mx-1 btn-dark border-0 py-1 px-2 my-2 fs-12 text-white disabled">
                                                04
                                            </a>
                                        </span>
                                        <a href="{{ route('user.service_status') }}" class="btn btn-sm mx-1 btn-info border-0 py-1 px-2 my-2 fs-12 text-white"
                                           data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="View">
                                            <i class="fa-solid fa-eye"></i>
                                        </a>
                                        <a href="{{ route('user.edit_request') }}" class="btn btn-sm mx-1 btn-warning border-0 py-1 px-2 my-2 fs-12 text-white"
                                           data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Edit">
                                            <i class="fa-solid fa-pen-to-square"></i>
                                        </a>
                                        <a href="#" class="btn btn-sm mx-1 btn-danger border-0 py-1 px-2 my-2 fs-12 text-white"
                                           data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Delete">
                                            <i class="fa-solid fa-trash"></i>
                                        </a>
                                    </td>
                                </tr>
                                <tr class="text-center">
                                    <td> 3 </td>
                                    <td class="text-start"> Window washing for office building </td>
                                    <td> Office Clean </td>
                                    <td> 15.11.2024 </td>
                                    <td> 02.00pm </td>
                                    <td> Cancelled </td>
                                    <td class="text-center p-0">
                                        <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Bid">
                                            <a href="#" class="btn btn-sm mx-1 btn-dark border-0 py-1 px-2 my-2 fs-12 text-white disabled">
                                                01
                                            </a>
                                        </span>
                                        <a href="{{ route('user.service_status') }}" class="btn btn-sm mx-1 btn-info border-0 py-1 px-2 my-2 fs-12 text-white"
                                           data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="View">
                                            <i class="fa-solid fa-eye"></i>
                                        </a>
                                        <a href="{{ route('user.edit_request') }}" class="btn btn-sm mx-1 btn-warning border-0 py-1 px-2 my-2 fs-12 text-white"
                                           data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Edit">
                                            <i class="fa-solid fa-pen-to-square"></i>
                                        </a>
                                        <a href="#" class="btn btn-sm mx-1 btn-danger border-0 py-1 px-2 my-2 fs-12 text-white"
                                           data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Delete">
                                            <i class="fa-solid fa-trash"></i>
                                        </a>
                                    </td>
                                </tr>
                                <tr class="text-center">
                                    <td> 4 </td>
                                    <td class="text-start"> Carpet shampooing </td>
                                    <td> Carpet Clean </td>
                                    <td> 16.11.2024 </td>
                                    <td> 09.00am </td>
                                    <td> Bid Ongoing </td>
                                    <td class="text-center p-0">
                                        <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Bid">
                                            <a href="#" class="btn btn-sm mx-1 btn-dark border-0 py-1 px-2 my-2 fs-12 text-white disabled">
                                                03
                                            </a>
                                        </span>
                                        <a href="{{ route('user.service_view') }}" class="btn btn-sm mx-1 btn-info border-0 py-1 px-2 my-2 fs-12 text-white"
                                           data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="View">
                                            <i class="fa-solid fa-eye"></i>
                                        </a>
                                        <a href="{{ route('user.edit_request') }}" class="btn btn-sm mx-1 btn-warning border-0 py-1 px-2 my-2 fs-12 text-white"
                                           data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Edit">
                                            <i class="fa-solid fa-pen-to-square"></i>
                                        </a>
                                        <a href="#" class="btn btn-sm mx-1 btn-danger border-0 py-1 px-2 my-2 fs-12 text-white"
                                           data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Delete">
                                            <i class="fa-solid fa-trash"></i>
                                        </a>
                                    </td>
                                </tr>
                                <tr class="text-center">
                                    <td> 5 </td>
                                    <td class="text-start"> Lawn mowing service </td>
                                    <td> Lawn Care </td>
                                    <td> 17.11.2024 </td>
                                    <td> 08.00am </td>
                                    <td> Completed </td>
                                    <td class="text-center p-0">
                                        <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Bid">
                                            <a href="#" class="btn btn-sm mx-1 btn-dark border-0 py-1 px-2 my-2 fs-12 text-white disabled">
                                                02
                                            </a>
                                        </span>
                                        <a href="{{ route('user.service_status') }}" class="btn btn-sm mx-1 btn-info border-0 py-1 px-2 my-2 fs-12 text-white"
                                           data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="View">
                                            <i class="fa-solid fa-eye"></i>
                                        </a>
                                        <a href="{{ route('user.edit_request') }}" class="btn btn-sm mx-1 btn-warning border-0 py-1 px-2 my-2 fs-12 text-white"
                                           data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Edit">
                                            <i class="fa-solid fa-pen-to-square"></i>
                                        </a>
                                        <a href="#" class="btn btn-sm mx-1 btn-danger border-0 py-1 px-2 my-2 fs-12 text-white"
                                           data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Delete">
                                            <i class="fa-solid fa-trash"></i>
                                        </a>
                                    </td>
                                </tr>
                                <tr class="text-center">
                                    <td> 6 </td>
                                    <td class="text-start"> Pressure washing patio </td>
                                    <td> Patio Clean </td>
                                    <td> 18.11.2024 </td>
                                    <td> 03.00pm </td>
                                    <td> Pending </td>
                                    <td class="text-center p-0">
                                        <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Bid">
                                            <a href="#" class="btn btn-sm mx-1 btn-dark border-0 py-1 px-2 my-2 fs-12 text-white disabled">
                                                0
                                            </a>
                                        </span>
                                        <a href="{{ route('user.service_status') }}" class="btn btn-sm mx-1 btn-info border-0 py-1 px-2 my-2 fs-12 text-white"
                                           data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="View">
                                            <i class="fa-solid fa-eye"></i>
                                        </a>
                                        <a href="{{ route('user.edit_request') }}" class="btn btn-sm mx-1 btn-warning border-0 py-1 px-2 my-2 fs-12 text-white"
                                           data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Edit">
                                            <i class="fa-solid fa-pen-to-square"></i>
                                        </a>
                                        <a href="#" class="btn btn-sm mx-1 btn-danger border-0 py-1 px-2 my-2 fs-12 text-white"
                                           data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Delete">
                                            <i class="fa-solid fa-trash"></i>
                                        </a>
                                    </td>
                                </tr>
                                <tr class="text-center">
                                    <td> 7</td>
                                    <td class="text-start"> Move-out cleaning for apartment </td>
                                    <td> Move-out Clean </td>
                                    <td> 19.11.2024 </td>
                                    <td> 01.00pm </td>
                                    <td> Bid Ongoing </td>
                                    <td class="text-center p-0">
                                        <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Bid">
                                            <a href="#" class="btn btn-sm mx-1 btn-dark border-0 py-1 px-2 my-2 fs-12 text-white disabled">
                                                03
                                            </a>
                                        </span>
                                        <a href="{{ route('user.service_view') }}" class="btn btn-sm mx-1 btn-info border-0 py-1 px-2 my-2 fs-12 text-white"
                                           data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="View">
                                            <i class="fa-solid fa-eye"></i>
                                        </a>
                                        <a href="{{ route('user.edit_request') }}" class="btn btn-sm mx-1 btn-warning border-0 py-1 px-2 my-2 fs-12 text-white"
                                           data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Edit">
                                            <i class="fa-solid fa-pen-to-square"></i>
                                        </a>
                                        <a href="#" class="btn btn-sm mx-1 btn-danger border-0 py-1 px-2 my-2 fs-12 text-white"
                                           data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Delete">
                                            <i class="fa-solid fa-trash"></i>
                                        </a>
                                    </td>
                                </tr>
                                <tr class="text-center">
                                    <td> 8 </td>
                                    <td class="text-start"> Sofa cleaning </td>
                                    <td> Upholstery Clean </td>
                                    <td> 20.11.2024 </td>
                                    <td> 11.00am </td>
                                    <td> Completed </td>
                                    <td class="text-center p-0">
                                        <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Bid">
                                            <a href="#" class="btn btn-sm mx-1 btn-dark border-0 py-1 px-2 my-2 fs-12 text-white disabled">
                                                01
                                            </a>
                                        </span>
                                        <a href="{{ route('user.service_status') }}" class="btn btn-sm mx-1 btn-info border-0 py-1 px-2 my-2 fs-12 text-white"
                                           data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="View">
                                            <i class="fa-solid fa-eye"></i>
                                        </a>
                                        <a href="{{ route('user.edit_request') }}" class="btn btn-sm mx-1 btn-warning border-0 py-1 px-2 my-2 fs-12 text-white"
                                           data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Edit">
                                            <i class="fa-solid fa-pen-to-square"></i>
                                        </a>
                                        <a href="#" class="btn btn-sm mx-1 btn-danger border-0 py-1 px-2 my-2 fs-12 text-white"
                                           data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Delete">
                                            <i class="fa-solid fa-trash"></i>
                                        </a>
                                    </td>
                                </tr> --}}
                            </tbody>
                        </table>
                        <div class="mt-2 d-flex justify-content-end align-items-center">
                            {{ $services->links() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
<script>
    $(document).ready(function () {
        $('.cancel-request').on('click', function (e) {
            e.preventDefault(); // Prevent the default action

            const url = $(this).attr('href');

            // Show window alert
            if (window.confirm('Are you sure you want to cancel this request? This action cannot be undone.')) {
                window.location.href = url; // Proceed with the cancellation
            }
        });
    });


</script>

@endpush