@extends('backend.layouts.app')
@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    Promotions
                </div>
                <div class="card-body">
                    {{-- Modal Button --}}
                    <button type="button" class="btn btn-success mb-2" data-toggle="modal" data-target="#addPromotion">
                        Add Promotion
                    </button>
                    {{-- End Modal Button --}}
                    
                    {{-- Modal --}}
                    <form action="{{route('promotions.store')}}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="modal fade" id="addPromotion" tabindex="-1" role="dialog" aria-labelledby="addPromotionLabel" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="addPromotionLabel">Add Promotion</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="name">Name</label>
                                        <input type="text" name="name" id="name" class="form-control">
                                        <label for="image">Image <span class="text-danger font-italic" style="font-size: .8em;">Note: Image Size (478 x 478) in px</span></label>
                                        <input type="file" name="image" id="image" class="form-control p-1" accept="image/png, image/jpg, image/jpeg">
                                    </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>
                    {{-- End Modal --}}
                    <div class="row mb-2">
                        <div class="col-lg-4">
                            <div class="d-flex">
                                <input type="text" name="search" id="search" placeholder="Search..." class="form-control">
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead class="thead-dark">
                                <tr>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Image</th>
                                    <th style="width: 200px;">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if (count($promotions) != 0)
                                    @foreach ($promotions as $promotion)
                                        @if ($promotion->id != null)
                                            <tr>
                                                <td>
                                                    {{$promotion->id}}
                                                </td>
                                                <td>
                                                    {{$promotion->name}}
                                                </td>
                                                <td>
                                                    <img src="{{url($promotion->image)}}" style="width: 100px;" alt="">
                                                </td>
                                                <td>
                                                    <div class="d-flex">
                                                        <form action="{{route('promotions.destroy', $promotion->id)}}" method="post">
                                                            @csrf
                                                            @method("DELETE")
                                                            <button type="submit" class="btn btn-danger"><i class="fa fa-trash"></i></button>
                                                        </form>
                                                    </div>
                                                </td>
                                            </tr>
                                        @else
                                            <tr>
                                                <td colspan="4">No data result</td>
                                            </tr>
                                        @endif
                                    @endforeach
                                @else
                                    <tr>
                                        <td colspan="4" class="bg-light text-center">No data result</td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                    <nav aria-label="...">
                        <ul class="pagination">
                            @if ($promotions->currentPage() > 1)
                                <li class="page-item">
                                    <a class="page-link" href="{{$promotions->previousPageUrl()}}" tabindex="-1">Previous</a>
                                </li>
                            @else
                                <li class="page-item disabled">
                                    <a class="page-link" href="{{$promotions->previousPageUrl()}}" tabindex="-1">Previous</a>
                                </li>
                            @endif
                            
                            @for ($i = 1; $i <= $promotions->lastPage(); $i++)
                                <li class="page-item @if($i == $promotions->currentPage()) active @endif">
                                    <a class="page-link" href="{{$promotions->url($i)}}">{{$i}}</a>
                                </li>
                            @endfor

                            @if ($promotions->currentPage() < $promotions->lastPage() )
                                <li class="page-item">
                                    <a class="page-link" href="{{$promotions->nextPageUrl()}}">Next</a>
                                </li>
                            @else
                                <li class="page-item disabled">
                                    <a class="page-link" href="{{$promotions->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
{{-- @section('js')
    <script>
        $("#search").on("input", function() {
            var search = $(this).val();
            $.ajax({
                url: "{{route('promotion-search')}}",
                type: "GET",
                data: {search: search},
                success: function(data) {
                    $("tbody").empty();
                    // console.log(data);
                    if(data.length == 1) {
                        $("tbody").append(`
                            <tr>
                                <td>
                                    ${data[0].id}
                                </td>
                                <td>
                                    ${data[0].name}
                                </td>
                                <td>
                                    <img src="${data[0].image}" style="width: 100px;" alt="">
                                </td>
                                <td>
                                    <div class="d-flex">
                                            <form action="{{ route('promotions.index') }}/${data[0].id}" method="post">
                                                @csrf
                                                @method("DELETE")
                                                <button type="submit" class="btn btn-danger"><i class="fa fa-trash"></i></button>
                                            </form>
                                        </div>
                                </td>
                            </tr>
                        `);
                        $(".pagination").empty();
                    } else if(data.length == 0) {
                        $("tbody").append(`
                        <tr>
                            <td colspan="4" class="text-center bg-light">No data result</td>
                        </tr>
                        `);
                        $(".pagination").empty();
                    } else if(data['data'].length > 1) {
                        $.each(data.data, function(i, index) {
                            $("tbody").append(`
                                <tr>
                                    <td>
                                        ${data['data'][i].id}
                                    </td>
                                    <td>
                                        ${data['data'][i].name}
                                    </td>
                                    <td>
                                        <img src="${data['data'][i].image}" style="width: 100px;" alt="">
                                    </td>
                                    <td>
                                        <div class="d-flex">
                                            <form action="{{ route('promotions.index') }}/${data['data'][i].id}" method="post">
                                                @csrf
                                                @method("DELETE")
                                                <button type="submit" class="btn btn-danger"><i class="fa fa-trash"></i></button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            `);
                            
                        });
                        $(".pagination").append(`
                            @if ($promotions->currentPage() > 1)
                                <li class="page-item">
                                    <a class="page-link" href="{{$promotions->previousPageUrl()}}" tabindex="-1">Previous</a>
                                </li>
                            @else
                                <li class="page-item disabled">
                                    <a class="page-link" href="{{$promotions->previousPageUrl()}}" tabindex="-1">Previous</a>
                                </li>
                            @endif
                            
                            @for ($i = 1; $i <= $promotions->lastPage(); $i++)
                                <li class="page-item @if($i == 1) active @endif">
                                    <a class="page-link" href="{{$promotions->url($i)}}">{{$i}}</a>
                                </li>
                            @endfor

                            @if ($promotions->currentPage() < $promotions->lastPage() )
                                <li class="page-item">
                                    <a class="page-link" href="{{$promotions->nextPageUrl()}}">Next</a>
                                </li>
                            @else
                                <li class="page-item disabled">
                                    <a class="page-link" href="{{$promotions->nextPageUrl()}}">Next</a>
                                </li>
                            @endif

                        `);
                    }
                },
                error: function() {
                    $("tbody").append(`
                    <tr>
                        <td colspan="4">No data result</td>
                    </tr>
                    `);
                }
            });
        });
    </script>
@endsection --}}