@extends('layouts.admin')

@push('styles')
<style>
/* Vista previa logo - compacta, no deforma el formulario */
.logo-thumbnail {
	max-height: 65px;
	max-width: 130px;
	width: auto;
	height: auto;
	object-fit: contain;
}
/* Alinear checkbox Activa con form-select */
.form-check-activa-wrapper {
	min-height: calc(1.5em + 0.75rem + 2px);
}
</style>
@endpush

@section('content')
{{--
    Creación de institución.
    Solo Superadmin puede crear instituciones.
--}}

<div class="container">
    <div class="row">

    @php
        $isSuperadmin = (auth()->user()?->root ?? 0) == 1;
    @endphp

    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/admin">Inicio</a></li>
            <li class="breadcrumb-item"><a href="/admin/instituciones">Instituciones</a></li>
            <li class="breadcrumb-item active" aria-current="page">Crear nueva institución</li>
        </ol>
    </nav>

        <div class="col-12 edit">

            @session('status')
                <div class="col-12 alert alert-success mb-5">
                    {{ $value }}
                </div>
            @endsession

            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <h2 class="mb-0">Creación de una Institución:</h2>
            <p class="mb-5">Completa los datos de la nueva institución y luego pulsa el botón "Crear Institución"</p>

        </div>

        <div class="card edicion">

            @if(!$isSuperadmin)
                <div class="card-body">
                    <div class="alert alert-warning mb-0">
                        <strong>Sin permisos.</strong> Solo el Superadmin puede crear instituciones.
                    </div>
                </div>
            @else
            <div id="institucionesErroresAjax" class="validacion form-group text-danger d-none mb-3"></div>
            <form id="InstitucionesForm" class="needs-validation py-4" novalidate enctype="multipart/form-data" action="{{ route('admin.instituciones.store') }}" method="POST">
                @csrf

                <h3 class="subtitle-line mb-3">Datos de la institución:</h3>

                {{-- Fila 1: Identificación --}}
                <div class="row g-3 mb-3">
                    <div class="col-12 col-md-4">
                        <label for="codigo" class="form-label">Código</label>
                        <input name="codigo" id="codigo" value="{{ old('codigo') }}"
                            class="form-control">
                        @error('codigo')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                    <div class="col-12 col-md-4">
                        <label for="sigla" class="form-label">Sigla</label>
                        <input name="sigla" id="sigla" value="{{ old('sigla') }}" class="form-control">
                    </div>
                </div>

                {{-- Fila 2: Nombre --}}
                <div class="row g-3 mb-3">
                    <div class="col-12">
                        <label for="nombre" class="form-label">Nombre de la institución</label>
                        <input name="nombre" id="nombre" value="{{ old('nombre') }}" class="form-control">
                        @error('nombre')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                </div>

                {{-- Fila 3: Tipo, Institución Padre, Activa --}}
                <div class="row g-3 mb-3 align-items-end">
                    <div class="col-12 col-md-4">
                        <label for="tipo" class="form-label">Tipo</label>
                        <select class="form-select mt-1" id="tipo" name="tipo" aria-label="Tipo">
                            <option value="partida" @selected(old('tipo', 'partida') === 'partida')>Partida</option>
                            <option value="capitulo" @selected(old('tipo') === 'capitulo')>Capítulo</option>
                        </select>
                    </div>

                    <div class="col-12 col-md-4">
                        <label for="padre" class="form-label">Institución Padre</label>
                        <select class="form-select mt-1" id="padre" name="padre" aria-label="Institución Padre">
                            <option value="null" data-para-tipo="partida" @selected(in_array(old('padre'), ['null', '', null], true))>Es institución Padre</option>
                            @foreach(($institutionFather ?? []) as $father)
                                <option value="{{ $father->id }}" data-para-tipo="capitulo" @selected(old('padre') == $father->id)>{{ $father->nombre ?? '' }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-12 col-md-4">
                        <label for="checkChecked" class="form-label">Activa</label>
                        <div class="form-check mt-1 d-flex align-items-center form-check-activa-wrapper">
                            <input class="form-check-input mt-0" type="checkbox" name="activa" value="1" id="checkChecked" @checked(old('activa', true))>
                        </div>
                    </div>
                </div>

                {{-- Fila 4: URL y Logo --}}
                <div class="row g-3 mb-3">
                    <div class="col-12 col-md-6">
                        <label for="sitio_web" class="form-label">URL Sitio Web Institucional</label>
                        <input type="url"
                               name="sitio_web"
                               id="sitio_web"
                               class="form-control @error('sitio_web') is-invalid @enderror"
                               value="{{ old('sitio_web') }}"
                               placeholder="https://www.ejemplo.cl">
                        @error('sitio_web')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-12 col-md-6">
                        <label for="logo" class="form-label">Logo</label>
                        <input type="file"
                               name="logo"
                               class="form-control"
                               id="logo"
                               accept="image/*">
                        @error('logo')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                {{-- Fila 5: Muestra logo institucional --}}
                <div class="row g-3 mb-3 align-items-center">
                    <div class="col-12 col-md-6">
                        <div class="form-check mb-0">
                            <input type="hidden" name="upper_logo" id="upper_logo_value" value="{{ old('upper_logo', '0') }}">
                            <input class="form-check-input me-2" type="checkbox" id="checkUpperLogo" @checked(old('upper_logo', false))>
                            <label for="checkUpperLogo" class="form-check-label">Muestra logo en parte superior del sitio</label>
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <small class="text-muted d-block mb-1">Logo:</small>
                        <span class="text-muted">Opcional. Se puede subir después de crear la institución.</span>
                    </div>
                </div>

                <div class="row mt-4">
                    <div class="col-12 text-end">
                        <button type="submit" id="InstitucionesFormSubmit" class="btn btn-success btn-fill update">Crear Institución</button>
                    </div>
                </div>

            </form>
            @endif
        </div>
    </div>
</div>

@push('codigoPaginaTemplateEnJQueryReady')
$('#checkUpperLogo').on('change', function() {
    $('#upper_logo_value').val($(this).is(':checked') ? '1' : '0');
});
@endpush

@endsection