@extends('layout.admin.master')

@section('meta-title', 'LEREVE - Branch Area Product')
@section('body-class', 'menu-position-side menu-side-left full-screen with-content-panel')

@section('breadcrumbs')
  <li class="breadcrumb-item">
    <a href="{{route(session('role').'.branch.list')}}">Branch</a>
  </li>
  <li class="breadcrumb-item">
    <span>Areas</span>
  </li>
@endsection

@push('asset-top')
    
@endpush

@section('content')
  <div class="element-wrapper">
    <h6 class="element-header">
      Area
    </h6>
    <div class="element-box">
      <form method="post" enctype="multipart/form-data" action="{{route(session('role').'.branch.area',['slug'=>$branch->slug])}}">
        @csrf
        <h5 class="form-header">
          Branch : {{$branch->name}}
        </h5>
        <div class="form-desc">
          <!-- Discharge best employed your phase each the of shine. Be met even reason consider logbook redesigns. Never a turned interfaces among asking -->
        </div>
        <fieldset>
          <legend>Areas</legend>
          @if(count($data))
            @foreach($data as $bstate=>$bcity)                
              <div class="row main-row">
                <div class="col-sm-4">
                  <div class="row">
                    <div class="col-sm-2" >
                      <div class="form-group row-actions">
                        <a href="#" class="remove-row"><i class="os-icon os-icon-x"></i></a>
                        <a href="#" class="add-row"><i class="os-icon os-icon-plus"></i></a>
                      </div>
                    </div>
                    <div class="col-sm-10">
                      <div class="form-group">
                        <label for=""> Governorate</label>
                        <select class="form-control ar-state" name="state[]">
                          <option value="0">Select State</option>
                          @foreach($states as $state)
                            <option value="{{$state->id}}" {{($state->id==$bstate)?'selected':''}}>{{$state->name_en}}</option>
                          @endforeach
                        </select>
                      </div>            
                    </div>
                  </div>                
                </div>
                <div class="col-sm-8">
                  <div class="form-group">
                    <label for=""> Areas</label>
                    <select class="form-control hide-on select2" name="areas[{{$bstate}}][]" multiple>
                      <option value="0">Select Areas</option>
                      @foreach($states[$bstate]['areas'] as $area)
                        <option value="{{$area->id}}" {{in_array($area->id, $bcity)?'selected':''}}>{{$area->name_en}}</option>
                      @endforeach
                    </select>
                  </div>
                </div>
              </div>
            @endforeach
          @else
            <div class="row main-row">
              <div class="col-sm-4">
                <div class="row">
                  <div class="col-sm-2" >
                    <div class="form-group row-actions">
                      <a href="#" class="remove-row"><i class="os-icon os-icon-x"></i></a>
                      <a href="#" class="add-row"><i class="os-icon os-icon-plus"></i></a>
                    </div>
                  </div>
                  <div class="col-sm-10">
                    <div class="form-group">
                      <label for=""> Governorate</label>
                      <select class="form-control ar-state" name="state[]">
                        <option value="0">Select State</option>
                        @foreach($states as $state)
                          <option value="{{$state->id}}">{{$state->name_en}}</option>
                        @endforeach
                      </select>
                    </div>            
                  </div>
                </div>                
              </div>
              <div class="col-sm-8">
                <div class="form-group">
                  <label for=""> Areas</label>
                  <select class="form-control hide-on select2" name="areas[]" multiple>
                    <option value="0">Select Areas</option>
                  </select>
                </div>
              </div>
            </div>
          @endif
        </fieldset>

        <div class="form-buttons-w">
          <button class="btn btn-primary" type="submit"> Submit</button>
        </div>
      </form>      
    </div>
  </div>
  @foreach($states as $key=>$state)
    <select class="ar-area" data-id="{{$key}}" style="display: none;">
      <option value="0">Select Areas</option>
      @foreach($state['areas'] as $area)
        <option value="{{$area->id}}" >{{$area->name_en}}</option>
      @endforeach
    </select>
  @endforeach
@endsection
@push('asset-bottom')
  <script>
    jQuery('body').on('change','.ar-state', function(){
      val = jQuery(this).val();
      if(val==0){
        html = '<option value="0">Select Area</option>';
      } else {
        html = jQuery('.ar-area[data-id="'+val+'"]').html();
      }
      jQuery(this).closest('.main-row').find('.hide-on').attr('name','areas['+val+'][]')
      jQuery(this).closest('.main-row').find('.hide-on').html(html);
    });

    $('body').on('click','.add-row', function(e){
        e.preventDefault();
        $( "fieldset>.row:first .hide-on" ).select2('destroy');
        cloned = $( "fieldset>.row:first" ).clone();
        cloned.find('select').val(0);
        cloned.appendTo( "fieldset" ).find(".hide-on").html("<option value='0'>Select Areas</option>");
        $('fieldset .select2').select2();
    });
    $('body').on('click','.remove-row', function(e){
        e.preventDefault();
        $( this ).closest('.main-row').remove();
    });
  </script>
@endpush