@extends('layouts.backend')
@section('mainContentArea')
<div class="card card-default">
    <div class="card-header">
        <h4>
            Manage Colors in the System
            {!! $addBtn !!}
            {!! $viewdraft !!}
        </h4>
    </div>
    <div class="card-body">
        <table class="table table-bordered data-table">
            <thead>
                <tr>
                    <th>S.No.</th>
                    <th>Family</th>
                    <th>Family Code</th>
                    <th>Color Name</th>
                    <th>Color Code</th>
                    <th width="100px">Action</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
<!-- The Modal -->
<div class="modal" id="catModal">
  <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('colors.draftstore') }}" method="post" name="catFrm" enctype="multipart/form-data" >
              @csrf
              <input type="hidden" name="colorid" id="colorid" value="0">
              <div class="row">
                <div class="col-md-12">
                  {!! $addFamilyBtn !!}
                    <div class="form-group"><label for="color_family_id">Family</label>
                      <select name="color_family_id" id="color_family_id" class="form-control">
                        <option value="">Select Color Family</option>
                        @foreach($colorFamilies as $colorFamily)
                        <option value="{{ $colorFamily->id }}">{{ $colorFamily->name }}</option>
                        @endforeach
                      </select>
                    </div>
                    <div class="form-group"><label for="catname">Name</label><input class="form-control" name="name" id="catname" required value="" placeholder="Enter Color Name"/></div>
                    <div class="form-group"><label for="code">Hexadecimal Code</label><input type="color" class="form-control" name="code" id="code" placeholder="Enter hex. code of color" required/></div>
                    <div class="form-group"><button type="submit" class="btn btn-block btn-primary">Send For Approval</button></div>
                </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>


<div class="modal" id="familyModal">
  <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('colors.draftfamilystore') }}" method="post" name="familyFrm" onsubmit="saveMasterVal(this);return false;">
              @csrf              
              <div class="row">
                <div class="col-md-12">
                    <div class="form-group"><label for="hsnname">Family Name</label><input class="form-control" name="familyname" id="familyname" required value="" placeholder="Enter Color Family Name"/></div>
                    <div class="form-group"><label for="hsncode">Family Code</label><input class="form-control" type="color" name="familycode" id="familycode" required value="" placeholder="Enter Color Family Description"/></div>
                    <div class="form-group"><button class="btn btn-block btn-primary">Send For Approval</button></div>
                </div>
              </div>
          </form>
      </div>    

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

@section('extraJs')
<script type="text/javascript">
    $(function () {
      
      var table = $('.data-table').DataTable({
          processing: true,
          serverSide: true,
          stateSave: true,
          ajax: "{{ route('colors.index') }}",
          columns: [
              {data: 'DT_RowIndex', name: 'DT_RowIndex'},
              {data: 'color_family_id', name: 'color_family_id'},
              {data: 'color_family_code', name: 'color_family_code', render: function(data, type, full, meta) {
                return "<div style=\"background:"+data+";width:50px;height:50px;\"></div><div>"+data+"</div>";
              }},
              {data: 'name', 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 setFabric(pos,status){
    
    var _token   = $('meta[name="csrf-token"]').attr('content'); 
    $.ajax({
        type: "get",
        url: "{{ route('color-status-update') }}",
        data: {
        pos: pos,            
        status:status,              
        _token: _token
        },
        dataType: "json",                       
        success: function(response) { 
            var reason = JSON.stringify(response);  
            var parsed = JSON.parse(reason);            
            console.log(parsed);
            if (parsed.status == false) {
            toastr.error(parsed.info);
            $('.submitBtn').removeAttr("disabled");
            } else {
            toastr.success(parsed.info);
            
            window.location.reload('true');               
            
            }
        }
    });
   
    }  

    function saveMasterVal(frm) {
      // var _token   = $('meta[name="csrf-token"]').attr('content'); 
        $.post("{{ route('colors.draftfamilystore') }}", {
            _token: document.tokenForm._token.value,
            name: frm.familyname.value,
            code: frm.familycode.value,            
        }, function(result) {
            var response = jQuery.parseJSON(result);
            if (response.status == false) {
                toastr.error(response.message);
                return false;
            } else {               
                toastr.success(response.message);
                console.log(response);
                document.familyFrm.reset();
                $('#color_family_id').append($('<option>', { value : response.id }).text(response.name));
                $("#familyModal").modal('hide');
                return false;
            }
            
        });
        
    }

    function savecolorVal(frm) {
      // var _token   = $('meta[name="csrf-token"]').attr('content'); 
        $.post("{{ route('colors.draftstore') }}", {
            _token: document.tokenForm._token.value,
            color_family_id: frm.color_family_id.value,
            name: frm.name.value, 
            code: frm.code.value,  
            colorid: frm.colorid.value          
        }, function(result) {
            var response = jQuery.parseJSON(result);
            if (response.status == false) {
                toastr.error(response.message);
                return false;
            } else {               
                toastr.success(response.message);
                console.log(response);
                document.catFrm.reset();
                window.location.reload('true');
            }
            
        });
        
    }

  </script>
@endsection