@extends('user.layouts.main')

@push('style')
<style>
    .text-details-content {
        grid-template-columns: 122px auto !important;
    }
</style>

@endpush

@section('contents')
    <div class="dashboard_wrapper border_start p-3">
        <div class="bg-white px-3 py-2 border-bottom">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="card-title my-2"> View Service Status </h5>
                <a href="{{route('user.service')}}" class="btn btn-sm btn-primary border-0"> Back </a>
            </div>
        </div>
        <div class="user_wrapper">
            <div class="card dashboard_card px-3 py-3 border-0 rounded-2 position-relative">
                <div class="content">
                    <div class="mb-3">
                        @if ($service->status == '1')
                            <div class="fs-4 text-uppercase fw-bold text-success"> Service Completed Successfully </div>
                        @elseif ($service->status == '2')
                            <div class="fs-4 text-uppercase fw-bold text-danger"> Service Is Cancel </div>
                        @elseif ($service->status == '4')
                            <div class="fs-4 text-uppercase fw-bold text-info"> Service Provider Assigned - Work Will Start Soon </div>
                        @else
                            <div class="fs-4 text-uppercase fw-bold text-warning"> Service Is Currently Pending </div>
                        @endif
                    </div>

                    <h4 class="title text-nowrap fs-6 mb-1"> Service ID: #{{$service->service_id}} </h4>
                    <h2 class="text-nowrap fs-5 mb-3 theme-color fw-bold"> {{$service->service_title}} </h2>
                    <div class="text-details-content">
                        <span class="fw-bold"> Category: </span>
                        <span> {{$service->serviceCategory->name}} </span>

                        <span class="fw-bold"> Requested Date: </span>
                        <span> {{date('d F Y', strtotime($service->request_date))}} </span>

                        <span class="fw-bold"> Requested Time: </span>
                        <span> {{$service->request_time}} </span>

                        <span class="fw-bold"> Approx Rate: </span>
                        <span> {{$service->service_rate}} KSh </span>

                        <span class="fw-bold"> City: </span>
                        <span> {{$service->cityname?->name}} </span>

                        <span class="fw-bold"> Location: </span>
                        <span> {{$service->location}} </span>

                        @if ($service->special_note)
                            <span class="fw-bold">  Special Note: </span>
                            <span> {{$service->special_note}} </span>
                        @endif

                        <span class="fw-bold">  Description: </span>
                        <span> {{$service->service_description}} </span>

                        {{-- <span class="fw-bold"> Provider: </span>
                        <div class="biding-item border p-2 rounded d-flex justify-content-between align-items-center position-relative">
                        <div class="media mb-0">
                            <img class="align-self-center rounded-circle img-thumbnail mr-3" src="{{ asset('assets/images/default-user.png') }}" alt="Generic placeholder image">
                            <div class="media-body">
                                <h5 class="my-0 fs-6"> {{$service->user->name}} </h5>
                                <p class="mb-1 fs-12"> Window Clean </p>
                                <p class="mb-0">
                                    <span class="service-star pe-2">
                                        <i class="fa-solid fa-star"></i>
                                        <i class="fa-solid fa-star"></i>
                                        <i class="fa-solid fa-star"></i>
                                        <i class="fa-solid fa-star-half-stroke"></i>
                                        <i class="fa-regular fa-star"></i>
                                    </span>
                                    <span class="rating-parent">
                                        <i class="fa-solid fa-thumbs-up bg-success"></i>
                                        86%
                                    </span>
                                </p>
                            </div>
                        </div>
                        <div>
                            <a href="{{route('user.service_provider')}}" target="_blank">
                                <div class="ribbon ribbon-top-right">
                                    <span> Profile </span>
                                </div>
                            </a>
                            <span class="biding-price"> 3500 KSh </span>
                        </div> --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection