@extends('layouts.app')

@section('title', 'Admin - Usuarios')

@section('content')
@include('../../validaciones')

<div class="p-4 w-full">
    <div class="w-full mb-6 p-4 rounded-lg shadow-md bg-white dark:bg-gray-800">
        <h1 class="text-3xl font-bold mb-6 dark:text-gray-400">Configuraciones</h1>
    </div>

    <div class="bg-white shadow-md rounded-xl p-6 dark:bg-gray-800">
        <h4 class="text-lg font-semibold mb-4 dark:text-gray-400">General</h4>

        @if ($configuracion)
        <form action="{{ route('admin.configuraciones.update', $configuracion->id) }}" method="POST"
            enctype="multipart/form-data" class="space-y-6">
            @csrf
            @method('PUT')

            <input type="hidden" name="id_configuracion" value="{{ $configuracion->id }}">

            <div class="flex flex-col md:flex-row md:items-center gap-6">
                <div class="flex-1">
                    <label class="block text-sm font-medium text-gray-700 mb-1 dark:text-gray-300">
                        Estado del sitio
                    </label>
                    <select name="estado" required class="w-full rounded-md border border-gray-300 shadow-sm text-sm 
                               focus:ring-blue-500 focus:border-blue-500 
                               dark:bg-gray-800 dark:border-gray-600 dark:text-gray-200 
                               dark:focus:ring-gray-400 dark:focus:border-gray-800 
                               dark:hover:bg-gray-700 dark:hover:text-gray-100">
                        <option value="1" @if ($configuracion->online == 1) selected @endif>Online</option>
                        <option value="0" @if ($configuracion->online != 1) selected @endif>Mantenimiento</option>
                    </select>
                </div>
            </div>

            <div class="flex flex-wrap gap-6">
                <div class="flex-1 min-w-[250px]">
                    <label class="block text-sm font-medium text-gray-700 mb-1 dark:text-gray-300 capitalize">
                        Whatsapp
                    </label>
                    <input name="whatsapp" value="{{ $configuracion->whatsapp }}" class="w-full rounded-md border border-gray-300 shadow-sm text-sm 
                           focus:ring-blue-500 focus:border-blue-500 
                           dark:bg-gray-800 dark:border-gray-600 dark:text-gray-200 
                           dark:focus:ring-gray-400 dark:focus:border-gray-800 
                           dark:hover:bg-gray-700 dark:hover:text-gray-100">
                </div>

                <div class="flex-1 min-w-[250px]">
                    <label class="block text-sm font-medium text-gray-700 mb-1 dark:text-gray-300 capitalize">
                        Facebook
                    </label>
                    <input name="facebook" value="{{ $configuracion->facebook }}" class="w-full rounded-md border border-gray-300 shadow-sm text-sm 
                           focus:ring-blue-500 focus:border-blue-500 
                           dark:bg-gray-800 dark:border-gray-600 dark:text-gray-200 
                           dark:focus:ring-gray-400 dark:focus:border-gray-800 
                           dark:hover:bg-gray-700 dark:hover:text-gray-100">
                </div>

                <div class="flex-1 min-w-[250px]">
                    <label class="block text-sm font-medium text-gray-700 mb-1 dark:text-gray-300 capitalize">
                        Instagram
                    </label>
                    <input name="instagram" value="{{ $configuracion->instagram }}" class="w-full rounded-md border border-gray-300 shadow-sm text-sm 
                           focus:ring-blue-500 focus:border-blue-500 
                           dark:bg-gray-800 dark:border-gray-600 dark:text-gray-200 
                           dark:focus:ring-gray-400 dark:focus:border-gray-800 
                           dark:hover:bg-gray-700 dark:hover:text-gray-100">
                </div>

                <div class="flex-1 min-w-[250px]">
                    <label class="block text-sm font-medium text-gray-700 mb-1 dark:text-gray-300 capitalize">
                        Linkedin
                    </label>
                    <input name="linkedin" value="{{ $configuracion->linkedin }}" class="w-full rounded-md border border-gray-300 shadow-sm text-sm 
                           focus:ring-blue-500 focus:border-blue-500 
                           dark:bg-gray-800 dark:border-gray-600 dark:text-gray-200 
                           dark:focus:ring-gray-400 dark:focus:border-gray-800 
                           dark:hover:bg-gray-700 dark:hover:text-gray-100">
                </div>

                <div class="flex-1 min-w-[250px]">
                    <label class="block text-sm font-medium text-gray-700 mb-1 dark:text-gray-300 capitalize">
                        Email
                    </label>
                    <input name="email" value="{{ $configuracion->email }}" class="w-full rounded-md border border-gray-300 shadow-sm text-sm 
                           focus:ring-blue-500 focus:border-blue-500 
                           dark:bg-gray-800 dark:border-gray-600 dark:text-gray-200 
                           dark:focus:ring-gray-400 dark:focus:border-gray-800 
                           dark:hover:bg-gray-700 dark:hover:text-gray-100">
                </div>
            </div>


            <div class="mt-6">
                <button type="submit"
                    class="bg-sky-500 text-white px-4 py-2 text-xs rounded-md shadow hover:bg-sky-600 cursor-pointer">
                    Guardar
                </button>
            </div>
        </form>
        @else
        <div class="bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 rounded-md">
            Contacta con soporte. Debe ejecutarse el seeder para implementar la configuración principal del sitio.
        </div>
        @endif
    </div>
</div>
@endsection

@vite('resources/js/alert.js')