@extends('layouts.index', ['subHeader' => 'Boletín Diario - Security & HSE'])

@section('header')
    <a href="{{ route('home') }}" class="text-decoration-none text-dark">Dashboard</a>
    <span> / </span>
    <a href="{{ route('boletines.index') }}" class="text-decoration-none text-dark">Boletín diario</a>
@endsection

@section('content')
    <div class="">
        <div class=" d-flex justify-content-end">
            <div class="btn-group" role="group" aria-label="">
                <a href="{{ route('boletines.index') }}" type="button" class="btn btn-back btn-lg ">
                    <i class="bi bi-arrow-left-circle-fill"></i> Atrás
                </a>
            </div>
        </div>
        <br>


    </div>
    <br>
    <div class="container-fluid shadow-s p-4">
        <form class="row g-3" id="formCrearBoletion" enctype="multipart/form-data">
            <h1 class="fs-3x fw-bolder">Nuevo Boletín</h1>

            {{--  --}}
            <div class="kt_docs_repeater_basic">
                <div data-repeater-list="kt_docs_repeater_basic">
                    <div data-repeater-item class="mt-4">
                        <div class="d-flex flex-wrap">
                            <div class="col-xl-4 form-width">
                                <div class="">
                                    <div class="input-group">
                                        <span class="input-group-text fw-bolder num" id="basic-addon1">1.</span>
                                        <select id="selectPais1" class="form-select form-select-lg formcsstwo selectPais1" required>
                                            <option value="">Seleccione el pais</option>
                                            @foreach ($paises as $pais)
                                                <option value="{{ $pais->id }}">{{ $pais->nombre_corto }} - {{ $pais->nombre }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4 d-flex align-items-end form-width">
                                <select id="selectRiesgo" class="form-select form-select-lg formcsstwo selectRiesgo" required>
                                    <option value="">Seleccione el Riesgo BCP</option>
                                    <option value="1">Bajo</option>
                                    <option value="2">Medio</option>
                                    <option value="3">Alto</option>
                                </select>
                            </div>
                            <div class="col-xl-4 d-flex align-items-end form-width">
                                <input type="text" class="form-control form-control-lg formcsstwo inputRecomendaciones"
                                    placeholder="Recomendaciones">
                            </div>
                        </div>
                        <div class="mt-2 row">
                            <div class="col-lg-10 col-md-10 col-sm-10">
                                <textarea class="form-control fromcss form-control-lg textareaIdeaPrincipal" rows="3"
                                    placeholder="Idea principal" required></textarea>
                            </div>
                            <div class="col-lg-2 col-md-2 col-sm-2">
                                <a href="javascript:;" data-repeater-delete
                                    class="btn btn-sm btn-light-danger mt-3 mt-md-8">
                                    <i class="bi bi-trash-fill fs-5">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                        <span class="path3"></span>
                                        <span class="path4"></span>
                                        <span class="path5"></span>
                                    </i>
                                    Eliminar
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex justify-content-end mt-3">
                    <div class="d-grid gap-2 col-6 ">
                        <a href="javascript:;" data-repeater-create class="btn btn-enviar">
                            <i class="bi bi-plus-lg"></i>
                            Añadir
                        </a>
                    </div>
                </div>
            </div>

            <hr>

            {{--  --}}
            <div class="kt_docs_repeater_basic1">
                <div class="form-group">
                    <div data-repeater-list="kt_docs_repeater_basic1">
                        <div data-repeater-item class="mt-4">
                            <div class="d-flex flex-wrap">
                                <div class="col-xl-5 margin-form form-width">
                                    <div class="">
                                        <label for="" class="form-label fw-bolder">Country Council</label>
                                        <div class="input-group">
                                            <span class="input-group-text fw-bolder" id="basic-addon1">1.</span>
                                            <select id="selectDirectivo1" class="form-select form-select-lg formcsstwo selectDirectivo1" required>
                                                <option value="">Seleccione el Directivo</option>
                                                @foreach ($directivos as $directivo)
                                                    <option value="{{$directivo->id}}">{{$directivo?->numero_tarjeta_interno ?? 0}} - {{$directivo?->titulo}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-4 d-flex align-items-end form-width">
                                    <input type="text" class="form-control form-control-lg formcsstwo formCountryUbicacion" id="" required placeholder="Ubicación">
                                </div>
                                <div class="col-xl-2 ms-5 d-flex align-items-end form-width">
                                    <a href="javascript:;" data-repeater-delete
                                        class="btn btn-sm btn-light-danger mt-3 mt-md-8">
                                        <i class="bi bi-trash-fill fs-5">
                                            <span class="path1"></span>
                                            <span class="path2"></span>
                                            <span class="path3"></span>
                                            <span class="path4"></span>
                                            <span class="path5"></span>
                                        </i>
                                        Eliminar
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group mt-5">
                    <div class="d-flex justify-content-end mt-3">
                        <div class="d-grid gap-2 col-6 ">
                            <a href="javascript:;" data-repeater-create class="btn btn-enviar">
                                <i class="bi bi-plus-lg"></i>
                                Añadir
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            {{--  --}}
            <div class="kt_docs_repeater_basic2">
                <div class="form-group">
                    <div data-repeater-list="kt_docs_repeater_basic2">
                        <div data-repeater-item class="mt-4">
                            <div class="d-flex flex-wrap">
                                <div class="col-xl-5 margin-form form-width">
                                    <label for="" class="form-label fw-bolder">Expatriados</label>
                                    <div class="input-group">
                                        <span class="input-group-text fw-bolder" id="basic-addon1">1.</span>
                                        <select id="selectDirectivo2" class="form-select form-select-lg formcsstwo selectDirectivo2">
                                            <option value="">Seleccione el Directivo</option>
                                            @foreach ($directivos as $directivo)
                                                <option value="{{$directivo->id}}">{{$directivo?->numero_tarjeta_interno ?? 0}} - {{$directivo?->titulo}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-xl-4 d-flex align-items-end form-width">
                                    <input type="text" class="form-control form-control-lg formcsstwo formExpatriadosUbicacion" id=""
                                        placeholder="Ubicación">
                                </div>
                                <div class="col-xl-2 ms-5 d-flex align-items-end form-width">
                                    <a href="javascript:;" data-repeater-delete
                                        class="btn btn-sm btn-light-danger mt-3 mt-md-8">
                                        <i class="bi bi-trash-fill fs-5">
                                            <span class="path1"></span>
                                            <span class="path2"></span>
                                            <span class="path3"></span>
                                            <span class="path4"></span>
                                            <span class="path5"></span>
                                        </i>
                                        Eliminar
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group mt-5">
                    <div class="d-flex justify-content-end">
                        <div class="d-grid gap-2 col-6 ">
                            <a href="javascript:;" data-repeater-create class="btn btn-enviar">
                                <i class="bi bi-plus-lg"></i>
                                Añadir
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <hr>
            <span class="form-label fw-bolder">Esquemas de Seguridad Vehicular</span>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="tipoVehiculo" value="1" id="checkCarga">
                <label class="form-check-label mb-3" for="checkCarga">
                    Cargar datos
                </label>
                <input class="form-control btn-outline-p form-control-lg d-none seccionCarga" accept=".xlsx, .xls, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" name="archivo" type="file" id="formFile">
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="tipoVehiculo" value="2" id="checkManual">
                <label class="form-check-label mb-3" for="checkManual">
                    Registro manual
                </label>
                <div>
                    <div class="kt_docs_repeater_basic3 d-none seccionManual">
                        <div class="form-group">
                            <div data-repeater-list="kt_docs_repeater_basic3">
                                <div data-repeater-item class="mt-4">
                                    <div class="d-flex flex-wrap">
                                        <div class="col-xl-2 form-width">
                                            <div class="input-group">
                                                <span class="input-group-text fw-bolder" id="basic-addon1">1.</span>
                                                <select id="selectDirectivo3" class="form-select form-select-lg formcsstwo selectDirectivo3">
                                                    <option value="">Seleccione el Directivo</option>
                                                    @foreach ($directivos as $directivo)
                                                        <option value="{{$directivo->id}}">{{$directivo?->numero_tarjeta_interno ?? 0}} - {{$directivo?->titulo}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-xl-2 d-flex align-items-end form-width">
                                            <input type="text" class="form-control form-control-lg formcsstwo formVehiculosMarca" id=""
                                                placeholder="Marca">
                                        </div>
                                        <div class="col-xl-1 d-flex align-items-end form-width">
                                            <input type="text" class="form-control form-control-lg formcsstwo formVehiculosPlaca" id=""
                                                placeholder="Placa">
                                        </div>
                                        <div class="col-xl-1 d-flex align-items-end form-width">
                                            <input type="text" class="form-control form-control-lg formcsstwo formVehiculosModelo" id=""
                                                placeholder="Modelo">
                                        </div>
                                        <div class="col-xl-2 d-flex align-items-end form-width">
                                            <input type="text" class="form-control form-control-lg formcsstwo formVehiculosUbicacion" id=""
                                                placeholder="Ubicación">
                                        </div>
                                        <div class="col-xl-2 d-flex align-items-end form-width">
                                            <input type="text" class="form-control form-control-lg formcsstwo formVehiculosObservaciones" id=""
                                                placeholder="Observación">
                                        </div>
                                        <div class="col-xl-1 ms-5 d-flex align-items-end form-width">
                                            <a href="javascript:;" data-repeater-delete
                                                class="btn btn-sm btn-light-danger mt-3 mt-md-8">
                                                <i class="bi bi-trash-fill fs-5">
                                                    <span class="path1"></span>
                                                    <span class="path2"></span>
                                                    <span class="path3"></span>
                                                    <span class="path4"></span>
                                                    <span class="path5"></span>
                                                </i>
                                                Eliminar
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group mt-5">
                            <div class="d-flex justify-content-end mt-3">
                                <div class="d-grid gap-2 col-6 ">
                                    <a href="javascript:;" data-repeater-create class="btn btn-enviar">
                                        <i class="bi bi-plus-lg"></i>
                                        Añadir
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <hr>
            {{-- <span class="form-label fw-bolder">Eventos</span>

            <div class="kt_docs_repeater_basic4">
                <div class="form-group">
                    <div data-repeater-list="kt_docs_repeater_basic4">
                        <div data-repeater-item class="mt-4">
                            <div class="d-flex flex-wrap">
                                <div class="col-xl-4 margin-form form-width">
                                    <div class="input-group">
                                        <span class="input-group-text fw-bolder" id="basic-addon1">1.</span>
                                        <select id="selectPais2" class="form-select form-select-lg formcsstwo selectPais2">
                                            <option value="">Seleccione el pais</option>
                                            @foreach ($paises as $pais)
                                                <option value="{{ $pais->id }}">{{ $pais->nombre_corto }} - {{ $pais->nombre }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-xl-3 d-flex align-items-end form-width">
                                    <input type="text" class="form-control form-control-lg formcsstwo" id=""
                                        placeholder="Ubicación">
                                </div>
                                <div class="col-xl-3 d-flex align-items-end form-width">
                                    <input type="text" class="form-control form-control-lg formcsstwo" id=""
                                        placeholder="Número de eventos">
                                </div>
                                <div class="col-xl-1 ms-5 d-flex align-items-end form-width">
                                    <a href="javascript:;" data-repeater-delete
                                        class="btn btn-sm btn-light-danger mt-3 mt-md-8">
                                        <i class="bi bi-trash-fill fs-5">
                                            <span class="path1"></span>
                                            <span class="path2"></span>
                                            <span class="path3"></span>
                                            <span class="path4"></span>
                                            <span class="path5"></span>
                                        </i>
                                        Eliminar
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group mt-5">
                    <div class="d-flex justify-content-end mt-3">
                        <div class="d-grid gap-2 col-6 ">
                            <a href="javascript:;" data-repeater-create class="btn btn-enviar">
                                <i class="bi bi-plus-lg"></i>
                                Añadir
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <hr> --}}

            <span class="form-label fw-bolder">Travelers</span>

            <div class="col-md-4">
                <label for="" class="form-label fw-bolder ">Nacionales</label>
                <input type="number" class="form-control fromcss form-control-lg" readonly name="" id="totalNacionales" placeholder="0">
            </div>
            <div class="col-md-4">
                <label for="" class="form-label fw-bolder ">Heads</label>
                <input type="number" class="form-control fromcss form-control-lg" name="nacional_heads" id="inputNacional1" placeholder="0">
            </div>
            <div class="col-md-4">
                <label for="" class="form-label fw-bolder ">Sanofians</label>
                <input type="number" class="form-control fromcss form-control-lg" name="nacional_sanofians" id="inputNacional2" placeholder="0">
            </div>
            <div class="col-md-4">
                <label for="" class="form-label fw-bolder ">Internacionales</label>
                <input type="number" class="form-control fromcss form-control-lg" readonly id="totalInternacionales" placeholder="0">
            </div>
            <div class="col-md-4">
                <label for="" class="form-label fw-bolder ">Heads</label>
                <input type="number" class="form-control fromcss form-control-lg" name="internacional_heads" id="inputInternacional1" placeholder="0">
            </div>
            <div class="col-md-4">
                <label for="" class="form-label fw-bolder ">Sanofians</label>
                <input type="number" class="form-control fromcss form-control-lg" name="internacional_sanofians" id="inputInternacional2" placeholder="0">
            </div>
            <div class="col-md-12 mb-3">
                <label for="" class="form-label fw-bolder ">Novedades</label>
                <textarea class="form-control fromcss form-control-lg" id="novedades" name="novedades" rows="3" placeholder="Novedades"></textarea>
            </div>
            <br>
            <div class="col-12 d-flex justify-content-end mt-3">
                <div class="flex-row g-4 w-100 justify-content-end">
                    <button class=" btn btn-lg mb-3 btn-cancelar" type="reset">Cancelar</button>
                    <button class=" btn btn-lg mb-3 btn-enviar" type="submit">Guardar</button>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('js')
    <script src="{{ mix('js/boletion/crear.js') }}"></script>
@endsection