@php
/**
* Media picker library field
*
* Use with the media library package (HasMedia Trait)
*
* Use for:
* single image
* single file (pdf, zip, mp3, etc)
*
* ToDo: gallery
*
* Backpack $field parameters:
* - name: the name of the field
* - label: the label of the field
* - hint: the hint of the field
* - thumb_slug: the slug of the thumbnail to display (for images)
* - allowed_extensions: (defaults to jpg,jpeg,png) Allowed extensions for the file (jpg, pdf, zip, mp3, etc)
*
*/
$selected_values = ( ($crud->entry)? implode(",", $crud->entry->getMedias($field['name'])->pluck('id')->toArray()) : '' );

$find = [ "[", "]", "-" ];
$replace = [ "_", "", "_" ];
$escaped_field_name = str_replace($find, $replace, $field['name']).'_'.rand(10000000, 99999999); //.'_'.str_replace(".","",microtime(true));
@endphp

@include('crud::fields.inc.wrapper_start')

@php

$thumb_slug = null;
if(isset($field['thumb_slug'])){
    $thumb_slug = ($field['thumb_slug'])? $field['thumb_slug'] : 'small' ;
}

$allowed_extensions = 'jpg,jpeg,png';
if(isset($field['allowed_extensions'])){
    $allowed_extensions = $field['allowed_extensions'];
}

// dump($crud->entry->getMedias($field['name']));

// dump(( ($crud->entry)? implode(",", $crud->entry->getMedias($field['name'])->pluck('id')->toArray()) : '' ));

$media_popup_url = backpack_url('media').'?'.http_build_query([
    'view_type' => 'popup',
    'select_mode' => 'single',
    'field' => $escaped_field_name,
    'id' => (($crud->entry)? $crud->entry->getKey() : null ),
    'thumb_slug' => $thumb_slug,
    'extensions' => $allowed_extensions
],'', '&');

$value = null;
$media = null;

if(isset($field['value']) && $field['value']){
  $value = $field['value'];
  $media = getMediaById($field['value']);
}
if(!$media){
  $entry = $crud->entry;
  if($entry){
    $media = $entry->getMedia($field['name']);
    if($media){
      $value = $media->id;
    }else{
        // check if field is in extras column
        if(isset($entry)){
          $extras = json_decode($entry->extras);
          $repeater_field_name = substr($field['name'], 0, strpos($field['name'], "["));
          $find = [ "[", "]" ];
          $replace = [ ".", "" ];
          $repeater_field_path = str_replace($find, $replace, $field['name']);
          $obj_extras = (object) $extras;
          $value = data_get($obj_extras, $repeater_field_path);
          if($value){
            $media = getMediaById($value);
          }
        }
    }
  }
}

@endphp

<label>{!! $field['label'] !!}</label>
@include('crud::fields.inc.translatable_icon')

<input type="hidden" name="{{ $field['name'] }}" id="{{ $escaped_field_name }}" value="{{ $value }}" />
<div class="col-sm-3 js-image_picker_img_wrapper_{{ $escaped_field_name }}" data-handle="previewArea" style="margin-bottom: 20px;">
  @if($value)
    @if($thumb_slug && $media && $media->isImage() )
      {{-- is image --}}
      {!! $media->getImageHtml() !!}
    @else
      {{-- not image --}}
      @if($media)
        <a href="{{ $media->getOriginalSrc() }}" target="_blank">{{ $media->filename }}</a>
      @endif
    @endif
    @if($media && $media->disk=='private')
      <span class="la la-lock"></span>
    @endif
  @endif
</div>
<button type="button" onclick="openModal{{ $escaped_field_name }}($(this))"
  class="btn btn-sm" data-toggle="modal"><span class="la la-search"></span>{{ __('admin/media_library.buttons.select_image') }}
</button>
<button type="button" onclick="deselectImage{{ $escaped_field_name }}($(this))" style="{{ (isset($entry) && !$value)? 'display:none;' : '' }}"
  class="btn btn-sm"><span class="la la-times"></span>{{ __('admin/media_library.buttons.deselect_image') }}
</button>

{{-- HINT --}}
@if (isset($field['hint']))
    <p class="help-block">{!! $field['hint'] !!}</p>
@endif
@if(isset($field['allowed_extensions']))
    <p class="help-block">{{ __('admin/media_library.form.allowed_extensions') }}: {{ $field['allowed_extensions'] }}</p>
@endif



<!-- Button trigger modal -->
<div class="modal fade" id="image_picker_modal{{ $escaped_field_name }}" tabindex="-1" role="dialog" aria-labelledby="image_picker_modal{{ $escaped_field_name }}Label" aria-hidden="true">
  <div class="modal-dialog modal-fullscreen" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="image_picker_modal{{ $escaped_field_name }}">{{ __('admin/media_library.form.modal_title') }}</h5>
        <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="closeModal{{ $escaped_field_name }}()">{{ __('admin/media_library.form.close') }}</button>
      </div>
      <div class="modal-body">
        <iframe src="" frameborder="0" style="width:100%;height:100%;" id="iframe_test" class="js-image_picker_iframe_{{ $escaped_field_name }}"></iframe>
      </div>
    </div>
  </div>
</div>

@include('crud::fields.inc.wrapper_end')

{{-- ########################################## --}}
{{-- Extra CSS and JS for this particular field --}}
{{-- If a field type is shown multiple times on a form, the CSS and JS will only be loaded once --}}

    {{-- FIELD CSS - will be loaded in the after_styles section --}}
    @push('crud_fields_styles')
                    @endpush

    {{-- FIELD JS - will be loaded in the after_scripts section --}}
    @push('crud_fields_scripts')
      <script>
        function openModal{{ $escaped_field_name }}(element){
          let field_data_row_number = element.closest('.row').attr('data-row-number');
          let media_popup_url = '{!! $media_popup_url !!}&field_data_row_number='+field_data_row_number;
          media_popup_url += '&selected='+$('#{{ $escaped_field_name }}').val();
          $('#image_picker_modal{{ $escaped_field_name }} iframe').attr('src', media_popup_url);
          $('#image_picker_modal{{ $escaped_field_name }}').appendTo("body").modal('show');
        }
        function closeModal{{ $escaped_field_name }}(element){
          $('#image_picker_modal{{ $escaped_field_name }}').modal('hide');
          $('#image_picker_modal{{ $field['name'] }} iframe').attr('src', '');
        }
        function deselectImage{{ $escaped_field_name }}(element){
          $('.js-image_picker_img_wrapper_{{ $escaped_field_name }}').html('');
          $('input[id={{ $escaped_field_name }}]').val('');
        }
      </script>
    @endpush

{{-- End of Extra CSS and JS --}}
{{-- ########################################## --}}