@push('styles')
<style>
    /* Clean Statistics Table Styling */
    .table th {
        border-top: none;
        padding: 1rem 0.5rem;
    }
    
    .table td {
        border-top: 1px solid #e3e6f0;
        padding: 1.5rem 0.5rem;
    }
    
    .progress {
        border-radius: 10px;
        overflow: hidden;
    }
    
    .progress-bar {
        font-size: 0.75rem;
        font-weight: 600;
    }
    
    .paid-ribbon {
        position: absolute;
        top: -5px;
        right: -10px;
        background: linear-gradient(45deg, #28a745, #20c997);
        color: white;
        padding: 2px 8px;
        font-size: 10px;
        font-weight: bold;
        border-radius: 3px;
        transform: rotate(15deg);
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        z-index: 10;
    }
    
    .overdue-ribbon {
        position: absolute;
        top: -5px;
        right: -10px;
        background: linear-gradient(45deg, #dc3545, #c82333);
        color: white;
        padding: 2px 8px;
        font-size: 10px;
        font-weight: bold;
        border-radius: 3px;
        transform: rotate(15deg);
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        z-index: 10;
    }
    
    .draft-ribbon {
        position: absolute;
        top: -5px;
        right: -10px;
        background: linear-gradient(45deg, #6c757d, #5a6268);
        color: white;
        padding: 2px 8px;
        font-size: 10px;
        font-weight: bold;
        border-radius: 3px;
        transform: rotate(15deg);
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        z-index: 10;
    }
    
    .sent-ribbon {
        position: absolute;
        top: -5px;
        right: -10px;
        background: linear-gradient(45deg, #17a2b8, #138496);
        color: white;
        padding: 2px 8px;
        font-size: 10px;
        font-weight: bold;
        border-radius: 3px;
        transform: rotate(15deg);
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        z-index: 10;
    }
    
    .cancelled-ribbon {
        position: absolute;
        top: -5px;
        right: -10px;
        background: linear-gradient(45deg, #343a40, #23272b);
        color: white;
        padding: 2px 8px;
        font-size: 10px;
        font-weight: bold;
        border-radius: 3px;
        transform: rotate(15deg);
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        z-index: 10;
    }
    
    .table-success {
        background-color: rgba(40, 167, 69, 0.1) !important;
    }
    
    .table-danger {
        background-color: rgba(220, 53, 69, 0.1) !important;
    }
    
    .table-secondary {
        background-color: rgba(108, 117, 125, 0.1) !important;
    }
    
    .table-info {
        background-color: rgba(23, 162, 184, 0.1) !important;
    }
    
    .table-dark {
        background-color: rgba(52, 58, 64, 0.1) !important;
    }
    
    .status-badge {
        font-size: 0.75em;
        padding: 0.375em 0.75em;
        min-width: 100px;
        text-align: center;
    }
    
    .badge {
        font-size: 0.75em;
        padding: 0.375em 0.75em;
    }
    
    /* Table styling improvements */
    .table th {
        background-color: #f8f9fc;
        border-top: none;
        font-weight: 600;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 1rem 0.75rem;
    }
    
    .table td {
        padding: 1rem 0.75rem;
        vertical-align: middle;
    }
    
    /* Optimized column widths */
    .table th:nth-child(1), .table td:nth-child(1) { width: 18%; } /* No. Invoice */
    .table th:nth-child(2), .table td:nth-child(2) { width: 12%; } /* Tanggal */
    .table th:nth-child(3), .table td:nth-child(3) { width: 15%; } /* Booking Code */
    .table th:nth-child(4), .table td:nth-child(4) { width: 20%; } /* Nama Tamu */
    .table th:nth-child(5), .table td:nth-child(5) { width: 15%; } /* Hotel */
    .table th:nth-child(6), .table td:nth-child(6) { width: 12%; } /* Total */
    .table th:nth-child(7), .table td:nth-child(7) { width: 8%; }  /* Aksi */
</style>
@endpush

@extends('admin.layout')

@section('title', 'Manajemen Invoice')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">Manajemen Invoice</h1>
            <p class="mb-0 text-muted">Kelola semua invoice dan tagihan hotel</p>
        </div>
        <div>
            <a href="{{ route('admin.invoices.create') }}" class="btn btn-primary">
                <i class="fas fa-plus"></i> Buat Invoice Baru
            </a>
            <a href="{{ route('admin.invoices.reports') }}" class="btn btn-info">
                <i class="fas fa-chart-bar"></i> Laporan
            </a>
        </div>
    </div>

    <!-- Invoice Statistics -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-chart-bar"></i> Statistik Invoice
                    </h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-borderless">
                            <thead>
                                <tr>
                                    <th class="text-center" style="width: 25%;">
                                        <i class="fas fa-file-invoice text-primary"></i><br>
                                        <small class="text-muted">Total Invoice</small>
                                    </th>
                                    <th class="text-center" style="width: 25%;">
                                        <i class="fas fa-chart-line text-success"></i><br>
                                        <small class="text-muted">Total Pendapatan</small>
                                    </th>
                                    <th class="text-center" style="width: 25%;">
                                        <i class="fas fa-check-circle text-info"></i><br>
                                        <small class="text-muted">Sudah Dibayar</small>
                                    </th>
                                    <th class="text-center" style="width: 25%;">
                                        <i class="fas fa-clock text-warning"></i><br>
                                        <small class="text-muted">Belum Dibayar</small>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="text-center">
                                        <h3 class="text-primary font-weight-bold mb-0">{{ number_format($stats['total_invoices']) }}</h3>
                                        <small class="text-muted">Invoice</small>
                                    </td>
                                    <td class="text-center">
                                        <h3 class="text-success font-weight-bold mb-0">Rp {{ number_format($stats['total_amount'], 0, ',', '.') }}</h3>
                                        <small class="text-muted">Semua invoice</small>
                                    </td>
                                    <td class="text-center">
                                        <h3 class="text-info font-weight-bold mb-0">Rp {{ number_format($stats['paid_amount'], 0, ',', '.') }}</h3>
                                        <small class="text-muted">Invoice lunas</small>
                                    </td>
                                    <td class="text-center">
                                        <h3 class="text-warning font-weight-bold mb-0">Rp {{ number_format($stats['pending_amount'], 0, ',', '.') }}</h3>
                                        <small class="text-muted">Menunggu pembayaran</small>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- Progress Bar for Payment Status -->
                    <div class="mt-3">
                        <div class="row">
                            <div class="col-md-6">
                                <small class="text-muted">Status Pembayaran:</small>
                                <div class="progress" style="height: 20px;">
                                    @php
                                        $paidPercentage = $stats['total_amount'] > 0 ? ($stats['paid_amount'] / $stats['total_amount']) * 100 : 0;
                                        $pendingPercentage = 100 - $paidPercentage;
                                    @endphp
                                    <div class="progress-bar bg-info" role="progressbar" style="width: {{ $paidPercentage }}%" 
                                         aria-valuenow="{{ $paidPercentage }}" aria-valuemin="0" aria-valuemax="100">
                                        {{ number_format($paidPercentage, 1) }}% Lunas
                                    </div>
                                    <div class="progress-bar bg-warning" role="progressbar" style="width: {{ $pendingPercentage }}%" 
                                         aria-valuenow="{{ $pendingPercentage }}" aria-valuemin="0" aria-valuemax="100">
                                        {{ number_format($pendingPercentage, 1) }}% Pending
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <small class="text-muted">Ringkasan:</small>
                                <ul class="list-unstyled mb-0 mt-1">
                                    <li><i class="fas fa-circle text-info"></i> <strong>{{ number_format($stats['paid_invoices']) }}</strong> invoice sudah dibayar</li>
                                    <li><i class="fas fa-circle text-warning"></i> <strong>{{ number_format($stats['pending_invoices']) }}</strong> invoice belum dibayar</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Filter & Pencarian</h6>
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('admin.invoices.index') }}" class="row">
                <div class="col-md-3 mb-3">
                    <label for="from_date" class="form-label">Dari Tanggal</label>
                    <input type="date" class="form-control" id="from_date" name="from_date" value="{{ request('from_date') }}">
                </div>
                <div class="col-md-3 mb-3">
                    <label for="to_date" class="form-label">Sampai Tanggal</label>
                    <input type="date" class="form-control" id="to_date" name="to_date" value="{{ request('to_date') }}">
                </div>
                <div class="col-md-2 mb-3">
                    <label for="status" class="form-label">Status</label>
                    <select class="form-control" id="status" name="status">
                        <option value="">Semua Status</option>
                        <option value="draft" {{ request('status') == 'draft' ? 'selected' : '' }}>Draft</option>
                        <option value="sent" {{ request('status') == 'sent' ? 'selected' : '' }}>Terkirim</option>
                        <option value="paid" {{ request('status') == 'paid' ? 'selected' : '' }}>Dibayar</option>
                        <option value="overdue" {{ request('status') == 'overdue' ? 'selected' : '' }}>Terlambat</option>
                        <option value="cancelled" {{ request('status') == 'cancelled' ? 'selected' : '' }}>Dibatalkan</option>
                    </select>
                </div>
                <div class="col-md-2 mb-3">
                    <label for="hotel_id" class="form-label">Hotel</label>
                    <select class="form-control" id="hotel_id" name="hotel_id">
                        <option value="">Semua Hotel</option>
                        @foreach($hotels as $hotel)
                            <option value="{{ $hotel->id }}" {{ request('hotel_id') == $hotel->id ? 'selected' : '' }}>
                                {{ $hotel->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2 mb-3">
                    <label for="search" class="form-label">Pencarian</label>
                    <input type="text" class="form-control" id="search" name="search" 
                           placeholder="No. Invoice / Nama Tamu" value="{{ request('search') }}">
                </div>
                <div class="col-12">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-search"></i> Filter
                    </button>
                    <a href="{{ route('admin.invoices.index') }}" class="btn btn-secondary">
                        <i class="fas fa-times"></i> Reset
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- Invoice Table -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Daftar Invoice</h6>
        </div>
        <div class="card-body">
            @if($invoices->count() > 0)
                <div class="table-responsive">
                    <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                <th>No. Invoice</th>
                                <th>Tanggal</th>
                                <th>Booking Code</th>
                                <th>Nama Tamu</th>
                                <th>Hotel</th>
                                <th>Total</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($invoices as $invoice)
                                @php
                                    $isPaid = $invoice->status === 'paid';
                                    $isOverdue = $invoice->status === 'overdue';
                                    $isDraft = $invoice->status === 'draft';
                                    $isSent = $invoice->status === 'sent';
                                    $isCancelled = $invoice->status === 'cancelled';
                                    
                                    $rowClass = '';
                                    if ($isPaid) {
                                        $rowClass = 'table-success';
                                    } elseif ($isOverdue) {
                                        $rowClass = 'table-danger';
                                    } elseif ($isDraft) {
                                        $rowClass = 'table-secondary';
                                    } elseif ($isSent) {
                                        $rowClass = 'table-info';
                                    } elseif ($isCancelled) {
                                        $rowClass = 'table-dark';
                                    }
                                @endphp
                                <tr class="{{ $rowClass }}" style="position: relative;">
                                    @if($isPaid)
                                        <td style="position: relative;">
                                            <div class="paid-ribbon">
                                                <i class="fas fa-check"></i> LUNAS
                                            </div>
                                            <strong>{{ $invoice->invoice_number }}</strong>
                                        </td>
                                    @elseif($isOverdue)
                                        <td style="position: relative;">
                                            <div class="overdue-ribbon">
                                                <i class="fas fa-exclamation-triangle"></i> TERLAMBAT
                                            </div>
                                            <strong>{{ $invoice->invoice_number }}</strong>
                                        </td>
                                    @elseif($isDraft)
                                        <td style="position: relative;">
                                            <div class="draft-ribbon">
                                                <i class="fas fa-edit"></i> DRAFT
                                            </div>
                                            <strong>{{ $invoice->invoice_number }}</strong>
                                        </td>
                                    @elseif($isSent)
                                        <td style="position: relative;">
                                            <div class="sent-ribbon">
                                                <i class="fas fa-paper-plane"></i> TERKIRIM
                                            </div>
                                            <strong>{{ $invoice->invoice_number }}</strong>
                                        </td>
                                    @elseif($isCancelled)
                                        <td style="position: relative;">
                                            <div class="cancelled-ribbon">
                                                <i class="fas fa-times-circle"></i> DIBATALKAN
                                            </div>
                                            <strong>{{ $invoice->invoice_number }}</strong>
                                        </td>
                                    @else
                                        <td>
                                            <strong>{{ $invoice->invoice_number }}</strong>
                                        </td>
                                    @endif
                                    <td>{{ $invoice->created_at->format('d/m/Y') }}</td>
                                    <td>
                                        <span class="badge badge-info">{{ $invoice->booking->booking_code }}</span>
                                    </td>
                                    <td>{{ $invoice->booking->guest_name }}</td>
                                    <td>{{ $invoice->booking->room->hotel->name ?? 'N/A' }}</td>
                                    <td>
                                        <strong>Rp {{ number_format($invoice->total_amount, 0, ',', '.') }}</strong>
                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <a href="{{ route('admin.invoices.show', $invoice) }}" 
                                               class="btn btn-sm btn-info" title="Lihat Detail">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <a href="{{ route('admin.invoices.edit', $invoice) }}" 
                                               class="btn btn-sm btn-warning" title="Edit">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <a href="{{ route('admin.invoices.download', $invoice) }}" 
                                               class="btn btn-sm btn-success" title="Download PDF">
                                                <i class="fas fa-download"></i>
                                            </a>
                                            <button type="button" class="btn btn-sm btn-danger delete-invoice" 
                                                    data-invoice-id="{{ $invoice->id }}" 
                                                    data-invoice-number="{{ $invoice->invoice_number }}" 
                                                    title="Hapus">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <div>
                        Menampilkan {{ $invoices->firstItem() }} sampai {{ $invoices->lastItem() }} 
                        dari {{ $invoices->total() }} invoice
                    </div>
                    <div>
                        {{ $invoices->appends(request()->query())->links('admin.custom-pagination') }}
                    </div>
                </div>
            @else
                <div class="text-center py-4">
                    <i class="fas fa-file-invoice fa-3x text-gray-300 mb-3"></i>
                    <h5 class="text-gray-600">Tidak ada invoice ditemukan</h5>
                    <p class="text-muted">Belum ada invoice yang dibuat atau sesuai dengan filter yang dipilih.</p>
                    <a href="{{ route('admin.invoices.create') }}" class="btn btn-primary">
                        <i class="fas fa-plus"></i> Buat Invoice Pertama
                    </a>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Konfirmasi Hapus</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Apakah Anda yakin ingin menghapus invoice <strong id="invoice-number-text"></strong>?</p>
                <p class="text-danger"><small>Tindakan ini tidak dapat dibatalkan.</small></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                <form id="delete-form" method="POST" style="display: inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">Hapus</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Handle delete button
    $('.delete-invoice').click(function() {
        const invoiceId = $(this).data('invoice-id');
        const invoiceNumber = $(this).data('invoice-number');
        
        $('#invoice-number-text').text(invoiceNumber);
        $('#delete-form').attr('action', `/admin/invoices/${invoiceId}`);
        $('#deleteModal').modal('show');
    });
});
</script>
@endpush