@extends('buzons.layout')

@section('buzon.m_header')
<!-- Select2 -->
<link rel="stylesheet" href="/plugins/select2/css/select2.min.css">
<link rel="stylesheet" href="/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
@endsection

@section('buzon.breadcrumbs')
    <!-- Content Header (buzon breadcrumbs) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Buzon</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="/buzon"> Buzon</a></li>
              <li class="breadcrumb-item active">@lang('Create new')</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>
@endsection

@section('buzon.content')
    <div class="row">
        <div class="col-12">
            <div class="card card-success card-outline">
                <div class="card-header">
                    <h3 class="card-title">@lang('Create new')</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <form action="{{ route('buzon.store', []) }}" method="POST"  enctype="multipart/form-data" class="m-0 p-0">
                        <div class="card-body">
                            @csrf
                            <div class="mb-3">
        <label for="Asunto" class="form-label">Asunto:</label>
        <input type="text" name="Asunto" id="Asunto" class="form-control" value="{{@old('Asunto')}}" required/>
        @if($errors->has('Asunto'))
			<div class='error small text-danger'>{{$errors->first('Asunto')}}</div>
		@endif
    </div>
    <div class="mb-3">
        <label for="personal_id" class="form-label">Personal: <small>Búsqueda por Cedula o Nombre del funcionario.</small></label>
        <div class="d-flex flex-row align-items-center justify-content-between">
    <select name="personal_id" id="personal_id" class="form-control form-select flex-grow-1 ajax-buscador-select2" required>
        <option value="">Seleccione el personal</option>
        @foreach($personals as $personal)
            <option value="{{ $personal->id }}" {{ @old('personal_id') == $personal->id ? "selected" : "" }}>{{ $personal->nombre }}</option>
        @endforeach
    </select>

   
</div>
        @if($errors->has('personal_id'))
			<div class='error small text-danger'>{{$errors->first('personal_id')}}</div>
		@endif
    </div>
   

    <div class="mb-3">
          <label for="fileupload" class="form-label">Archivo:</label>
          <input type="file" name="fileuploads[]" id="fileupload" class="form-control" multiple />
        </div>
        <div class="mb-3">
          <div class="row" id="files-preview">
          </div>
        </div>

    <div class="mb-3">
        <label for="observaciones" class="form-label">Observaciones o Mensaje:</label>
        <textarea name="observaciones" id="observaciones" class="form-control" >{{@old('observaciones')}}</textarea>
        @if($errors->has('observaciones'))
			<div class='error small text-danger'>{{$errors->first('observaciones')}}</div>
		@endif
    </div>

                        </div>

                        <div class="card-footer">
                            <div class="d-flex flex-row align-items-center justify-content-between">
                                <a href="/buzon" class="btn btn-default">@lang('Cancel')</a>
                                <button type="submit" class="btn btn-success">@lang('Create new') @lang('Buzon')</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('buzon.scripts')
<script>
   var fileinput = document.getElementById('fileupload');
     

     const readFiles = () =>{
       const file = fileinput.files;
       let preview = document.getElementById('files-preview');
       preview.innerHTML="";
       for (var i = 0; i < file.length; i++) { previewPhoto(file[i], i); };
       preview.innerHTML+=`<p>Para cambiar las imágenes, vuelva hacer selección. </p>`;
     }
 
     const previewPhoto = (file, index) => {
       
       if (file) {
           const fileReader = new FileReader();
           let preview = document.getElementById('files-preview');
           fileReader.onload = event => {
             let ht = fileIcon(event.target.result);
             preview.innerHTML+= ht
           }
           fileReader.readAsDataURL(file);
       }
     }
 
     function fileIcon(str){
         let t = str.substr(0,20);
         let pat = /(jpg|png|jpeg)/g;
         let html = "";
         if (pat.test(t)) {
           html=`<div class="col-sm-3">
                     <img src="${str}" class="img-fluid mb-2" alt="red sample">             
                 </div>`;
         }else{
           html=`<div class="col-sm-3">
                   <img src="/images/pdf.png" class="img-fluid mb-2" alt="red sample">             
                 </div>`;
         };
         return html;
     };
   fileinput.addEventListener('change', readFiles);
</script>
<!-- Bootstrap 4 -->
<script src="/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Select2 -->
<script src="/plugins/select2/js/select2.full.min.js"></script>
<script>
  $(function () {
    //Initialize Select2 Elements
    $('.select2').select2()

    //Initialize Select2 Elements
    $('.select2bs4').select2({
      theme: 'bootstrap4'
    });



    $('.ajax-buscador-select2').select2({
        theme: 'bootstrap4',
        ajax: {
            type: 'POST',
            url: '/personal/search/unique',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: function (params) {
            var query = {
                search: params.term,
            }
            //console.log(params);
            // Query parameters will be ?search=[term]&type=public
            return query;
            },

            processResults: function (data, params) {
            params.page = params.page || 1;
            let datos = [];
            let d = JSON.parse(data);
            for (let i = 0; i < d.data.length; i++) {
                const e = d.data[i];
                datos.push(
                    {id:e.id,text:e.nombre+"  | DNI:"+e.cedula});
            }
            return {
                results: datos
            };
            },
        },
        minimumInputLength: 3
    });



  });






</script>
@endsection