@extends('layouts.app')

@section('titulo', 'Gestión de Locales')

@section('contenido')

<div class="max-w-7xl mx-auto">

    <div class="flex items-center justify-between mb-6">

        <div>
            <h1 class="text-2xl font-bold text-slate-800">
                Gestión de Locales
            </h1>

            <p class="text-sm text-slate-500">
                Administra las sucursales del sistema
            </p>
        </div>


        <a href="{{ route('locales.create') }}"
           class="bg-brand-600 text-white px-4 py-2 rounded-xl text-sm font-semibold hover:bg-brand-700">

            + Nuevo Local

        </a>

    </div>


    @if(session('success'))

        <div class="mb-4 bg-green-50 text-green-700 px-4 py-3 rounded-xl">
            {{ session('success') }}
        </div>

    @endif



    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">

        <table class="w-full text-sm">

            <thead class="bg-slate-50 border-b">

                <tr>

                    <th class="px-5 py-3 text-left">
                        Código
                    </th>

                    <th class="px-5 py-3 text-left">
                        Nombre
                    </th>

                    <th class="px-5 py-3 text-left">
                        Dirección
                    </th>

                    <th class="px-5 py-3 text-left">
                        Estado
                    </th>

                    <th class="px-5 py-3 text-right">
                        Acciones
                    </th>

                </tr>

            </thead>


            <tbody>


            @foreach($locales as $local)

                <tr class="border-b hover:bg-slate-50">


                    <td class="px-5 py-3">
                        {{ $local->codigo }}
                    </td>


                    <td class="px-5 py-3 font-semibold">
                        {{ $local->nombre }}
                    </td>


                    <td class="px-5 py-3">
                        {{ $local->direccion ?? '-' }}
                    </td>


                    <td class="px-5 py-3">

                        @if($local->estado)

                            <span class="px-2 py-1 rounded-full text-xs bg-green-100 text-green-700">
                                Activo
                            </span>

                        @else

                            <span class="px-2 py-1 rounded-full text-xs bg-red-100 text-red-700">
                                Inactivo
                            </span>

                        @endif

                    </td>


                    <td class="px-5 py-3 text-right">


                        <a href="{{ route('locales.edit',$local) }}"
                           class="text-brand-600 hover:underline">

                            Editar

                        </a>


                        <form action="{{ route('locales.destroy',$local) }}"
                              method="POST"
                              class="inline">

                            @csrf
                            @method('DELETE')


                            <button 
                                onclick="return confirm('¿Desactivar local?')"
                                class="ml-3 text-red-500 hover:underline">

                                Desactivar

                            </button>


                        </form>


                    </td>


                </tr>


            @endforeach


            </tbody>

        </table>


    </div>


</div>

@endsection