@extends('layouts.index', ['subHeader' => 'Incidentes'])

@section('header')
    <a href="{{ route('home') }}" class="text-decoration-none text-dark">Dashboard </a>
    <a href="{{ route('incidentesindex') }}" class="text-decoration-none text-dark">/ Incidentes</a>
@endsection

@section('content')
<div>

        <title>Formulario incidentes</title>
        <link rel="stylesheet" href="{{ asset('css/estilos.css') }}">
            <link rel="stylesheet" href="{{ asset('fuentes/stylesheet.css') }}">
            

    
    
        <!-- contenido -->

        <div class="container  min-vh-100 justify-content-center align-items-center">
            
            <div class="row justify-content-center">
              
                <div>
                    <div class="">
                        <div class="d-flex justify-content-end">
                            <div class="btn-group" role="group" aria-label="">
                                <a href="{{route('incidentesindex')}}" class="btn btn-back btn-lg text-white">
                                    <i class="bi bi-arrow-left-circle-fill"></i> Atrás
                                </a>
                            </div>
                        </div>
                        <br>
                    </div>
                </div>
                
               
                <div class="container-fluid shadow-s p-4 mt-5">
                    
                    <form class="row g-3">
                        
                        @csrf
    
    
                        <div class="col-md-6">
                            <label for="" class="form-label fw-bolder ">País</label>
                            <select id="pais_id" name="pais_id" class="form-select form-select-lg fromcss" disabled>
                                @if ($incidente->pais)
                                    <option selected value="{{$incidente->pais->id }}">{{$incidente->pais->nombre}}</option>
                                @endif
                            </select>
                            
                        </div>
                        <div class="col-md-6">
                            <label for="" class="form-label fw-bolder">Ciudad</label>
                            <select id="ciudad_id" name="ciudad_id" class="form-select form-select-lg fromcss" disabled>
                                @if ($incidente->pais)
                                    <option selected value="{{$incidente->ciudad->id }}">{{$incidente->ciudad->nombre}}</option>
                                @endif
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="" class="form-label fw-bolder ">Nombre</label>
                            <input type="text" class="form-control fromcss form-control-lg" id="nombre" name="nombre"
                                placeholder="Nombre" value="{{$incidente->nombre}}" disabled>
                        </div>
                        <div class="col-md-6">
                            <label for="" class="form-label fw-bolder ">Apellido</label>
                            <input type="text" class="form-control fromcss form-control-lg" id="apellido" name="apellido"
                                placeholder="Apellido" value="{{$incidente->apellido}}" disabled>
                        </div>
                        <div class="col-md-6">
                            <label for="" class="form-label fw-bolder ">Tipo de identificación</label>
                            <select id="tipo_identificacion" name="tipo_identificacion" class="form-select form-select-lg fromcss" disabled>
                                <option selected>{{$incidente->tipo_identificacion}}</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="" class="form-label fw-bolder ">Número de identificación </label>
                            <input type="number" class="form-control fromcss form-control-lg" id="numero_identificacion" name="numero_identificacion"
                                placeholder="No. Identificación" value="{{$incidente->numero_identificacion}}" disabled>
                        </div>
    
                        <div class="col-md-6">
                            <label for="" class="form-label fw-bolder">Correo electrónico</label>
                            <input type="email" class="form-control fromcss form-control-lg" id="correo_electronico" name="correo_electronico"
                                placeholder="Correo electrónico" value="{{$incidente->correo_electronico}}" disabled>
                        </div>
    
                        <div class="col-md-6">
                        
                        </div>
    
                        <div>
                            <hr>
                        </div>
    
                        <div class="col-md-6">
                            <label for="" class="form-label fw-bolder">Tipo de incidente</label>
                            <select id="tipo_incidente" name="tipo_incidente" class="form-select form-select-lg fromcss" disabled>
                                    <option selected>{{$incidente->tipo_incidente}}</option>
                            </select>
                        </div>
    
                        <div class="col-md-6">
                            <label for="" class="form-label fw-bolder">Fecha del incidente</label>
                                <input type="date" class="form-control form-control-lg fromcss" id="fecha_incidente" name="fecha_incidente"
                                     value={{$incidente->fecha_incidente}} disabled>
                        </div>
    
                        <div class="col-md-12">
                            <label for="" class="form-label fw-bolder">Descripción del incidente</label>
                                <textarea class="form-control form-control-lg fromcss" id="descripcion" name="descripcion" rows="4" disabled>{{$incidente->descripcion}}</textarea>
                        </div>
    
                        <br>
                    </form>
                </div>
    
                <footer class=" d-flex justify-content-center position-absolute top-100">
                    <img src="img/Powered_by_K2.png" alt="">
                </footer>
            </div>
        </div>
    
        <!-- fin de contenido -->
</div>
@endsection