@extends('admin.layout.layout')

@section('page-level-css')
@endsection

@section('content')
<!-- START PAGE-CONTAINER -->
<div class="page-container ">
  <!-- START HEADER -->
  @include('admin.partials.header')
  <!-- END HEADER -->
  <!-- START PAGE CONTENT WRAPPER -->
  <div class="page-content-wrapper ">
    <!-- START PAGE CONTENT -->
    <div class="content sm-gutter">
      <!-- START JUMBOTRON -->
      <div data-pages="parallax">
        <div class="container-fluid p-l-25 p-r-25 sm-p-l-0 sm-p-r-0">
          <div class="inner">
            <!-- START BREADCRUMB -->
            <ol class="breadcrumb sm-p-b-5">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">Color</li>
            </ol>
          </div>
        </div>
      </div>
      <!-- END JUMBOTRON -->
      <!-- START CONTAINER FLUID -->
      <div class="container-fluid p-l-25 p-r-25 p-t-0 p-b-25 sm-padding-10">
        <!-- START ROW -->
        <div class="row">
          <div class="col-lg-6 m-b-10 d-flex">
              <!-- START card -->
              <div class="card card-transparent">
                <div class="card-body">
                  <form data-parsley-validate id="form-personal" role="form" enctype="multipart/form-data" autocomplete="off" method="POST" action="{{route('colors.store')}}">
                    @csrf
                    <div class="row clearfix">
                      <div class="col-md-12">
                        <div class="form-group form-group-default required"> 
                          <label>Color</label>
                          <input type="text" class="form-control" name="color" value="{{ old('color') }}"  required>
                        </div>

                        <div class="form-group form-group-default required"> 
                          <p>Images</p>
                          <div class="form-group form-group-default required">
                            <input type="file" class="form-control" name="image" >
                          </div>
                        </div>
                        
                        <div class="form-group form-group-default required">
                          <label>Status</label>
                          <select class="full-width" data-init-plugin="select2" name="status">
                            <option value="1" selected="selected">Yes</option>
                            <option value="0">No</option>
                          </select>
                        </div>


                      </div>
                      <div class="col-md-12">
                          @if ($errors->any())
                            <div class="alert alert-danger">
                                <button class="close" data-dismiss="alert"></button>
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                          @endif
                          @if(Session::has('success'))
                            <div class="alert alert-success">
                              <button class="close" data-dismiss="alert"></button>
                              {{Session::get('success')}}
                            </div>
                          @endif
                      </div>
                    </div>
                    <div class="clearfix"></div>
                    <button class="btn btn-primary" type="submit">Create Color</button>
                  </form>
                </div>
              </div>
              
              <!-- END card -->
          </div>

          <div class="col-lg-6 m-b-10 d-flex">
            <!-- START WIDGET widget_pendingComments.tpl-->
            <div class="widget-11-2 card no-border card-condensed no-margin widget-loader-circle align-self-stretch d-flex flex-column">
              <div class="card-header top-right">
                <div class="card-controls">
                  <ul>
                    <li><a data-toggle="refresh" class="portlet-refresh text-black" href="#"><i
                class="portlet-icon portlet-icon-refresh"></i></a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="padding-25">
                <div class="pull-left">
                  <h2 class="text-success no-margin">Color</h2>
                  <p class="no-margin">Total Colors</p>
                </div>
                <h3 class="pull-right semi-bold"><sup>
                  </sup> {{count($colors)}}
                </h3>
                <div class="clearfix"></div>
              </div>
              <div class="auto-overflow widget-11-2-table">
                <table class="table table-condensed table-hover">
                  <tbody>
                    @foreach( $colors as $color )
                    <tr>
                      <td class="font-montserrat all-caps fs-12 w-25">{{$color->color}}</td>
                      <td class="font-montserrat all-caps fs-12 w-25">
                        @php
                          $image = json_decode($color->image);
                        @endphp
                        @if(!empty($image))
                          <img src="{{$image->url}}" width="70">
                        @endif
                      </td>
                      <td class="font-montserrat all-caps fs-12 w-50">
                        <div class="btn-group btn-group-sm">
                          <button class="btn m-r-10">
                            @if($color->status == 1)
                              Active
                            @else
                              In Active
                            @endif
                          </button>
                          <a href="{{route('colors.edit',['color' => $color->id])}}" class="btn btn-primary m-r-10">Edit</a>
                          <a href="#" data-toggle="modal" data-target="#modalSlideUp" class="btn btn-danger m-r-10 deleteEntity" data-url = "{{route('colors.destroy',['color' => $color->id ])}}">Delete</a>
                        </div>
                      </td>
                    </tr>
                    @endforeach
                  </tbody>
                </table>
              </div>
            </div>
            <!-- END WIDGET -->
          </div>
        </div>
        <!-- END ROW -->
      </div>
      <!-- END CONTAINER FLUID -->
    </div>
    {{-- Delete Modal Starts here --}}
    @include('admin.partials.deleteModal')
    {{-- Delete Modal ends here --}}
    <!-- END PAGE CONTENT -->
    <!-- START COPYRIGHT -->
    @include('admin.partials.footer')
    <!-- END COPYRIGHT -->
  </div>
  <!-- END PAGE CONTENT WRAPPER -->
</div>
<!-- END PAGE CONTAINER -->
@endsection

@section('page-level-js')
<script type="text/javascript">
  $(document).on('click', '.deleteEntity', function(event) {
    var dataUrl = $(this).attr('data-url');
    // need to import delete modal (double check)
    console.log(dataUrl);
    // $('#entity_id').val(entityId);
    $('#deleteEntityForm').attr('action', dataUrl); 
  });
</script>
@endsection