@extends('layouts.app')

@section('content')
    <link href="{{ asset('assets/plugins/global/plugins.bundle.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/css/style.bundle.css') }}" rel="stylesheet" type="text/css" />
    <style>
        .custom-modal-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            /* Fondo semitransparente */
            z-index: 1050;
            /* Z-index inferior al del modal */
        }

        .custom-modal-content {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            max-width: 600px;
            /* Ancho máximo del modal */
            width: calc(100% - 40px);
            /* Ancho del modal */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            /* Sombra */
            z-index: 1051;
            /* Z-index mayor que el del fondo */
            overflow: auto;
            /* Habilita el desplazamiento vertical si el contenido es demasiado largo */
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .modal-title {
            margin: 0;
            font-size: 24px;
            color: #333;
        }

        .modal-body {
            margin-bottom: 20px;
        }

        .modal-footer {
            display: flex;
            justify-content: center;
        }
    </style>

    <div class="container">
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <div class="custom-modal-background"></div>
        <div class="custom-modal-content">
            <div class="modal-header">
                <h1 class="modal-title">
                    <i class="fas fa-user text-info fs-2tx me-2"></i>
                    Rol Operador
                </h1>
                <div class="btn btn-icon btn-sm btn-active-light-primary ms-2 btnCerrarModal" data-bs-dismiss="modal" aria-label="Close">
                    <i class="las la-times fs-1">
                        <span class="path1"></span>
                        <span class="path2"></span>
                    </i>
                </div>
            </div>
            <div class="modal-body">
                <div>Para identificarte como operador, por favor selecciona tu nombre e ingresa tu contraseña:</div><br>
                <form id="login_nombre_operador" method="POST" action="{{ route('operator.storeOperatorName') }}">
                    @csrf
                    <div class="container">
                        <label for="nombre_operador" class="form-label">Nombre del Operador</label>
                        <select name="nombre_operador" id="nombre_operador" class="form-select form-select-lg fromcss"
                            data-control="select2" data-placeholder="Selecciona tu nombre..." required>
                            <option></option>
                            @foreach ($sanofians as $operador)
                                <option value="{{ $operador->id }}">{{ $operador->nombre }}</option>
                            @endforeach
                            {{-- @foreach ($personales as $personal)
                                <option value="{{ $personal->id }}">{{ $personal->nombre_personal }}</option>
                            @endforeach --}}
                        </select>
                    </div>
                    <br>
                    <div class="container">
                        <label for="password" class="form-label">Contraseña</label>
                        <input type="password" name="password" id="password" class="form-control @error('password') is-invalid @enderror" required>
                        @error('password')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div><br><br>
                    <div class="modal-footer justify-content-center mt-2">
                        <button type="button" class="btn btn-light me-3"
                            onclick="event.preventDefault(); document.getElementById('logout-form').submit();">Volver</button>
                        <button type="submit" class="btn btn-info">Ingresar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
        @csrf
    </form>
    @routes
    <script src="{{ asset('assets/js/scripts.bundle.js') }}"></script>
    <script src="{{ asset('assets/plugins/global/plugins.bundle.js') }}"></script>
@endsection