@extends('layouts.admin')

@section('content')


    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4 ">
                <div class="panel panel-success">
                    <div class="panel-heading"><h4>Add Product</h4></div>
                    <div class="panel-body">

                        @include('errors._error-bag')
                        <form action="{{route('admin.product.store')}}" method="post">
                            {{csrf_field()}}
                            <div class="form-group">
                                <label for="main">Main Category</label>
                                <select class="form-control" name="main" id="main">
                                    <option value=""></option>
                                    @foreach($main as $key => $value)
                                        <option value="{{$key}}" {{(old('main')==$key?'selected':'')}}>{{$value}}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="hidden" id="product-fields-block">
                                <div class="form-group">
                                    <label for="category">Category</label>
                                    <select class="form-control" name="category" id="category">

                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="title">Title</label>
                                    <input type="text" class="form-control" id="title" value="{{old('title')}}" placeholder="Title..." name="title">
                                </div>
                                <div class="form-group">
                                    <label for="show-on-home-page">
                                        <input type="checkbox" id="show-on-home-page"
                                               name="showOnHomePage" {{(old('showOnHomePage')?'checked':'')}}>
                                        Show On Home Page
                                    </label>
                                </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-success">Add Product</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="panel panel-success">
                    <div class="panel-heading">
                            <h4>Available Products</h4>
                    </div>
                    <div class="panel-body">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>Code</th>
                                <th>Category Tree</th>
                                <th>Title</th>
                                <th>Images</th>
                                <th>Added At</th>
                                <th>Is On Home</th>
                            </tr>
                            </thead>
                            <tbody>
                            @forelse($products as $product)
                                <tr>
                                    <td><a href="{{route('admin.products.view',$product)}}">{{$product->code}}</a></td>
                                    <td><span class="label label-default">{{config("coco.main.{$product->category->main}")}}</span>
                                        >>
                                        <span class="label label-info">{{$product->category->name}}</span></td>
                                    <td>{{$product->title}}</td>
                                    <td><span class="label label-primary">{{($product->images->count()?:"none")}}</span></td>
                                    <td>{{$product->created_at->toFormattedDateString()}}</td>
                                    <td>{!! ($product->is_on_home ? "<strong>Yes</strong>":"") !!}</td>
                                </tr>
                                @empty
                            <h4 class="text-warning">There is no product in the show case</h4>
                            @endforelse
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="6">
                                        {{ $products->links() }}
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script>
        //Fetch Sub Categories
        $("#main").change(function () {
           var main = $(this);
           if(main.val().trim() === "") return;
           $.get('{{route('admin.products.sub-categories')}}?main='+main.val(),function (data,status) {
               if(data.length)
               {
                   var _options = "";
                   for(var i=0;i < data.length; i++)
                   {
                       _options +="<option value='"+data[i].id+"'>"+data[i].name+"</option>";
                   }
                   $("#category").html(_options);
                   $("#product-fields-block").removeClass('hidden');
               }
               else
               {
                   $("#product-fields-block").addClass('hidden');
//                   alert('No sub-category available under '+main.val().toUpperCase()+". Add one first ");
               }
           });
        });
    </script>
@endsection