@extends('layouts.admin')

@section('css')
@vite(['node_modules/choices.js/public/assets/styles/choices.min.css'])
@endsection


@section('content')
    <div class="row">
        <div class="col-xl-9">
            <!-- Booking Details Card -->
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="header-title">Booking Details: {{ $booking->booking_number }}</h4>
                    <div>
                        @if($booking->status === 'active')
                            <form action="{{ route('admin.bookings.cancel', $booking->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to cancel this booking? This will free up the plot.')">
                                @csrf
                                <button type="submit" class="btn btn-soft-danger btn-sm">Cancel Booking</button>
                            </form>
                        @endif
                        <a href="{{ route('admin.bookings.index') }}" class="btn btn-light btn-sm ms-2">Back to List</a>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Approval Status Banner -->
                    @if($booking->approval_status === 'pending')
                        <div class="alert alert-warning border-0 mb-4">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center">
                                    <iconify-icon icon="solar:clock-circle-bold-duotone" class="fs-24 me-2"></iconify-icon>
                                    <div>
                                        <h5 class="alert-heading mb-1">Pending Approval</h5>
                                        <p class="mb-0 small">This booking was created by an agent and is waiting for review.</p>
                                    </div>
                                </div>
                                <div class="d-flex gap-2">
                                    <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#approveModal">Approve</button>
                                    <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#rejectModal">Reject</button>
                                </div>
                            </div>
                        </div>
                    @elseif($booking->approval_status === 'rejected')
                        <div class="alert alert-danger border-0 mb-4">
                            <div class="d-flex align-items-center">
                                <iconify-icon icon="solar:close-circle-bold-duotone" class="fs-24 me-2"></iconify-icon>
                                <div>
                                    <h5 class="alert-heading mb-1">Booking Rejected</h5>
                                    <p class="mb-1"><strong>Reason:</strong> {{ $booking->rejection_reason ?? 'No reason provided.' }}</p>
                                    <p class="mb-0 small text-muted">Rejected by {{ $booking->approvedBy->name ?? 'Admin' }} on {{ $booking->approved_at->format('d M, Y H:i') }}</p>
                                </div>
                            </div>
                        </div>
                    @elseif($booking->approval_status === 'approved' && $booking->status !== 'cancelled')
                        <div class="alert alert-success border-0 mb-4">
                            <div class="d-flex align-items-center">
                                <iconify-icon icon="solar:check-circle-bold-duotone" class="fs-24 me-2"></iconify-icon>
                                <div>
                                    <h5 class="alert-heading mb-1">Booking Approved</h5>
                                    <p class="mb-1">This booking was approved and is now active.</p>
                                    @if($booking->approval_reason)
                                        <p class="mb-1 small"><strong>Note:</strong> {{ $booking->approval_reason }}</p>
                                    @endif
                                    <p class="mb-0 small text-muted">Approved by {{ $booking->approvedBy->name ?? 'Admin' }} on {{ $booking->approved_at->format('d M, Y H:i') }}</p>
                                </div>
                            </div>
                        </div>
                    @elseif($booking->status === 'cancelled' && $booking->approval_status !== 'rejected')
                        <div class="alert alert-danger border-0 mb-4">
                            <div class="d-flex align-items-center">
                                <iconify-icon icon="solar:trash-bin-trash-bold-duotone" class="fs-24 me-2"></iconify-icon>
                                <div>
                                    <h5 class="alert-heading mb-1">Booking Cancelled</h5>
                                    <p class="mb-0 small">This booking has been cancelled and the plot has been released.</p>
                                </div>
                            </div>
                        </div>
                    @endif


                    <div class="row mb-4">
                        <div class="col-md-6 border-end">
                            <h5 class="text-primary mb-3">Customer & Agent</h5>
                            <table class="table table-sm table-borderless">
                                <tr>
                                    <td class="text-muted" style="width: 140px;">Customer:</td>
                                    <td class="fw-bold">{{ $booking->customer->name }}</td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Customer Code:</td>
                                    <td>{{ $booking->customer->customer_code }}</td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Agent:</td>
                                    <td class="fw-bold">{{ $booking->agent->name }}</td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Current Rank:</td>
                                    <td>{{ $booking->agent->rank->name }} ({{ $booking->agent->rank->abbreviation }})</td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Rank at Booking:</td>
                                    <td class="fw-bold">{{ $booking->agentRank->name ?? 'N/A' }} ({{ $booking->agentRank->abbreviation ?? 'N/A' }})</td>
                                </tr>
                            </table>
                            @if($booking->agentRank && $booking->agent->rank_id !== $booking->agent_rank_id)
                                <div class="alert alert-info border-0 p-2 mt-2" role="alert">
                                    <iconify-icon icon="solar:info-circle-broken" class="fs-18 me-1 align-middle"></iconify-icon>
                                    <span class="small">Agent promoted since booking. Commission calculated at booking rank: <strong>{{ $booking->agentRank->abbreviation }}</strong></span>
                                </div>
                            @endif

                        </div>
                        <div class="col-md-6">
                            <h5 class="text-primary mb-3">Property Info</h5>
                            <table class="table table-sm table-borderless">
                                <tr>
                                    <td class="text-muted" style="width: 140px;">Project:</td>
                                    <td class="fw-bold">{{ $booking->project->name }}</td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Plot Number:</td>
                                    <td class="fw-bold">{{ $booking->plot->plot_number }}</td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Total Area:</td>
                                    <td>{{ number_format($booking->total_area, 2) }} sqft</td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Rate:</td>
                                    <td>₹ {{ number_format($booking->price_per_sqft, 2) }} / sqft</td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    <div class="row bg-light rounded p-3 mx-0 mb-4">
                        <div class="col-md-3">
                            <p class="text-muted mb-1 small">Total Amount</p>
                            <h4 class="mb-0">₹ {{ number_format($booking->total_amount, 2) }}</h4>
                        </div>
                        <div class="col-md-3">
                            <p class="text-muted mb-1 small">Booking Deposit</p>
                            <h4 class="mb-0">₹ {{ number_format($booking->booking_amount, 2) }}</h4>
                        </div>
                        <div class="col-md-3">
                            <p class="text-muted mb-1 small">Remaining Balance</p>
                            <h4 class="mb-0 text-primary">₹ {{ number_format($booking->remaining_amount, 2) }}</h4>
                        </div>
                        <div class="col-md-3">
                            <p class="text-muted mb-1 small">Status</p>
                            @if($booking->status === 'active')
                                <span class="badge bg-primary">Active</span>
                            @elseif($booking->status === 'completed')
                                <span class="badge bg-success">Completed</span>
                            @else
                                <span class="badge bg-danger">Cancelled</span>
                            @endif
                        </div>
                    </div>

                    <h5 class="text-primary mb-3">Installment Schedule (EMIs)</h5>
                    <div class="table-responsive">
                        <table class="table table-sm table-centered">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>Due Date</th>
                                    <th>Amount</th>
                                    <th>Sqft</th>
                                    <th>Status</th>
                                    <th>Paid Date</th>
                                    <th>Reference</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($booking->emis as $emi)
                                    <tr>
                                        <td>{{ $emi->emi_number }}</td>
                                        <td>{{ $emi->due_date->format('d M, Y') }}</td>
                                        <td>₹ {{ number_format($emi->amount, 2) }}</td>
                                        <td>{{ number_format((float)$emi->sqft_portion, 2) }}</td>
                                        <td>
                                            @if($emi->status === 'paid')
                                                <span class="badge bg-success-subtle text-success">Paid</span>
                                            @elseif($emi->status === 'pending')
                                                <span class="badge bg-warning-subtle text-warning">Pending</span>
                                            @elseif($emi->status === 'overdue')
                                                <span class="badge bg-danger-subtle text-danger">Overdue</span>
                                            @else
                                                <span class="badge bg-light text-muted">Cancelled</span>
                                            @endif
                                        </td>
                                        <td>{{ $emi->paid_date ? $emi->paid_date->format('d M, Y') : '-' }}</td>
                                        <td>{{ $emi->payment_reference ?? '-' }}</td>
                                        <td>
                                            @if($emi->status !== 'paid' && $emi->status !== 'cancelled' && $booking->status === 'active')
                                                <button class="btn btn-primary btn-sm pay-emi-btn" 
                                                        data-id="{{ $emi->id }}" 
                                                        data-number="{{ $emi->emi_number }}"
                                                        data-amount="{{ $emi->amount }}">Pay</button>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <h5 class="text-primary mt-4 mb-3">Commission Distribution Preview (Per EMI)</h5>
                    <div class="table-responsive">
                        <table class="table table-sm table-centered text-nowrap">
                            <thead class="table-light">
                                <tr>
                                    <th>Agent Name</th>
                                    <th>Rank</th>
                                    <th>Role</th>
                                    <th>Pts / sqft</th>
                                    <th>Comm / EMI</th>
                                    <th>Total Comm</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($commissionPreview as $item)
                                    <tr class="{{ $item['role'] === 'Selling Agent' ? 'table-primary' : '' }}">
                                        <td>{{ $item['agent_name'] }}</td>
                                        <td>{{ $item['rank'] }}</td>
                                        <td>{{ $item['role'] }}</td>
                                        <td>{{ number_format($item['points_per_sf'], 2) }}</td>
                                        <td class="fw-bold">₹ {{ number_format($item['commission_per_emi'], 2) }}</td>
                                        <td class="text-success fw-bold">₹ {{ number_format($item['total_commission'], 2) }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3">
            <div class="card">
                <div class="card-header">
                    <h4 class="header-title">Booking Meta</h4>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="text-muted small">Created By</label>
                        <p class="mb-0 fw-semibold">{{ $booking->createdBy->name ?? 'System' }}</p>
                    </div>
                    <div class="mb-3">
                        <label class="text-muted small">Created At</label>
                        <p class="mb-0 fw-semibold">{{ $booking->created_at->format('d M, Y H:i') }}</p>
                    </div>
                    <div class="mb-3">
                        <label class="text-muted small">Payment Mode</label>
                        <p class="mb-0 fw-semibold text-uppercase">{{ $booking->payment_mode }} ({{ $booking->payment_mode === 'cash' ? 'PV' : 'BV' }})</p>
                    </div>
                    @if($booking->notes)
                        <div class="mb-0">
                            <label class="text-muted small">Notes</label>
                            <p class="mb-0 small bg-light p-2 rounded">{{ $booking->notes }}</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Payment Modal -->
    <div class="modal fade" id="payEmiModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="payEmiForm">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Pay EMI #<span id="modalEmiNumber"></span></h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">Payment Date</label>
                            <input type="date" name="paid_date" class="form-control" value="{{ date('Y-m-d') }}" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Payment Mode</label>
                            <select name="payment_mode" class="form-control" data-choices required>

                                <option value="cash" {{ $booking->payment_mode === 'cash' ? 'selected' : '' }}>Cash</option>
                                <option value="online" {{ $booking->payment_mode === 'online' ? 'selected' : '' }}>Online</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Reference (Optional)</label>
                            <input type="text" name="payment_reference" class="form-control" placeholder="TXN ID / Receipt Number">
                        </div>
                        <p class="text-muted small">Amount to pay: <span class="fw-bold text-primary">₹ <span id="modalEmiAmount"></span></span></p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary" id="receivePaymentBtn">
                            <span class="spinner-border spinner-border-sm d-none me-1" role="status" aria-hidden="true"></span>
                            <span class="btn-text">Receive Payment</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Approve Modal -->
    <div class="modal fade" id="approveModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="{{ route('admin.bookings.approve', $booking->id) }}" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Approve Booking</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <p>Are you sure you want to approve this booking? This will activate the plot and generate EMIs.</p>
                        <div class="mb-3">
                            <label class="form-label">Approval Note (Optional)</label>
                            <textarea name="approval_reason" class="form-control" rows="2" placeholder="Note for the agent..."></textarea>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success">Approve & Activate</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Reject Modal -->
    <div class="modal fade" id="rejectModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="{{ route('admin.bookings.reject', $booking->id) }}" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Reject Booking</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <p class="text-danger">This will cancel the booking and release the plot back to available status.</p>
                        <div class="mb-3">
                            <label class="form-label">Rejection Reason <span class="text-danger">*</span></label>
                            <textarea name="rejection_reason" class="form-control" rows="3" required placeholder="Explain why this booking is being rejected (min 10 characters)..."></textarea>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-danger">Reject & Release Plot</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection


@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const payModal = new bootstrap.Modal(document.getElementById('payEmiModal'));
    let currentEmiId = null;

    document.querySelectorAll('.pay-emi-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            currentEmiId = this.dataset.id;
            document.getElementById('modalEmiNumber').innerText = this.dataset.number;
            document.getElementById('modalEmiAmount').innerText = parseFloat(this.dataset.amount).toLocaleString();
            payModal.show();
        });
    });

    document.getElementById('payEmiForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const formData = new FormData(this);
        
        // Show loading state
        const submitBtn = document.getElementById('receivePaymentBtn');
        const spinner = submitBtn.querySelector('.spinner-border');
        const btnText = submitBtn.querySelector('.btn-text');
        
        submitBtn.disabled = true;
        spinner.classList.remove('d-none');
        btnText.innerText = 'Processing...';

        fetch(`/admin/emis/${currentEmiId}/mark-paid`, {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            }
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                // Restore button state on error
                submitBtn.disabled = false;
                spinner.classList.add('d-none');
                btnText.innerText = 'Receive Payment';
                alert(data.message || 'Something went wrong');
            }
        })
        .catch(err => {
            // Restore button state on network error
            submitBtn.disabled = false;
            spinner.classList.add('d-none');
            btnText.innerText = 'Receive Payment';
            alert('A network error occurred. Please try again.');
        });
    });
});
</script>
@endsection