@extends('layouts.backend.app')

@section('title')
    {{$title}}
@stop

@push('css')

@endpush

@section('content')
<div class="bg-title">
    <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-6"> 
            <h4 class="box-title">{{$title}}</h4>
        </div>
        <div class="col-lg-6 col-sm-6 col-md-6 text-right">
            <button data-toggle="modal" data-target="#create" class="btn btn-primary btn-xs">Register Category</button>
        </div>
        <!-- Create Modal -->
        <div class="modal fade" id="create" role="dialog">
          <div class="modal-dialog">
          
            <!--Create Modal content-->
            <div class="modal-content">
             <form action="{{ route('admin.category.store') }}" method="POST" enctype="multipart/form-data">
                 @csrf

              <div class="modal-header">
                <h4 class="modal-title">Register Category</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
              </div>
              <div class="modal-body">

                <div class="form-group">
                    <label>Parent Category</label>

                    <select name="parent_id" id="parent_id" class="form-control">
                      <option value="">--None--</option>
                      @foreach ($parent_cat as $c_category)
                        <option value="{{$c_category->id}}">{{$c_category->serial}} {{$c_category->name}}</option>
                      @endforeach
                      
                    </select>
                </div>

                <div class="form-group">
                    <label>Order <i class="text-danger"> *</i></label>
                    <input required type="number" class="form-control" id="serial" name="serial"  placeholder="Order" value="1" min="1">
                </div>

                <div class="form-group">
                    <label>Name <i class="text-danger"> *</i></label>
                    <input required type="text" class="form-control" id="name" name="name"  placeholder="Max 100 word.">
                </div>

                <div class="form-group">
                    <label>Slug <i class="text-danger"> *</i></label>
                    <input required type="text" class="form-control" id="slug" name="slug"  placeholder="Max 100 word & must be unique.">
                </div>

                <div class="form-group">
                    <label>Inside Dhaka <i class="text-danger"> *</i></label>
                    <input required type="number" class="form-control" id="inside" name="inside" min="0"  placeholder="Max 11 word & must be number.">
                </div>
                <div class="form-group">
                    <label>Outside Dhaka <i class="text-danger"> *</i></label>
                    <input required type="number" class="form-control" id="outside" name="outside" min="0" placeholder="Max 11 word & must be number.">
                </div>

                <div class="form-group">
                    <label>Icon (https://fontawesome.com/v4.7.0/icons/)</label>
                    <input type="text" class="form-control" id="icon" name="icon"  placeholder="Max 100 word.">
                </div>

                <div class="form-group">
                    <label for="name">Image</label>
                    <input type="file" name="image">
                </div>

                <div class="form-group">
                    <input type="checkbox" name="menu" value="1">
                    <label> Menu</label><br>
                    <input type="checkbox" name="feature" value="1">
                    <label> Feature</label><br>
                    <input type="checkbox" name="home" value="1">
                    <label> Home</label><br>
                </div>

              </div>
              <div class="modal-footer">
                    <button type="submit" class="btn btn-success btn-xs">Submit</button>
                                                                              
              </div>
            </form>
            </div>
            
          </div>
        </div> {{-- model end --}}
    </div>
    <!-- /.col-lg-12 -->
</div>

<div class="mb-4">
    <div class="white-box">
        <div class="table-responsive">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th width="5%">SL</th>
                        <th width="10%">Image</th>
                        <th width="10%">Serial</th>
                        <th width="30%">Name</th>
                        <th width="30%">Slug</th>
                        <th width="30%">Inside</th>
                        <th width="30%">Outside</th>
                        <th width="5%">Menu</th>
                        <th width="5%">Feature</th>
                        <th width="5%">Home</th>
                        <th width="6%">Action</th>
                    </tr>
                </thead>
                <tbody>
                  @foreach($categorys as $key=>$category)
                      <tr>
                          <td>{{ $key + 1 }}</td>
                          <td>
                            <img class="img-responsive" width="30px" height="30px" style="border-radius: 100%;" src="@if ($category->image=='default.png')
                            ../../../images/default.png
                            @else
                                {{ Storage::disk('public')->url('category/'.$category->image) }}
                            @endif" alt="">
                          </td>
                          <td>{{ $category->serial }}</td>
                          <td>{{ $category->name }}</td>
                          <td>{{ $category->slug }}</td>
                          <td>৳ {{ $category->inside }}</td>
                          <td>৳ {{ $category->outside }}</td>
                          <td>{{ $category->menu }}</td>
                          <td>{{ $category->feature }}</td>
                          <td>{{ $category->home }}</td>
                          <td class="text-center">
                              <button type="button" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#edit_{{$key}}" title="Add to clint"><i class="fa fa-pencil"></i></button>
                          </td>
                      </tr>
                  <!-- edit Modal -->
                  <div class="modal fade" id="edit_{{$key}}" role="dialog">
                    <div class="modal-dialog">
                    
                      <!--Edit Modal content-->
                      <form action="{{ route('admin.category.update',$category->id) }}" method="POST" enctype="multipart/form-data" >
                          @csrf
                          @method('PUT')
                      <div class="modal-content">
                        <div class="modal-header">
                          <h4 class="modal-title">Update Category</h4>
                          <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <div class="modal-body">
                          <div class="form-group">
                              <label>Parent Category <i class="text-danger"> *</i></label>

                              <select name="parent_id" id="parent_id" class="form-control">
                                <option value="">--None--</option>
                                @foreach ($parent_cat as $e_category)
                                  <option @if ($category->parent_id==$e_category->id)
                                    selected 
                                  @endif value="{{$e_category->id}}">{{$e_category->serial}} {{$e_category->name}}</option>
                                @endforeach
                                
                              </select>
                          </div>

                          <div class="form-group">
                              <label>Order <i class="text-danger"> *</i></label>
                              <input required type="number" class="form-control" id="serial" name="serial"  placeholder="Order" value="{{ $category->serial }}" min="1">
                          </div>

                          <div class="form-group">
                              <label>Name <i class="text-danger"> *</i></label>
                              <input required type="text" class="form-control" id="name" name="name"  placeholder="Max 100 word." value="{{ $category->name }}">
                          </div>

                          <div class="form-group">
                              <label>Slug <i class="text-danger"> *</i></label>
                              <input required type="text" class="form-control" id="slug" name="slug"  placeholder="Max 100 word & must be unique." value="{{ $category->slug }}">
                          </div>

                          <div class="form-group">
                              <label>Inside Dhaka <i class="text-danger"> *</i></label>
                              <input required type="number" class="form-control" id="inside" name="inside" min="0"  value="{{ $category->inside }}" placeholder="Max 11 word & must be number.">
                          </div>
                          <div class="form-group">
                              <label>Outside Dhaka <i class="text-danger"> *</i></label>
                              <input required type="number" class="form-control" id="outside" name="outside" min="0" value="{{ $category->outside }}" placeholder="Max 11 word & must be number.">
                          </div>

                          <div class="form-group">
                              <label>Icon (https://fontawesome.com/v4.7.0/icons/)</label>
                              <input type="text" class="form-control" id="icon" name="icon"  placeholder="Max 100 word." value="{{ $category->icon }}">
                          </div>

                          <div class="form-group">
                              <label for="name">Image</label>
                              <img class="img-responsive" width="100px" height="100px" style="border-radius: 5px;margin-bottom: 5px;" src="{{ Storage::disk('public')->url('category/'.$category->image) }}" alt="">
                              <input type="file" name="image">
                          </div>

                          <div class="form-group">
                              <input @if ($category->menu==1) checked @endif type="checkbox" name="menu" value="1">
                              <label> Menu</label><br>
                              <input @if ($category->feature==1) checked @endif type="checkbox" name="feature" value="1">
                              <label> Feature</label><br>
                              <input @if ($category->home==1) checked @endif type="checkbox" name="home" value="1">
                              <label> Home</label><br>
                          </div>

                        </div>
                        <div class="modal-footer">
                              <button type="submit" class="btn btn-success btn-xs">Submit</button>
                                                                                        
                        </div>
                      </div>
                      </form>
                      
                    </div>
                  </div>
                  @endforeach

                </tbody>
                
            </table>
            {{$categorys->onEachSide(2)->links()}}
        </div>
    </div>
</div>

    
@endsection

@push('js')

@endpush