@extends('admin.layout')

@section('title', 'Provider Config')
@section('page-title', 'Konfigurasi Provider')

@section('header-actions')
<a href="{{ route('admin.config.providers.create') }}" class="btn btn-primary">
    <svg width="16" height="16" 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>
    Tambah Provider
</a>
@endsection

@section('content')
<div class="config-card">
    <div class="card-header">
        <h3>Daftar Provider</h3>
        <p>Toggle untuk mengaktifkan/menonaktifkan provider. Produk dari provider yang aktif akan ditampilkan.</p>
    </div>
    
    <div class="card-body">
        @if($providers->isEmpty())
            <div class="empty-state">
                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <path d="M12 2L2 7l10 5 10-5-10-5z"/>
                    <path d="M2 17l10 5 10-5"/>
                    <path d="M2 12l10 5 10-5"/>
                </svg>
                <h4>Belum ada provider</h4>
                <p>Tambahkan provider pertama untuk mulai.</p>
                <a href="{{ route('admin.config.providers.create') }}" class="btn btn-primary">Tambah Provider</a>
            </div>
        @else
            <div class="providers-list">
                @foreach($providers as $provider)
                <div class="provider-item {{ $provider->is_active ? 'active' : 'inactive' }}">
                    <div class="provider-info">
                        <div class="provider-header">
                            <h4>{{ $provider->display_name }}</h4>
                            <span class="provider-name">{{ $provider->name }}</span>
                        </div>
                        <div class="provider-meta">
                            <span class="meta-item">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
                                </svg>
                                Priority: {{ $provider->priority }}
                            </span>
                            @if($provider->api_url)
                            <span class="meta-item">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
                                    <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
                                </svg>
                                {{ parse_url($provider->api_url, PHP_URL_HOST) }}
                            </span>
                            @endif
                        </div>
                    </div>
                    
                    <div class="provider-actions">
                        <form action="{{ route('admin.config.providers.toggle', $provider) }}" method="POST" class="toggle-form">
                            @csrf
                            @method('PATCH')
                            <label class="toggle-switch">
                                <input type="checkbox" {{ $provider->is_active ? 'checked' : '' }} onchange="this.form.submit()">
                                <span class="toggle-slider"></span>
                            </label>
                        </form>
                        
                        <a href="{{ route('admin.config.providers.edit', $provider) }}" class="btn btn-sm btn-secondary">
                            <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>
                            Edit
                        </a>
                        
                        <form action="{{ route('admin.config.providers.destroy', $provider) }}" method="POST" class="delete-form" onsubmit="return confirm('Yakin ingin menghapus provider 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>
@endsection

@push('styles')
<style>
.config-card {
    background: var(--color-surface);
    border-radius: 12px;
    border: 1px solid var(--color-border);
}

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

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

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

.card-body {
    padding: 1.5rem;
}

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
}

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

.empty-state h4 {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}

.empty-state p {
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
}

.providers-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.provider-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--color-bg);
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.provider-item.active {
    border-color: var(--color-primary);
    background: rgba(46, 204, 113, 0.05);
}

.provider-info {
    flex: 1;
}

.provider-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.provider-header h4 {
    font-size: 1rem;
    font-weight: 600;
}

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

.provider-meta {
    display: flex;
    gap: 1rem;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.provider-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.toggle-form {
    margin-right: 0.5rem;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
    cursor: pointer;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-border);
    border-radius: 24px;
    transition: 0.3s;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s;
}

input:checked + .toggle-slider {
    background-color: var(--color-primary);
}

input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

.delete-form {
    display: inline;
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

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

.btn-danger:hover {
    background: #c82333;
}
</style>
@endpush