@extends('layouts.admin')

@section('title', 'Pending Bookings')

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom d-flex justify-content-between align-items-center py-3">
                    <h4 class="header-title m-0 text-dark fw-bold">Pending Booking Approvals</h4>
                    <a href="{{ route('admin.bookings.index') }}" class="btn btn-outline-secondary btn-sm rounded-pill px-3">
                        <i class="bx bx-list-ul me-1"></i> All Bookings
                    </a>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover table-centered mb-0 align-middle">
                            <thead class="bg-light-subtle">
                                <tr class="text-muted small text-uppercase">
                                    <th class="ps-3" style="width: 120px;">Booking #</th>
                                    <th>Customer</th>
                                    <th>Plot Details</th>
                                    <th>Agent</th>
                                    <th class="text-end">Total Amount</th>
                                    <th class="text-end">Deposit</th>
                                    <th class="text-center">Date</th>
                                    <th class="pe-3 text-end" style="width: 250px;">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($bookings as $booking)
                                    <tr>
                                        <td class="ps-3"><span class="fw-bold text-primary">{{ $booking->booking_number }}</span></td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="avatar-sm bg-primary-subtle text-primary rounded-circle d-flex align-items-center justify-content-center me-2 fw-bold">
                                                    {{ strtoupper(substr($booking->customer->name, 0, 1)) }}
                                                </div>
                                                <span class="fw-medium">{{ $booking->customer->name }}</span>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="text-dark fw-semibold">{{ $booking->project?->name ?? 'N/A' }}</div>
                                            <div class="text-muted small">Plot: {{ $booking->plot?->plot_number ?? 'N/A' }}</div>
                                        </td>
                                        <td>
                                            <span class="text-muted small">by</span> {{ $booking->agent?->name ?? 'N/A' }}
                                        </td>
                                        <td class="text-end fw-bold text-dark">₹ {{ number_format($booking->total_amount, 0) }}</td>
                                        <td class="text-end fw-bold text-success">₹ {{ number_format($booking->booking_amount, 0) }}</td>
                                        <td class="text-center text-muted small">{{ $booking->booking_date->format('d M, Y') }}</td>
                                        <td class="pe-3 text-end">
                                            <div class="btn-group gap-1">
                                                <a href="{{ route('admin.bookings.show', $booking->id) }}" class="btn btn-sm btn-light border-0 shadow-none text-primary" title="Review">
                                                    <i class="bx bx-show fs-16"></i>
                                                </a>
                                                <button type="button" class="btn btn-sm btn-success-subtle text-success border-0 px-2" data-bs-toggle="modal" data-bs-target="#approveModal{{ $booking->id }}">
                                                    Approve
                                                </button>
                                                <button type="button" class="btn btn-sm btn-danger-subtle text-danger border-0 px-2" data-bs-toggle="modal" data-bs-target="#rejectModal{{ $booking->id }}">
                                                    Reject
                                                </button>
                                            </div>

                                            <!-- Approve Modal -->
                                            <div class="modal fade" id="approveModal{{ $booking->id }}" tabindex="-1" aria-hidden="true">
                                                <div class="modal-dialog modal-dialog-centered">
                                                    <div class="modal-content border-0 shadow">
                                                        <form action="{{ route('admin.bookings.approve', $booking->id) }}" method="POST">
                                                            @csrf
                                                            <div class="modal-header border-0 pb-0">
                                                                <h5 class="modal-title fw-bold">Approve Booking: {{ $booking->booking_number }}</h5>
                                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                            </div>
                                                            <div class="modal-body py-4">
                                                                <div class="text-center mb-3">
                                                                    <div class="avatar-lg bg-success-subtle text-success rounded-circle d-inline-flex align-items-center justify-content-center mx-auto mb-3">
                                                                        <i class="bx bx-check-double fs-2 text-success"></i>
                                                                    </div>
                                                                    <p class="text-muted px-3">Are you sure you want to approve this booking? This will activate the plot and generate EMIs.</p>
                                                                </div>
                                                                <div class="mb-3">
                                                                    <label class="form-label fw-medium text-dark">Approval Note (Optional)</label>
                                                                    <textarea name="approval_reason" class="form-control border-light-subtle bg-light-subtle" rows="3" placeholder="Add a note for the agent..."></textarea>
                                                                </div>
                                                            </div>
                                                            <div class="modal-footer border-0 pt-0">
                                                                <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Close</button>
                                                                <button type="submit" class="btn btn-success rounded-pill px-4">Approve & Activate</button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Reject Modal -->
                                            <div class="modal fade" id="rejectModal{{ $booking->id }}" tabindex="-1" aria-hidden="true">
                                                <div class="modal-dialog modal-dialog-centered">
                                                    <div class="modal-content border-0 shadow">
                                                        <form action="{{ route('admin.bookings.reject', $booking->id) }}" method="POST">
                                                            @csrf
                                                            <div class="modal-header border-0 pb-0">
                                                                <h5 class="modal-title fw-bold text-danger">Reject Booking: {{ $booking->booking_number }}</h5>
                                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                            </div>
                                                            <div class="modal-body py-4">
                                                                <div class="text-center mb-3">
                                                                    <div class="avatar-lg bg-danger-subtle text-danger rounded-circle d-inline-flex align-items-center justify-content-center mx-auto mb-3">
                                                                        <i class="bx bx-x fs-2 text-danger"></i>
                                                                    </div>
                                                                    <p class="text-muted px-3">This will cancel the booking and release the plot back to <strong>AVAILABLE</strong> status.</p>
                                                                </div>
                                                                <div class="mb-3 px-2">
                                                                    <label class="form-label fw-medium text-dark">Rejection Reason <span class="text-danger">*</span></label>
                                                                    <textarea name="rejection_reason" class="form-control border-light-subtle bg-light-subtle" rows="4" required placeholder="Explain why this booking is being rejected..."></textarea>
                                                                </div>
                                                            </div>
                                                            <div class="modal-footer border-0 pt-0">
                                                                <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Close</button>
                                                                <button type="submit" class="btn btn-danger rounded-pill px-4">Reject & Release Plot</button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="8" class="text-center py-5">
                                            <div class="text-muted">
                                                <i class="bx bx-folder-open fs-1 align-middle mb-2"></i>
                                                <p class="mb-0">No pending bookings found at the moment.</p>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
                @if($bookings->hasPages())
                    <div class="card-footer bg-white border-top">
                        {{ $bookings->links() }}
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection