@extends('page')

@section('content')


<!-- Content Header (Page header) -->
  <section class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1></h1>
        </div>
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="{{ route('categories.index') }}">List Categories</a></li>
            <li class="breadcrumb-item active">{{$category->category}}</li>
          </ol>
        </div>
      </div>
    </div><!-- /.container-fluid -->
  </section>

@if ($message = Session::get('success'))
    <div class="alert alert-success">
        {{ $message }}
    </div>
@endif
@if (count($errors) > 0)
                <div class="alert alert-danger">
                    <strong>Whoops!</strong> There were some problems with your input.<br><br>
                    <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                    </ul>
                </div>
                @endif
<!-- Main content -->
  <section class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-9">
          <div class="card card-info card-outline user-box">
            <!-- /.card-header -->
            <div class="card-body">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12">
                      <div class="form-group">
                            <h4>{{$category->category}} </h4>
                            <div class="sub-categories">
                            @if($category->subCategory->isNotEmpty())
                                <hr>
                                <h5>Subcategories</h5>
                                <ul>
                                @foreach($category->subCategory as $subkey =>  $subcategory)

                                    <li>{{$subcategory->category}}</li>
                                @endforeach
                                </ul>
                            @endif
                            </div>
                          <!-- parentCategory -->
                      </div>
                  </div>
                </div>

            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!-- /.col -->
        <div class="col-3">
          @include('components.dashboard.vertical')
        </div>
    </div>
  </div>
    <!-- /.container-fluid -->
</section>
<!-- /.content -->

    
@endsection