@extends('admin/layouts/main')

@section('content')
<div id="page-content">
    <div class="content-header content-header-media">
        <div class="header-section">
            <div class="row">
                <!-- Main Title (hidden on small devices for the statistics to fit) -->
                <div class="col-md-4 col-lg-6 hidden-xs hidden-sm">
                    <h1><i class="fa fa-list"></i>&nbsp;&nbsp;&nbsp;{{$category_detail->name}}<br><small>&nbsp;&nbsp;&nbsp;{{$category_detail->name}} details are here!</small></h1>
                </div>
                <!-- END Main Title -->

                <!-- Top Stats -->
                
                <!-- END Top Stats -->
            </div>
        </div>
        <!-- For best results use an image with a resolution of 2560x248 pixels (You can also use a blurred image with ratio 10:1 - eg: 1000x100 pixels - it will adjust and look great!) -->
        <img src="{{URL::to('/')}}/admin/img/placeholders/headers/dash_bg.png" alt="header image" class="animation-pulseSlow">
    </div> 
    <ul class="breadcrumb breadcrumb-top">
        <li><a href="{{url('admin/dashboard')}}">Dashboard</a></li>
        <li><a href = "{{url('admin/categories')}}">Categories</a></li>
        <li><a href="javascript:void(0)">{{$category_detail->name}} category Details</a></li>
    </ul>    
    <div class="header-section det">
        <div class = "row">            
            <h1>
            @if($category_detail->image == null)
                <img src="{{URL::to('/')}}/images/no_image.png" width="64px" alt="avatar">
            @else
                <img src="{{$category_detail->image}}" width="64px" alt="Avatar"/>
                &nbsp;&nbsp;&nbsp;{{$category_detail->name}}<br>  
            @endif
            </h1> 
        </div>        
    </div>
    <div class="row">
        <div class="col-xs-4 col-xs-offset-4">
        <!-- Customer Info Block -->
            <div class="block">
                <!-- Customer Info Title -->
                <div class="block-title">
                    <h2><strong>{{$category_detail->name}} </strong> Info</h2>
                </div>
                <!-- END Customer Info Title -->

                <!-- Customer Info -->
                <div class="block-section text-center">
                    <a href="javascript:void(0)">
                    @if($category_detail->icon_image == null)
                        <img src="{{URL::to('/')}}/images/no_image.png" width="64px" alt="avatar">
                    @else
                        <img src="{{$category_detail->icon_image}}" width="64px" alt="avatar">
                    @endif
                    </a>
                    <h3>
                        <strong>{{$category_detail->name}}</strong><br><small></small>
                    </h3>
                </div>
                <table class="table table-borderless table-striped table-vcenter">
                    <tbody>
                        <tr>
                            <td class="text-right" style="width: 50%;"><strong>Type</strong></td>
                            <td>@if($category_detail->type == 1)
                                    Food
                                @elseif($category_detail->type == 2)
                                    Supplies
                                @elseif($category_detail->type == 3)
                                    Community & Services
                                @endif
                            </td>
                        </tr>                        
                    </tbody>
                </table>
                <!-- END Customer Info -->
            </div>
            <!-- END Customer Info Block -->
        </div>
    </div>
       
        
    <div class="row">
        <div class="col-lg-12">
            <div class="block">
                <!-- Info Title -->
                <div class="block-title">
                    <div class="block-options pull-right">
                        <a href="{{URL::to('/')}}/admin/add-sub-category/{{$category_detail->id}}" class="btn btn-alt btn-sm btn-success" data-toggle="tooltip" title="" data-original-title="Add"><i class="fa fa-plus"></i></a>
                        
                    </div>
                    <h2>Sub-Categories of <strong>{{$category_detail->name}}</strong></h2>
                </div>
                <!-- END Info Title -->

                <!-- Info Content -->
                <table class="table table-borderless table-striped table-responsive">
                    <tbody>