@extends('layouts.backend')
@section('extraCss')  
 <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet"> 
<style type="text/css" media="all">  
  figure {
            margin: 10px;
            float: left;
            width:30%;
         }     
</style>

@endsection
@php
$existingColors = [];
$existingSizes = [];
if(!empty($article->id) && $article->itemCodes->count() > 0):
    foreach($article->itemCodes as $iCode):
            $cls = '';
            $colTemp = '';
            $sizeTemp = '';
            foreach($sizes as $tempSize) {
                if($tempSize->code == $iCode->size) {
                    $sizeTemp = $tempSize->id;
                    $existingSizes[] = $iCode->size;
                    break;
                }
            }
            foreach($colorFamilies as $colorFamily) {
                if(!empty($colorFamily->colors) && $colorFamily->colors->count() > 0) {
                    foreach($colorFamily->colors as $col) {
                        if($col->name == $iCode->color) {                        
                            if(!in_array($iCode->color,$existingColors))
                            {
                              $existingColors[] = $iCode->color;
                              break;
                            }                            
                        }
                    }
                }               
            }
        
    endforeach;
endif;

@endphp

@section('mainContentArea')

<div class="card card-default">
    <div class="card-header">
        <h4>
            Edit Article Contant      
            <a href="{{ route('article-contant-list') }}" class="btn btn-info float-right btn-sm"> Back</a>      
        </h4>
    </div>

    @if (count($errors) > 0)
   <div class = "alert alert-danger">
      <ul>
         @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
         @endforeach
      </ul>
   </div>
   @endif
    <div class="card-body">
       
        <form  method="PUT" enctype="multipart/form-data" action="{{ route('article-contant-update') }}" >
        @csrf        
        
        <div class="row"> 
            <div class="col-md-12"><h5> Article Details</h5><hr/></div>
            <div class="col-md-4 form-group">
                <input type='hidden' name='editid' value='{{$article->id}}'>
                <label for="article">Article</label>
                <input type='text' name="article" id="article" class="form-control" readonly value="{{$article->code}}" > 
                    
            </div>                 

            <div class="col-md-4 form-group">
                <label for="unit_id">Fabric </label>
                 <input type='text' class="form-control" readonly value="{{!empty($article->fabric->name) ? $article->fabric->name : 'none'}}" >
            </div>   

            <div class="col-md-4 form-group">
                <label for="sale_unit_id">Season </label>
                <input type='text' class="form-control" readonly value="{{!empty($article->season->name) ? $article->season->name : 'none'}}" >
            </div>

            {{--  ATTRIBUTE MASTERS HERE  --}}
            @php
                $existProductMasterValues = [];
                if(!empty($article->mastervalues)):
                    $tempMastervals = $article->mastervalues;
                    foreach( $tempMastervals as $tempMasterval) {
                        $existProductMasterValues[$tempMasterval->master_id][] = $tempMasterval->master_value_id;
                    }
                endif;
            @endphp
            @foreach($masters as $master)               
                <div class="col-md-3 extraMasters" >
                    <p><b>{{ $master->name }}  </b> </p>
                    <select name="master_id[{{ $master->id }}][]" id="masterid_{{ $master->id }}" class="form-control" readonly>
                        <option value="">None</option> 
                        @if(!empty($master->vals) && $master->vals->count() > 0)
                            @foreach($master->vals as $val) 
                                <option value="{{ $val->id }}" {{ (!empty($existProductMasterValues[$master->id]) && in_array($val->id, $existProductMasterValues[$master->id]) ) ? 'selected' : ''}} >{{ $val->name }}</option>
                            @endforeach
                        @endif
                    </select>
                </div>
            @endforeach
            {{--  ATTRIBUTE MASTERS HERE  --}}    

            <div class="col-md-12 mixerDiv">
                <h5>Variations</h5><hr/>               
            </div>
            <div class="col-md-6 form-group mixerDiv">
                <label for="colorFamily"> Color: </label>
                <input type="text" class="form-control" readonly value="{{ implode(',',$existingColors) }}">
            </div>
            <div class="col-md-6 form-group mixerDiv">
                <label for="sizeFamily">Size </label>               
                <input type="text" class="form-control" readonly value="{{ implode(',',$existingSizes )  }}">
            </div>    

            <div class="col-md-12"><h5>Images Details</h5><hr/></div> 
            <div class="col-md-12 form-group">
              <table   id="design"  >
                <tbody >
                    <tr >                         
                         <td colspan='1' style="text-align:center;" > 
                            @foreach($article->articleImages as $key => $value)                                                         
                              <figure class="imgcol">
                                <a data-toggle="modal" data-target="#ImageModal" id="gallery" data-image="{{ asset('uploads/articles/photos/full'.$value->imgname) }}" >
                                <img src="{{ asset('uploads/articles/photos/full'.$value->imgname) }}" 
                               style="width:250px; height:200px;margin:10px;" class="img-fluid center-block img-rounded" />
                                 </a> 
                               <figcaption> <b> {{ str_replace("_", " ", $value->color_name)}} </b> </figcaption>
                              </figure>   
                            @endforeach
                        </td>
                    </tr>                     
                </tbody> 
              </table>
            </div>            

            <div class="col-md-12 form-group">
                <label for="short_desc">Short Description </label>
                <textarea name="short_desc" id="short_desc" class="form-control">{{ !empty($article->short_desc)  ? $article->short_desc : 'None'}}</textarea>
            
            </div>
            
            <div class="col-md-12 form-group">
                <label for="long_desc">Long Description </label>
                <textarea name="long_desc" id="long_desc" class="form-control">{{ !empty($article->long_desc)  ? $article->long_desc : 'None'}}</textarea>
            </div>
           
            <div class="col-md-12 text-Center" style="margin:20px;">
                @if($show === 1)
                  <button type="submit" name='approved' value='1' class="btn btn-success float-center" ><i class="fa fas fa-save"></i> Approved</button>
                  <button type="submit" name='approved' value='2' class="btn btn-success float-center" ><i class="fa fas fa-save"></i> Send For Review</button>
                @else 
                  <button type="submit" name='approved' value='3' class="btn btn-success float-center" ><i class="fa fas fa-save"></i> Send For Approve</button>
                @endif                
            </div>
          
        </div>       
        
    </form>

    </div>
</div>


<div class="modal fade" id="ImageModal" tabindex="-1" role="dialog" aria-hidden="true" >
    <div class="modal-dialog" role="document">
          <div class="modal-content">
              <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                  </button>
              </div>
              <div class="modal-body">
                  <div id="carouselExample" class="carousel slide" data-ride="carousel">
                      <div class="carousel-inner">
                      <div class="carousel-item active " >
                      <img id='articlepop'  src="" alt="First slide" style="max-height:300px;">
                      </div>
                      </div>
                  </div>
              </div>
              <div class="modal-footer">
              <button type="button" class="btn btn-secondary"  data-dismiss="modal">Close</button>
              </div>
          </div>
    </div>
</div>
@endsection

@section('extraJs')
<script>
$(function () {
  $('#ImageModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget); // Button that triggered the modal
  var newSrc = button.data('image'); // Extract info from data-* attributes

  console.log(newSrc);
  $('#articlepop').attr('src', newSrc);
  });
});
</script>
@endsection