@extends('Admin.layouts.app')

@section('title', 'Booking Detail')

@section('content')
<div class="container-fluid px-0">

<h1 class="h3 mb-2 text-gray-800"> 
    <a href="{{ route('admin.booking.index') }}" style="text-decoration: none">
     <i class="fa fa-chevron-left"></i>
    </a>          
Booking Details</h1>
    {{-- Booking Info --}}
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            {{-- <h6 class="fw-semibold mb-3">Booking Information</h6> --}}
            <table class="table table-borderless align-middle mb-0">
                <tbody>
                    <tr>
                        <th width="25%">Booking ID</th>
                        <td>#{{ $booking->id }}</td>
                    </tr>
                    <tr>
                        <th>Status</th>
                        <td>
                            <span class="badge 
                                @if($booking->status == 'Accepted') bg-success 
                                @elseif($booking->status == 'Rejected') bg-danger 
                                @elseif($booking->status == 'Completed') bg-primary 
                                @else bg-secondary @endif">
                                {{ $booking->status }}
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <th>Type</th>
                        <td>{{ $booking->type }}</td>
                    </tr>
                    <tr>
                        <th>Date & Time</th>
                        <td>{{ $booking->booking_date }} {{ $booking->start_time }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    {{-- Provider Info --}}
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <h6 class="fw-semibold mb-3">Provider Detail</h6>
            <div class="d-flex align-items-center">
                <img src="{{ $booking->providers?->profile_image ?? asset('admin/img/default-profile.png') }}"
                     class="rounded me-3" alt="Provider" width="70" height="70" style="object-fit: cover;">
                <div>
                    <p class="mb-1 fw-semibold">{{ $booking->providers?->name ?? 'N/A' }}</p>
                    <small class="text-muted">{{ $booking->providers?->phone ?? 'N/A' }}</small>
                </div>
            </div>
        </div>
    </div>

    {{-- Seeker Info --}}
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <h6 class="fw-semibold mb-3">Seeker Detail</h6>
            <div class="d-flex align-items-center">
                <img src="{{ $booking->seekers?->profile_image ?? asset('admin/img/default-profile.png') }}"
                     class="rounded me-3" alt="Seeker" width="70" height="70" style="object-fit: cover;">
                <div>
                    <p class="mb-1 fw-semibold">{{ $booking->seekers?->name ?? 'N/A' }}</p>
                    <small class="text-muted">{{ $booking->seekers?->phone ?? 'N/A' }}</small>
                </div>
            </div>
        </div>
    </div>

    {{-- Attachments --}}
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <h6 class="fw-semibold mb-3">Attachments</h6>
            @if($booking->attachments->isEmpty())
                <p class="text-muted mb-0">No attachments.</p>
            @else
                <ul class="list-unstyled mb-0">
                    @foreach($booking->attachments as $attachment)
                        <li><a href="{{ $attachment->attachment }}" target="_blank">View Attachment</a></li>
                    @endforeach
                </ul>
            @endif
        </div>
    </div>

    {{-- Rating --}}
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <h6 class="fw-semibold mb-3">Rating & Review</h6>
            @if($booking->rating_detail ?? false)
                <p><strong>By:</strong> {{ $booking->rating_detail->name }}</p>
                <p class="mb-1">
                    <strong>Rating:</strong>
                    @for($i = 1; $i <= 5; $i++)
                        <i class="fa fa-star {{ $i <= $booking->rating_detail->rating ? 'text-warning' : 'text-muted' }}"></i>
                    @endfor
                </p>
                <p><strong>Review:</strong> {{ $booking->rating_detail->review ?? 'No review given' }}</p>
            @else
                <p class="text-muted mb-0">No rating yet.</p>
            @endif
        </div>
    </div>


    {{-- Address & Location --}}
{{-- Address & Location --}}
<div class="address-location mt-4">
    <div class="card shadow-sm border-0">
        <div class="card-header bg-light">
            <h5 class="mb-0 fw-bold">Address & Location</h5>
        </div>
        <div class="card-body">
            @if(!empty($booking->seekers?->address))
                <p><strong>Address:</strong> {{ $booking->seekers->address }}</p>

                <div class="ratio ratio-16x9 mt-3">
                    <iframe
                        src="https://maps.google.com/maps?q={{ urlencode($booking->seekers->address . ', United Arab Emirates') }}&t=&z=13&ie=UTF8&iwloc=&output=embed"
                        style="border:0; min-height: 300px;"
                        allowfullscreen
                        loading="lazy"
                        referrerpolicy="no-referrer-when-downgrade">
                    </iframe>
                </div>
            @else
                <p class="text-muted">No address or location found.</p>
            @endif
        </div>
    </div>
</div>


    {{-- Actions --}}
    <div class="card border-0 shadow-sm mt  -4">
        <div class="card-body">
            <h6 class="fw-semibold mb-3">Actions</h6>
            @if($booking->status !== 'Completed')
                <form id="bookingActionForm" method="POST" action="{{ route('admin.booking.action') }}">
                    @csrf
                    <input type="hidden" name="booking_id" value="{{ $booking->id }}">
                    <div class="d-flex gap-2">
                        @if($booking->status !== 'Accepted')
                            <button type="submit" name="status" value="Accepted" class="btn btn-success">Accept</button>
                        @endif
                        @if($booking->status !== 'Rejected')
                            <button type="submit" name="status" value="Rejected" class="btn btn-danger">Reject</button>
                        @endif
                        <button type="submit" name="status" value="Completed" class="btn btn-primary">Mark as Completed</button>
                    </div>
                </form>
            @else
                <div class="alert alert-info mb-0">Booking has been <strong>completed</strong>.</div>
            @endif
        </div>
    </div>

    

</div>
@endsection

@push('body-scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function() {
    $('#bookingActionForm button').on('click', function(e) {
        e.preventDefault();

        let status = $(this).val();
        let form = $('#bookingActionForm');
        let bookingId = form.find('input[name="booking_id"]').val();
        let token = form.find('input[name="_token"]').val();

        $.ajax({
            url: "{{ route('admin.booking.action') }}",
            method: "POST",
            data: {
                _token: token,
                booking_id: bookingId,
                status: status
            },
            success: function(response) {
                if (response.status) {
                    // ✅ Update status badge text + color
                    let badge = $('td span.badge');
                    badge.text(response.booking_status);

                    badge
                        .removeClass('bg-success bg-danger bg-primary bg-secondary')
                        .addClass(
                            response.booking_status === 'Accepted' ? 'bg-success' :
                            response.booking_status === 'Rejected' ? 'bg-danger' :
                            response.booking_status === 'Completed' ? 'bg-primary' :
                            'bg-secondary'
                        );

                    // ✅ Update action buttons dynamically
                    if (response.booking_status === 'Accepted') {
                        form.find('button[value="Accepted"]').hide();
                        form.find('button[value="Rejected"]').show();
                    }
                    if (response.booking_status === 'Rejected') {
                        form.find('button[value="Rejected"]').hide();
                        form.find('button[value="Accepted"]').show();
                    }
                    if (response.booking_status === 'Completed') {
                        form.replaceWith('<div class="alert alert-info mb-0">Booking has been <strong>completed</strong>.</div>');
                    }

                    // ✅ SweetAlert Success
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: response.message,
                        timer: 2000,
                        showConfirmButton: false
                    });
                } else {
                    Swal.fire('Error', response.message, 'error');
                }
            },
            error: function() {
                Swal.fire('Error', 'Something went wrong.', 'error');
            }
        });
    });
});
</script>
@endpush