@extends('backend.layouts.app')
@section('content')
<form action="{{route('gallery.store')}}" method="post" enctype="multipart/form-data">
    @csrf
    <div class="modal fade" id="addgallerie" tabindex="-1" role="dialog" aria-labelledby="addgallerieLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addgallerieLabel">Add Gallery</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <label for="title">Title </label>
                    <input type="text" name="title" id="title" class="form-control">
                    <label for="description">Description</label>
                    <textarea name="description" id="" cols="30" placeholder="description..." rows="5" class="form-control"></textarea>
                    <label for="image">Images</label>
                    <input type="file" name="image[]" id="image" class="form-control p-1" multiple>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Create</button>
                </div>
            </div>
        </div>
    </div>
</form>
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                Gallery
            </div>
            <div class="card-body">
                <button type="button" class="btn btn-success mb-2" data-toggle="modal" data-target="#addgallerie">
                    Add Gallery
                </button>
                <div class="row mb-2">
                    <div class="col-lg-4">
                        <form method="get">
                            <div class="d-flex">
                                <input type="text" name="search" id="search" placeholder="Search..." class="form-control">
                            </div>
                        </form>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead class="thead-dark">
                            <tr>
                                <th>
                                    Title
                                </th>
                                <th>
                                    Description
                                </th>
                                <th>
                                    Image
                                </th>
                                <th>
                                    Action
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @if (count($galleries) != 0)
                                @foreach ($galleries as $gallery)
                                <tr>
                                    <td>
                                        {{$gallery->title}}
                                    </td>
                                    <td>
                                        {{$gallery->content}}
                                    </td>
                                    <td style="overflow: hidden; width: 25%;">
                                        @foreach (json_decode($gallery->thumbnail) as $image)
                                        <img src="{{url($image)}}" style="width: 50px; height: 50px;" alt="">
                                        @endforeach
                                    </td>
                                    <td style="width: 100px;">
                                        <form action="{{route('gallery.update', $gallery->id)}}" method="post" enctype="multipart/form-data">
                                            @csrf
                                            @method('PATCH')
                                            <div class="modal fade" id="editgallery-{{$gallery->id}}" tabindex="-1" role="dialog" aria-labelledby="editgallery-{{$gallery->id}}Label" aria-hidden="true">
                                                <div class="modal-dialog" role="document">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="editgallery-{{$gallery->id}}Label">Edit gallery</h5>
                                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                <span aria-hidden="true">&times;</span>
                                                            </button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <label for="title">Title </label>
                                                            <input type="text" value="{{$gallery->title}}" name="title" id="title" class="form-control">
                                                            <label for="description">Description</label>
                                                            <textarea name="description" id="" cols="30" placeholder="description..." rows="5" class="form-control">{{$gallery->content}}</textarea>
                                                            <label for="image">Image</label>
                                                            <input type="file" name="image[]" id="image" class="form-control p-1" multiple>
                                                            @foreach (json_decode($gallery->thumbnail) as $image)
                                                            <img src="{{$image}}" class="mt-3" style="width: 50px; height: 50px;" alt="Image">
                                                            @endforeach
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                                                            <button type="submit" class="btn btn-primary">Update</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                        <div class="d-flex">
                                            <button type="button" class="btn btn-success mb-2" data-toggle="modal" data-target="#editgallery-{{$gallery->id}}">
                                                <i class="fa fa-edit"></i>
                                            </button>
                                            <div class="mx-1"></div>
                                            <form action="{{route('gallery.destroy', $gallery->id)}}" method="post">
                                                @csrf
                                                @method("DELETE")
                                                <button type="submit" class="btn btn-danger">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            @else
                            <tr>
                                <td colspan="4" class="text-center">No data result</td>
                            </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
                <nav aria-label="...">
                    <ul class="pagination">
                        @if ($galleries->currentPage() > 1)
                            <li class="page-item">
                                <a class="page-link" href="{{$galleries->previousPageUrl()}}" tabindex="-1">Previous</a>
                            </li>
                        @else
                            <li class="page-item disabled">
                                <a class="page-link" href="{{$galleries->previousPageUrl()}}" tabindex="-1">Previous</a>
                            </li>
                        @endif
                        
                        @for ($i = 1; $i <= $galleries->lastPage(); $i++)
                            <li class="page-item @if($i == $galleries->currentPage()) active @endif">
                                <a class="page-link" href="{{$galleries->url($i)}}">{{$i}}</a>
                            </li>
                        @endfor

                        @if ($galleries->currentPage() < $galleries->lastPage() )
                            <li class="page-item">
                                <a class="page-link" href="{{$galleries->nextPageUrl()}}">Next</a>
                            </li>
                        @else
                            <li class="page-item disabled">
                                <a class="page-link" href="{{$galleries->nextPageUrl()}}">Next</a>
                            </li>
                        @endif
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>
@endsection
@section('js')
    <script>
        $("#search").on("input", function() {
            $(this).quicksearch('table tbody tr');
        });
    </script>
@endsection