@extends('layouts.app')

@section('content')
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<style>
/* Reference Table Styling - Matching manager views */
.table {
    border-collapse: collapse;
    border-spacing: 0;
    background: white;
    width: 100%;
    margin: 0;
    border: 1px solid #dee2e6;
}

.table thead th {
    background: #CEEDF5 !important;
    color: #17479E !important;
    font-weight: 600;
    border: 1px solid #dee2e6 !important;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.table thead th:hover {
    background: #B8E2F0 !important;
}

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

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

.table tbody tr:hover {
    background: #e3f2fd !important;
}

.table tbody td {
    padding: 0.75rem 1rem !important;
    vertical-align: middle;
    border: 1px solid #dee2e6;
    font-size: 0.875rem;
    color: #495057;
}

.card {
    border-radius: 4px !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card-header {
    color: white !important;
}

.card-header h5 {
    color: white !important;
}

.page-header-modern {
    background: #17479E;
    border-radius: 4px;
    padding: 1.5rem;
    color: white;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 1.5rem;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: #6c757d;
}

.breadcrumb-item a {
    color: #17479E;
    text-decoration: none;
    transition: all 0.2s;
}

.breadcrumb-item a:hover {
    color: #00BCD4;
}

.breadcrumb-item.active {
    color: #6c757d;
}
</style>

<div class="container-fluid">
    {{-- Breadcrumb Navigation --}}
    <nav aria-label="breadcrumb" class="mb-3">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}"><i class='bx bx-home'></i> Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('hod.accountant.dashboard') }}">HOD Accountant</a></li>
            <li class="breadcrumb-item active">{{ $user->name }}</li>
        </ol>
    </nav>

    {{-- Page Header --}}
    <div class="page-header-modern mb-4">
        <div class="row align-items-center">
            <div class="col-lg-6 col-md-12 mb-3 mb-lg-0">
                <h2 class="mb-2 text-white"><i class='bx bx-user'></i> {{ $user->name }}'s Payment Enquiries</h2>
                <p class="mb-0 opacity-75">
                    <i class='bx bx-envelope'></i> {{ $user->email }} | <i class='bx bx-phone'></i> {{ $user->phone_number ?? 'N/A' }}
                </p>
            </div>
            <div class="col-lg-6 col-md-12 text-lg-end">
                <a href="{{ route('hod.accountant.dashboard') }}" class="btn btn-light btn-lg mb-2 mb-sm-0">
                    <i class='bx bx-arrow-back'></i> Back to Dashboard
                </a>
                <button class="btn btn-primary btn-lg ms-0 ms-sm-2 mb-2 mb-sm-0" data-bs-toggle="modal" data-bs-target="#filterModal">
                    <i class='bx bx-filter'></i> Filters
                </button>
                <button onclick="window.location.href='{{ route('hod.accountant.user.enquiries', ['userId' => $user->id, 'export' => 'excel']) }}'" class="btn btn-success btn-lg ms-0 ms-sm-2">
                    <i class='bx bx-download'></i> Export Excel
                </button>
            </div>
        </div>
    </div>

    {{-- Simple Metric Cards --}}
    <div class="row mb-4">
        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="card h-100" style="border-left:4px solid #333;"><div class="card-body text-center" style="background:#f5f5f5;">
                <p class="mb-1 small text-muted">TOTAL</p>
                <h3 class="mb-0">{{ $statusBreakdown['total'] ?? 0 }}</h3>
            </div></div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="card h-100" style="border-left:4px solid #2196f3;"><div class="card-body text-center" style="background:#e1f5fe;">
                <p class="mb-1 small text-muted">ASSIGNED</p>
                <h3 class="mb-0 text-info">{{ $statusBreakdown['assigned'] ?? 0 }}</h3>
            </div></div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="card h-100" style="border-left:4px solid #9c27b0;"><div class="card-body text-center" style="background:#f3e5f5;">
                <p class="mb-1 small text-muted">INITIATED</p>
                <h3 class="mb-0" style="color:#9c27b0;">{{ $statusBreakdown['initiated'] ?? 0 }}</h3>
            </div></div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="card h-100" style="border-left:4px solid #4caf50;"><div class="card-body text-center" style="background:#e8f5e9;">
                <p class="mb-1 small text-muted">APPROVED</p>
                <h3 class="mb-0 text-success">{{ $statusBreakdown['approved'] ?? 0 }}</h3>
            </div></div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="card h-100" style="border-left:4px solid #f44336;"><div class="card-body text-center" style="background:#ffebee;">
                <p class="mb-1 small text-muted">REJECTED</p>
                <h3 class="mb-0 text-danger">{{ $statusBreakdown['rejected'] ?? 0 }}</h3>
            </div></div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="card h-100" style="border-left:4px solid #00bcd4;"><div class="card-body text-center" style="background:#e0f7fa;">
                <p class="mb-1 small text-muted">PAID</p>
                <h3 class="mb-0" style="color:#00bcd4;">{{ $statusBreakdown['paid'] ?? 0 }}</h3>
            </div></div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="card h-100" style="border-left:4px solid #ff9800;"><div class="card-body text-center" style="background:#fff3e0;">
                <p class="mb-1 small text-muted">OVERDUE</p>
                <h3 class="mb-0 text-warning">{{ $statusBreakdown['overdue'] ?? 0 }}</h3>
            </div></div>
        </div>
    </div>


    {{-- Enquiries Table --}}
    <div class="card">
        <div class="card-header" style="background:#17479E;color:white;">
            <h5 class="mb-0 text-white">Payment Enquiries</h5>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th style="width: 50px;">SN</th>
                            <th>Check Number</th>
                            <th>Full Name</th>
                            <th>Type</th>
                            <th>Force Number</th>
                            <th>Phone</th>
                            <th>Payment Amount</th>
                            <th>Status</th>
                            <th>Created Date</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($enquiries as $enquiry)
                        @php
                            // Determine overdue type based on current status
                            $daysSinceCreated = now()->diffInDays($enquiry->created_at);
                            $daysInCurrentStatus = now()->diffInDays($enquiry->updated_at);
                            $isOverdue = false;
                            $overdueType = '';

                            if ($enquiry->status == 'pending' && $daysSinceCreated >= 3) {
                                $isOverdue = true;
                                $overdueType = 'Pending Overdue';
                            } elseif ($enquiry->status == 'assigned' && $daysInCurrentStatus >= 3) {
                                $isOverdue = true;
                                $overdueType = 'Assigned Overdue';
                            } elseif ($enquiry->status == 'initiated' && $daysInCurrentStatus >= 3) {
                                $isOverdue = true;
                                $overdueType = 'Initiated Overdue';
                            } elseif ($enquiry->status == 'approved' && $daysInCurrentStatus >= 3) {
                                $isOverdue = true;
                                $overdueType = 'Approved Overdue';
                            }

                            // Check if payment is initiated (for reassign button logic)
                            $hasInitiatedPayment = $enquiry->payment && $enquiry->payment->status == 'initiated';
                        @endphp
                        <tr>
                            <td><strong>{{ ($enquiries->currentPage() - 1) * $enquiries->perPage() + $loop->iteration }}</strong></td>
                            <td><strong>{{ $enquiry->check_number }}</strong></td>
                            <td>{{ ucwords($enquiry->full_name) }}</td>
                            <td>{{ ucfirst(str_replace('_', ' ', $enquiry->type)) }}</td>
                            <td>{{ $enquiry->force_no ?? 'N/A' }}</td>
                            <td>{{ $enquiry->phone ?? 'N/A' }}</td>
                            <td>
                                @if($enquiry->payment)
                                    Tsh {{ number_format($enquiry->payment->amount) }}
                                @else
                                    <span class="text-muted">Pending</span>
                                @endif
                            </td>
                            <td>
                                @if($isOverdue)
                                    <span class="badge bg-danger">{{ $overdueType }}</span>
                                @else
                                    @if($enquiry->status == 'assigned')
                                        <span class="badge bg-primary">Assigned</span>
                                        @if($hasInitiatedPayment)
                                            <br><span class="badge bg-info mt-1">Payment: Initiated</span>
                                        @endif
                                    @elseif($enquiry->status == 'initiated')
                                        <span class="badge bg-info">Initiated</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' || $enquiry->status == 'completed')
                                        <span class="badge bg-dark">Paid</span>
                                    @else
                                        <span class="badge bg-secondary">{{ ucfirst($enquiry->status) }}</span>
                                    @endif
                                @endif
                            </td>
                            <td>{{ $enquiry->created_at->format('d M Y') }}</td>
                            <td style="white-space: nowrap;">
                                <a href="{{ route('enquiries.show', $enquiry->id) }}" target="_blank" class="btn btn-sm btn-info" title="View Details">
                                    <i class="fas fa-eye"></i>
                                </a>
                                @if(($enquiry->status == 'assigned' || ($isOverdue && strpos($overdueType, 'Assigned') !== false)) && !$hasInitiatedPayment)
                                <button type="button" class="btn btn-sm btn-warning" onclick="showReassignModal({{ $enquiry->id }}, {{ $user->id }})" title="Reassign">
                                    <i class="fas fa-exchange-alt"></i>
                                </button>
                                @endif
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="10" 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>

{{-- Filter Modal --}}
<div class="modal fade" id="filterModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content" style="border-radius: 4px;">
            <div class="modal-header" style="background: #17479E;">
                <h5 class="modal-title text-white">
                    <i class='bx bx-filter'></i> Filter Payment Enquiries
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('hod.accountant.user.enquiries', $user->id) }}" method="GET">
                <div class="modal-body" style="padding: 25px;">
                    <div class="row">
                        <div class="col-md-6 mb-4">
                            <label class="form-label fw-bold" style="color: #1e293b;">
                                <i class="fas fa-tag text-primary"></i> Enquiry Type
                            </label>
                            <select name="type" class="form-select" style="border-radius: 8px; padding: 10px 15px; border: 2px solid #e5e7eb;">
                                <option value="">All Types</option>
                                <option value="refund" {{ request('type') == 'refund' ? 'selected' : '' }}>Refund</option>
                                <option value="share_enquiry" {{ request('type') == 'share_enquiry' ? 'selected' : '' }}>Share</option>
                                <option value="retirement" {{ request('type') == 'retirement' ? 'selected' : '' }}>Retirement</option>
                                <option value="deduction_add" {{ request('type') == 'deduction_add' ? 'selected' : '' }}>Deduction Adjustment</option>
                                <option value="withdraw_savings" {{ request('type') == 'withdraw_savings' ? 'selected' : '' }}>Withdraw Savings</option>
                                <option value="withdraw_deposit" {{ request('type') == 'withdraw_deposit' ? 'selected' : '' }}>Withdraw Deposit</option>
                                <option value="unjoin_membership" {{ request('type') == 'unjoin_membership' ? 'selected' : '' }}>Unjoin Membership</option>
                                <option value="join_membership" {{ request('type') == 'join_membership' ? 'selected' : '' }}>Join Membership</option>
                                <option value="ura_mobile" {{ request('type') == 'ura_mobile' ? 'selected' : '' }}>URA Mobile</option>
                                <option value="sick_for_30_days" {{ request('type') == 'sick_for_30_days' ? 'selected' : '' }}>Sick Leave 30+ Days</option>
                                <option value="condolences" {{ request('type') == 'condolences' ? 'selected' : '' }}>Condolences</option>
                                <option value="injured_at_work" {{ request('type') == 'injured_at_work' ? 'selected' : '' }}>Work Injury</option>
                                <option value="residential_disaster" {{ request('type') == 'residential_disaster' ? 'selected' : '' }}>Residential Disaster</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-4">
                            <label class="form-label fw-bold" style="color: #1e293b;">
                                <i class="fas fa-list-ul text-primary"></i> Status
                            </label>
                            <select name="status" class="form-select" style="border-radius: 8px; padding: 10px 15px; border: 2px solid #e5e7eb;">
                                <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-12 mb-4">
                            <label class="form-label fw-bold" style="color: #1e293b;">
                                <i class='bx bx-time text-primary'></i> Quick Date Filters
                            </label>
                            <div class="btn-group d-flex flex-wrap gap-2" role="group">
                                <button type="button" class="btn btn-outline-primary btn-sm" onclick="setQuickDate('today')">Today</button>
                                <button type="button" class="btn btn-outline-primary btn-sm" onclick="setQuickDate('week')">This Week</button>
                                <button type="button" class="btn btn-outline-primary btn-sm" onclick="setQuickDate('month')">This Month</button>
                                <button type="button" class="btn btn-outline-primary btn-sm" onclick="setQuickDate('year')">This Year</button>
                                <button type="button" class="btn btn-outline-success btn-sm" onclick="setQuickDate('q1')">Q1 (Jan-Mar)</button>
                                <button type="button" class="btn btn-outline-success btn-sm" onclick="setQuickDate('q2')">Q2 (Apr-Jun)</button>
                                <button type="button" class="btn btn-outline-success btn-sm" onclick="setQuickDate('q3')">Q3 (Jul-Sep)</button>
                                <button type="button" class="btn btn-outline-success btn-sm" onclick="setQuickDate('q4')">Q4 (Oct-Dec)</button>
                                <button type="button" class="btn btn-outline-info btn-sm" onclick="setQuickDate('h1')">H1 (Jan-Jun)</button>
                                <button type="button" class="btn btn-outline-info btn-sm" onclick="setQuickDate('h2')">H2 (Jul-Dec)</button>
                            </div>
                        </div>
                        <div class="col-md-6 mb-4">
                            <label class="form-label fw-bold" style="color: #1e293b;">
                                <i class="fas fa-calendar-alt text-primary"></i> Date From
                            </label>
                            <input type="date" name="date_from" id="date_from" class="form-control" value="{{ request('date_from') }}" style="border-radius: 8px; padding: 10px 15px; border: 2px solid #e5e7eb;">
                        </div>
                        <div class="col-md-6 mb-4">
                            <label class="form-label fw-bold" style="color: #1e293b;">
                                <i class="fas fa-calendar-alt text-primary"></i> Date To
                            </label>
                            <input type="date" name="date_to" id="date_to" class="form-control" value="{{ request('date_to') }}" style="border-radius: 8px; padding: 10px 15px; border: 2px solid #e5e7eb;">
                        </div>
                    </div>
                </div>
                <div class="modal-footer" style="background: #f8f9fa; border-radius: 0 0 15px 15px; padding: 15px 25px;">
                    <a href="{{ route('hod.accountant.user.enquiries', $user->id) }}" class="btn btn-secondary" style="border-radius: 8px; padding: 10px 20px;">
                        <i class="fas fa-times"></i> Clear
                    </a>
                    <button type="submit" class="btn btn-primary" style="border-radius: 8px; padding: 10px 25px; background: linear-gradient(135deg, #17479E 0%, #87CEEB 100%); border: none;">
                        <i class="fas fa-check"></i> Apply Filters
                    </button>
                </div>
            </form>
        </div>
    </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: 4px;">
            <div class="modal-header" style="background: #17479E;">
                <h5 class="modal-title text-white">
                    <i class='bx bx-transfer'></i> Reassign Payment 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 (Accountant)
                        </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 Accountant...</option>
                            @foreach(\App\Models\User::whereHas('roles', function($q) { $q->where('name', 'accountant'); })->get() as $accountant)
                                @if($accountant->id != $user->id)
                                <option value="{{ $accountant->id }}">{{ $accountant->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);
    });
});

function setQuickDate(period) {
    const today = new Date();
    const year = today.getFullYear();
    let dateFrom = '';
    let dateTo = '';

    switch(period) {
        case 'today':
            dateFrom = today.toISOString().split('T')[0];
            dateTo = today.toISOString().split('T')[0];
            break;
        case 'week':
            const weekStart = new Date(today);
            weekStart.setDate(today.getDate() - today.getDay());
            dateFrom = weekStart.toISOString().split('T')[0];
            dateTo = today.toISOString().split('T')[0];
            break;
        case 'month':
            const monthStart = new Date(year, today.getMonth(), 1);
            dateFrom = monthStart.toISOString().split('T')[0];
            dateTo = today.toISOString().split('T')[0];
            break;
        case 'year':
            const yearStart = new Date(year, 0, 1);
            dateFrom = yearStart.toISOString().split('T')[0];
            dateTo = today.toISOString().split('T')[0];
            break;
        case 'q1':
            dateFrom = year + '-01-01';
            dateTo = year + '-03-31';
            break;
        case 'q2':
            dateFrom = year + '-04-01';
            dateTo = year + '-06-30';
            break;
        case 'q3':
            dateFrom = year + '-07-01';
            dateTo = year + '-09-30';
            break;
        case 'q4':
            dateFrom = year + '-10-01';
            dateTo = year + '-12-31';
            break;
        case 'h1':
            dateFrom = year + '-01-01';
            dateTo = year + '-06-30';
            break;
        case 'h2':
            dateFrom = year + '-07-01';
            dateTo = year + '-12-31';
            break;
    }

    document.getElementById('date_from').value = dateFrom;
    document.getElementById('date_to').value = dateTo;
}
</script>
@endsection