@extends('admin.layouts.app')
@section('content')
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid my-2">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>Event Gallery Listing</h1>
                    </div>
                    <div class="col-sm-6 text-right">
                        <a href="{{ route('eventGallery.create') }}" class="btn btn-primary">New Event Gallery</a>
                    </div>
                </div>
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- Main content -->
        <section class="content">
            <!-- Default box -->
            <div class="container-fluid">

                @if (Session::has('success'))
                <div class="alert alert-success alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                    <h4><i class="icon fa fa-check"></i> Success!</h4>{{ Session::get('success') }}
                </div>
                @endif
                <div class="card">
                    <form action="" method="GET">
                        <div class="card-header">
                            <div class="card-title">
                                <button type="button" class="btn btn-default btn-sm" onclick="resetPage()">Reset</button>
                            </div>



                            <div class="card-tools">
                                <div class="input-group input-group" style="width: 250px;">
                                    <input type="text" value="{{ Request::get('keyword') }}" name="keyword"
                                        class="form-control float-right" placeholder="Search">

                                    <div class="input-group-append">
                                        <button type="submit" class="btn btn-default">
                                            <i class="fas fa-search"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                    </form>

                </div>
                <div class="card-body table-responsive p-0">
                    <table class="table table-hover text-nowrap">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Event Name</th>
                                <th width="100">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if ($eventGalleries->isNotEmpty())
                            @foreach ($eventGalleries as $key => $eventGallery)
                                    <tr>
                                        <td>{{ $key+1 }}</td>
                                        <td>{{ $eventGallery->event->name }}</td>
                                        {{-- <td>
                                            @foreach ($eventGallery->images as $image)
                                                <img src="{{ asset($image->path) }}" alt="Event Image" class="img-thumbnail"
                                                    style="width: 100px; height: auto; margin-right: 5px;">
                                            @endforeach
                                        </td>
                                        <td>
                                            @foreach ($eventGallery->videos as $video)
                                                <video controls style="max-width: 100px;">
                                                    <source src="{{ asset($video->path) }}" type="video/mp4">
                                                    Your browser does not support the video tag.
                                                </video>
                                            @endforeach
                                        </td> --}}
                                        <td>
                                            <a href="{{ route('eventGallery.edit', $eventGallery->id) }}">
                                                <svg class="filament-link-icon w-4 h-4 mr-1"
                                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                                                    fill="currentColor" aria-hidden="true">
                                                    <path
                                                        d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z">
                                                    </path>
                                                </svg>
                                            </a>
                                            <a href="#" onclick="deleteEventGallery({{ $eventGallery->id }})"
                                                class="text-danger w-4 h-4 mr-1">
                                                <svg wire:loading.remove.delay="" wire:target=""
                                                    class="filament-link-icon w-4 h-4 mr-1"
                                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                                                    fill="currentColor" aria-hidden="true">
                                                    <path ath fill-rule="evenodd"
                                                        d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
                                                        clip-rule="evenodd"></path>
                                                </svg>
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="5">Records Not Found</td>
                                </tr>
                            @endif

                        </tbody>
                    </table>
                </div>
                {{-- <div class="card-footer clearfix">
                    {{ $eventGallery->links() }}
                </div> --}}
            </div>
    </div>
    <!-- /.card -->
    </section>
    <!-- /.content -->
    </div>
@endsection
@section('customJs')
    <script>
        function resetPage() {
            window.location.href = '{{ route('eventGallery.index') }}';
        }

        function deleteEventGallery(id) {
            var url = '{{ route('eventGallery.delete', 'ID') }}';
            var newUrl = url.replace("ID", id)

            if (confirm("Are you sure you want to delete")) {
                $.ajax({
                    url: newUrl,
                    type: 'delete',
                    data: {},
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response["status"]) {
                            window.location.href = "{{ route('eventGallery.index') }}";

                        }
                    }

                });
            }

        }
    </script>
@endsection