@extends('layouts.admin')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">

            <div class="panel panel-info">
                <div class="panel-heading">
                    <h4>Add New Category</h4>
                </div>

                <div class="panel-body">

                    @include('errors._error-bag')
                    <form action="{{route('admin.categories')}}" method="post">
                        {{csrf_field()}}
                        <div class="form-group">
                            <label for="main">Main Category</label>
                            <select class="form-control" name="main" id="main">
                                @foreach($main as $key => $value)
                                    <option value="{{$key}}" {{(old('main')==$key?'selected':'')}}>{{$value}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="name">Category Name</label>
                            <input type="text" class="form-control" id="name" value="{{old('name')}}" placeholder="Name..." name="name" required>
                        </div>
                        <div class="form-group">
                            <label for="description">Description</label>
                            <textarea class="form-control" rows="5" name="description" id="description">{{old('description')}}</textarea>
                        </div>
                        <button type="submit" class="btn btn-info">Submit</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h4>Registered Categories</h4>
                </div>
                <div class="panel-body">
                    <table class="table table-condensed">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Main Category</th>
                            <th>Added On</th>
                            <th>Edit</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($categories as $category)
                            <tr>
                                <td>{{$category->id}}</td>
                                <td><a href="{{route('admin.category',$category)}}" class="view-category" title="Show Description">{{$category->name}}</a></td>
                                <td><h3 class="label label-info">{{config("coco.main.{$category->main}")}}</h3></td>
                                <td>{{$category->created_at->toFormattedDateString()}}</td>
                                <td>
                                    <a href="{{route('admin.category.edit',$category)}}" class="btn btn-sm btn-info"  title="edit">
                                        <i class="fa fa-pencil-square-o"></i>
                                    </a>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="4" class="text-center text-info"> There is not category in the store</td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="cat-modal" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="cat-title"></h4>
            </div>
            <div class="modal-body">
                <div class="well" id="cat-desc">

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

@endsection
@section('js')
    <script>
        $(".view-category").click(function (e) {
           e.preventDefault();

           var uri = $(this).attr('href');

           $.get(uri,function (data, flag) {
               if(flag === 'success')
               {
                   $("#cat-title").html(data.name);
                   $("#cat-desc").html(data.description);
                   $("#cat-modal").modal();
               }
           })
        });
    </script>
@endsection