@extends('layouts.panel-tamplate')

@section('main-content')
    <div class="p-6">
        <p class="text-sm text-slate-500 dark:text-slate-400 leading-relaxed">
            Gestiona los métodos de pago aceptados por la flota. Puedes editar la visibilidad o añadir nuevas integraciones.
        </p>
    </div>
    <div class="px-4 space-y-4">
        <div class="bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 rounded-2xl p-4 shadow-sm">
            <div class="flex items-center gap-4 mb-4">
                <div
                    class="flex items-center justify-center rounded-xl bg-green-50 dark:bg-green-900/30 text-green-600 dark:text-green-400 size-12">
                    <span class="material-symbols-outlined text-2xl">payments</span>
                </div>
                <div class="flex-1">
                    <h4 class="font-bold text-lg">Efectivo</h4>
                    <p class="text-xs text-slate-500">Pago manual en ventanilla o unidad</p>
                </div>
                <div
                    class="flex items-center px-2 py-1 bg-green-100 dark:bg-green-900/40 text-green-700 dark:text-green-300 rounded text-[10px] font-bold uppercase tracking-wider">
                    Activo
                </div>
            </div>
            <div class="flex gap-2 border-t border-slate-50 dark:border-slate-800 pt-4">
                <button
                    class="flex-1 flex items-center justify-center gap-2 py-2 text-sm font-semibold text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 rounded-lg transition-colors">
                    <span class="material-symbols-outlined text-lg">edit</span>
                    Editar
                </button>
                <button
                    class="flex-1 flex items-center justify-center gap-2 py-2 text-sm font-semibold text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors">
                    <span class="material-symbols-outlined text-lg text-red-400">visibility_off</span>
                    Desactivar
                </button>
            </div>
        </div>
        <div class="bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 rounded-2xl p-4 shadow-sm">
            <div class="flex items-center gap-4 mb-4">
                <div
                    class="flex items-center justify-center rounded-xl bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 size-12">
                    <span class="material-symbols-outlined text-2xl">credit_card</span>
                </div>
                <div class="flex-1">
                    <h4 class="font-bold text-lg">Tarjetas</h4>
                    <p class="text-xs text-slate-500">Crédito y Débito (Visa, MC, AMEX)</p>
                </div>
                <div
                    class="flex items-center px-2 py-1 bg-green-100 dark:bg-green-900/40 text-green-700 dark:text-green-300 rounded text-[10px] font-bold uppercase tracking-wider">
                    Activo
                </div>
            </div>
            <div class="flex gap-2 border-t border-slate-50 dark:border-slate-800 pt-4">
                <button
                    class="flex-1 flex items-center justify-center gap-2 py-2 text-sm font-semibold text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 rounded-lg transition-colors">
                    <span class="material-symbols-outlined text-lg">edit</span>
                    Editar
                </button>
                <button
                    class="flex-1 flex items-center justify-center gap-2 py-2 text-sm font-semibold text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors">
                    <span class="material-symbols-outlined text-lg text-red-400">visibility_off</span>
                    Desactivar
                </button>
            </div>
        </div>
        <div class="bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 rounded-2xl p-4 shadow-sm">
            <div class="flex items-center gap-4 mb-4">
                <div
                    class="flex items-center justify-center rounded-xl bg-purple-50 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 size-12">
                    <span class="material-symbols-outlined text-2xl">account_balance_wallet</span>
                </div>
                <div class="flex-1">
                    <h4 class="font-bold text-lg">Apps &amp; Wallets</h4>
                    <p class="text-xs text-slate-500">Transferencias y códigos QR</p>
                </div>
                <div
                    class="flex items-center px-2 py-1 bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-400 rounded text-[10px] font-bold uppercase tracking-wider">
                    Inactivo
                </div>
            </div>
            <div class="flex gap-2 border-t border-slate-50 dark:border-slate-800 pt-4">
                <button
                    class="flex-1 flex items-center justify-center gap-2 py-2 text-sm font-semibold text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 rounded-lg transition-colors">
                    <span class="material-symbols-outlined text-lg">edit</span>
                    Editar
                </button>
                <button
                    class="flex-1 flex items-center justify-center gap-2 py-2 text-sm font-semibold text-emerald-600 hover:bg-emerald-50 dark:hover:bg-emerald-900/20 rounded-lg transition-colors">
                    <span class="material-symbols-outlined text-lg">visibility</span>
                    Activar
                </button>
            </div>
        </div>
        <div
            class="bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 rounded-2xl p-4 shadow-sm opacity-60">
            <div class="flex items-center gap-4 mb-4">
                <div
                    class="flex items-center justify-center rounded-xl bg-orange-50 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400 size-12">
                    <span class="material-symbols-outlined text-2xl">confirmation_number</span>
                </div>
                <div class="flex-1">
                    <h4 class="font-bold text-lg">Vales Corporativos</h4>
                    <p class="text-xs text-slate-500">Convenios empresariales</p>
                </div>
                <div
                    class="flex items-center px-2 py-1 bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-400 rounded text-[10px] font-bold uppercase tracking-wider">
                    Inactivo
                </div>
            </div>
            <div class="flex gap-2 border-t border-slate-50 dark:border-slate-800 pt-4">
                <button
                    class="flex-1 flex items-center justify-center gap-2 py-2 text-sm font-semibold text-slate-600 dark:text-slate-300 rounded-lg">
                    <span class="material-symbols-outlined text-lg">edit</span>
                    Editar
                </button>
                <button
                    class="flex-1 flex items-center justify-center gap-2 py-2 text-sm font-semibold text-emerald-600 rounded-lg">
                    <span class="material-symbols-outlined text-lg">visibility</span>
                    Activar
                </button>
            </div>
        </div>
    </div>

    <a href="{{ route('settings.payment_types.create') }}"
        class="fixed bottom-24 right-6 w-14 h-14 bg-primary text-white rounded-full shadow-lg shadow-primary/40 flex items-center justify-center z-40">
        <span class="material-symbols-outlined text-3xl">add</span>
    </a>
@endsection