@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;">Accountant 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.accountant.dashboard') }}">HOD Accountant</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 Payment 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.accountant.dashboard') }}" class="btn btn-light">
                    <i class="fas fa-arrow-left"></i> Back to Dashboard
                </a>
                <button onclick="window.location.href='{{ route('hod.accountant.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.accountant.user.enquiries', $user->id) }}" method="GET">
                <div class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label">Enquiry Type</label>
                        <select name="type" class="form-select">
                            <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-2">
                        <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-2">
                        <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-2">
                        <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.accountant.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>Type</th>
                            <th>Force Number</th>
                            <th>Phone</th>
                            <th>Payment Amount</th>
                            <th>Payment Status</th>
                            <th>Created Date</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($enquiries as $enquiry)
                        <tr>
                            <td><strong>{{ $enquiry->check_number }}</strong></td>
                            <td>{{ ucwords($enquiry->full_name) }}</td>
                            <td>
                                <span class="badge bg-secondary">{{ ucfirst(str_replace('_', ' ', $enquiry->type)) }}</span>
                            </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($enquiry->payment)
                                    @if($enquiry->payment->status == 'initiated')
                                        <span class="badge bg-info">Initiated</span>
                                    @elseif($enquiry->payment->status == 'approved')
                                        <span class="badge bg-success">Approved</span>
                                    @elseif($enquiry->payment->status == 'rejected')
                                        <span class="badge bg-danger">Rejected</span>
                                    @elseif($enquiry->payment->status == 'paid')
                                        <span class="badge bg-dark">Paid</span>
                                    @else
                                        <span class="badge bg-secondary">{{ ucfirst($enquiry->payment->status) }}</span>
                                    @endif
                                @else
                                    <span class="badge bg-warning">Not Initiated</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="9" 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 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);
    });
});
</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