@extends('admin.layouts.app')

@section('page_title')
Categories
@endsection
@section('content')
<div class="container-fluid p-0">
    <h1 class="h3 mb-3">Categories</h1>
    @if (session('success'))
        <div class="alert alert-success alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">×</span>
            </button>
            <div class="alert-message">
                {{session('success')}}
            </div>
        </div>
    @endif
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header" style="margin-bottom:0px !important">
                    <div class="text-right" >
                        <span>
                            <a href="{{route('admin.categories.create')}}" class="btn btn-success btn-sm header-button-top">
                                <span class="fa fa-plus"></span> &nbsp;Add New Category
                            </a>
                        </span>
                    </div>
                </div>
                <div class="card-body">
                    <table id="datatables-reponsive" class="table table-striped" style="width:100%">
                        <thead>
                            <tr>
                                <th>Category Name</th>
                                <th>Details</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if ($categories->first())
                                @foreach ($categories as $category)
                                    <tr>
                                        <td>{{$category->name}}</td>
                                        <td>@if ($category->details)
                                            {{$category->details}} @else N/A
                                        @endif</td>
                                        <td>
                                            <div>
                                                <a href="{{route('admin.categories.edit', $category->id)}}">
                                                    <i data-feather="edit-2" class="mx-2"></i>
                                                </a>
                                                |
                                                <a href="javascript:categoryDelete({{$category->id}})">
                                                    <i data-feather="trash" class="mx-2"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal" id="delete-category" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Category Delete</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Do you really want to delete this Category?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <a href="" id="delete-category-msg" class="btn btn-danger">Yes</a>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
    document.addEventListener("DOMContentLoaded", function() {
        $("#datatables-reponsive").DataTable({
            responsive: true
        });
    });
    
    function categoryDelete(id){
        $('#delete-category-msg').attr('href', '/admin/categories/delete/'+id);
        $('#delete-category').modal('show');
    }

    
</script>
@endsection