@push('styles')
<style>
    /* Remove custom table styling to use Bootstrap defaults */
    .table-responsive {
        overflow-x: auto;
    }

    .table th {
        background-color: #f8f9fa;
        font-weight: 600;
    }

    /* Status badges styling */
    .status-badge {
        font-size: 0.8rem;
        padding: 0.35em 0.65em;
    }

    .badge-paid {
        background: linear-gradient(135deg, #28a745, #20c997);
        color: white;
    }

    .badge-pending {
        background: linear-gradient(135deg, #ffc107, #fd7e14);
        color: white;
    }

    .badge-overdue {
        background: linear-gradient(135deg, #dc3545, #e83e8c);
        color: white;
    }

    .badge-cancelled {
        background: linear-gradient(135deg, #6c757d, #495057);
        color: white;
    }

    /* Invoice number styling */
    .invoice-number {
        font-family: 'Courier New', monospace;
        font-weight: bold;
        color: #495057;
    }

    /* Booking code styling */
    .booking-code {
        background-color: #e9ecef;
        padding: 0.25rem 0.5rem;
        border-radius: 0.375rem;
        font-family: 'Courier New', monospace;
        font-size: 0.875rem;
        color: #495057;
    }

    /* Guest name styling */
    .guest-name {
        font-weight: 500;
        color: #212529;
    }

    /* Amount styling */
    .amount {
        font-weight: bold;
        color: #28a745;
        font-family: 'Courier New', monospace;
    }
    
    /* Action Buttons - Bootstrap btn-group style like room list */
    .btn-group .btn {
        font-size: 0.875rem;
        padding: 0.375rem 0.75rem;
    }

    .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
    
    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 4rem 2rem;
        color: #6c757d;
        background: linear-gradient(135deg, #f8f9fa, #e9ecef);
        border-radius: 10px;
        margin: 2rem;
    }
    
    .empty-state i {
        font-size: 4rem;
        margin-bottom: 1.5rem;
        opacity: 0.6;
        color: #adb5bd;
    }
    
    .empty-state h5 {
        color: #495057;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }
    
    .empty-state p {
        color: #6c757d;
        margin-bottom: 0;
    }
    
    /* Table Striping Enhancement */
    .invoice-table .table tbody tr:nth-child(even) {
        background-color: rgba(0, 0, 0, 0.02);
    }
    
    .invoice-table .table tbody tr:nth-child(even):hover {
        background-color: #f8f9fc;
    }
    
    /* Responsive Design */
    @media (max-width: 768px) {
        .invoice-table .table thead {
            display: none;
        }
        
        .invoice-table .table tbody tr {
            display: block;
            border: 1px solid #e9ecef;
            border-radius: 10px;
            margin-bottom: 1rem;
            padding: 1rem;
            background: white;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .invoice-table .table tbody tr:hover {
            transform: none;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }
        
        .invoice-table .table tbody td {
            display: block;
            text-align: left;
            border: none;
            padding: 0.5rem 0;
            border-bottom: 1px solid #f8f9fa;
        }
        
        .invoice-table .table tbody td:last-child {
            border-bottom: none;
        }
        
        .invoice-table .table tbody td:before {
            content: attr(data-label) ": ";
            font-weight: 600;
            color: #495057;
            display: inline-block;
            width: 100px;
            margin-right: 10px;
        }
        
        .invoice-table .table tbody td[data-label="Aksi"]:before {
            display: none;
        }
        
        .invoice-table .table tbody td[data-label="Aksi"] {
            text-align: center;
            padding-top: 1rem;
            border-top: 1px solid #e9ecef;
        }
    }
    
    @media (max-width: 480px) {
        .empty-state {
            padding: 3rem 1rem;
            margin: 1rem;
        }
        
        .empty-state i {
            font-size: 3rem;
        }
        
        .btn-action {
            width: 32px;
            height: 32px;
            font-size: 12px;
        }
        
        .action-buttons-container {
            flex-wrap: wrap;
            justify-content: center;
            gap: 6px;
            min-width: auto;
            padding: 0.25rem;
        }
    }
</style>
    
    .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;
    }
</style>
    .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-lg mb-4">
        <div class="card-header py-4" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none;">
            <div class="d-flex align-items-center justify-content-between">
                <h6 class="m-0 font-weight-bold text-white">
                    <i class="fas fa-file-invoice-dollar mr-2"></i>Daftar Invoice
                </h6>
                <div class="header-actions">
                    <span class="badge badge-light px-3 py-2">
                        <i class="fas fa-list mr-1"></i>{{ $invoices->total() }} Invoice
                    </span>
                </div>
            </div>
        </div>
        <div class="card-body p-0">
            @if($invoices->count() > 0)
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>No. Invoice</th>
                                <th>Tanggal</th>
                                <th>Booking</th>
                                <th>Tamu</th>
                                <th>Total</th>
                                <th>Status</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($invoices as $invoice)
                                @php
                                    $statusConfig = [
                                        'paid' => ['class' => 'success', 'icon' => 'check-circle', 'text' => 'Lunas'],
                                        'overdue' => ['class' => 'danger', 'icon' => 'exclamation-triangle', 'text' => 'Terlambat'],
                                        'draft' => ['class' => 'secondary', 'icon' => 'edit', 'text' => 'Draft'],
                                        'sent' => ['class' => 'info', 'icon' => 'paper-plane', 'text' => 'Terkirim'],
                                        'cancelled' => ['class' => 'dark', 'icon' => 'times-circle', 'text' => 'Dibatalkan']
                                    ];
                                    
                                    $status = $statusConfig[$invoice->status] ?? ['class' => 'light', 'icon' => 'file', 'text' => 'Pending'];
                                @endphp
                                <tr>
                                    <td data-label="No. Invoice">
                                        <div class="invoice-number">{{ $invoice->invoice_number }}</div>
                                    </td>
                                    <td data-label="Tanggal">
                                        {{ $invoice->created_at->format('d/m/Y') }}
                                    </td>
                                    <td data-label="Booking">
                                        <span class="booking-code">{{ $invoice->booking->booking_code ?? 'N/A' }}</span>
                                    </td>
                                    <td data-label="Tamu">
                                        <div class="guest-name">{{ $invoice->booking->guest_name ?? 'N/A' }}</div>
                                    </td>
                                    <td data-label="Total">
                                        <div class="amount">Rp {{ number_format($invoice->total_amount, 0, ',', '.') }}</div>
                                    </td>
                                    <td data-label="Status">
                                        <span class="status-badge badge-{{ $status['class'] }}">
                                            <i class="fas fa-{{ $status['icon'] }}"></i>{{ $status['text'] }}
                                        </span>
                                    </td>
                                    <td data-label="Aksi">
                                        <div class="btn-group" role="group">
                                            <a href="{{ route('admin.invoices.show', $invoice->id) }}" 
                                               class="btn btn-info btn-sm">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <a href="{{ route('admin.invoices.edit', $invoice->id) }}" 
                                               class="btn btn-warning btn-sm">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <a href="{{ route('admin.invoices.download', $invoice->id) }}" 
                                               class="btn btn-success btn-sm">
                                                <i class="fas fa-download"></i>
                                            </a>
                                            <form action="{{ route('admin.invoices.destroy', $invoice->id) }}" 
                                                  method="POST" 
                                                  style="display: inline;"
                                                  onsubmit="return confirm('Apakah Anda yakin ingin menghapus invoice ini?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-danger btn-sm">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="empty-state">
                    <i class="fas fa-file-invoice"></i>
                    <h5>Tidak ada invoice ditemukan</h5>
                    <p>Belum ada invoice yang dibuat untuk kriteria pencarian ini.</p>
                </div>
            @endif
            
            <!-- Pagination -->
            @if($invoices->hasPages())
                <div class="d-flex justify-content-center p-4">
                    {{ $invoices->appends(request()->query())->links() }}
                </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', `{{ url('/admin/invoices') }}/${invoiceId}`);
        $('#deleteModal').modal('show');
    });
});
</script>
@endpush