@extends('backpack::layout')

@section('header')
    <section class="content-header">
        <h1>
            {{ $title }}
        </h1>
        <ol class="breadcrumb">
            <li><a href="{{ url('administrator') }}">{{ config('app.name') }}</a></li>
            <li><a href="{{ route('showAllDrugs') }}">Drugs</a></li>
            <li class="active">Categories</li>
        </ol>
    </section>
@endsection


@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <button type="button" class="pull-right btn btn-primary btn-md" data-toggle="modal" data-target="#modal-default">
                        Add New Category
                    </button>
                </div>

                <div class="box-body">
                    @if (count($categories) > 0)
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Description</th>
                                    <th>Date Added</th>
                                    <th>Drugs</th>
                                    <th></th>
                                </thead>
                                <tbody>
                                    @foreach ($categories as $category)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td>{{ $category->name }}</td>
                                            <td>{{ $category->description }}</td>
                                            <td>{{ $category->created_at->format('d/M/Y') }}</td>
                                            <td>{{ $category->stocks()->count() }}</td>
                                            <td>
                                                <a href="{{ route('editCategory', ['slug' => $category->slug]) }}" class="btn btn-info">
                                                    <i class="fa fa-edit"></i>
                                                </a>
                                                <a href="{{ route('deleteCategory', ['slug'=>$category->slug]) }}"
                                                    class="btn btn-danger delete">
                                                    <i class="fa fa-trash"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        {{ $categories->links() }}
                    @else
                        <h1 class="text-center text-info">No Categories Added Yet</h1>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-default">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Add New Category</h4>
                </div>
                <div class="modal-body">
                    <form action="{{ route('addNewCategory') }}" method="post" role="form">
                        {{ csrf_field() }}
                        <div class="form-group">
                            <label>Category Name <span class="text-danger">*</span></label>
                            <input type="text" name="category_name" placeholder="Category Name" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>Description <span class="text-danger">*</span></label>
                            <input type="text" name="category_description" placeholder="Description of Category" class="form-control">
                        </div>
                </div>
                <div class="modal-footer">
                        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save Category</button>
                    </form>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

    <script>
        $('#categories').addClass('active');

        $('a.delete').on('click', function() {
            var response = confirm("Do you really want to delete this category?");
            if (response === true) {
                return true;
            } else {
                return false;
            }
        });
    </script>
@endsection