@php ($headerOption = [
'title' => $module,
'header_buttons' => [],
'filters' => isset($filters) ? $filters : [],
'data' => isset($data) ? $data : []
])
@extends('admin.layouts.layout', $headerOption)


@section('content')
<div class="table-responsive">
    <table class="{!! \Config::get('view.table.table_class') !!}">
        <thead class="{!! \Config::get('view.table.table_head_class') !!}">
            <tr>
                <th style="width: 5%;">Preview</th>
                <th>Caption</th>
                <th>Description</th>
                <th>Location</th>
                <th>Status</th>
                <th style="width: 150px; text-align: right;">Actions</th>
            </tr>
        </thead>
        <tbody>
        @if(count($data))
          @foreach ($data as $key => $val)
          <tr>
            <td width="3%">
              @if(isset($val->files[0]))
                @if(strpos($val->files[0]['file_mime'], 'image') !== false)
                  {!! \App\Helpers\Helper::genLogo($val->files[0], $val, 'xs', 'rounded avatar-sm') !!}
                @elseif((strpos($val->files[0]['file_mime'], 'video') !== false) && isset($val->files[0]['original']) && isset($val->files[0]['thumb']))
                  <a href="{{ $val->files[0]['original'] }}" target="_blank">
                      <img src="{{ $val->files[0]['thumb'] }}" alt="Video Thumbnail" class="rounded avatar-sm">
                  </a>
                @endif
              @else
                {{-- <span class="avatar-sm rounded bg-light text-muted d-inline-flex align-items-center justify-content-center">
                    {{ $val->name ?? 'No Img' }}
                </span> --}}
                <img src="{{ asset('img/post-no-image.png') }}" alt="Offensive" class="rounded avatar-sm">
              @endif
            </td>
            <!-- <td scope="row"><img class="rounded avatar-sm" alt="200x200" width="100" src="{{ asset('img/dummy/cannabis-hanf-mariuhana-cannabisgesetz-weed-600nw-2509819063.webp') }}" data-holder-rendered="true"></td> -->
            <td> {{ $val->caption }}</td>
            <td>{{ $val->description }}</td>
            <td> {{ $val->location }}</td>
            <td style="width: 6%">
              <a href="javascript:;" class="status-update btn black-text" id="status_{{ $val->id }}" data-id="{{ $val->id }}" data-toggle="tooltip" title="Status Update">
                <span class="black-text badge badge-pill badge-soft-{{ $val->statuses[$val->status]['badge'] }} font-size-12">{!! $val->statuses[$val->status]['name'] !!}</span>
              </a>              
            </td>
            <td class="text-right">
              <a data-toggle="tooltip" title="" href="javascript:;" class="d-none"><i class="bx bx-bell fa-2x text-dark"></i></a>
              <a data-toggle="tooltip" title="" href="javascript:;" class="d-none"><i class="bx bx-user-circle fa-2x text-dark"></i></a>
              <a data-toggle="tooltip" data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?" data-confirm-yes="event.preventDefault();
                document.getElementById('delete-form-{{$val->id}}').submit();" title="Delete">{!! \Config::get('settings.icon_delete') !!}</a>
                {!! html()->form('DELETE', route(
                    $routePrefix . '.post.destroy',
                    $val->id
                    ))->attributes([
                    'style' => 'display:inline',
                    'id'    => 'delete-form-' . $val->id
                    ])->open() !!}
                {!! html()->form()->close() !!}
              <a href="{{ route($routePrefix . '.post_show', $val->id ) }}" class="show-modal" data-toggle="tooltip" title="Show"><i class="bx bx-chevron-right fa-2x text-dark"></i></a>
          </td>


          </tr>
          @endforeach
        @else
        <tr>
          <td colspan="25">
            <div class="alert alert-danger">No Data Found</div>
          </td>
        </tr>
        @endif
    </table>
</div>

@include('admin.components.pagination')
@push('page_script')
<script>
    $(document).ready(function() {
        $('body').on('click', '.status-update', function() {
            var id = $(this).data('id');
            var dialog = bootbox.dialog({
                title: '',
                message: `<p>Do you want to approve or disapprove this post?</p>`,
                closeButton: false,
                backdrop: true,
                buttons: {
                    disapprove: {
                      label: 'Disapprove',
                      className: 'btn-secondary',
                      callback: function() {
                        updateStatus(id, 2, dialog);
                        return false; // keep dialog open
                      }
                    },
                    approve: {
                      label: 'Approve',
                      className: 'btn-success',
                      callback: function() {
                        updateStatus(id, 1, dialog);
                        return false; // keep dialog open
                      }
                    },
                    cancel: {
                        label: 'No',
                        className: 'btn-danger'
                    }
                },
            });
        });

        function updateStatus(id, status, dialog) {
            var form_data = new FormData();
            form_data.append('_token', '{{ csrf_token() }}');
            form_data.append('id', id);
            form_data.append('status', status);
            $.ajax({
                url: PATH + "/update-post-status",
                data: form_data,
                type: 'POST',
                contentType: false,
                processData: false,
                beforeSend: function() {
                    $(".loader-wrapper").show();
                },
                success: function(data) {
                    $(".loader-wrapper").hide();
                    if (data.success) {
                        $("#status_" + id).html(data.data.html);
                        showNotification('success', data.message, 'top', 'right', 'animated rotateInUpRight', 'animated rotateOutUpRight');
                    } else {
                        showNotification('error', data.message, 'top', 'right', 'animated rotateInUpRight', 'animated rotateOutUpRight');
                    }
                },
                complete: function () {
                    dialog.modal('hide');
                },
                error: function(xhr, status, error) {
                    $(".loader-wrapper").hide();
                    let text = xhr.responseJSON.errors + ' ' + xhr.statusText;
                    bootbox.alert(text);
                }
            });
        }
    });
</script>
@endpush

@endsection