@extends('admin.layout')

@section('title', 'Input Config - ' . $brand->name)
@section('page-title', 'Konfigurasi Input: ' . $brand->name)

@section('header-actions')
<a href="{{ route('admin.brands.show', [Str::slug($brand->category), $brand->slug]) }}" class="btn btn-secondary">
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <line x1="19" y1="12" x2="5" y2="12"></line>
        <polyline points="12 19 5 12 12 5"></polyline>
    </svg>
    Kembali ke Brand
</a>
@endsection

@section('content')
<div class="config-wrapper">
    <!-- Quick Add Presets -->
    <div class="config-card presets-card">
        <div class="card-header">
            <h3>Tambah Cepat</h3>
            <p>Klik untuk menambahkan field preset</p>
        </div>
        <div class="card-body">
            <div class="preset-buttons">
                @foreach($presets as $key => $preset)
                    @php
                        $alreadyExists = $inputConfigs->contains('field_name', $preset['field_name']);
                    @endphp
                    <form action="{{ route('admin.brands.inputs.add-preset', $brand) }}" method="POST" class="preset-form">
                        @csrf
                        <input type="hidden" name="preset" value="{{ $key }}">
                        <button type="submit" class="preset-btn {{ $alreadyExists ? 'disabled' : '' }}" {{ $alreadyExists ? 'disabled' : '' }}>
                            <span class="preset-label">{{ $preset['field_label'] }}</span>
                            <span class="preset-name">{{ $preset['field_name'] }}</span>
                            @if($alreadyExists)
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <polyline points="20 6 9 17 4 12"></polyline>
                                </svg>
                            @else
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <line x1="12" y1="5" x2="12" y2="19"></line>
                                    <line x1="5" y1="12" x2="19" y2="12"></line>
                                </svg>
                            @endif
                        </button>
                    </form>
                @endforeach
            </div>
        </div>
    </div>

    <!-- Current Fields -->
    <div class="config-card fields-card">
        <div class="card-header">
            <h3>Field Input Aktif</h3>
            <p>Field yang akan ditampilkan saat user melakukan pembelian produk dari brand ini</p>
        </div>
        <div class="card-body">
            @if($inputConfigs->isEmpty())
                <div class="empty-state">
                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                        <line x1="9" y1="9" x2="15" y2="9"></line>
                        <line x1="9" y1="15" x2="15" y2="15"></line>
                    </svg>
                    <h4>Belum ada field input</h4>
                    <p>Gunakan preset di atas atau tambahkan field custom di bawah</p>
                </div>
            @else
                <div class="fields-list" id="sortable-fields">
                    @foreach($inputConfigs as $config)
                    <div class="field-item" data-id="{{ $config->id }}">
                        <div class="field-drag">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <line x1="8" y1="6" x2="8" y2="6"></line>
                                <line x1="16" y1="6" x2="16" y2="6"></line>
                                <line x1="8" y1="12" x2="8" y2="12"></line>
                                <line x1="16" y1="12" x2="16" y2="12"></line>
                                <line x1="8" y1="18" x2="8" y2="18"></line>
                                <line x1="16" y1="18" x2="16" y2="18"></line>
                            </svg>
                        </div>
                        
                        <div class="field-info">
                            <div class="field-main">
                                <span class="field-label">{{ $config->field_label }}</span>
                                <span class="field-name">{{ $config->field_name }}</span>
                            </div>
                            <div class="field-meta">
                                <span class="badge badge-{{ $config->field_type }}">{{ $config->field_type }}</span>
                                @if($config->is_required)
                                    <span class="badge badge-required">Wajib</span>
                                @else
                                    <span class="badge badge-optional">Opsional</span>
                                @endif
                                @if($config->placeholder)
                                    <span class="field-placeholder">"{{ $config->placeholder }}"</span>
                                @endif
                            </div>
                        </div>
                        
                        <div class="field-actions">
                            <button type="button" class="btn btn-sm btn-secondary" onclick="editField({{ $config->id }}, {{ json_encode($config) }})">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"></path>
                                    <path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                                </svg>
                            </button>
                            <form action="{{ route('admin.brands.inputs.destroy', [$brand, $config]) }}" method="POST" onsubmit="return confirm('Hapus field ini?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-danger">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <polyline points="3 6 5 6 21 6"></polyline>
                                        <path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"></path>
                                    </svg>
                                </button>
                            </form>
                        </div>
                    </div>
                    @endforeach
                </div>
            @endif
        </div>
    </div>

    <!-- Add Custom Field -->
    <div class="config-card add-card">
        <div class="card-header">
            <h3>Tambah Field Custom</h3>
            <p>Buat field input baru secara manual</p>
        </div>
        <div class="card-body">
            <form action="{{ route('admin.brands.inputs.store', $brand) }}" method="POST" id="add-field-form">
                @csrf
                <div class="form-grid">
                    <div class="form-group">
                        <label for="field_name">Nama Field</label>
                        <input type="text" id="field_name" name="field_name" required
                               pattern="[a-z0-9_]+"
                               placeholder="contoh: user_id"
                               title="Huruf kecil, angka, underscore">
                        <small>Gunakan huruf kecil dan underscore</small>
                    </div>
                    
                    <div class="form-group">
                        <label for="field_label">Label</label>
                        <input type="text" id="field_label" name="field_label" required
                               placeholder="contoh: ID Pengguna">
                    </div>
                    
                    <div class="form-group">
                        <label for="field_type">Tipe Field</label>
                        <select id="field_type" name="field_type" required>
                            <option value="text">Text</option>
                            <option value="number">Number</option>
                            <option value="email">Email</option>
                            <option value="select">Select (Dropdown)</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="placeholder">Placeholder</label>
                        <input type="text" id="placeholder" name="placeholder"
                               placeholder="contoh: Masukkan ID">
                    </div>
                    
                    <div class="form-group full-width">
                        <label for="help_text">Teks Bantuan</label>
                        <input type="text" id="help_text" name="help_text"
                               placeholder="Instruksi tambahan untuk pengguna">
                    </div>
                    
                    <div class="form-group">
                        <label for="sort_order">Urutan</label>
                        <input type="number" id="sort_order" name="sort_order" value="{{ $inputConfigs->count() }}" min="0">
                    </div>
                    
                    <div class="form-group">
                        <label class="checkbox-label">
                            <input type="checkbox" name="is_required" value="1" checked>
                            <span>Field wajib diisi</span>
                        </label>
                    </div>
                </div>
                
                <div class="form-actions">
                    <button type="submit" class="btn btn-primary">Tambah Field</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Modal -->
<div class="modal-overlay" id="edit-modal" style="display: none;">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Edit Field</h3>
            <button type="button" class="modal-close" onclick="closeEditModal()">&times;</button>
        </div>
        <form id="edit-form" method="POST">
            @csrf
            @method('PUT')
            <div class="modal-body">
                <div class="form-group">
                    <label>Label</label>
                    <input type="text" name="field_label" id="edit_field_label" required>
                </div>
                <div class="form-group">
                    <label>Tipe</label>
                    <select name="field_type" id="edit_field_type">
                        <option value="text">Text</option>
                        <option value="number">Number</option>
                        <option value="email">Email</option>
                        <option value="select">Select</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Placeholder</label>
                    <input type="text" name="placeholder" id="edit_placeholder">
                </div>
                <div class="form-group">
                    <label>Teks Bantuan</label>
                    <input type="text" name="help_text" id="edit_help_text">
                </div>
                <div class="form-group">
                    <label>Urutan</label>
                    <input type="number" name="sort_order" id="edit_sort_order" min="0">
                </div>
                <div class="form-group">
                    <label class="checkbox-label">
                        <input type="checkbox" name="is_required" id="edit_is_required" value="1">
                        <span>Field wajib diisi</span>
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeEditModal()">Batal</button>
                <button type="submit" class="btn btn-primary">Simpan</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('styles')
<style>
.config-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.config-card {
    background: var(--color-surface);
    border-radius: 12px;
    border: 1px solid var(--color-border);
}

.card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.card-header h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.card-header p {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
}

.card-body {
    padding: 1.25rem 1.5rem;
}

/* Presets */
.preset-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.preset-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.preset-btn:hover:not(.disabled) {
    border-color: var(--color-primary);
    background: rgba(46, 204, 113, 0.05);
}

.preset-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.preset-label {
    font-weight: 500;
    font-size: 0.875rem;
}

.preset-name {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-family: monospace;
}

/* Fields List */
.empty-state {
    text-align: center;
    padding: 2rem 1rem;
}

.empty-state svg {
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
}

.empty-state h4 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.empty-state p {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.fields-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.field-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--color-bg);
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.field-drag {
    cursor: grab;
    color: var(--color-text-muted);
}

.field-info {
    flex: 1;
}

.field-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.375rem;
}

.field-label {
    font-weight: 500;
}

.field-name {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-family: monospace;
    background: var(--color-surface);
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
}

.field-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.badge {
    font-size: 0.6875rem;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
    text-transform: uppercase;
}

.badge-text { background: #3b82f620; color: #3b82f6; }
.badge-number { background: #8b5cf620; color: #8b5cf6; }
.badge-email { background: #f59e0b20; color: #f59e0b; }
.badge-select { background: #ec489920; color: #ec4899; }
.badge-required { background: #ef444420; color: #ef4444; }
.badge-optional { background: #6b728020; color: #6b7280; }

.field-placeholder {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.field-actions {
    display: flex;
    gap: 0.5rem;
}

/* Form */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.375rem;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 0.625rem 0.875rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--color-text);
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-primary);
}

.form-group small {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    margin-top: 1.5rem;
}

.checkbox-label input {
    width: 18px !important;
    height: 18px;
    accent-color: var(--color-primary);
}

.form-actions {
    margin-top: 1.25rem;
    display: flex;
    justify-content: flex-end;
}

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: var(--color-surface);
    border-radius: 12px;
    width: 100%;
    max-width: 480px;
    margin: 1rem;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.modal-header h3 {
    font-size: 1rem;
    font-weight: 600;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-muted);
    cursor: pointer;
}

.modal-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.btn-sm {
    padding: 0.375rem 0.625rem;
}

.btn-danger {
    background: #dc3545;
    color: white;
    border: none;
}

.btn-danger:hover {
    background: #c82333;
}

@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}
</style>
@endpush

@push('scripts')
<script>
function editField(id, config) {
    const form = document.getElementById('edit-form');
    form.action = '{{ route("admin.brands.inputs.index", $brand) }}/' + id;
    
    document.getElementById('edit_field_label').value = config.field_label;
    document.getElementById('edit_field_type').value = config.field_type;
    document.getElementById('edit_placeholder').value = config.placeholder || '';
    document.getElementById('edit_help_text').value = config.help_text || '';
    document.getElementById('edit_sort_order').value = config.sort_order;
    document.getElementById('edit_is_required').checked = config.is_required;
    
    document.getElementById('edit-modal').style.display = 'flex';
}

function closeEditModal() {
    document.getElementById('edit-modal').style.display = 'none';
}

// Close modal on overlay click
document.getElementById('edit-modal').addEventListener('click', function(e) {
    if (e.target === this) closeEditModal();
});
</script>
@endpush