@extends('layouts.app')

@section('content')
<style>
    .table {
        border-collapse: separate;
        border-spacing: 0;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    }

    .table thead th {
        background: #1e40af !important;
        color: white !important;
        font-weight: 700;
        border: none !important;
        padding: 15px 18px;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;
        text-align: center;
    }

    .table tbody tr {
        background: white;
        transition: all 0.2s ease;
    }

    .table tbody tr:hover {
        background: linear-gradient(to right, #f0f9ff 0%, #e0f2fe 100%) !important;
        transform: scale(1.01);
        box-shadow: 0 4px 12px rgba(23, 71, 158, 0.1);
    }

    .table tbody tr:nth-child(even) {
        background: #fafbfc;
    }

    .table tbody tr:nth-child(even):hover {
        background: linear-gradient(to right, #f0f9ff 0%, #e0f2fe 100%) !important;
    }

    .table tbody td {
        padding: 14px 18px !important;
        vertical-align: middle;
        border: none;
        border-bottom: 1px solid #e5e7eb;
        font-size: 0.875rem;
        color: #374151;
        text-align: center;
    }

    .table tbody td:first-child {
        font-weight: 600;
        color: #1e293b;
    }

    .badge {
        padding: 6px 14px;
        font-size: 0.7rem;
        font-weight: 700;
        border-radius: 50px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .dropdown-menu {
        border-radius: 10px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.15);
        border: none;
        padding: 8px 0;
    }

    .dropdown-item {
        padding: 10px 20px;
        transition: all 0.2s;
        font-size: 0.875rem;
    }

    .dropdown-item:hover {
        background: linear-gradient(135deg, #17479E 0%, #87CEEB 100%);
        color: white !important;
    }

    .dropdown-item i {
        width: 20px;
        text-align: center;
        margin-right: 8px;
    }

    .modern-breadcrumb-card {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
</style>

<div class="container-fluid py-4">
    <!-- Breadcrumb -->
    <div class="card modern-breadcrumb-card border-0 mb-4">
        <div class="card-body p-3">
            <div class="d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-3">
                <div class="d-flex align-items-center gap-3">
                    <div class="breadcrumb-icon-box" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); border-radius: 10px; color: white;">
                        <i class="fas fa-user-circle"></i>
                    </div>
                    <h5 class="breadcrumb-title" style="font-size: 1.15rem; font-weight: 700; color: #1e293b; margin: 0;">Loan Officer Enquiries</h5>
                </div>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0" style="background: transparent;">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}"><i class="fas fa-home"></i> Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('hod.loan.dashboard') }}">HOD Loan</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{ $user->name }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    <!-- Page Header -->
    <div class="mb-4" style="background: linear-gradient(135deg, #17479E 0%, #87CEEB 100%); padding: 32px; border-radius: 6px; color: white; box-shadow: 0 2px 6px rgba(23, 71, 158, 0.15);">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
            <div>
                <h1 class="mb-1" style="font-size: 28px; font-weight: 700; color: white;">{{ $user->name }}'s Loan Enquiries</h1>
                <p class="mb-0" style="color: rgba(255,255,255,0.9); font-size: 14px;">{{ $user->email }} | {{ $user->phone_number ?? 'N/A' }}</p>
            </div>
            <div class="d-flex gap-2">
                <a href="{{ route('hod.loan.dashboard') }}" class="btn btn-light">
                    <i class="fas fa-arrow-left"></i> Back to Dashboard
                </a>
                <button onclick="window.location.href='{{ route('hod.loan.user.enquiries', ['userId' => $user->id, 'export' => 'excel']) }}'" class="btn btn-success">
                    <i class="fas fa-file-excel"></i> Export Excel
                </button>
            </div>
        </div>
    </div>

    <!-- Status Breakdown -->
    <div class="row g-3 mb-4">
        <div class="col-6 col-md-4 col-lg-2">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-3 text-center">
                    <h6 class="text-muted small">Assigned</h6>
                    <h3 class="fw-bold text-primary">{{ $statusBreakdown['assigned'] ?? 0 }}</h3>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-lg-2">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-3 text-center">
                    <h6 class="text-muted small">Processed</h6>
                    <h3 class="fw-bold text-purple">{{ $statusBreakdown['processed'] ?? 0 }}</h3>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-lg-2">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-3 text-center">
                    <h6 class="text-muted small">Approved</h6>
                    <h3 class="fw-bold text-success">{{ $statusBreakdown['approved'] ?? 0 }}</h3>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-lg-2">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-3 text-center">
                    <h6 class="text-muted small">Rejected</h6>
                    <h3 class="fw-bold text-danger">{{ $statusBreakdown['rejected'] ?? 0 }}</h3>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-lg-2">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-3 text-center">
                    <h6 class="text-muted small">Paid</h6>
                    <h3 class="fw-bold text-info">{{ $statusBreakdown['paid'] ?? 0 }}</h3>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-lg-2">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-3 text-center">
                    <h6 class="text-muted small">Overdue</h6>
                    <h3 class="fw-bold text-warning">{{ $statusBreakdown['overdue'] ?? 0 }}</h3>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter Section -->
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <form action="{{ route('hod.loan.user.enquiries', $user->id) }}" method="GET">
                <div class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label">Status</label>
                        <select name="status" class="form-select">
                            <option value="">All Statuses</option>
                            <option value="assigned" {{ request('status') == 'assigned' ? 'selected' : '' }}>Assigned</option>
                            <option value="processed" {{ request('status') == 'processed' ? 'selected' : '' }}>Processed</option>
                            <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>Approved</option>
                            <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>Rejected</option>
                            <option value="paid" {{ request('status') == 'paid' ? 'selected' : '' }}>Paid</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Date From</label>
                        <input type="date" name="date_from" class="form-control" value="{{ request('date_from') }}">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Date To</label>
                        <input type="date" name="date_to" class="form-control" value="{{ request('date_to') }}">
                    </div>
                    <div class="col-md-3 d-flex align-items-end gap-2">
                        <button type="submit" class="btn btn-primary flex-grow-1">
                            <i class="fas fa-filter"></i> Filter
                        </button>
                        <a href="{{ route('hod.loan.user.enquiries', $user->id) }}" class="btn btn-secondary">
                            <i class="fas fa-times"></i> Clear
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Enquiries Table -->
    <div class="card border-0 shadow-sm">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th>Check Number</th>
                            <th>Full Name</th>
                            <th>Force Number</th>
                            <th>Phone</th>
                            <th>Loan Amount</th>
                            <th>Loan Type</th>
                            <th>Loan Category</th>
                            <th>Duration</th>
                            <th>Interest Rate</th>
                            <th>Monthly Deduction</th>
                            <th>Total + Interest</th>
                            <th>Total Interest</th>
                            <th>Processing Fee</th>
                            <th>Insurance</th>
                            <th>Disbursement Amount</th>
                            <th>Requested Amount</th>
                            <th>Status</th>
                            <th>Created Date</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($enquiries as $enquiry)
                        @php
                            $loan = $enquiry->loanApplication;
                        @endphp
                        <tr>
                            <td><strong>{{ $enquiry->check_number }}</strong></td>
                            <td>{{ ucwords($enquiry->full_name) }}</td>
                            <td>{{ $enquiry->force_no ?? 'N/A' }}</td>
                            <td>{{ $enquiry->phone ?? 'N/A' }}</td>
                            <td>
                                @if($loan && $loan->loan_amount)
                                    Tsh {{ number_format($loan->loan_amount) }}
                                @else
                                    N/A
                                @endif
                            </td>
                            <td>{{ $loan->loan_type ?? 'N/A' }}</td>
                            <td>{{ $loan ? ucfirst(str_replace('_', ' ', $loan->loan_category)) : 'N/A' }}</td>
                            <td>{{ $loan && $loan->loan_duration ? $loan->loan_duration . ' months' : 'N/A' }}</td>
                            <td>{{ $loan && $loan->interest_rate ? $loan->interest_rate . '%' : 'N/A' }}</td>
                            <td>
                                @if($loan && $loan->monthly_deduction)
                                    Tsh {{ number_format($loan->monthly_deduction) }}
                                @else
                                    N/A
                                @endif
                            </td>
                            <td>
                                @if($loan && $loan->total_loan_with_interest)
                                    Tsh {{ number_format($loan->total_loan_with_interest) }}
                                @else
                                    N/A
                                @endif
                            </td>
                            <td>
                                @if($loan && $loan->total_interest)
                                    Tsh {{ number_format($loan->total_interest) }}
                                @else
                                    N/A
                                @endif
                            </td>
                            <td>
                                @if($loan && $loan->processing_fee)
                                    Tsh {{ number_format($loan->processing_fee) }}
                                @else
                                    N/A
                                @endif
                            </td>
                            <td>
                                @if($loan && $loan->insurance)
                                    Tsh {{ number_format($loan->insurance) }}
                                @else
                                    N/A
                                @endif
                            </td>
                            <td>
                                @if($loan && $loan->disbursement_amount)
                                    Tsh {{ number_format($loan->disbursement_amount) }}
                                @else
                                    N/A
                                @endif
                            </td>
                            <td>
                                @if($loan && $loan->requested_amount)
                                    Tsh {{ number_format($loan->requested_amount) }}
                                @else
                                    N/A
                                @endif
                            </td>
                            <td>
                                @if($enquiry->status == 'assigned')
                                    <span class="badge bg-primary">Assigned</span>
                                @elseif($enquiry->status == 'processed')
                                    <span class="badge bg-info">Processed</span>
                                @elseif($enquiry->status == 'approved')
                                    <span class="badge bg-success">Approved</span>
                                @elseif($enquiry->status == 'rejected')
                                    <span class="badge bg-danger">Rejected</span>
                                @elseif($enquiry->status == 'paid')
                                    <span class="badge bg-dark">Paid</span>
                                @else
                                    <span class="badge bg-secondary">{{ ucfirst($enquiry->status) }}</span>
                                @endif
                            </td>
                            <td>{{ $enquiry->created_at->format('d M Y') }}</td>
                            <td>
                                <div class="dropdown">
                                    <button class="btn btn-sm btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                        <i class="fas fa-bars"></i> Actions
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a class="dropdown-item" href="{{ route('enquiries.show', $enquiry->id) }}" target="_blank">
                                                <i class="fas fa-eye"></i> View More
                                            </a>
                                        </li>
                                        @if($enquiry->status == 'assigned')
                                        <li>
                                            <a class="dropdown-item" href="javascript:void(0);" onclick="showReassignModal({{ $enquiry->id }}, {{ $user->id }})">
                                                <i class="fas fa-exchange-alt"></i> Reassign
                                            </a>
                                        </li>
                                        @endif
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="19" class="text-center py-4">
                                <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                                <p class="text-muted">No enquiries found</p>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        @if($enquiries->hasPages())
        <div class="card-footer">
            {{ $enquiries->links('pagination::bootstrap-5') }}
        </div>
        @endif
    </div>
</div>

<!-- Reassign Modal -->
<div class="modal fade" id="reassignModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border-radius: 15px; border: none; box-shadow: 0 10px 40px rgba(0,0,0,0.2);">
            <div class="modal-header" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); border-radius: 15px 15px 0 0; padding: 20px 25px;">
                <h5 class="modal-title" style="color: white; font-weight: 700; font-size: 1.2rem;">
                    <i class="fas fa-exchange-alt"></i> Reassign Loan Enquiry
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form id="reassignForm">
                <div class="modal-body" style="padding: 25px;">
                    <input type="hidden" id="reassign_enquiry_id">
                    <input type="hidden" id="reassign_from_user_id">

                    <div class="mb-4">
                        <label class="form-label fw-bold" style="color: #1e293b;">
                            <i class="fas fa-user-tie text-warning"></i> Reassign To (Loan Officer)
                        </label>
                        <select id="reassign_to_user_id" class="form-select" required style="border-radius: 8px; padding: 10px 15px; border: 2px solid #e5e7eb;">
                            <option value="">Select Loan Officer...</option>
                            @foreach(\App\Models\User::whereHas('roles', function($q) { $q->where('name', 'loanofficer'); })->get() as $loanOfficer)
                                @if($loanOfficer->id != $user->id)
                                <option value="{{ $loanOfficer->id }}">{{ $loanOfficer->name }}</option>
                                @endif
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-4">
                        <label class="form-label fw-bold" style="color: #1e293b;">
                            <i class="fas fa-comment-alt text-warning"></i> Reason (Optional)
                        </label>
                        <textarea id="reassign_reason" class="form-control" rows="3" style="border-radius: 8px; padding: 10px 15px; border: 2px solid #e5e7eb;" placeholder="Enter reason for reassignment..."></textarea>
                    </div>
                </div>
                <div class="modal-footer" style="background: #f8f9fa; border-radius: 0 0 15px 15px; padding: 15px 25px;">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" style="border-radius: 8px; padding: 10px 20px;">
                        <i class="fas fa-times"></i> Cancel
                    </button>
                    <button type="submit" class="btn btn-warning" style="border-radius: 8px; padding: 10px 25px; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); border: none; color: white;">
                        <i class="fas fa-check"></i> Reassign
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function showReassignModal(enquiryId, fromUserId) {
    document.getElementById('reassign_enquiry_id').value = enquiryId;
    document.getElementById('reassign_from_user_id').value = fromUserId;
    new bootstrap.Modal(document.getElementById('reassignModal')).show();
}

document.getElementById('reassignForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const data = {
        enquiry_id: document.getElementById('reassign_enquiry_id').value,
        from_user_id: document.getElementById('reassign_from_user_id').value,
        to_user_id: document.getElementById('reassign_to_user_id').value,
        reason: document.getElementById('reassign_reason').value,
        _token: '{{ csrf_token() }}'
    };

    fetch('{{ route("hod.reassign.enquiry") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            toastr.success(data.message);
            setTimeout(() => location.reload(), 1500);
        } else {
            toastr.error(data.message);
        }
    })
    .catch(error => {
        toastr.error('Error reassigning enquiry');
        console.error(error);
    });
});
</script>

<style>
    .modern-breadcrumb-card {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    .text-purple {
        color: #8b5cf6 !important;
    }
</style>
@endsection