{{-- mainLayouts extends --}}
@extends('layouts.contentLayoutMaster')

{{-- Page title --}}
@section('title', 'Category List')

{{-- page styles --}}
@section('page-style')
<link rel="stylesheet" type="text/css" href="{{asset('css/pages/page-users.css')}}">
@endsection

@section('content')
<section class="users-list-wrapper section">
    <div class="users-list-table">
        <div class="card">
            <div class="row pl-1 pr-1">
                <h5 class="col s6"><b>Category</b></h5>
                <div class="input-field col s6">
                    <a href="{{route('admin.category.create')}}" class="btn waves-effect waves-light right p3 border-radius-button"><i class="material-icons left">list</i>Add Category</a>
                </div>
            </div>
            <div class="card-content pt-0">
                <!-- datatable start -->
                <div class="responsive-table">
                    <table id="users-list-datatable" class="table responsive-table striped">
                        <thead class="grey lighten-2">
                            <tr>
                                <th></th>
                                <th>#</th>
                                <th style="width: 25% !important">Category Name</th>
                                <th>Category Image</th>
                                <th>Created</th>
                                <th>Created By</th>
                                <th>For Customer</th>
                                <th>For Merchant</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($categories as $key => $category)
                            <tr>
                                <td></td>
                                <td>{{$key + $categories->firstItem()}}</td>
                                <td>{{$category->name}}</td>
                                <td><img src="{{$category->image}}" alt="" width="100"></td>
                                <td>{{ $category->created_time }}</td>
                                <td>Admin</td>
                                <td>{{ $category->is_customer_also == 1 ? 'Yes' : 'No' }}</td>
                                <td>{{ $category->is_merchant_also == 1 ? 'Yes' : 'No' }}</td>
                                <td>
                                    <div style="display: flex;align-items: center">
                                        <i class="material-icons mt-2">
                                            <a class="blue lighten-4 border-radius-button z-depth-1" href="{{route('admin.category.edit', $category->id)}}" style="padding: 0.15em 0.75em;">edit</a>
                                        </i>
                                        @if ($category->products->count() > 0)
                                            <a class="btn btn-small waves-effect waves-light red darken-2 border-radius-button modal-trigger ml-5" href="#modal1"><i class="material-icons">delete_forever</i></a>
                                        @else
                                            <a class="btn btn-small waves-effect waves-light red darken-2 border-radius-button modal-trigger ml-5" href="#modal2"><i class="material-icons">delete_forever</i></a>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                            @empty

                            @endforelse
                        </tbody>
                    </table>
                </div>
                <!-- datatable ends -->
            </div>
        </div>



        <!-- Modal Structure -->
        <div id="modal1" class="modal" style="width: 35%!important">
          <div class="modal-content">
            <p>ယခု Category တွင် Product များရှိနေသဖြင့်ဖျက်၍မရနိုင်ပါ!</p>
          </div>
          <div class="modal-footer pr-6">
             <div class="right">
                <div class="display-flex align-items-center">
                    <a class="modal-close white black-text" style="position: absolute;top:3%;right:1%;"><i class="material-icons">clear</i></a>
                 </div>
             </div>
          </div>
        </div>

        <div id="modal2" class="modal" style="width: 35%!important">
            <div class="modal-content">
              <p class="center-align">ယခု Category ကို ဖျက်မှာသေချာပါသလား?</p>
            </div>
            <div class="modal-footer pr-6">
               <div class="right">
                  <div class="display-flex align-items-center">
                      <a class="modal-close white black-text" style="position: absolute;top:3%;right:1%;"><i class="material-icons">clear</i></a>
                      <form action="{{ route('admin.category.destroy', $category->id) }}" method="POST" class="ml-5">
                        <input type="hidden" name="_method" value="DELETE">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <button class="btn btn-small waves-effect waves-light red darken-2 border-radius-button" style="padding: 0 1.7em" type="submit" name="action">
                            Confirm
                        </button>
                    </form>
                   </div>
               </div>
            </div>
          </div>
    </div>
</section>
@endsection
@section('page-script')
<script>
    $(()=>{
        $('.modal').modal();
    });
</script>
@endsection