@extends('admin.layout')

@section('title', 'Detail Channel Pembayaran')
@section('page-title', 'Detail Channel Pembayaran')

@section('content')
<div class="container-fluid">
    <!-- Header Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div class="d-flex align-items-center">
                    <div class="bg-primary bg-opacity-10 rounded-2 p-3 me-3">
                        <i class="{{ $paymentChannel->icon ?? 'fas fa-credit-card-alt' }} fa-2x text-primary"></i>
                    </div>
                    <div>
                        <h2 class="h3 mb-1">{{ $paymentChannel->name }}</h2>
                        <p class="text-muted mb-0">
                            <span class="badge bg-{{ $paymentChannel->is_active ? 'success' : 'secondary' }} me-2">
                                {{ $paymentChannel->is_active ? 'Aktif' : 'Nonaktif' }}
                            </span>
                            Kode: <strong>{{ $paymentChannel->code }}</strong>
                        </p>
                    </div>
                </div>
                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-outline-{{ $paymentChannel->is_active ? 'warning' : 'success' }}" 
                            onclick="toggleStatus({{ $paymentChannel->id }})">
                        <i class="fas fa-power-off me-2"></i>
                        {{ $paymentChannel->is_active ? 'Nonaktifkan' : 'Aktifkan' }}
                    </button>
                    <a href="{{ route('admin.payment-channels.edit', $paymentChannel) }}" class="btn btn-primary">
                        <i class="fas fa-edit me-2"></i>Edit
                    </a>
                    <a href="{{ route('admin.payment-channels.index') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-2"></i>Kembali
                    </a>
                </div>
            </div>
        </div>
    </div>

    

    <!-- Main Content -->
    <div class="row">
        <!-- Channel Information -->
        <div class="col-lg-8">
            <!-- Basic Information -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-info-circle me-2 text-primary"></i>Informasi Dasar
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label fw-semibold text-muted">Nama Channel</label>
                                <p class="mb-0 fs-5">{{ $paymentChannel->name }}</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label fw-semibold text-muted">Kode Channel</label>
                                <p class="mb-0">
                                    <code class="bg-light px-2 py-1 rounded">{{ $paymentChannel->code }}</code>
                                </p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label fw-semibold text-muted">Status</label>
                                <p class="mb-0">
                                    <span class="badge bg-{{ $paymentChannel->is_active ? 'success' : 'secondary' }} fs-6">
                                        <i class="fas fa-{{ $paymentChannel->is_active ? 'check' : 'times' }} me-1"></i>
                                        {{ $paymentChannel->is_active ? 'Aktif' : 'Nonaktif' }}
                                    </span>
                                </p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label fw-semibold text-muted">Urutan Tampilan</label>
                                <p class="mb-0">
                                    <span class="badge bg-secondary">#{{ $paymentChannel->sort_order }}</span>
                                </p>
                            </div>
                        </div>
                        @if($paymentChannel->description)
                            <div class="col-12">
                                <div class="mb-3">
                                    <label class="form-label fw-semibold text-muted">Deskripsi</label>
                                    <p class="mb-0">{{ $paymentChannel->description }}</p>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Visual Settings -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-palette me-2 text-info"></i>Pengaturan Visual
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label fw-semibold text-muted">Icon</label>
                                <p class="mb-0">
                                    <i class="{{ $paymentChannel->icon ?? 'fas fa-credit-card-alt' }} me-2 text-primary"></i>
                                    <code class="bg-light px-2 py-1 rounded">{{ $paymentChannel->icon ?? 'fas fa-credit-card-alt' }}</code>
                                </p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label fw-semibold text-muted">Warna</label>
                                <p class="mb-0">
                                    <span class="d-inline-block rounded me-2" 
                                          style="width: 20px; height: 20px; background-color: {{ $paymentChannel->color ?? '#007bff' }}; border: 1px solid #dee2e6;"></span>
                                    <code class="bg-light px-2 py-1 rounded">{{ $paymentChannel->color ?? '#007bff' }}</code>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Settings -->
            @if($paymentChannel->settings && count($paymentChannel->settings) > 0)
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-white">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-cogs me-2 text-warning"></i>Pengaturan Tambahan
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-borderless">
                                <tbody>
                                    @foreach($paymentChannel->settings as $key => $value)
                                        <tr>
                                            <td class="fw-semibold text-muted" style="width: 30%;">
                                                {{ ucfirst(str_replace('_', ' ', $key)) }}
                                            </td>
                                            <td>
                                                @if(str_contains($key, 'password') || str_contains($key, 'secret') || str_contains($key, 'key'))
                                                    <span class="text-muted">••••••••</span>
                                                    <button type="button" class="btn btn-link btn-sm p-0 ms-2" 
                                                            onclick="togglePassword('{{ $key }}')">
                                                        <i class="fas fa-eye" id="eye-{{ $key }}"></i>
                                                    </button>
                                                    <span id="value-{{ $key }}" style="display: none;">{{ $value }}</span>
                                                @else
                                                    <code class="bg-light px-2 py-1 rounded">{{ $value }}</code>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            @endif

            <!-- Recent Invoices -->
            @if($recentInvoices->count() > 0)
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-file-invoice me-2 text-success"></i>Invoice Terbaru
                        </h5>
                        <a href="{{ route('admin.invoices.index', ['payment_channel' => $paymentChannel->id]) }}" 
                           class="btn btn-outline-primary btn-sm">
                            Lihat Semua
                        </a>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead class="table-light">
                                    <tr>
                                        <th>No. Invoice</th>
                                        <th>Tamu</th>
                                        <th>Total</th>
                                        <th>Status</th>
                                        <th>Tanggal</th>
                                        <th>Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($recentInvoices as $invoice)
                                        <tr>
                                            <td>
                                                <code class="bg-light px-2 py-1 rounded">{{ $invoice->invoice_number }}</code>
                                            </td>
                                            <td>{{ $invoice->guest_name }}</td>
                                            <td class="fw-semibold">Rp {{ number_format($invoice->total_amount, 0, ',', '.') }}</td>
                                            <td>
                                                <span class="badge bg-{{ $invoice->status === 'paid' ? 'success' : ($invoice->status === 'pending' ? 'warning' : 'danger') }}">
                                                    {{ ucfirst($invoice->status) }}
                                                </span>
                                            </td>
                                            <td>{{ $invoice->created_at->format('d M Y') }}</td>
                                            <td>
                                                <a href="{{ route('admin.invoices.show', $invoice) }}" 
                                                   class="btn btn-outline-primary btn-sm">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            @endif
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Statistics -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white">
                    <h6 class="card-title mb-0">
                        <i class="fas fa-chart-bar me-2 text-success"></i>Statistik Penggunaan
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="border-end">
                                <h3 class="text-primary mb-1">{{ $paymentChannel->invoices()->count() }}</h3>
                                <small class="text-muted">Total Invoice</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <h3 class="text-success mb-1">{{ $paymentChannel->invoices()->where('status', 'paid')->count() }}</h3>
                            <small class="text-muted">Invoice Terbayar</small>
                        </div>
                    </div>
                    
                    <hr class="my-3">
                    
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="border-end">
                                <h4 class="text-warning mb-1">{{ $paymentChannel->invoices()->where('status', 'pending')->count() }}</h4>
                                <small class="text-muted">Pending</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <h4 class="text-danger mb-1">{{ $paymentChannel->invoices()->where('status', 'cancelled')->count() }}</h4>
                            <small class="text-muted">Dibatalkan</small>
                        </div>
                    </div>

                    @if($paymentChannel->invoices()->count() > 0)
                        <hr class="my-3">
                        <div class="small">
                            <div class="d-flex justify-content-between mb-2">
                                <span class="text-muted">Total Nilai:</span>
                                <span class="fw-semibold text-success">
                                    Rp {{ number_format($paymentChannel->invoices()->sum('total_amount'), 0, ',', '.') }}
                                </span>
                            </div>
                            <div class="d-flex justify-content-between mb-2">
                                <span class="text-muted">Nilai Terbayar:</span>
                                <span class="fw-semibold text-primary">
                                    Rp {{ number_format($paymentChannel->invoices()->where('status', 'paid')->sum('total_amount'), 0, ',', '.') }}
                                </span>
                            </div>
                            <div class="d-flex justify-content-between">
                                <span class="text-muted">Invoice Terbaru:</span>
                                <span class="fw-semibold">
                                    {{ $paymentChannel->invoices()->latest()->first()?->created_at?->format('d M Y') ?? '-' }}
                                </span>
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white">
                    <h6 class="card-title mb-0">
                        <i class="fas fa-bolt me-2 text-warning"></i>Aksi Cepat
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{{ route('admin.payment-channels.edit', $paymentChannel) }}" 
                           class="btn btn-primary">
                            <i class="fas fa-edit me-2"></i>Edit Channel
                        </a>
                        <button type="button" class="btn btn-outline-{{ $paymentChannel->is_active ? 'warning' : 'success' }}" 
                                onclick="toggleStatus({{ $paymentChannel->id }})">
                            <i class="fas fa-power-off me-2"></i>
                            {{ $paymentChannel->is_active ? 'Nonaktifkan' : 'Aktifkan' }}
                        </button>
                        @if($paymentChannel->invoices()->count() > 0)
                            <a href="{{ route('admin.invoices.index', ['payment_channel' => $paymentChannel->id]) }}" 
                               class="btn btn-outline-info">
                                <i class="fas fa-file-invoice me-2"></i>Lihat Invoice
                            </a>
                        @endif
                        <a href="{{ route('admin.payment-channels.create') }}" 
                           class="btn btn-outline-secondary">
                            <i class="fas fa-plus me-2"></i>Tambah Channel Baru
                        </a>
                    </div>
                </div>
            </div>

            <!-- Metadata -->
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white">
                    <h6 class="card-title mb-0">
                        <i class="fas fa-info me-2 text-muted"></i>Informasi Sistem
                    </h6>
                </div>
                <div class="card-body">
                    <div class="small">
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted">Dibuat:</span>
                            <span>{{ $paymentChannel->created_at->format('d M Y H:i') }}</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted">Diperbarui:</span>
                            <span>{{ $paymentChannel->updated_at->format('d M Y H:i') }}</span>
                        </div>
                        <div class="d-flex justify-content-between">
                            <span class="text-muted">ID:</span>
                            <code class="bg-light px-1 rounded">{{ $paymentChannel->id }}</code>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Danger Zone -->
            @if($paymentChannel->invoices()->count() == 0)
                <div class="card border-danger mt-4">
                    <div class="card-header bg-danger text-white">
                        <h6 class="card-title mb-0">
                            <i class="fas fa-exclamation-triangle me-2"></i>Zona Berbahaya
                        </h6>
                    </div>
                    <div class="card-body">
                        <p class="text-muted small mb-3">
                            Channel ini belum digunakan dalam invoice apapun. Anda dapat menghapusnya jika tidak diperlukan.
                        </p>
                        <button type="button" class="btn btn-outline-danger btn-sm w-100" 
                                onclick="confirmDelete()">
                            <i class="fas fa-trash me-2"></i>Hapus Channel
                        </button>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Konfirmasi Hapus</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Apakah Anda yakin ingin menghapus channel pembayaran <strong>{{ $paymentChannel->name }}</strong>?</p>
                <p class="text-danger small">Tindakan ini tidak dapat dibatalkan.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <form action="{{ route('admin.payment-channels.destroy', $paymentChannel) }}" 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>
function toggleStatus(channelId) {
    fetch(`/admin/payment-channels/${channelId}/toggle-status`, {
        method: 'PATCH',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Gagal mengubah status channel pembayaran');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Terjadi kesalahan saat mengubah status');
    });
}

function togglePassword(key) {
    const valueElement = document.getElementById(`value-${key}`);
    const eyeElement = document.getElementById(`eye-${key}`);
    
    if (valueElement.style.display === 'none') {
        valueElement.style.display = 'inline';
        eyeElement.className = 'fas fa-eye-slash';
    } else {
        valueElement.style.display = 'none';
        eyeElement.className = 'fas fa-eye';
    }
}

function confirmDelete() {
    new bootstrap.Modal(document.getElementById('deleteModal')).show();
}
</script>
@endpush