@extends('admin.layout')

@section('title', 'Edit Channel Pembayaran')
@section('page-title', 'Edit 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>
                    <h2 class="h3 mb-1">Edit Channel Pembayaran</h2>
                    <p class="text-muted mb-0">Perbarui informasi channel pembayaran: <strong>{{ $paymentChannel->name }}</strong></p>
                </div>
                <div class="d-flex gap-2">
                    <a href="{{ route('admin.payment-channels.show', $paymentChannel) }}" class="btn btn-outline-info">
                        <i class="fas fa-eye me-2"></i>Lihat Detail
                    </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>

    <!-- Form Section -->
    <div class="row">
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-edit me-2 text-primary"></i>Informasi Channel Pembayaran
                    </h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.payment-channels.update', $paymentChannel) }}" method="POST" id="paymentChannelForm">
                        @csrf
                        @method('PUT')
                        
                        <!-- Basic Information -->
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label for="name" class="form-label fw-semibold">Nama Channel <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                       id="name" name="name" value="{{ old('name', $paymentChannel->name) }}" 
                                       placeholder="Contoh: Transfer Bank BCA" required>
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="code" class="form-label fw-semibold">Kode Channel <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('code') is-invalid @enderror" 
                                       id="code" name="code" value="{{ old('code', $paymentChannel->code) }}" 
                                       placeholder="Contoh: bank_bca" required>
                                <div class="form-text">Kode unik untuk identifikasi (huruf kecil, angka, dan underscore)</div>
                                @error('code')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Description -->
                        <div class="mb-4">
                            <label for="description" class="form-label fw-semibold">Deskripsi</label>
                            <textarea class="form-control @error('description') is-invalid @enderror" 
                                      id="description" name="description" rows="3" 
                                      placeholder="Deskripsi singkat tentang channel pembayaran ini">{{ old('description', $paymentChannel->description) }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Visual Settings -->
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label for="icon" class="form-label fw-semibold">Icon</label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i id="iconPreview" class="{{ old('icon', $paymentChannel->icon ?? 'fas fa-credit-card-alt') }}"></i>
                                    </span>
                                    <input type="text" class="form-control @error('icon') is-invalid @enderror" 
                                           id="icon" name="icon" value="{{ old('icon', $paymentChannel->icon ?? 'fas fa-credit-card-alt') }}" 
                                           placeholder="fas fa-credit-card-alt">
                                </div>
                                <div class="form-text">Gunakan kelas FontAwesome (contoh: fas fa-credit-card-alt)</div>
                                @error('icon')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="color" class="form-label fw-semibold">Warna</label>
                                <div class="input-group">
                                    <input type="color" class="form-control form-control-color @error('color') is-invalid @enderror" 
                                           id="color" name="color" value="{{ old('color', $paymentChannel->color ?? '#007bff') }}">
                                    <input type="text" class="form-control" id="colorText" 
                                           value="{{ old('color', $paymentChannel->color ?? '#007bff') }}" readonly>
                                </div>
                                @error('color')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Status and Order -->
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label for="sort_order" class="form-label fw-semibold">Urutan Tampilan</label>
                                <input type="number" class="form-control @error('sort_order') is-invalid @enderror" 
                                       id="sort_order" name="sort_order" value="{{ old('sort_order', $paymentChannel->sort_order) }}" 
                                       min="1" max="999">
                                <div class="form-text">Urutan tampilan dalam daftar (angka kecil tampil lebih dulu)</div>
                                @error('sort_order')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Status</label>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="is_active" name="is_active" 
                                           value="1" {{ old('is_active', $paymentChannel->is_active) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_active">
                                        Channel aktif dan dapat digunakan
                                    </label>
                                </div>
                                @if($paymentChannel->invoices()->count() > 0 && !$paymentChannel->is_active)
                                    <div class="alert alert-warning mt-2 small">
                                        <i class="fas fa-exclamation-triangle me-1"></i>
                                        Channel ini digunakan dalam {{ $paymentChannel->invoices()->count() }} invoice. 
                                        Menonaktifkan akan menyembunyikannya dari pilihan baru.
                                    </div>
                                @endif
                            </div>
                        </div>

                        <!-- Settings Section -->
                        <div class="mb-4">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <label class="form-label fw-semibold mb-0">Pengaturan Tambahan</label>
                                <button type="button" class="btn btn-outline-primary btn-sm" onclick="addSetting()">
                                    <i class="fas fa-plus me-1"></i>Tambah Pengaturan
                                </button>
                            </div>
                            <div id="settingsContainer">
                                @if($paymentChannel->settings && count($paymentChannel->settings) > 0)
                                    @foreach($paymentChannel->settings as $key => $value)
                                        <div class="setting-item mb-3">
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <input type="text" class="form-control" name="setting_keys[]" 
                                                           value="{{ $key }}" placeholder="Nama pengaturan" required>
                                                </div>
                                                <div class="col-md-7">
                                                    <input type="text" class="form-control" name="setting_values[]" 
                                                           value="{{ $value }}" placeholder="Nilai pengaturan" required>
                                                </div>
                                                <div class="col-md-1">
                                                    <button type="button" class="btn btn-outline-danger btn-sm" onclick="removeSetting(this)">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                            <div class="form-text">
                                Tambahkan pengaturan khusus seperti nomor rekening, API key, dll.
                            </div>
                        </div>

                        <!-- Submit Buttons -->
                        <div class="d-flex gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-2"></i>Perbarui Channel
                            </button>
                            <a href="{{ route('admin.payment-channels.show', $paymentChannel) }}" class="btn btn-outline-info">
                                <i class="fas fa-eye me-2"></i>Lihat Detail
                            </a>
                            <a href="{{ route('admin.payment-channels.index') }}" class="btn btn-outline-secondary">
                                Batal
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Preview Card -->
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white">
                    <h6 class="card-title mb-0">
                        <i class="fas fa-eye me-2 text-info"></i>Preview Channel
                    </h6>
                </div>
                <div class="card-body">
                    <div class="preview-card border rounded p-3">
                        <div class="d-flex align-items-center mb-3">
                            <div class="bg-primary bg-opacity-10 rounded-2 p-2 me-3" id="previewIconContainer">
                                <i id="previewIcon" class="{{ $paymentChannel->icon ?? 'fas fa-credit-card-alt' }} text-primary"></i>
                            </div>
                            <div>
                                <h6 class="mb-1 fw-bold" id="previewName">{{ $paymentChannel->name }}</h6>
                                <small class="text-muted" id="previewCode">{{ $paymentChannel->code }}</small>
                            </div>
                        </div>
                        <p class="text-muted small mb-3" id="previewDescription">{{ $paymentChannel->description ?? 'Tidak ada deskripsi' }}</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <small class="text-muted">Status:</small>
                            <span class="badge bg-{{ $paymentChannel->is_active ? 'success' : 'secondary' }}" id="previewStatus">
                                {{ $paymentChannel->is_active ? 'Aktif' : 'Nonaktif' }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Usage Statistics -->
            <div class="card border-0 shadow-sm mt-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">
                                <h4 class="text-primary mb-1">{{ $paymentChannel->invoices()->count() }}</h4>
                                <small class="text-muted">Total Invoice</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <h4 class="text-success mb-1">{{ $paymentChannel->invoices()->where('status', 'paid')->count() }}</h4>
                            <small class="text-muted">Invoice Terbayar</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">Invoice Terbaru:</span>
                                <span class="fw-semibold">
                                    {{ $paymentChannel->invoices()->latest()->first()->created_at->format('d M Y') }}
                                </span>
                            </div>
                            <div class="d-flex justify-content-between">
                                <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>
                    @endif
                </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>
// Real-time preview updates
document.addEventListener('DOMContentLoaded', function() {
    updatePreview();
    
    // Add event listeners for real-time preview
    document.getElementById('name').addEventListener('input', updatePreview);
    document.getElementById('code').addEventListener('input', updatePreview);
    document.getElementById('description').addEventListener('input', updatePreview);
    document.getElementById('icon').addEventListener('input', updatePreview);
    document.getElementById('color').addEventListener('input', updatePreview);
    document.getElementById('is_active').addEventListener('change', updatePreview);
    
    // Color picker sync
    document.getElementById('color').addEventListener('input', function() {
        document.getElementById('colorText').value = this.value;
    });
});

function updatePreview() {
    const name = document.getElementById('name').value || 'Nama Channel';
    const code = document.getElementById('code').value || 'kode_channel';
    const description = document.getElementById('description').value || 'Tidak ada deskripsi';
    const icon = document.getElementById('icon').value || 'fas fa-credit-card-alt';
    const isActive = document.getElementById('is_active').checked;
    
    // Update preview elements
    document.getElementById('previewName').textContent = name;
    document.getElementById('previewCode').textContent = code;
    document.getElementById('previewDescription').textContent = description;
    document.getElementById('previewIcon').className = icon + ' text-primary';
    
    // Update status badge
    const statusBadge = document.getElementById('previewStatus');
    statusBadge.textContent = isActive ? 'Aktif' : 'Nonaktif';
    statusBadge.className = `badge bg-${isActive ? 'success' : 'secondary'}`;
    
    // Update icon preview in form
    document.getElementById('iconPreview').className = icon;
}

function addSetting() {
    const container = document.getElementById('settingsContainer');
    const settingHtml = `
        <div class="setting-item mb-3">
            <div class="row">
                <div class="col-md-4">
                    <input type="text" class="form-control" name="setting_keys[]" 
                           placeholder="Nama pengaturan" required>
                </div>
                <div class="col-md-7">
                    <input type="text" class="form-control" name="setting_values[]" 
                           placeholder="Nilai pengaturan" required>
                </div>
                <div class="col-md-1">
                    <button type="button" class="btn btn-outline-danger btn-sm" onclick="removeSetting(this)">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </div>
        </div>
    `;
    container.insertAdjacentHTML('beforeend', settingHtml);
}

function removeSetting(button) {
    button.closest('.setting-item').remove();
}

function confirmDelete() {
    new bootstrap.Modal(document.getElementById('deleteModal')).show();
}

// Form validation
document.getElementById('paymentChannelForm').addEventListener('submit', function(e) {
    const name = document.getElementById('name').value.trim();
    const code = document.getElementById('code').value.trim();
    
    if (!name || !code) {
        e.preventDefault();
        alert('Nama dan kode channel harus diisi!');
        return false;
    }
    
    // Validate code format
    const codeRegex = /^[a-z0-9_]+$/;
    if (!codeRegex.test(code)) {
        e.preventDefault();
        alert('Kode channel hanya boleh mengandung huruf kecil, angka, dan underscore!');
        return false;
    }
});
</script>
@endpush