@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="mb-0">
            <i class="fas fa-exclamation-triangle text-warning mr-2"></i>
            Expired Payment Schedules
        </h4>
        <div>
            <button type="button" onclick="history.back()" class="btn btn-secondary mr-2">
                <i class="fas fa-arrow-left mr-2"></i>Back
            </button>
            <a href="{{ route('reseller.sales-payment-schedules.monthly') }}" class="btn btn-info mr-2">
                <i class="fas fa-calendar-alt mr-2"></i>Monthly Schedule
            </a>
            <a href="{{ route('reseller.sales-payment-schedules.create') }}" class="btn btn-primary">
                <i class="fas fa-plus mr-2"></i>Create Schedule
            </a>
        </div>
    </div>

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

    <!-- Summary Card -->
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card border-danger">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted mb-1">Total Expired Schedules</h6>
                            <h4 class="mb-0 text-danger">{{ $totalCount }}</h4>
                            <small class="text-muted">Unpaid expired commitments</small>
                        </div>
                        <div>
                            <i class="fas fa-exclamation-triangle fa-2x text-danger"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-warning">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted mb-1">Total Expected Amount</h6>
                            <h4 class="mb-0 text-warning">BDT {{ number_format($totalExpectedAmount, 2) }}</h4>
                            <small class="text-muted">From expired schedules</small>
                        </div>
                        <div>
                            <i class="fas fa-money-bill-wave fa-2x text-warning"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-info">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted mb-1">Total Payment Received</h6>
                            <h4 class="mb-0 text-info">BDT {{ number_format($totalPaymentAmount, 2) }}</h4>
                            <small class="text-muted">Against expired schedules</small>
                        </div>
                        <div>
                            <i class="fas fa-check-circle fa-2x text-info"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter Form -->
    <form method="get" class="card mb-3 p-3">
        <div class="form-row align-items-end">
            <div class="col-md-3 mb-2">
                <label class="small mb-1">Invoice</label>
                <select name="sales_invoice_id" class="form-control">
                    <option value="">All</option>
                    @foreach($invoices as $invoice)
                        <option value="{{ $invoice->id }}" data-user-id="{{ $invoice->customer_id }}" {{ request('sales_invoice_id') == $invoice->id ? 'selected' : '' }}>
                            {{ $invoice->invoice_no }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3 mb-2">
                <label class="small mb-1">Company Name</label>
                <select name="user_id" class="form-control">
                    <option value="">All</option>
                    @foreach($users as $user)
                        <option value="{{ $user->id }}" {{ request('user_id') == $user->id ? 'selected' : '' }}>
                            {{ $user->company_name ? $user->company_name . ' (' . $user->name . ')' : $user->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2 mb-2">
                <label class="small mb-1">Date From</label>
                <input type="date" name="date_from" class="form-control" value="{{ request('date_from', $dateFromValue ?? '') }}">
            </div>
            <div class="col-md-2 mb-2">
                <label class="small mb-1">Date To</label>
                <input type="date" name="date_to" class="form-control" value="{{ request('date_to', $dateToValue ?? '') }}">
            </div>
            <div class="col-md-2 mb-2">
                <button class="btn btn-primary btn-sm mr-2" type="submit">
                    <i class="fas fa-filter"></i> Filter
                </button>
                <a class="btn btn-secondary btn-sm" href="{{ route('reseller.sales-payment-schedules.expired') }}">
                    <i class="fas fa-undo"></i> Reset
                </a>
            </div>
        </div>
    </form>

    <!-- Expired Payment Schedules Table -->
    <div class="card">
        <div class="card-header bg-danger text-white">
            <h5 class="mb-0">
                <i class="fas fa-exclamation-triangle mr-2"></i>
                Expired Payment Schedules (Expected Payment Date Passed)
            </h5>
        </div>
        <div class="table-responsive">
            <table class="table table-bordered mb-0">
                <thead class="thead-light">
                    <tr>
                        <th>#</th>
                        <th>Invoice</th>
                        <th>Company Name</th>
                        <th>Mobile Number</th>
                        <th>Expected Payment Date</th>
                        <th>Days Overdue</th>
                        <th>Expected Amount</th>
                        <th>Payment Amount</th>
                        <th>Remarks</th>
                        <th class="text-right">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($expiredSchedulesPaginated as $schedule)
                        <tr class="{{ $schedule->days_overdue > 30 ? 'table-danger' : ($schedule->days_overdue > 7 ? 'table-warning' : '') }}">
                            <td>{{ $expiredSchedulesPaginated->firstItem() + $loop->index }}</td>
                            <td>{{ optional($schedule->salesInvoice)->invoice_no ?? 'N/A' }}</td>
                            <td>
                                @php
                                    $user = $schedule->user;
                                    $displayName = $user && $user->company_name ? $user->company_name : ($user ? $user->name : 'N/A');
                                @endphp
                                {{ $displayName }}
                            </td>
                            <td>
                                @php
                                    $user = $schedule->user;
                                    $mobileNumber = $user && $user->phone ? $user->phone : 'N/A';
                                @endphp
                                {{ $mobileNumber }}
                            </td>
                            <td>
                                <span class="text-danger font-weight-bold">
                                    {{ optional($schedule->expected_payment_date)->format('Y-m-d') }}
                                </span>
                            </td>
                            <td>
                                <span class="badge badge-{{ $schedule->days_overdue > 30 ? 'danger' : ($schedule->days_overdue > 7 ? 'warning' : 'secondary') }}">
                                    {{ $schedule->days_overdue ?? 0 }} days
                                </span>
                            </td>
                            <td>BDT {{ number_format($schedule->expected_payment_amount, 2) }}</td>
                            <td>BDT {{ number_format($schedule->transaction_payment_amount ?? 0, 2) }}</td>
                            <td>{{ $schedule->remarks ?? '—' }}</td>
                            <td class="text-right">
                                <a href="{{ route('reseller.sales-payment-schedules.show', $schedule) }}" class="btn btn-sm btn-outline-info" title="View">
                                    <i class="fas fa-eye"></i> View
                                </a>
                                <a href="{{ route('reseller.sales-payment-schedules.edit', $schedule) }}" class="btn btn-sm btn-outline-primary">
                                    Edit
                                </a>
                                <form action="{{ route('reseller.sales-payment-schedules.destroy', $schedule) }}" method="post" class="d-inline" onsubmit="return confirm('Delete this schedule?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-outline-danger">Delete</button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="10" class="text-center text-muted py-4">
                                <i class="fas fa-check-circle fa-2x mb-2 text-success"></i>
                                <p class="mb-0">No expired payment schedules found.</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
                @if($expiredSchedulesPaginated->count() > 0)
                <tfoot class="table-info">
                    <tr>
                        <th colspan="6" class="text-right"><strong>Total Summary:</strong></th>
                        <th class="text-right"><strong>BDT {{ number_format($totalExpectedAmount, 2) }}</strong></th>
                        <th class="text-right"><strong>BDT {{ number_format($totalPaymentAmount, 2) }}</strong></th>
                        <th colspan="2"></th>
                    </tr>
                    <tr>
                        <th colspan="6" class="text-right"><small class="text-muted">Total Schedules:</small></th>
                        <th colspan="4" class="text-left"><small class="text-muted"><strong>{{ $totalCount }}</strong> expired schedule(s)</small></th>
                    </tr>
                </tfoot>
                @endif
            </table>
        </div>
        <div class="card-body">
            {{ $expiredSchedulesPaginated->links() }}
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    var userFilter = document.querySelector('select[name="user_id"]');
    var invoiceFilter = document.querySelector('select[name="sales_invoice_id"]');
    if (!userFilter || !invoiceFilter) {
        return;
    }

    var originalOptions = Array.from(invoiceFilter.options).map(function (opt) {
        return {
            value: opt.value,
            text: opt.text,
            userId: opt.dataset.userId || ''
        };
    });

    function rebuildInvoiceFilter(userId) {
        var currentValue = invoiceFilter.value;
        invoiceFilter.innerHTML = '';

        originalOptions.forEach(function (opt, index) {
            if (index === 0 || !userId || opt.userId === userId) {
                var option = document.createElement('option');
                option.value = opt.value;
                option.textContent = opt.text;
                option.dataset.userId = opt.userId;
                invoiceFilter.appendChild(option);
            }
        });

        if (invoiceFilter.querySelector('option[value="' + currentValue + '"]')) {
            invoiceFilter.value = currentValue;
        } else {
            invoiceFilter.selectedIndex = 0;
        }
    }

    rebuildInvoiceFilter(userFilter.value);
    userFilter.addEventListener('change', function () {
        rebuildInvoiceFilter(this.value);
    });
});
</script>
@endpush