@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>@lang('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('Edit') @lang('Buzon') #{{$buzon->id}}</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>
@endsection

@section('buzon.content')
    <div class="row">
        <div class="col-12">
            <div class="card card-warning card-outline">
                <div class="card-header">
                    <h3 class="card-title">@lang('Edit') @lang('Buzon') #{{$buzon->id}}</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.update', compact('buzon')) }}" method="POST" class="m-0 p-0">
                        @method('PUT')
                        @csrf
                        <div class="card-body">
                            <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', $buzon->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="observaciones" class="form-label">Observaciones:</label>
        <textarea name="observaciones" id="observaciones" class="form-control" >{{@old('observaciones', $buzon->observaciones)}}</textarea>
        @if($errors->has('observaciones'))
			<div class='error small text-danger'>{{$errors->first('observaciones')}}</div>
		@endif
    </div>
    <div class="mb-3">
      <div class="row" id="files-preview">
      <p>Para cambiar los archivos, vuelva hacer selección. </p>
      @foreach($archivos as $archivo)

        @php
          $patt = "/(jpg|png|jpeg)/";
          if(preg_match($patt, $archivo->archivo)){
                echo '<div class="col-sm-3"><img src="/'.$archivo->archivo.'" class="img-fluid mb-2" alt="red sample"></div>';
          }else {
            echo '<div class="col-sm-3"><img src="/images/pdf.png" class="img-fluid mb-2" alt="red sample"></div>';
          }
        @endphp
      @endforeach
      </div>

                        </div>
                        <div class="card-footer">
                            <div class="d-flex flex-row align-items-center justify-content-between">
                                <a href="/buzon" class="btn btn-light">@lang('Cancel')</a>
                                <button type="submit" class="btn btn-warning">@lang('Update') @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