@extends('layouts.portal.principal')

@section('css_custom')
  <link href="{{ asset('js/plugins/jquery.autocomplete/css/autocomplete.css') }}" rel="stylesheet">
  <link href="{{ asset('js/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css') }}" rel="stylesheet">
@endsection

@section('scripts_content')
    <script src="{{ asset('theme/lib/internacionalizacion/es.js') }}"></script>
    <script src="{{ asset('theme/lib/datatables/jquery.dataTables.js') }}"></script>
    <script src="{{ asset('js/plugins/jquery.mask/jquery.maskedinput.js') }}"></script>
    <script src= "{{ asset('js/plugins/jquery.autocomplete/js/jquery.autocomplete.min.js') }}"></script> 
    <script src= "{{ asset('js/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}"></script> 
    <script src= "{{ asset('js/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.es.min.js') }}"></script> 
    <script src="{{ asset('js/portal/officials/extra-data/create.js') }}"></script>
@endsection

@section('content')
    <div class="br-mainpanel">

        @include('includes/mensaje')
        @include('includes/form-error')
        <div class="br-pageheader pd-y-15 pd-l-20">
            <nav class="breadcrumb pd-0 mg-0 tx-12">
            <a class="breadcrumb-item" href="#">Gestión recurso humano</a>
            <a class="breadcrumb-item" href="{{ route('extra-data.index') }}">Datos extra funcionarios</a>
            <span class="breadcrumb-item active">{{ $form->name }}</span>
            </nav>
        </div><!-- br-pageheader -->

        <div class="br-pagebody">

            <div class="br-section-wrapper">
                <table width='100%' style="margin-bottom: 20px;">
                    <tr>
                        <td width='50' align="center" valign="top">
                            <h1><i class="fa fa-building" aria-hidden="true"></i></h1>
                        </td>
                        <td>
                            <h4 class="tx-gray-800 mg-b5" style="margin-bottom: 0px;" id="title">{{ $form->name }}</h4>
                            <span class='titulos'>2525-03-12 07:03</span>
                            <input type="hidden" name="code_input_select" id="code_input_select" value="{{ $code_input_select->id}}">
                        </td>
                    </tr>
                </table>

                <div class="row">
                    <div class="col-sm-12">
                        <strong>Descripción :</strong> {{ $form->observation }}
                    </div>
                </div>
                

                <div class="row mt-4" style="margin-top: 60px !important; margin-bottom: 30px;">
                    <div class="col-sm-6 text-right"><button class="btn btn-primary btn-sm mg-b-10 btn-new-detail"><i class="fa fa-newspaper-o mg-r-10"></i>Nuevo campo</button></div>
                    <div class="col-sm-6 text-left"><button data-route="{{ route('extra-data.show', $form) }}" class="btn btn-success btn-sm mg-b-10 view-survey-form"><i class="fa fa-street-view mg-r-10"></i>Ver formulario</button></div>
                </div>

                <table class="table mg-b-0" id='tbl-fields'>
                    <thead>
                      <tr>
                        <th>ID</th>
                        <th>Tipo</th>
                        <th>Nombre</th>
                        <th>Orden</th>
                        <th>Estado</th>
                        <th class="text-center">Actions</th>
                      </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>

                <div id="message-error">
                </div>
                <div class="table-wrapper">
                    <div class="row mg-b-25">
                        <div class="col-sm-12 col-lg-12">
                            
                        </div>   
                    </div>
                </div>
                <div class="table-wrapper"></div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-form-details" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-lg" role="document" style="width:600px;">
            <div class="modal-content">
            <div class="modal-header text-white bg-primary text-uppercase" style="height: 40px;">
                <h6 class="modal-title" id="exampleModalLabel"><i class="fa fa-check-square-o mr-4" aria-hidden="true"></i>Campo formulario</h6>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                
                <div class="row">
                    <div class="col-sm-12">
    
                        {!! Form::open([
                            'route' => 'extra-data.storefield',
                            'method'=>'POST',
                            'autocomplete'=>'off',
                            'class' => 'form-horizontal',
                            'files' => true,
                            'onsubmit' => "submitButton.disabled = true",
                            'id' => 'form-field'
                        ]) !!}

                        <div class="form-group {{ $errors->has('code') ? 'has-error' : ''}}">
                            {!! Form::label('type', 'Tipo campo <span class="tx-danger">*</span>', ['class' => 'col-md-4 control-label tx-gray-800'], false) !!}
                            <div class="col-md-12">
                                {!! Form::select('type', $type_inputs, null, ['class' => ($errors->has('code')) ? 'form-control form-control-sm is-invalid state' : 'form-control form-control-sm state', 'placeholder' => 'Seleccione...', 'required'=>'required' ]) !!}
                                {!! Form::hidden('survey_form_detail_value_id', 0, ['class' => ($errors->has('admission_date')) ? 'form-control form-control-sm is-invalid name' : 'form-control form-control-sm name', 'id'=>'survey_detail_value_id']) !!}
                                {!! Form::hidden('survey_form_id',  $form->id , ['class' => ($errors->has('admission_date')) ? 'form-control form-control-sm is-invalid name' : 'form-control form-control-sm name', 'id'=>'survey_form_id']) !!}
                                {!! $errors->first('type', '<div class="invalid-feedback d-block">:message</div>') !!}
                            </div>
                        </div>
    
                        <div class="form-group {{ $errors->has('admission_date') ? 'has-error' : ''}}">
                            {!! Form::label('name', 'Nombre campo <span class="tx-danger">*</span>', ['class' => 'col-md-4 control-label tx-gray-800'], false) !!}
                            <div class="col-md-12">
                                {!! Form::text('name', null, ['class' => ($errors->has('admission_date')) ? 'form-control form-control-sm is-invalid name' : 'form-control form-control-sm name' , 'required'=>'required']) !!}
                                {!! $errors->first('name', '<div class="invalid-feedback d-block">:message</div>') !!}
                            </div>
                        </div>

                        <div class="form-group {{ $errors->has('admission_date') ? 'has-error' : ''}}">
                            {!! Form::label('required', 'Campo obligatorio <span class="tx-danger">*</span>', ['class' => 'col-md-4 control-label tx-gray-800'], false) !!}
                            <div class="col-md-12">
                                {!! Form::select('required', ['S'=>'Si', 'N'=>'No'], null, ['class' => ($errors->has('code')) ? 'form-control form-control-sm is-invalid state' : 'form-control form-control-sm state', 'placeholder' => 'Seleccione...', 'required'=>'required' ]) !!}
                                {!! $errors->first('required', '<div class="invalid-feedback d-block">:message</div>') !!}
                            </div>
                        </div>

                        <div class="form-group {{ $errors->has('code') ? 'has-error' : ''}}">
                            {!! Form::label('order', 'Orden', ['class' => 'col-md-4 control-label tx-gray-800'], false) !!}
                            <div class="col-md-12">
                                {!! Form::text('order', null, ['class' => ($errors->has('admission_date')) ? 'form-control form-control-sm is-invalid name' : 'form-control form-control-sm name']) !!}
                                {!! $errors->first('order', '<div class="invalid-feedback d-block">:message</div>') !!}
                            </div>
                        </div>

                        <div class="form-group {{ $errors->has('code') ? 'has-error' : ''}}">
                            {!! Form::label('state', 'Estado <span class="tx-danger">*</span>', ['class' => 'col-md-4 control-label tx-gray-800'], false) !!}
                            <div class="col-md-12">
                                {!! Form::select('state', ['A'=>'Activo', 'I' => 'Inactivo'], null, ['class' => ($errors->has('code')) ? 'form-control form-control-sm is-invalid state' : 'form-control form-control-sm state', 'placeholder' => 'Seleccione...', 'required'=>'required' ]) !!}
                                {!! $errors->first('state', '<div class="invalid-feedback d-block">:message</div>') !!}
                            </div>
                        </div>
    
                        {!! Form::close() !!}
    
                    </div>
                </div>
                <div class="row" style="display: none;" id="div-value-details">
                    <div class="col-sm-12 text-center mt-4">
                        <button class="btn btn-warning btn-sm mg-b-10 btn-new-value btn-block"><i class="fa fa-plus-circle mg-r-10"></i>Nuevo valor</button>
                    </div>
                    <div class="col-sm-12">
                        <table class="table mg-b-0" id="tbl-values">
                            <thead>
                              <tr>
                                <th>ID</th>
                                <th>Detalle</th>
                                <th>Estado</th>
                              </tr>
                            </thead>
                            <tbody>
                            </tbody>
                          </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary btn-sm" id="btn-save-field">Guardar</button>
            </div>
            </div>
        </div>
    </div>


    {{--modal for view detail --}}
    <div class="modal fade" id="modal" role="dialog" aria-labelledby="myModalLabel">

        <div class="modal-dialog modal-lg" role="document" style="width:1000px !important;max-width: 800px !important;">
            <div class="modal-content">
                <div class="modal-header text-white bg-primary text-uppercase" style="height: 40px;">
                    <h6 class="modal-title" id="exampleModalLabel"><i class="fa fa-database mr-4" aria-hidden="true"></i><span class="title-form"></span></h6>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="modal-body"></div>
            </div>
        </div>
    </div>


    @include('manthra::include.flash_message')

@endsection

@push('js')
<script>
    window.addEventListener('load', (event) => {
        const el = document.getElementById('detail')
        el.addEventListener('click', (event) => {
            event.preventDefault()
            const url = el.href

            alert('pruebas');

            const modalBody = document.getElementById('modal-body')

            fetch(url)
                .then(res => res.text())
                .then(payload => modalBody.innerHTML = payload)
                .catch(err => console.log(err))

            $('#modal').appendTo("body").modal('show')
        })
        alert('Datos cargados');
    });
	
</script>
@endpush