@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>
<style>
    .invoice-table .table { table-layout: fixed; }
    .invoice-table .table th, .invoice-table .table td { white-space: normal; word-wrap: break-word; }
    .invoice-table .table td .btn { white-space: nowrap; }
    .invoice-table .table th, .invoice-table .table td { font-size: 0.875rem; }
    .invoice-table .table td { padding: 0.5rem 0.5rem; }
    .invoice-table .table th:nth-child(2) { width: 10%; }
    .invoice-table .table th:nth-child(3) { width: 16%; }
    .invoice-table .table th:nth-child(4) { width: 10%; }
    .invoice-table .table th:nth-child(5) { width: 14%; }
    .invoice-table .table th:nth-child(6) { width: 16%; }
    .invoice-table .table th:nth-child(7) { width: 12%; }
    .invoice-table .table th:nth-child(8) { width: 12%; }
</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="px-3 py-3 d-flex align-items-center justify-content-between">
                    <div class="d-flex align-items-center gap-3">
                        <span class="text-muted">Terpilih: <span id="invoiceSelectedCount">0</span></span>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <button class="btn btn-outline-primary btn-sm" id="mergeSelectedBtn" disabled>
                            <i class="fas fa-object-group"></i> Merge Selected
                        </button>
                    </div>
                </div>
                <div class="table-responsive invoice-table">
                    <table class="table table-hover table-sm align-middle">
                        <thead>
                            <tr>
                                <th style="width:36px;">
                                    <input type="checkbox" id="invoiceSelectAll">
                                </th>
                                <th>Aksi</th>
                                <th>No. Invoice</th>
                                <th>Tanggal</th>
                                <th>Booking</th>
                                <th>Tamu</th>
                                <th>Total</th>
                                <th>Channel</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="Pilih">
                                        <input type="checkbox" class="invoice-select" data-invoice-id="{{ $invoice->id }}">
                                    </td>
                                    <td data-label="Aksi">
                                        <div class="d-flex align-items-center gap-1">
                                            <a href="{{ route('admin.invoices.show', $invoice->id) }}" class="btn btn-outline-primary btn-sm" data-bs-toggle="tooltip" title="Lihat">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <a href="{{ route('admin.invoices.edit', $invoice->id) }}" class="btn btn-outline-warning btn-sm" data-bs-toggle="tooltip" title="Edit">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <a href="{{ route('admin.invoices.download', $invoice->id) }}" class="btn btn-outline-success btn-sm" data-bs-toggle="tooltip" title="PDF">
                                                <i class="fas fa-download"></i>
                                            </a>
                                            <form action="{{ route('admin.invoices.destroy', $invoice->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Apakah Anda yakin ingin menghapus invoice ini?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-outline-danger btn-sm" data-bs-toggle="tooltip" title="Hapus">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                    <td data-label="No. Invoice">
                                        <div class="invoice-number d-flex align-items-center" style="gap:.5rem;">
                                            <span>{{ $invoice->invoice_number }}</span>
                                            <span class="badge rounded-pill bg-{{ $status['class'] }}" style="font-size:.75rem;">{{ $status['text'] }}</span>
                                        </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">
                                        @php
                                            $totalInclude = max(0, (int) ($invoice->subtotal ?? 0) + (int) ($invoice->services_total ?? 0) - (int) ($invoice->discount_amount ?? 0));
                                        @endphp
                                        <div class="amount">Rp {{ number_format($totalInclude, 0, ',', '.') }}</div>
                                    </td>
                                    <td data-label="Channel">
                                        @php $chan = $invoice->paymentChannel; @endphp
                                        @if($chan)
                                            <span class="badge" style="background-color: {{ $chan->color ?? '#6c757d' }}; color: #fff;">
                                                <i class="fas fa-credit-card-alt"></i> {{ $chan->name }}
                                            </span>
                                        @else
                                            <span class="badge bg-secondary">-</span>
                                        @endif
                                    </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())
                @include('admin.custom-pagination', ['paginator' => $invoices])
            @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');
    });

    function getSelectedInvoiceIds() {
        const ids = [];
        $('.invoice-select:checked').each(function() { ids.push($(this).data('invoice-id')); });
        return ids;
    }

    function updateSelectedUI() {
        const ids = getSelectedInvoiceIds();
        $('#invoiceSelectedCount').text(ids.length);
        const btn = $('#mergeSelectedBtn');
        if (ids.length >= 2) { btn.prop('disabled', false); } else { btn.prop('disabled', true); }
        const allCount = $('.invoice-select').length;
        const checkedCount = $('.invoice-select:checked').length;
        $('#invoiceSelectAll').prop('checked', allCount > 0 && checkedCount === allCount);
    }

    $('#invoiceSelectAll').on('change', function() {
        const checked = $(this).is(':checked');
        $('.invoice-select').prop('checked', checked);
        updateSelectedUI();
    });

    $(document).on('change', '.invoice-select', function() { updateSelectedUI(); });

    $('#mergeSelectedBtn').on('click', function() {
        const ids = getSelectedInvoiceIds();
        if (ids.length < 2) { return; }
        const csrf = $('meta[name="csrf-token"]').attr('content');
        const url = `{{ route('admin.invoices.merge') }}`;
        $(this).prop('disabled', true);
        fetch(url, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf },
            body: JSON.stringify({ invoice_ids: ids })
        }).then(r => r.json()).then(json => {
            if (json && json.success && json.data && json.data.id) {
                const showUrl = `{{ route('admin.invoices.show', ':id') }}`.replace(':id', json.data.id);
                window.location.href = showUrl;
            } else {
                location.reload();
            }
        }).catch(() => { location.reload(); });
    });

    updateSelectedUI();
    const tts = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tts.forEach(function(el){ new bootstrap.Tooltip(el); });
});
</script>
@endpush