@extends('layouts.admin')

@section('title', 'Nuevo Comercio')


@section('content')
@if ($errors->any())
    <div class="alert alert-danger mt-3">
        <ul class="mb-0">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
<div class="container py-4">
    <h2 class="mb-4">Crear nuevo comercio</h2>

    <form method="POST" action="{{ route('admin.comercios.store') }}" enctype="multipart/form-data">
        @csrf

        <div class="mb-3">
            <label class="form-label">Nombre Fantasía</label>
            <input type="text" name="nombre" class="form-control" required>
        </div>

        <div class="mb-3">
            <label class="form-label">RUT</label>
            <input type="text" name="rut" class="form-control">
        </div>

        <div class="mb-3">
            <label class="form-label">Dirección</label>
            <input type="text" name="direccion" class="form-control">
        </div>

        <div class="mb-3">
            <label for="email" class="form-label">Correo del comercio</label>
            <input type="email" name="email" class="form-control">
        </div>
        
        <div class="mb-3">
            <label for="logo" class="form-label">Logo (Opcional)</label>
            <input type="file" name="logo" class="form-control" accept="image/*">
        </div>

        <div class="form-group">
            <label>Estado</label>
            <select name="estado_cuenta" class="form-control">
                <option value="activo" {{ old('estado_cuenta', $comercio->estado_cuenta ?? '') == 'activo' ? 'selected' : '' }}>Activo</option>
                <option value="inactivo" {{ old('estado_cuenta', $comercio->estado_cuenta ?? '') == 'inactivo' ? 'selected' : '' }}>Inactivo</option>
            </select>
        </div>
        

        <hr class="my-4">

        <h5 class="mt-4">Usuarios del Comercio (opcional)</h5>

        <button type="button" class="btn btn-outline-secondary mb-3" id="btn-agregar-usuario">+ Agregar Usuario</button>

        <div id="usuarios-container"></div>

        <button type="submit" class="btn btn-success mt-3">Crear Comercio</button>
    </form>
</div>
@endsection

@push('js')
<script>
    document.addEventListener("DOMContentLoaded", function () {
        let usuarioIndex = 0;
    
        document.getElementById('btn-agregar-usuario').addEventListener('click', function () {
            const container = document.getElementById('usuarios-container');
    
            const html = `
            <div class="usuario-item border p-3 rounded mb-3">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h6 class="mb-0">Usuario #${usuarioIndex + 1}</h6>
                    <button type="button" class="btn btn-sm btn-outline-danger" onclick="this.closest('.usuario-item').remove()">
                        <i class="fas fa-trash-alt"></i> Quitar
                    </button>
                </div>
                <div class="mb-2"><label>Nombre</label>
                    <input type="text" name="usuarios[${usuarioIndex}][name]" class="form-control" required>
                </div>
                <div class="mb-2"><label>Email</label>
                    <input type="email" name="usuarios[${usuarioIndex}][email]" class="form-control" required>
                </div>
                <div class="mb-2"><label>Contraseña</label>
                    <input type="password" name="usuarios[${usuarioIndex}][password]" class="form-control" required>
                </div>
                <div class="mb-2"><label>Confirmar Contraseña</label>
                    <input type="password" name="usuarios[${usuarioIndex}][password_confirmation]" class="form-control" required>
                </div>
            </div>`;
    
            container.insertAdjacentHTML('beforeend', html);
            usuarioIndex++;
        });
    });
    </script>

@endpush