@extends('layouts.admin')

@section('content')

<div style="margin-bottom: 10px;" class="row">
    <div class="col-lg-12">
        <a class="btn btn-success" href="{{ route("admin.explores.create") }}">
            {{ trans('global.add') }} {{ trans('global.explore.title_singular') }}
        </a>
    </div>
</div>

@if ($message = Session::get('success'))
    <div class="alert alert-success alert-block my-3">
        <button type="button" class="close" data-dismiss="alert">×</button>
        <strong>{{ $message }}</strong>
    </div>
@endif

<div class="card">
    <div class="card-header">
        {{ trans('global.explore.title_singular') }} {{ trans('global.list') }}
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered table-striped table-hover datatable">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>{{ trans('global.explore.fields.main_title') }}</th>
                        <th>{{ trans('global.explore.fields.title') }}</th>
                        <th>{{ trans('global.explore.fields.sub_title') }}</th>
                        <th>{{ trans('global.explore.fields.youtube_image') }}</th>
                        <th>{{ trans('global.explore.fields.video_description') }}</th>
                        <th>{{ trans('global.explore.fields.slider_title') }}</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($explores as $key => $explore)
                        <tr>
                            <td>{{ ++$key }}</td>
                            <td>{{ $explore->main_title ?? '' }}</td>
                            <td>{{ $explore->title ?? '' }}</td>
                            <td>{{ $explore->sub_title ?? '' }}</td>
                            <td>
                                @if ($explore->youtube_image)
                                    <img src="{{ asset('storage/uploads/explore/youtube_image') }}/{{ $explore->youtube_image }}" width="100">
                                @endif
                            </td>
                            <td>{{ $explore->video_description ?? '' }}</td>
                            <td>{{ $explore->slider_title ?? '' }}</td>
                            <td>
                                <a href="{{ route('admin.explores.show', $explore->id) }}" class="btn btn-xs btn-primary">
                                    {{ trans('global.view') }}
                                </a>
                                <a href="{{ route('admin.explores.edit', $explore->id) }}" class="btn btn-xs btn-info">
                                    {{ trans('global.edit') }}
                                </a>
                                <form action="{{ route('admin.explores.destroy', $explore->id) }}" method="POST" onsubmit="return confirm('{{ trans('global.areYouSure') }}');" style="display: inline-block;">
                                    <input type="hidden" name="_method" value="DELETE">
                                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                    <input type="submit" class="btn btn-xs btn-danger" value="{{ trans('global.delete') }}">
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

</div>

@endsection

@section('scripts')
    <script>
        $(function () {
            let deleteButtonTrans = '{{ trans('global.datatables.delete') }}'
            let deleteButton = {
                text: deleteButtonTrans,
                url: "{{ route('admin.products.massDestroy') }}",
                className: 'btn-danger',
                action: function (e, dt, node, config) {
                var ids = $.map(dt.rows({ selected: true }).nodes(), function (entry) {
                    return $(entry).data('entry-id')
                });

                if (ids.length === 0) {
                    alert('{{ trans('global.datatables.zero_selected') }}')

                    return
                }

                if (confirm('{{ trans('global.areYouSure') }}')) {
                    $.ajax({
                        headers: {'x-csrf-token': _token},
                        method: 'POST',
                        url: config.url,
                        data: { ids: ids, _method: 'DELETE' }})
                        .done(function () { location.reload() })
                    }
                }
            }
            let dtButtons = $.extend(true, [], $.fn.dataTable.defaults.buttons)

            $('.datatable:not(.ajaxTable)').DataTable({ buttons: dtButtons })
        })
    </script>
@endsection