@extends('layouts.app')

@section('content')
<style>
/* Modern Table Styling */
.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;
}

.table-responsive {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

/* Legacy support for .modern-table class */
.modern-table {
    border-collapse: collapse;
    border-spacing: 0;
}

.modern-table tbody tr:hover {
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(23, 71, 158, 0.1);
}

.amount-cell {
    font-weight: 700;
    font-size: 1.2rem;
    color: #17479E;
    min-width: 150px;
}

.status-badge {
    padding: 0.6rem 1.2rem;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 120px;
    justify-content: center;
}

.status-pending {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
}

.status-approved {
    background: #d4edda;
    color: #155724;
    border: 1px solid #28a745;
}

.status-rejected {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #dc3545;
}

.status-paid {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #17a2b8;
}

.modern-btn {
    background: #17479E !important;
    color: white !important;
    border: 1px solid #17479E !important;
    border-radius: 8px;
    padding: 0.6rem 1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    white-space: nowrap;
}

.modern-btn:hover {
    background: #0f3470 !important;
    color: white !important;
    border-color: #0f3470 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(23, 71, 158, 0.3);
}

.actions-cell {
    min-width: 160px !important;
    width: 160px !important;
    max-width: 160px !important;
}

.user-name-cell {
    min-width: 180px !important;
}

.card {
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 8px 25px rgba(23, 71, 158, 0.15);
}

.date-cell {
    min-width: 140px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #17479E !important;
    border: 1px solid #17479E !important;
    color: white !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #0f3470 !important;
    border: 1px solid #0f3470 !important;
    color: white !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #17479E;
    border-radius: 6px;
    padding: 0.5rem 1rem;
}

.dataTables_wrapper .dataTables_info {
    font-weight: 500;
    color: #17479E;
}

/* Dropdown Styling */
.dropdown {
    position: static !important;
}

.dropdown-menu {
    border: none;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    border-radius: 12px;
    padding: 8px 0;
    min-width: 200px;
    z-index: 9999 !important;
    margin-top: 0.5rem;
    position: absolute !important;
}

.dropdown-item {
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    margin: 2px 8px;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    white-space: nowrap;
    color: #333;
}

.dropdown-item:hover {
    background: #17479E;
    color: white !important;
}

.dropdown-item:hover i {
    color: white !important;
}

.dropdown-item i {
    margin-right: 10px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.dropdown-divider {
    margin: 6px 12px;
    border-color: #e9ecef;
}

/* Fix table overflow for dropdown */
.table-responsive {
    overflow-x: auto !important;
    overflow-y: visible !important;
}

.dataTables_wrapper {
    overflow: visible !important;
}

.card-body {
    overflow-x: auto;
}

/* Ensure table doesn't break layout */
.modern-table {
    table-layout: fixed;
    width: 100% !important;
}

.modern-table th,
.modern-table td {
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>

<!-- Enhanced Breadcrumb Navigation -->
<div class="card border-0 shadow-sm mb-4" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);">
    <div class="card-body py-3">
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
            <div class="d-flex align-items-center gap-2">
                <i class="fas fa-wallet text-primary fs-5"></i>
                <h5 class="fw-bold mb-0 text-dark">{{ ucfirst(str_replace('_', ' ', $type)) }} Payments</h5>
            </div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item">
                        <a href="{{ route('dashboard') }}" class="text-decoration-none">
                            <i class="fas fa-home me-1"></i>Dashboard
                        </a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{{ route('payment.accountant.dashboard') }}" class="text-decoration-none">Payments</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        <span class="badge" style="background: linear-gradient(135deg, #87CEEB 0%, #17479e 100%); color: white;">
                            {{ ucfirst(str_replace('_', ' ', $type)) }}
                        </span>
                    </li>
                </ol>
            </nav>
        </div>
    </div>
</div>

@if(session('success'))
    <div class="alert alert-success">
        <i class="bx bx-check-circle"></i> {{ session('success') }}
    </div>
@endif

@if(session('error'))
    <div class="alert alert-danger">
        <i class="bx bx-x-circle"></i> {{ session('error') }}
    </div>
@endif

<div class="card border-0 shadow-lg">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-striped table-hover mb-0 modern-table" id="dataTable" style="width:100%">
                <thead>
                    <tr class="text-white">
                        <th width="60" class="text-center border-0">
                            <div class="d-flex align-items-center justify-content-center">
                                <i class="fas fa-hashtag me-1"></i>
                                <span class="fw-bold">SN</span>
                            </div>
                        </th>
                        <th class="border-0">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-money-bill-wave me-2"></i>
                                <span class="fw-bold">Amount</span>
                            </div>
                        </th>
                        <th class="border-0">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-chart-pie me-2"></i>
                                <span class="fw-bold">Status</span>
                            </div>
                        </th>
                        <th class="border-0">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-calendar me-2"></i>
                                <span class="fw-bold">Payment Date</span>
                            </div>
                        </th>
                        @if ($columnsToShow['initiated'])
                        <th class="border-0">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-user me-2"></i>
                                <span class="fw-bold">Initiated By</span>
                            </div>
                        </th>
                        @endif
                        @if ($columnsToShow['approved'])
                        <th class="border-0">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-check me-2"></i>
                                <span class="fw-bold">Approved By</span>
                            </div>
                        </th>
                        @endif
                        @if ($columnsToShow['rejected'])
                        <th class="border-0">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-times me-2"></i>
                                <span class="fw-bold">Rejected By</span>
                            </div>
                        </th>
                        @endif
                        @if ($columnsToShow['paid'])
                        <th class="border-0">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-hand-holding-usd me-2"></i>
                                <span class="fw-bold">Paid By</span>
                            </div>
                        </th>
                        @endif
                        <th class="border-0 text-center">
                            <div class="d-flex align-items-center justify-content-center">
                                <i class="fas fa-tools me-2"></i>
                                <span class="fw-bold">Actions</span>
                            </div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($payments as $index => $payment)
                        <tr>
                            <td class="text-center align-middle">
                                <div class="badge" style="background: #17479E; color: white; font-weight: bold; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; border-radius: 50%;">
                                    {{ $index + 1 }}
                                </div>
                            </td>
                            <td class="align-middle amount-cell">
                                TSh {{ number_format($payment->amount, 2) }}
                            </td>
                            <td class="align-middle">
                                @php
                                    $statusClass = 'status-pending';
                                    $icon = 'fa-hourglass-start';
                                    if(stripos($payment->status, 'approved') !== false) {
                                        $statusClass = 'status-approved';
                                        $icon = 'fa-check-double';
                                    }
                                    if(stripos($payment->status, 'rejected') !== false) {
                                        $statusClass = 'status-rejected';
                                        $icon = 'fa-ban';
                                    }
                                    if(stripos($payment->status, 'paid') !== false) {
                                        $statusClass = 'status-paid';
                                        $icon = 'fa-trophy';
                                    }
                                @endphp
                                <span class="status-badge {{ $statusClass }}">
                                    <i class="fas {{ $icon }} me-1"></i>{{ ucfirst($payment->status) }}
                                </span>
                            </td>
                            <td class="align-middle date-cell">
                                <div class="d-flex flex-column">
                                    <strong class="text-dark">{{ $payment->payment_date->format('M d, Y') }}</strong>
                                    <small class="text-muted">{{ $payment->payment_date->diffForHumans() }}</small>
                                </div>
                            </td>
                            @if ($columnsToShow['initiated'])
                                <td class="align-middle user-name-cell">
                                    @if($payment->initiatedBy)
                                        <div class="d-flex flex-column">
                                            <strong class="text-dark text-uppercase" style="font-size: 0.9rem;">
                                                {{ $payment->initiatedBy->name }}
                                            </strong>
                                            <small class="text-muted" style="font-size: 0.75rem;">
                                                {{ optional($payment->initiatedBy->roles->first())->name ?? 'User' }}
                                            </small>
                                        </div>
                                    @else
                                        <div class="text-center">
                                            <i class="fas fa-exclamation-triangle text-warning" style="font-size: 1.2rem;" title="Pending"></i>
                                            <div><small class="text-muted">Pending</small></div>
                                        </div>
                                    @endif
                                </td>
                            @endif
                            @if ($columnsToShow['approved'])
                                <td class="align-middle user-name-cell">
                                    @if($payment->approvedBy)
                                        <div class="d-flex flex-column">
                                            <strong class="text-dark text-uppercase" style="font-size: 0.9rem;">
                                                {{ $payment->approvedBy->name }}
                                            </strong>
                                            <small class="text-muted" style="font-size: 0.75rem;">
                                                {{ optional($payment->approvedBy->roles->first())->name ?? 'User' }}
                                            </small>
                                        </div>
                                    @else
                                        <div class="text-center">
                                            <i class="fas fa-exclamation-triangle text-warning" style="font-size: 1.2rem;" title="Pending"></i>
                                            <div><small class="text-muted">Pending</small></div>
                                        </div>
                                    @endif
                                </td>
                            @endif
                            @if ($columnsToShow['rejected'])
                                <td class="align-middle user-name-cell">
                                    @if($payment->rejectedBy)
                                        <div class="d-flex flex-column">
                                            <strong class="text-dark text-uppercase" style="font-size: 0.9rem;">
                                                {{ $payment->rejectedBy->name }}
                                            </strong>
                                            <small class="text-muted" style="font-size: 0.75rem;">
                                                {{ optional($payment->rejectedBy->roles->first())->name ?? 'User' }}
                                            </small>
                                        </div>
                                    @else
                                        <div class="text-center">
                                            <i class="fas fa-exclamation-triangle text-warning" style="font-size: 1.2rem;" title="Pending"></i>
                                            <div><small class="text-muted">Pending</small></div>
                                        </div>
                                    @endif
                                </td>
                            @endif
                            @if ($columnsToShow['paid'])
                                <td class="align-middle user-name-cell">
                                    @if($payment->paidBy)
                                        <div class="d-flex flex-column">
                                            <strong class="text-dark text-uppercase" style="font-size: 0.9rem;">
                                                {{ $payment->paidBy->name }}
                                            </strong>
                                            <small class="text-muted" style="font-size: 0.75rem;">
                                                {{ optional($payment->paidBy->roles->first())->name ?? 'User' }}
                                            </small>
                                        </div>
                                    @else
                                        <div class="text-center">
                                            <i class="fas fa-exclamation-triangle text-warning" style="font-size: 1.2rem;" title="Pending"></i>
                                            <div><small class="text-muted">Pending</small></div>
                                        </div>
                                    @endif
                                </td>
                            @endif
                            <td class="align-middle text-center actions-cell">
                                <div class="dropdown">
                                    <button class="btn btn-sm dropdown-toggle modern-btn" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="fas fa-cog"></i> Actions
                                    </button>
                                    <ul class="dropdown-menu shadow border-0" style="min-width: 200px;">
                                        <li>
                                            <a class="dropdown-item" href="{{ route('payments.timeline', ['paymentId' => $payment->id]) }}">
                                                <i class="bx bx-time-five text-primary me-2"></i>View Timeline
                                            </a>
                                        </li>
                                        <li><hr class="dropdown-divider"></li>
                                        <li>
                                            <a class="dropdown-item" href="{{ route('enquiries.show', $payment->enquiry_id) }}">
                                                <i class="fas fa-eye text-info me-2"></i>View Enquiry
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="text-center py-5">
                                <div class="text-muted">
                                    <i class="fas fa-inbox fa-3x mb-3 opacity-50"></i>
                                    <h5>No {{ $type }} payments found</h5>
                                    <p>No payments in this category at this time.</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    console.log('Initializing DataTable...');

    // Check if table exists
    if ($('#dataTable').length === 0) {
        console.error('Table #dataTable not found!');
        return;
    }

    // Check if DataTable function exists
    if (typeof $.fn.DataTable === 'undefined') {
        console.error('DataTables plugin not loaded!');
        return;
    }

    try {
        var table = $('#dataTable').DataTable({
            pageLength: 10,
            lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
            order: [[1, 'desc']], // Amount column
            responsive: false,
            autoWidth: true,
            processing: true,
            scrollX: true,
            scrollCollapse: true,
            columnDefs: [
                { orderable: false, targets: 0, width: '60px' }, // SN column
                { orderable: false, targets: -1, width: '160px', className: 'text-center' }  // Actions column
            ],
            language: {
                lengthMenu: "Show _MENU_ items per page",
                info: "Showing _START_ to _END_ of _TOTAL_ payments",
                infoEmpty: "Showing 0 to 0 of 0 payments",
                infoFiltered: "(filtered from _MAX_ total payments)",
                search: "Search payments:",
                paginate: {
                    first: "First",
                    last: "Last",
                    next: "Next",
                    previous: "Previous"
                }
            },
            drawCallback: function() {
                console.log('DataTable drawn successfully');
            }
        });

        console.log('DataTable initialized successfully');
        console.log('Total rows:', table.rows().count());
    } catch(e) {
        console.error('Error initializing DataTable:', e);
    }
});
</script>

@endsection