@extends('Admin.layouts.app')

@section('title', 'Provider View')

@section('content')

<!-- Page Heading -->

<h1 class="h3 mb-2 text-gray-800"> 
    <a href="{{ route('admin.providers') }}" style="text-decoration: none">
     <i class="fa fa-chevron-left"></i>
    </a>          
Provider Details</h1>


<div class="d-flex align-items-center provider-detail-tab">
    <div>
        <div class="d-flex service-profile-img">
    <div class="d-flex service-profile-img">
            <img src="{{ $provider->profile_image ?? asset('admin/img/default.png') }}" class="img-fluid rounded-circle" alt="Profile Picture">
        </div>

        </div>
    </div>
    <div class="service-detail-tab ms-4">
        <ul class="nav nav-pills" id="pills-tab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="pills-details-tab" data-bs-toggle="pill"
                    data-bs-target="#pills-details" type="button" role="tab">Personal Details</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-bookings-tab" data-bs-toggle="pill"
                    data-bs-target="#pills-bookings" type="button" role="tab">Bookings</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-disputes-tab" data-bs-toggle="pill"
                    data-bs-target="#pills-disputes" type="button" role="tab">Disputes</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-reviews-tab" data-bs-toggle="pill"
                    data-bs-target="#pills-reviews" type="button" role="tab">Reviews</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-clients-tab" data-bs-toggle="pill"
                    data-bs-target="#pills-clients" type="button" role="tab">My Clients</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-earnings-tab" data-bs-toggle="pill"
                    data-bs-target="#pills-earnings" type="button" role="tab">Earnings</button>
            </li>
        </ul>
    </div>
</div>

{{-- {{dd($physicalBookings[1]['service_amount']);}} --}}
<div class="tab-content" id="pills-tabContent">

    <!-- Details Tab -->
    <div class="tab-pane fade show active" id="pills-details" role="tabpanel">
        <div class="row mt-4">
            <div class="col-12">
                <div class="service-provider-detail lexend mt-3">
                    <div class="d-flex justify-content-between"><p>Business Name</p><p class="txt-grey">{{ $provider->name }} {{ $provider->last_name }}</p></div>
                    <div class="d-flex justify-content-between"><p>Email</p><p class="txt-grey">{{ $provider->email }}</p></div>
                    <div class="d-flex justify-content-between"><p>Phone</p><p class="txt-grey">{{ $provider->phone }}</p></div>
                    <div class="d-flex justify-content-between"><p>Gender</p><p class="txt-grey">{{ ucfirst($provider->gender) }}</p></div>
                    <div class="d-flex justify-content-between"><p>DOB</p><p class="txt-grey">{{ $provider->dob }}</p></div>
                    <div class="d-flex justify-content-between"><p>City</p><p class="txt-grey">{{ $provider->city }}</p></div>
                    <div class="d-flex justify-content-between"><p>State</p><p class="txt-grey">{{ $provider->state }}</p></div>
                    <div class="d-flex justify-content-between"><p>Address</p><p class="txt-grey">{{ $provider->address }}</p></div>

                    @if($provider->provider_details)
                        <div class="d-flex justify-content-between"><p>License Number</p><p class="txt-grey">{{ $provider->provider_details->license_num }}</p></div>
                        <div class="d-flex justify-content-between"><p>Experience</p><p class="txt-grey">{{ $provider->provider_details->experience }}</p></div>
                        <div class="d-flex justify-content-between"><p>About</p><p class="txt-grey">{{ $provider->provider_details->about }}</p></div>
                        <div class="d-flex justify-content-between"><p>Working Hours</p><p class="txt-grey">{{ $provider->provider_details->working_hour }}</p></div>
                        <div class="d-flex justify-content-between"><p>Video URL</p>
                            <p class="txt-grey">
                                @if($provider->provider_details->video_url)
                                    <a href="{{ $provider->provider_details->video_url }}" target="_blank">Watch</a>
                                @else
                                    N/A
                                @endif
                            </p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Documents -->
        @if($provider->provider_details)
        <div class="row mt-4">
            <div class="col-12">
                <div class="service-provider-docs mt-3 lexend">
                    <p class="fs-18 fw-700">Documents</p>
                    <p class="txt-grey fw-500 lh-5 mt-2">Required documents for approval</p>
                    <div class="mt-3 service-provider-docs-list">
                        <div class="d-flex justify-content-between align-items-baseline"><p class="fs-16">CV</p>
                            @if($provider->provider_details->cv)
                                <a href="{{ $provider->provider_details->cv }}" target="_blank" class="spd-btn">View</a>
                            @else <span>N/A</span> @endif
                        </div>
                        <div class="d-flex justify-content-between align-items-baseline"><p class="fs-16">Work Permit</p>
                            @if($provider->provider_details->work_permit)
                                <a href="{{ $provider->provider_details->work_permit }}" target="_blank" class="spd-btn">View</a>
                            @else <span>N/A</span> @endif
                        </div>
                        <div class="d-flex justify-content-between align-items-baseline"><p class="fs-16">Proof Address</p>
                            @if($provider->provider_details->proof_address)
                                <a href="{{ $provider->provider_details->proof_address }}" target="_blank" class="spd-btn">View</a>
                            @else <span>N/A</span> @endif
                        </div>
                        <div class="d-flex justify-content-between align-items-baseline"><p class="fs-16">National ID / Passport</p>
                            @if($provider->provider_details->identifier_image)
                                <a href="{{ $provider->provider_details->identifier_image }}" target="_blank" class="spd-btn">View</a>
                            @else <span>N/A</span> @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif

        <!-- Map -->
        <div class="row mt-4">
            <div class="col-12">
                <div class="spd-map">
                    <div class="fs-20 fw-700 lexend">Location</div>
                    <div>
                        @if($provider->lat && $provider->lng)
                            <iframe src="https://www.google.com/maps?q={{ $provider->lat }},{{ $provider->lng }}&hl=es;z=14&amp;output=embed" width="100%" height="201" style="border:0;"></iframe>
                        @else
                            <p>No location set.</p>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bookings Tab -->
    <div class="tab-pane fade" id="pills-bookings" role="tabpanel" aria-labelledby="pills-bookings-tab">
        <div class="row mt-3">
            <div class="col-12">
                {{-- Physical Bookings --}}
                <div class="table-responsive mb-4">
                    <p class="fw-700 fs-16">Physical Bookings</p>
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Booking ID / Date & Time</th>
                                <th>Service</th>
                                <th>Amount</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($physicalBookings as $booking)
                                <tr>
                                    <td>#{{ $booking->id }} <br> {{ $booking->booking_date }} {{ $booking->start_time }}</td>
                                    <td>{{ $booking->provider_service?->services?->name ?? 'N/A' }}</td>
                                    <td>{{ $booking->service_amount }}</td>
                                    <td>{{ $booking->status }}</td>
                                    <td>
                                        <a href="{{ route('admin.booking.detail', ['booking_id' => $booking->id]) }}" class="btn btn-sm btn-info">View</a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5">No Physical Bookings Found</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                {{-- Online Bookings --}}
                <div class="table-responsive">
                    <p class="fw-700 fs-16">Online Bookings</p>
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Booking ID / Date & Time</th>
                                <th>Service</th>
                                <th>Amount</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($onlineBookings as $booking)
                                <tr>
                                    <td>#{{ $booking->id }} <br> {{ $booking->booking_date }} {{ $booking->start_time }}</td>
                                    <td>{{ $booking->provider_service?->services?->name ?? 'N/A' }}</td>
                                    <td>{{ $booking->service_amount }}</td>
                                    <td>{{ $booking->status }}</td>
                                    <td>
                                        <a href="{{ route('admin.booking.detail', ['booking_id' => $booking->id]) }}" class="btn btn-sm btn-info">View</a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5">No Online Bookings Found</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>
    
<!-- Reviews Tab -->
<div class="tab-pane fade" id="pills-reviews" role="tabpanel" aria-labelledby="pills-reviews-tab">
    <div class="row mt-3">
        <div class="col-12">
            <div class="reviews-container p-3 rounded" style="background-color: #ffffff;">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="fw-bold">Reviews</h5>
                    <input type="date" class="form-control w-auto">
                </div>

                <div class="table-responsive">
                    <table class="table align-middle bg-white rounded">
                        <thead class="bg-light">
                            <tr>
                                <th>Username</th>
                                <th>Review</th>
                                <th>Date</th>
                                <th>Rating</th>
                            </tr>
                        </thead>
                        <tbody>
                          @forelse($reviews as $review)
<tr>
    <!-- User -->
    <td class="d-flex align-items-center">
        <img src="{{ $review->user_profile_image ? asset('storage/'.$review->user_profile_image) : asset('admin/img/default.png') }}" 
             alt="{{ $review->user_name ?? 'User' }}" 
             class="rounded-circle me-2" width="40" height="40">
        <span>{{ $review->user_name ?? 'Username' }}</span>
    </td>

    <!-- Review Text -->
    <td>{{ $review->review ?: 'No review text' }}</td>

    <!-- Date -->
    <td>{{ \Carbon\Carbon::parse($review->created_at)->format('d/m/Y') }}</td>

    <!-- Rating -->
    <td class="text-warning fw-bold">
        {{ $review->rating }} <i class="fa fa-star"></i>
    </td>
</tr>
@empty
<tr>
    <td colspan="4" class="text-center">No reviews found.</td>
</tr>
@endforelse

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>



<!-- Clients Tab -->
<div class="tab-pane fade" id="pills-clients" role="tabpanel" aria-labelledby="pills-clients-tab">
    <div class="row mt-3">
        <div class="col-12">
            <div class="p-3 rounded" style="background-color: #ffffff;">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <!-- Filter -->
                    <select class="form-select w-auto">
                        <option value="all">All</option>
                        <option value="active">Active</option>
                        <option value="suspended">Suspended</option>
                        <option value="blacklisted">Black Listed</option>
                    </select>

                    <!-- Date filter -->
                    <input type="date" class="form-control w-auto">
                </div>

                <div class="table-responsive">
                    <table class="table align-middle bg-white rounded">
                        <thead style="background-color: #ffe6f0;">
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Total Booking</th>
                                <th>Category</th>
                                <th>Status</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($clients as $client)
                                <tr>
                                    <!-- ID with date -->
                                    <td>
                                        <div class="fw-bold">{{ $client->seeker_id }}</div>
                                        <small class="text-muted">
                                            {{ now()->format('d M, Y h:i A') }}
                                        </small>
                                    </td>

                                    <!-- Name -->
                                    <td>{{ $client->seeker_name }}</td>

                                    <!-- Total Booking -->
                                    <td>{{ $client->total_bookings }}</td>

                                    <!-- Category -->
                                    <td>
                                        {{ $client->category ?? 'Standard' }}
                                    </td>

                                    <!-- Status -->
                                    <td>
                                        @php
                                            $status = strtolower($client->status ?? 'Active');
                                            $color = $status === 'active' ? 'text-success' : ($status === 'suspended' ? 'text-danger' : 'text-warning');
                                        @endphp
                                        <span class="{{ $color }} fw-bold">
                                            {{ ucfirst($status) }}
                                        </span>
                                    </td>

                                    <!-- Action -->
                                    <td class="text-end">
                                        <i class="fa fa-ellipsis-v"></i>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="text-center">No clients found.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Earnings Tab -->
<div class="tab-pane fade" id="pills-earnings" role="tabpanel" aria-labelledby="pills-earnings-tab">
    <div class="row mt-3">
        <div class="col-12">
            <div class="p-3 rounded" style="background-color: #ffffff;">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="fw-bold">Earnings</h5>
                    <input type="date" class="form-control w-auto">
                </div>

                <div class="table-responsive">
                    <table class="table align-middle bg-white rounded">
                        <thead class="bg-light">
                            <tr>
                                <th>Booking ID</th>
                                <th>Service</th>
                                <th>Amount</th>
                                {{-- <th>Type</th> --}}
                            </tr>
                        </thead>
                        <tbody>
                            {{-- Physical Bookings --}}
                            @forelse($physicalBookings as $booking)
                                <tr>
                                    <td>#{{ $booking->id }}</td>
                                    <td>{{ $booking->provider_service?->services?->name ?? 'N/A' }}</td>
                                    <td>{{ $booking->service_amount }}</td>
                                    {{-- <td><span class="badge bg-primary">Physical</span></td> --}}
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center">No Physical Earnings Found</td>
                                </tr>
                            @endforelse

                            {{-- Online Bookings --}}
                            @forelse($onlineBookings as $booking)
                                <tr>
                                    <td>#{{ $booking->id }}</td>
                                    <td>{{ $booking->provider_service?->services?->name ?? 'N/A' }}</td>
                                    <td>{{ $booking->service_amount }}</td>
                                    {{-- <td><span class="badge bg-success">Online</span></td> --}}
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center">No Online Earnings Found</td>
                                </tr>
                            @endforelse
                        </tbody>
                        <tfoot class="bg-light">
                            <tr>
                                <th colspan="2" class="text-end">Total Earnings:</th>
                                <th colspan="2">
                                    {{ 
                                        $physicalBookings->sum('service_amount') + 
                                        $onlineBookings->sum('service_amount') 
                                    }}
                 
                                </th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>



<!-- Optional Custom CSS -->
<style>
    .table th, .table td {
        vertical-align: middle;
    }
    .table td img {
        object-fit: cover;
    }
</style>




</div>

@endsection