@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">{{$title}} Posting</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.colour.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

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

                  <div class="form-group">
                      <label>Colour <i class="text-danger">*</i></label>
                      <input type="text" required class="form-control" name="name" value=""  placeholder="Colour">
                  </div>

                  <div class="form-group row">
                    <label class="col-sm-3">Status <i class="text-danger">*</i></label>
                    <div class="col-xs-9">
                        <div class="form-check">
                            <label class="radio-inline">
                            <input type="radio" name="status" value="Active"  checked="checked" >Active</label>
                            <label class="radio-inline">
                            <input type="radio" name="status" value="Inactive"  >Inactive</label>
                        </div>
                    </div>
                  </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="10%" >SL</th>
                        <th width="45%" >Colour</th>
                        <th width="35%" >Status</th>
                        <th width="10%" >Action</th>
                    </tr>
                </thead>
                <tbody>
                  @foreach($colours as $key=>$colour)
                      <tr>
                          <td>{{ $key + 1 }}</td>
                          <td>{{ $colour->name }}</td>
                          <td>{{ $colour->status }}</td>
                          <td class="text-center">
                              <!-- Trigger the edit modal with a button -->
                                <button type="button" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#edit_{{$key}}"><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.colour.update',$colour->id) }}" method="POST"  >
                          @csrf
                          @method('PUT')
                      <div class="modal-content">
                        <div class="modal-header">
                          <h4 class="modal-title">Update colour</h4>
                          <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <div class="modal-body">
                          <div class="form-group">
                              <label>colour <i class="text-danger">*</i></label>
                              <input type="text" required class="form-control" name="name" value="{{$colour->name}}"  placeholder="colour">
                          </div>

                          <div class="form-group row">
                            <label class="col-sm-3">Status</label>
                            <div class="col-xs-9">
                                <div class="form-check">
                                    <label class="radio-inline">
                                    <input type="radio" name="status" value="Active" @if($colour->status == "Active") checked @endif >Active</label>
                                    <label class="radio-inline">
                                    <input type="radio" name="status" @if($colour->status == "Inactive") checked @endif value="Inactive"  >Inactive</label>
                                </div>
                            </div>
                          </div>

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

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

    
@endsection

@push('js')

@endpush