<div class="modal-dialog modal-lg" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title">
        <i class="fa fa-image"></i> @lang('bms::lang.media') — {{ $hall->name }}
      </h4>
    </div>

    <div class="modal-body">
      @can('bms.halls.manage')
        <form id="bms-media-upload-form" enctype="multipart/form-data"
              data-url="{{ route('bms.halls.media.store', $hall->id) }}"
              data-reload="{{ route('bms.halls.media', $hall->id) }}">
          @csrf
          <div class="row">
            <div class="col-md-4">
              <div class="form-group">
                <label>@lang('bms::lang.media')</label>
                <input type="file" name="file" class="form-control" accept="image/*,video/*">
              </div>
            </div>
            <div class="col-md-2">
              <div class="form-group">
                <label>@lang('bms::lang.type')</label>
                <select name="type" class="form-control">
                  <option value="image">@lang('bms::lang.media') (image)</option>
                  <option value="video">@lang('bms::lang.media') (video)</option>
                  <option value="360">360°</option>
                </select>
              </div>
            </div>
            <div class="col-md-12">
              <div class="form-group">
                <label>@lang('bms::lang.media') URL <small class="text-muted">(YouTube / hosted video / 360)</small></label>
                <input type="url" name="url" class="form-control" placeholder="https://www.youtube.com/watch?v=...">
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group">
                <label>@lang('bms::lang.event_type')</label>
                <select name="event_type" class="form-control">
                  <option value="">@lang('bms::lang.all_occasions')</option>
                  @foreach(['Wedding','Engagement','Corporate','Birthday','Other'] as $et)
                    <option value="{{ $et }}">{{ __('bms::lang.et_'.strtolower($et)) }}</option>
                  @endforeach
                </select>
              </div>
            </div>
            <div class="col-md-3">
              <div class="form-group">
                <label>@lang('bms::lang.title')</label>
                <input type="text" name="title" class="form-control">
              </div>
            </div>
          </div>
          <button type="submit" class="tw-dw-btn tw-dw-btn-primary tw-text-white btn-sm">
            <i class="fa fa-upload"></i> @lang('bms::lang.upload')
          </button>
        </form>
        <hr>
      @endcan

      <div class="row">
        @forelse($hall->media as $item)
          <div class="col-md-3 col-sm-4 col-xs-6" style="margin-bottom:15px;">
            <div class="thumbnail" style="margin-bottom:5px;">
              @if($item->type === 'image')
                <img src="{{ $item->url ?? $media->url($item->disk, $item->path) }}" alt="{{ $item->title }}" style="height:120px;object-fit:cover;width:100%;">
              @else
                <div style="height:120px;display:flex;align-items:center;justify-content:center;background:#222;color:#fff;">
                  <i class="fa fa-play-circle fa-3x"></i>
                </div>
              @endif
            </div>
            <div class="text-center">
              @if($item->is_cover)
                <span class="label label-success">@lang('bms::lang.cover')</span>
              @endif
              @if($item->event_type)
                <span class="label label-info">{{ __('bms::lang.et_'.strtolower($item->event_type)) }}</span>
              @endif
              <small class="text-muted">{{ $item->title }}</small>
              @can('bms.halls.manage')
                <button class="tw-dw-btn tw-dw-btn-xs tw-dw-btn-outline tw-dw-btn-error bms-media-delete"
                        data-href="{{ route('bms.halls.media.destroy', [$hall->id, $item->id]) }}"
                        data-reload="{{ route('bms.halls.media', $hall->id) }}">
                  <i class="glyphicon glyphicon-trash"></i>
                </button>
              @endcan
            </div>
          </div>
        @empty
          <div class="col-md-12"><p class="text-muted">@lang('bms::lang.no_media_yet')</p></div>
        @endforelse
      </div>
    </div>

    <div class="modal-footer">
      <button type="button" class="tw-dw-btn tw-dw-btn-neutral tw-text-white" data-dismiss="modal">@lang('messages.close')</button>
    </div>
  </div>
</div>

<script>
$(function () {
    function reloadMediaModal(url) {
        $.get(url, function (html) { $('.bms_modal').html(html); });
        window.bmsReloadTables && window.bmsReloadTables();
    }

    $('#bms-media-upload-form').off('submit').on('submit', function (e) {
        e.preventDefault();
        var $f = $(this);
        var fd = new FormData(this);
        var $btn = $f.find('button[type=submit]').prop('disabled', true);
        $.ajax({
            url: $f.data('url'), method: 'POST', data: fd,
            processData: false, contentType: false,
            success: function (resp) {
                if (resp.success) { toastr.success(resp.msg); reloadMediaModal($f.data('reload')); }
                else { toastr.error(resp.msg || 'Error'); $btn.prop('disabled', false); }
            },
            error: function (xhr) {
                $btn.prop('disabled', false);
                toastr.error((xhr.responseJSON && xhr.responseJSON.message) || 'Upload failed.');
            }
        });
    });

    $('.bms-media-delete').off('click').on('click', function (e) {
        e.preventDefault();
        if (!window.confirm('{{ __('bms::lang.are_you_sure') }}')) return;
        var reload = $(this).data('reload');
        $.ajax({
            url: $(this).data('href'), method: 'DELETE',
            data: { _token: '{{ csrf_token() }}' },
            success: function (resp) {
                if (resp.success) { toastr.success(resp.msg); reloadMediaModal(reload); }
                else { toastr.error(resp.msg || 'Error'); }
            },
            error: function () { toastr.error('Error'); }
        });
    });
});
</script>
