@extends('layouts.backend')
@section('mainContentArea')
<div class="card card-default">
    <div class="card-header">
        <h4>
            Manage Color Families
            {!! $backBtn !!}
        </h4>
    </div>
    <div class="card-body">
        <table class="table table-bordered data-table">
            <thead>
                <tr>
                    <th>S.No.</th>
                    <th>Name</th>
                    <th>Details</th>
                    <th width="100px">Action</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
<!-- The Modal -->
<div class="modal" id="drafthsnModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title"></h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
          <form action="{{ route('color-families.store') }}" method="post" name="drafthsnFrm">
              @csrf
              <input type="hidden" name="color_family_id" id="color_family_id" value="0">
              <div class="row">
                <div class="col-md-12">
                    <div class="form-group"><label for="hsnname">Name</label><input class="form-control" name="name" id="hsnname" required value="" placeholder="Enter Color Family Name"/></div>
                    <div class="form-group"><label for="hsncode">Code</label><input class="form-control" type="color" name="code" id="hsncode" required value="" placeholder="Enter Color Family Description"/></div>
                    @if($showing === 1)
                    <div class="form-group"><button class="btn btn-block btn-primary">Approve</button></div>
                    @endif
                </div>
              </div>
          </form>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>
<!-- The Modal -->
<div class="modal" id="colorFamilyModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Defined Colors for <span class="colorName"></span></h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body"></div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>
@endsection

@section('extraJs')
<script type="text/javascript">
    $(function () {
      
      var table = $('.data-table').DataTable({
          processing: true,
          serverSide: true,
          ajax: "{{ route('color-families.draftindex') }}",
          columns: [
              {data: 'DT_RowIndex', name: 'DT_RowIndex'},
              {data: 'namedraft', name: 'name'},
              {data: 'code', name: 'code', render: function(data, type, full, meta) {
                return "<div style=\"background:"+data+";width:50px;height:50px;\"></div><div>"+data+"</div>";
              }},
              {data: 'action', name: 'action', orderable: false, searchable: false},
          ]
      });
      
    });
    function childColors(i,n) {
      $.get('{{ route('color-families-colors') }}?id='+i, function(data) {
          data = jQuery.parseJSON(data);
          $("#colorFamilyModal .colorName").html(n);
          var html = '<div class="row">';
          $.each(data, function(key,value) {
            html+='<div class="col-md-6" style="background:'+value.code+'">&nbsp;</div>';
            html+='<div class="col-md-3">'+value.name+'</div>';
            html+='<div class="col-md-3">'+value.code+'</div>';
            html+='<div class="col-md-12">&nbsp;</div>';
          }); 
          html+='</div>';
          $("#colorFamilyModal .modal-body").html(html);
          $("#colorFamilyModal").modal('show');
      });
    }
  </script>
@endsection