@extends('admin.layout')

@section('title', 'Tambah Channel Pembayaran')
@section('page-title', 'Tambah 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">Tambah Channel Pembayaran</h2>
                    <p class="text-muted mb-0">Buat metode pembayaran baru untuk invoice</p>
                </div>
                <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>

    <!-- 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-plus-circle me-2 text-primary"></i>Informasi Channel Pembayaran
                    </h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.payment-channels.store') }}" method="POST" id="paymentChannelForm">
                        @csrf
                        
                        <!-- 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') }}" 
                                       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') }}" 
                                       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') }}</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', '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', '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', '#007bff') }}">
                                    <input type="text" class="form-control" id="colorText" 
                                           value="{{ old('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', 1) }}" 
                                       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', true) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_active">
                                        Channel aktif dan dapat digunakan
                                    </label>
                                </div>
                            </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(old('settings'))
                                    @foreach(old('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="settings[{{ $key }}][key]" 
                                                           value="{{ $key }}" placeholder="Nama pengaturan">
                                                </div>
                                                <div class="col-md-7">
                                                    <input type="text" class="form-control" name="settings[{{ $key }}][value]" 
                                                           value="{{ $value }}" placeholder="Nilai pengaturan">
                                                </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>Simpan Channel
                            </button>
                            <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="fas fa-credit-card-alt text-primary"></i>
                            </div>
                            <div>
                                <h6 class="mb-1 fw-bold" id="previewName">Nama Channel</h6>
                                <small class="text-muted" id="previewCode">kode_channel</small>
                            </div>
                        </div>
                        <p class="text-muted small mb-3" id="previewDescription">Deskripsi channel pembayaran akan muncul di sini</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <small class="text-muted">Status:</small>
                            <span class="badge" id="previewStatus">Aktif</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Templates -->
            <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-magic me-2 text-warning"></i>Template Cepat
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <button type="button" class="btn btn-outline-primary btn-sm" onclick="applyTemplate('cash')">
                            <i class="fas fa-money-bill-wave me-2"></i>Cash
                        </button>
                        <button type="button" class="btn btn-outline-primary btn-sm" onclick="applyTemplate('qris')">
                            <i class="fas fa-qrcode me-2"></i>QRIS
                        </button>
                        <button type="button" class="btn btn-outline-primary btn-sm" onclick="applyTemplate('bank')">
                            <i class="fas fa-university me-2"></i>Transfer Bank
                        </button>
                        <button type="button" class="btn btn-outline-primary btn-sm" onclick="applyTemplate('card')">
                            <i class="fas fa-credit-card me-2"></i>Kartu Kredit/Debit
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
let settingIndex = 0;

// 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 || 'Deskripsi channel pembayaran akan muncul di sini';
    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 applyTemplate(type) {
    const templates = {
        cash: {
            name: 'Cash',
            code: 'cash',
            description: 'Pembayaran tunai langsung',
            icon: 'fas fa-money-bill-wave',
            color: '#28a745'
        },
        qris: {
            name: 'QRIS',
            code: 'qris',
            description: 'Pembayaran menggunakan QR Code Indonesia Standard',
            icon: 'fas fa-qrcode',
            color: '#dc3545'
        },
        bank: {
            name: 'Transfer Bank',
            code: 'bank_transfer',
            description: 'Transfer melalui rekening bank',
            icon: 'fas fa-university',
            color: '#007bff'
        },
        card: {
            name: 'Kartu Kredit/Debit',
            code: 'card_payment',
            description: 'Pembayaran menggunakan kartu kredit atau debit',
            icon: 'fas fa-credit-card-alt',
            color: '#6f42c1'
        }
    };
    
    const template = templates[type];
    if (template) {
        document.getElementById('name').value = template.name;
        document.getElementById('code').value = template.code;
        document.getElementById('description').value = template.description;
        document.getElementById('icon').value = template.icon;
        document.getElementById('color').value = template.color;
        document.getElementById('colorText').value = template.color;
        updatePreview();
    }
}

// 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