@extends('user.layouts.main')

@push('style')
<style>
.selected {
    border: 2px solid #007bff;
    background-color: #f0f8ff;
}

#biding-continue.disabled {
    background-color: #ccc;
    cursor: not-allowed;
}
.ribbon_wrapper {
  height: 70px;
  overflow: hidden;
  position: absolute;
  right: -2px;
  top: -2px;
  width: 70px;
  z-index: 10;
}
.ribbon_wrapper .ribbon_assign {
  box-shadow: 0 0 3px rgba(0,0,0,.3);
  font-size: .8rem;
  line-height: 100%;
  padding: .375rem 0;
  position: relative;
  right: -2px;
  text-align: center;
  /* text-shadow: 0 -1px 0 rgba(0,0,0,.4); */
  /* text-transform: uppercase; */
  top: 10px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 90px;
  color: white;
}
.ribbon_assign::before, .ribbon_assign::after {
  border: 5px solid #198754 !important;
  display: none;
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.text-details-content {
    grid-template-columns: 118px auto !important;
}



</style>

@endpush

@section('contents')
@php
    $timePosted = strtotime($service->created_at);
    $timeDifference = time() - $timePosted;

    if ($timeDifference < 60) {
        $timeElapsed = $timeDifference . ' seconds ago';
    } elseif ($timeDifference < 3600) {
        $minutes = floor($timeDifference / 60);
        $timeElapsed = $minutes . ' minutes ago';
    } elseif ($timeDifference < 86400) {
        $hours = floor($timeDifference / 3600);
        $timeElapsed = $hours . ' hours ago';
    } else {
        $days = floor($timeDifference / 86400);
        $timeElapsed = $days . ' days ago';
    }
@endphp
    <div class="dashboard_wrapper border_start p-3">
        <div class="bg-white px-3 py-2">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="card-title my-2"> View Service Bid </h5>
                <a href="{{route('user.service')}}" class="btn btn-sm btn-primary border-0"> Back </a>
            </div>
        </div>
        <div class="user_wrapper">
            <div class="row g-3 gy-md-0 mb-4">
                <div class="col-lg-6 col-xl-6 my-3">
                    <div class="card dashboard_card px-3 py-3 border-0 rounded-2 position-relative">
                        <div class="content">
                            <div class="d-flex justify-content-between align-items-center">
                                @if ($service->status == '4' || $service->status == '1')
                                    <div class="fs-5 text-uppercase text-danger fw-bold mb-3"> Service Closed </div>
                                @else
                                    <div class="fs-5 text-uppercase fw-bold"> Bid Ongoing </div>
                                @endif
                                <div class="fs-6 bg-pm rounded text-white d-inline-block px-3 py-1"> {{$timeElapsed}} </div>
                            </div>
                            @if ($service->status != '4' && $service->status != '1')
                                <p class="text-center mt-3 theme-color"> If you want, you can select the bid as per your choice. </p>
                            @endif
                            @if ($service->status != '4' && $service->status != '1')
                                <div class="progress-bar my-3">
                                    <div class="progress-bar-value"></div>
                                </div>
                            @endif
                            <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 M 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->city}} </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>
                            </div>

                            {{-- @if ($service->status != '4' && $service->status != '1')
                                <div class="mt-3 text-center">
                                    <a href="#" id="biding-continue" class="btn btn-primary border-0 py-2 px-4 w-100 disabled"> Assign Service </a>
                                </div>
                            @endif --}}
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-xl-6 my-3">
                    <div class="card dashboard_card px-3 py-3 border-0 rounded-2 position-relative" style="height: 725px; overflow-x: auto;scrollbar-width: thin;">
                       @if ($service->status == '4' || $service->status == '1')
                            <h5 class="mb-3 fs-6">Bid list </h5>
                       @else
                            <h5 class="mb-3 fs-6"> Select Any Bid </h5>
                       @endif
                        @forelse ($bids as $bid)
                            <div class="row g-0 border rounded-2 position-relative p-3 mb-2 d-flex align-items-center">
                                @if ($bid->status == 'accepted')
                                    <div class="ribbon_wrapper" bis_skin_checked="1">
                                        <div class="ribbon_assign bg-success" bis_skin_checked="1">
                                            Hired
                                        </div>
                                    </div>
                                @endif

                                <div class="col-md-3">
                                    <div class="media">
                                        <a href="{{route('seller.shop', ['id' =>$bid->user_id,'name' => Str::slug($bid->user->name)] )}}">
                                            <img src="{{ asset($bid->user->image) }}" class="align-self-center rounded-circle img-thumbnail mr-3" alt="{{$bid->user->name}}">
                                        </a>
                                    </div>
                                </div>
                                <div class="col-md-9">
                                    <a href="{{route('seller.shop', ['id' =>$bid->user_id,'name' => Str::slug($bid->user->name)] )}}">
                                        <h5 class="m-0">{{ $bid->user->name }}</h5>
                                    </a>
                                    @php
                                        $subCategoryIds = is_array($bid->user->subCategory_id)
                                            ? $bid->user->subCategory_id
                                            : json_decode($bid->user->subCategory_id, true) ?? [];
                                    @endphp
                                    <p class="m-0">
                                        @foreach($subCategoryIds as $subCategoryId)
                                            @php
                                                $subCategory = DB::table('sub_categories')->where('id', $subCategoryId)->first();
                                            @endphp
                                            {{ $subCategory->name ?? 'Unknown' }}
                                            @if (!$loop->last)
                                                ,
                                            @endif
                                        @endforeach
                                    </p>
                                    <div>
                                        @php
                                            $averageRating = $bid->user->reviews->avg('rating');
                                            $percentage = ($averageRating / 5) * 100;
                                            $roundedPercentage = round($percentage * 2) / 2;
                                        @endphp
                                        <span class="service-star pe-2">
                                            @for ($i = 1; $i <= 5; $i++)
                                                <i class="{{ $i <= round($averageRating) ? 'fas fa-star  text-warning' : 'far fa-star  text-warning' }}"></i>
                                            @endfor
                                            {{-- <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>
                                            {{ number_format($roundedPercentage, 1, '.', '') }}%
                                        </span>
                                    </div>
                                    <div class="d-sm-flex align-item-center justify-content-between mt-2">
                                        <div>
                                            <a href="{{route('user.chatform', $bid->user_id)}}" class="">
                                                <i class="fa-solid fa-comment-dots"></i> Chat
                                            </a>
                                            @if ($service->status != '4' && $service->status != '1')
                                                <a href="{{route('user.chatform', $bid->user_id)}}" class="mx-2 hire-me" data-id="{{ $bid->id }}">
                                                    <i class="fa-regular fa-handshake"></i> Hire me
                                                </a>
                                            @endif
                                        </div>
                                        <div>
                                            <span class="biding-price fw-bold"> Bid Price: {{$bid->bid_amount}} KSh </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="alert alert-info text-center">
                                No bids available for this service yet.
                            </div>
                        @endforelse
                        {{-- <div  data-id="2" class="biding-item border p-2 rounded d-flex justify-content-between align-items-center position-relative biding-checkbox">
                            <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"> Abdul Hakim </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"></i>
                                        <i class="fa-solid fa-star-half-stroke"></i>
                                    </span>
                                        <span class="rating-parent">
                                        <i class="fa-solid fa-thumbs-up bg-success"></i>
                                        96%
                                    </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  data-id="3" class="biding-item border p-2 rounded d-flex justify-content-between align-items-center position-relative biding-checkbox">
                            <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"> Sheikh Mujibur Rahman </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-half-stroke"></i>
                                        <i class="fa-regular fa-star"></i>
                                        <i class="fa-regular fa-star"></i>
                                    </span>
                                    <span class="rating-parent">
                                        <i class="fa-solid fa-thumbs-up bg-success"></i>
                                        71%
                                    </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"> 3000 KSh </span>
                            </div>
                        </div>
                        <div  data-id="4" class="biding-item border p-2 rounded d-flex justify-content-between align-items-center position-relative biding-checkbox">
                            <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"> Alauddin </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"> 2000 KSh </span>
                            </div>
                        </div>
                        <div  data-id="5" class="biding-item border p-2 rounded d-flex justify-content-between align-items-center position-relative biding-checkbox">
                            <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"> Mamun Khan </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"> 2700 KSh </span>
                            </div>
                        </div> --}}
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Modal HTML -->
<div class="modal" id="confirmationModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Confirm Service Assignment</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Are you sure you want to assign this provider?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="confirmAssignment">Proceed</button>
                <div id="loadingIndicator" class="loading-overlay" style="display: none;">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    $(document).ready(function() {
    // Click event for bid items
    $('.biding-checkbox').on('click', function() {
        // Remove 'selected' class from all other bid items
        $('.biding-checkbox').removeClass('selected');
        // Add 'selected' class to the clicked provider
        $(this).addClass('selected');
        // Enable the "Assign Service" button if a provider is selected
        if ($('.biding-checkbox.selected').length > 0) {
            $('#biding-continue').removeClass('disabled');
        } else {
            $('#biding-continue').addClass('disabled');
        }
    });
    $(document).ready(function() {
        $('.hire-me').on('click', function(e) {
            e.preventDefault();

            var bidId = $(this).data('id');
            if (bidId) {
                $('#confirmationModal').modal('show');

                $('#confirmAssignment').on('click', function() {
                    $('#loadingIndicator').show();

                    $.ajax({
                        url: '{{ route('user.assign.service') }}',
                        method: 'POST',
                        data: { bid_id: bidId, _token: '{{ csrf_token() }}' },
                        success: function(response) {
                            toastr.success('Service assigned successfully!');
                            setTimeout(function() {
                                location.reload();
                            }, 2000);
                        },
                        error: function() {
                            toastr.error('An error occurred while assigning the service. Please try again.');
                        },
                        complete: function() {
                            $('#loadingIndicator').hide();
                            $('#confirmationModal').modal('hide');
                        }
                    });
                });
            } else {
                toastr.error('An error occurred. Please try again.');
            }
        });
    });
});


</script>

@endpush