@extends('layout')

@section('dashboard-content')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="card">
    <div class="card-body">

        <div style="margin-top: 20px; margin-bottom: 20px;">
            <h3 class="" style="display: inline-block; width: 200px;">Categories</h3>
            <a href="{{ URL::to('category-form') }}" class="" 
            style="float:right; color: white; background-color: #9900CE; border-radius: 5px;
            padding: 10px; ">Add New Category</a>
        </div>

        @if(Session::get('deleted'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert" id="gone">
            <strong> {{ Session::get('deleted') }} </strong>
            <!-- <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button> -->
        </div>
    @endif

    @if(Session::get('delete-failed'))
        <div class="alert alert-warning alert-dismissible fade show" role="alert" id="gone">
            <strong> {{ Session::get('delete-failed') }} </strong>
            <!-- <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button> -->
        </div>
    @endif

        <!-- Default Table -->
        <table class="table datatable">
            <thead>
                <tr>
                    <th scope="col">Image</th>
                    <th scope="col">Category Name</th>
                    <th>Action</th>
                </tr>
            </thead>

            @foreach($categories as $category)

            <tr>
                <td><img src="{{$category->image}}" style="width: 80px; height: 80px; border-radius: 10px; border: solid 0.5px black; padding: 1px;" /></td>
                <td>{{ $category->category_name}}</td>
                <td>
                    <a href="{{ URL::to('edit-category') }}/{{ $category->id }}"><i class="bi bi-pencil-square"></i></a>
                    |
                    <!-- <button data-toggle="modal" data-target="#exampleModal" class="delete btn btn-outline-danger btn-sm" value="{{ $category->id }}">Delete</button> -->
                    <a href="{{ URL::to('delete-category') }}/{{ $category->id }}"><i class="bi bi-trash-fill" style="color: red;"></i></a>
                    
                    
                </td>
            </tr>

            @endforeach

            <tbody>

            </tbody>
        </table>
        <!-- End Default Table Example -->
    </div>
</div>



<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">
                    Delete Record
                </h5>
                <hr>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete this record? This will be permanently deleted and you won't be
                    able to recover it.
                </p>
                <div class="m-2 p-3" style="text-align: right;">
                    <td>

                        <a href="#" class="btn btn-outline-primary btn-sm" id="cancelBtn">Cancel</a>
                        |
                        <a href="#" class="btn btn-outline-danger btn-sm" id="delete"> Delete </a>
                    </td>
                </div>
            </div>

        </div>
    </div>
</div>

<script type="text/javascript">
    var id = null


    $('.delete').click(function() {

        id = $(this).val()


    })

    $('#delete').click(function() {



        window.location = '/delete-ebook/' + id

    })
</script>

<script>
    $(document).ready(function() {
        $('#cancelBtn').click(function() {
            $('#exampleModal').modal('hide');
        });
    });
</script>


@stop