@extends('layouts.admin')

@section('header-content')
    <style>
        .weekDays-selector input {
            display: none!important;
        }

        .weekDays-selector input[type=checkbox] + label {
            display: inline-block;
            border-radius: 6px;
            background: #dddddd;
            height: 40px;
            width: 30px;
            margin-right: 3px;
            line-height: 40px;
            text-align: center;
            cursor: pointer;
        }

        .weekDays-selector input[type=checkbox]:checked + label {
            background: #2AD705;
            color: #ffffff;
        }

    </style>
    <link href="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.css" rel="stylesheet"/>
    <link href="https://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css" rel="stylesheet"/>
@endsection
@section('content')
            <div class="container-detached">
                <div class="content-detached">
                    <!-- Tab content -->
                    <div class="tab-content">
                        <div class="tab-pane fade in active" id="profile">
                            <!-- Item Details -->
                            <div class="panel panel-flat">
                                <div class="panel-heading">
                                    <h6 class="panel-title">Area Details</h6>
                                    <div class="heading-elements">
                                        <ul class="icons-list">
                                            <li><a data-action="collapse"></a></li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="panel-body">
                                    <form method="POST"
                                          action="{{ url('areas'.(empty($area) ? '': '/' . $area->id)) }}"
                                          enctype="multipart/form-data">
                                        {!! csrf_field() !!}
                                         <div class="row">
                                             <div class="col-md-3 col-sm-3">
                                                 <div class="form-group {{ $errors->has('country') ? ' has-error' : '' }}">
                                                     <label>Country</label>
                                                     <select class="select" name="country" id="country">
                                                         <option value=""
                                                         >Select Country
                                                         </option>
                                                         @foreach($countries as $country)
                                                             <option value="{{$country->id}}" @if (old('country') == $country->id || isset($area) && $area->country_id==$country->id) selected="selected" @endif
                                                             >{{$country->name}}
                                                             </option>
                                                         @endforeach
                                                     </select>
                                                     @if ($errors->has('country'))
                                                         <span class="help-block"><strong>{{ $errors->first('country') }}</strong></span>
                                                     @endif
                                                 </div>
                                             </div>
                                             <div class="col-md-3 col-sm-3">
                                                 <div class="form-group {{ $errors->has('region') ? ' has-error' : '' }}">
                                                     <label>Region</label>
                                                     <input type="hidden" id="old_region" value="{{@$area->region_id}}">
                                                     <select class="select" name="region" id="region" disabled>
                                                         <option value=""
                                                         >Select Region
                                                         </option>
                                                     </select>
                                                     @if ($errors->has('region'))
                                                         <span class="help-block"><strong>{{ $errors->first('region') }}</strong></span>
                                                     @endif
                                                 </div>
                                             </div>
                                             <div class="col-md-3 col-sm-3">
                                                 <div class="form-group {{ $errors->has('city') ? ' has-error' : '' }}">
                                                     <label>City</label>
                                                     <input type="hidden" id="old_city" value="{{@$area->city_id}}">
                                                     <select class="select-search" name="city" id="city" disabled>
                                                         <option value=""
                                                         >Select City
                                                         </option>
                                                     </select>
                                                     @if ($errors->has('city'))
                                                         <span class="help-block"><strong>{{ $errors->first('city') }}</strong></span>
                                                     @endif
                                                 </div>
                                             </div>
                                            <div class="col-md-3 col-sm-3">
                                                <div class="form-group {{ $errors->has('name') ? ' has-error' : '' }}">
                                                    <label>Area Name</label>
                                                    <input type="text" name="name" value="{{old('name', @$area->name)}}" placeholder="Name" class="form-control">
                                                    @if ($errors->has('name'))
                                                        <span class="help-block"><strong>{{ $errors->first('name') }}</strong></span>
                                                    @endif
                                                </div>
                                            </div>

                                        </div>
                                         <div class="row">
                                             <div class="col-md-6 col-sm-6">
                                                 <div class="form-group {{ $errors->has('re_visit_type') ? ' has-error' : '' }}">
                                                     <label class="text-semibold">Revisit Type</label>
                                                     <select class="select" name="re_visit_type" id="re_visit_type">
                                                         @foreach($revisit_types as $key=>$revisit_type)
                                                             <option value="{{$revisit_type->id}}" @if (old('re_visit_type') == $revisit_type->id || isset($area) && isset($area->area_revisit[0]['revisit_type_id']) && $area->area_revisit[0]['revisit_type_id']==$revisit_type->id) selected="selected" @endif
                                                             >{{$revisit_type->name}}
                                                             </option>
                                                         @endforeach
                                                     </select>
                                                     @if ($errors->has('re_visit_type'))
                                                         <span class="help-block"><strong>{{ $errors->first('re_visit_type') }}</strong></span>
                                                     @endif
                                                 </div>
                                             </div>
                                                 <div class="col-md-6 col-sm-6" id="fixed">
                                                     <div class="form-group {{ $errors->has('re_visit') ? ' has-error' : '' }}">
                                                         <label>Revisit</label>
                                                         <input type="number" min="0" name="re_visit" value="{{old('re_visit', @$area->area_revisit[0]['value'])}}" placeholder="Number" class="form-control">
                                                         @if ($errors->has('re_visit'))
                                                             <span class="help-block"><strong>{{ $errors->first('re_visit') }}</strong></span>
                                                         @endif
                                                     </div>
                                                 </div>
                                             <div class="col-md-6 col-sm-6" id="weekly">
                                                 <label>Select Days</label>
                                                 <div class="weekDays-selector form-group {{ $errors->has('week') ? ' has-error' : '' }}">
                                                     @php $week=[]; @endphp
                                                     @if(!empty($area) && isset($area->area_revisit[0]['revisit_type_id']) && $area->area_revisit[0]['revisit_type_id']==2 )
                                                         @foreach($area->area_revisit as $data)
                                                             @php $week[]=$data->value @endphp
                                                          @endforeach
                                                      @endif
                                                      <input type="checkbox" id="weekday-mon" name="week[mon]"   value="Monday" @if(in_array("Monday", $week)) checked @endif class="weekday" />
                                                      <label for="weekday-mon">M</label>
                                                      <input type="checkbox" id="weekday-tue" name="week[tue]"   value="Tuesday"  @if(in_array("Tuesday", $week)) checked @endif class="weekday" />
                                                      <label for="weekday-tue">T</label>
                                                      <input type="checkbox" id="weekday-wed" name="week[wed]"   value="Wednesday" @if(in_array("Wednesday", $week)) checked @endif  class="weekday" />
                                                      <label for="weekday-wed">W</label>
                                                      <input type="checkbox" id="weekday-thu" name="week[thu]"   value="Thursday" @if(in_array("Thursday", $week)) checked @endif  class="weekday" />
                                                      <label for="weekday-thu">T</label>
                                                      <input type="checkbox" id="weekday-fri" name="week[fri]"   value="Friday" @if(in_array("Friday", $week)) checked @endif class="weekday" />
                                                      <label for="weekday-fri">F</label>
                                                      <input type="checkbox" id="weekday-sat" name="week[sat]"   value="Saturday" @if(in_array("Saturday", $week)) checked @endif class="weekday" />
                                                      <label for="weekday-sat">S</label>
                                                      <input type="checkbox" id="weekday-sun" name="week[sun]"   value="Sunday" @if(in_array("Sunday", $week)) checked @endif class="weekday" />
                                                      <label for="weekday-sun">S</label>
                                                     @if ($errors->has('week'))
                                                         <span class="help-block"><strong>{{ $errors->first('week') }}</strong></span>
                                                     @endif
                                                  </div>
                                              </div>
                                              <div class="col-md-6 col-sm-6" style="display: none" id="month">
                                                  <div class="form-group {{ $errors->has('month_days') ? ' has-error' : '' }}">
                                                      <label>Select Dates</label>
                                                      @php
                                                          $month=[];
                                                          $month_days="";
                                                      @endphp
                                                      @if(!empty($area) && isset($area->area_revisit[0]['revisit_type_id']) && $area->area_revisit[0]['revisit_type_id']==3 )
                                                          @php $size=sizeof($area->area_revisit)@endphp
                                                          @foreach($area->area_revisit as $key=>$data)
                                                              @php $month[]=$data->value;
                                                              @endphp
                                                          @endforeach
                                                      @php
                                                          function date_sort($a, $b) {
                                                              return strtotime($a) - strtotime($b);
                                                            }

                                                         usort($month, "date_sort");
                                                      @endphp
                                                          @foreach($month as $key1=>$data)
                                                              @php $month_days.=$data;
                                                              if($size>0 && $key1!=$size-1)
                                                              $month_days.=',';
                                                              @endphp
                                                          @endforeach
                                                      @endif
                                                      <input class="form-control" name="month_days" value="{{old('month_days', @$month_days)}}" id="mdp-demo">
                                                      @if ($errors->has('month_days'))
                                                          <span class="help-block"><strong>{{ $errors->first('month_days') }}</strong></span>
                                                      @endif
                                                  </div>
                                              </div>
                                          </div>
                                          <div class="row">
                                              <div class="col-md-6 col-sm-6">
                                                  <div class="form-group {{ $errors->has('city') ? ' has-error' : '' }}">
                                                      <label>Area Sales Manager / Area Sales Executive / Sales Officers</label>
                                                      <select  class ="form-control selectpicker"  name="sales_officers[]" multiple>
                                                          @php ($i = 0)
                                                          @foreach($sales_officers as $sales_officer)
                                                          @if (empty($area))
                                                                  <option value="{{$sales_officer->id}}"
                                                                  >{{$sales_officer->firstname.' '.$sales_officer->lastname}}
                                                                  </option>
                                                              @else
                                                                  @if ((count($user_area))>0))
                                                                  <option {{$sales_officer->id == $user_area[$i]->user_id ? 'selected': ''}} value={{$sales_officer->id}}>
                                                                      {{$sales_officer->firstname.' '.$sales_officer->lastname}}
                                                                  </option>
                                                                                                                                        @else
                                                                      <option value="{{$sales_officer->id}}"
                                                                      >{{$sales_officer->firstname.' '.$sales_officer->lastname}}
                                                                      </option>
                                                                  @endif

                                                              @endif
                                                          @endforeach
                                                      </select>
                                                  </div>
                                              </div>
                                              <div class="col-md-6 col-sm-6" id="distributor">
                                                  <div class="form-group {{ $errors->has('distributor') ? ' has-error' : '' }}">
                                                      <label>Distributor</label>
                                                      <select class="select" name="distributor"  >
                                                          <option value=""
                                                          >Select Distributor
                                                          </option>
                                                          @foreach($distributors as $distributor)
                                                              <option value="{{$distributor->id}}" @if (old('distributor') == $distributor->id || isset($area) && $area->shop_id==$distributor->id) selected="selected" @endif
                                                              >{{$distributor->name}}
                                                              </option>
                                                          @endforeach
                                                      </select>
                                                      @if ($errors->has('distributor'))
                                                          <span class="help-block"><strong>{{ $errors->first('distributor') }}</strong></span>
                                                      @endif
                                                  </div>
                                              </div>
                                         </div>
                                         <div class="row input_fields_wrap2">
                                             <button type="button" class="btn bg-teal-400 btn-labeled btn-rounded add_field_button2"><b><i class="icon-stack2"></i></b> Add Sub Area</button>
                                             <br><br>
                                             @if(!empty($area))
                                                 @foreach($area->sub_areas->toarray() as $key2=>$value)
                                                     <div class="">
                                                         <div  class="col-md-4 col-sm-4">
                                                             <div class="form-group">
                                                                 <input type="hidden"  name="areas[{{$key2}}][id]" value="{{@$value['id']}}"class="form-control">
                                                                 <input type="text"  name="areas[{{$key2}}][area]" value="{{@$value['name']}}"class="form-control">
                                                             </div>
                                                         </div>
                                                         <div class="col-md-2 col-sm-2"><a href="#" class="remove_field2">Remove</a></div>
                                                     </div>
                                                 @endforeach
                                             @endif
                                             @if(!isset($key2) || empty($key2))
                                                                                              @endif
                                             <input type="hidden" id="package_item2" value="{{$key2}}">
                                         </div>
                                        <div class="row input_fields_wrap">
                                            <button type="button" class="btn bg-teal-400 btn-labeled btn-rounded add_field_button"><b><i class="icon-stack2"></i></b> Add Product Target</button>
                                            <br><br>
                                            @if(!empty($area))
                                                @if(count($area->products_target)>0)
                                                    <div class="col-md-12">
                                                        <div  class="col-md-3 col-sm-3">
                                                            <label>Products</label>
                                                        </div>
                                                        <div  class="col-md-3 col-sm-3">
                                                            <label>Grade</label>
                                                        </div>
                                                        <div  class="col-md-3 col-sm-3">
                                                            <label>Threshold</label>
                                                        </div>
                                                    </div>
                                                @endif
                                                @foreach($area->products_target->toarray() as $key3=>$value)
                                                    <div class="col-md-12">
                                                        <div  class="col-md-3 col-sm-3">
                                                            <div class="form-group">
                                                                <input type="hidden"  name="products[{{$key3}}][id]" value="{{@$value['id']}}"class="form-control">
                                                                <select class="select" name="products[{{$key3}}][product]" >
                                                                    @foreach($products as $item)
                                                                        <option @if ($value['product_id'] == $item->id) selected="selected" @endif value="{{$item->id}}"
                                                                        >{{$item->name}}
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div  class="col-md-3 col-sm-3">
                                                            <div class="form-group">
                                                                <select class="select" name="products[{{$key3}}][grade]" >
                                                                    @foreach($target_grades as $item)
                                                                        <option @if ($value['grade_id'] == $item->id) selected="selected" @endif value="{{$item->id}}"
                                                                        >{{$item->grade.' - '.$item->value}}
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div  class="col-md-3 col-sm-3">
                                                            <div class="form-group">
                                                                <input type="text" name="products[{{$key3}}][threshold]" value="{{old('threshold', @$value['threshold'])}}"class="form-control">
                                                            </div>
                                                        </div>
                                                        <div class="col-md-3 col-sm-3"><a href="#" class="remove_field">Remove</a></div>
                                                    </div>
                                                @endforeach
                                            @endif
                                            @if(!isset($key3) || empty($key3))
                                                                                            @endif
                                            <input type="hidden" id="package_item" value="{{$key3}}">
                                            <div id="new_item">
                                            </div>
                                        </div>
                                         <div class="text-right">
                                             @if(!empty($area)) {!! method_field('PUT') !!} @endif
                                             {{ csrf_field() }}
                                             <button type="submit" class="btn btn-primary">
                                                 @if(empty($area)) Save @else Update
                                                 @endif  <i class="icon-arrow-right14 position-right"></i></button>
                                         </div>
                                     </form>
                                 </div>
                             </div>
                             <!-- /Item Details -->


                         </div>
                     </div>
                     <!-- /tab content -->

                 </div>
             </div>
             <!-- /detached content -->
 @endsection

 @section('footer-content')
     <!-- Theme JS files -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>

     {{--<script type="text/javascript" src="{{asset('assets/js/core/libraries/jasny_bootstrap.min.js')}}"></script>--}}

     <script type="text/javascript" src="{{asset('assets/js/plugins/forms/selects/select2.min.js')}}"></script>

{{--     <script type="text/javascript" src="{{asset('assets/js/plugins/forms/styling/uniform.min.js')}}"></script>--}}

     {{--<script type="text/javascript" src="{{asset('assets/js/plugins/ui/moment/moment.min.js')}}"></script>--}}

     {{--<script type="text/javascript" src="{{asset('assets/js/plugins/ui/fullcalendar/fullcalendar.min.js')}}"></script>--}}
     {{--/ muliti date picker--}}

     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
     <script src="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.js"></script>


     <script type="text/javascript" src="{{asset('assets/js/pages/form_select2.js')}}"></script>
     <script type="text/javascript" src="{{asset('assets/js/plugins/visualization/echarts/echarts.js')}}"></script>



{{--     <script type="text/javascript" src="{{asset('assets/js/pages/user_profile_tabbed.js')}}"></script>--}}

     <!-- /theme JS files -->
     <script>
         $('.selectpicker').selectpicker({
             size: 4
         });
     </script>

     <script>
         $('#mdp-demo').multiDatesPicker({
             dateFormat: "dd-mm-yy"
         });
//         $('#mdp-demo').multiDatesPicker();
     </script>


     {{--Append Product--}}
     <script  type="text/javascript">
         $(document).ready(function() {
             var max_fields      = 40; //maximum input boxes allowed
             var wrapper         = $(".input_fields_wrap"); //Fields wrapper
             var add_button      = $(".add_field_button"); //Add button ID
 //            var package_item = $('#package_item').val()+1;
             var x = 1; //initlal text box count
             $(add_button).click(function(e){ //on add input button click
 //                var package_item = $('#package_item').val()+1;
                 $('#package_item').val( function(i, oldval) {
                     return parseInt( oldval, 10) + 1;
                 });
                 e.preventDefault();
                 $.ajax({
                     url: '{{url('/all-products-with-target/')}}',
                     type: 'GET',
                     contentType: 'application/json; charset=utf-8',
                     dataType: 'json',
                     success: function (result) {
                         if(result.products.length >0) {
                             var package_item = parseInt($('#package_item').val());
                             if(x < max_fields){ //max input box allowed
                                 x++; //text box increment
                                 $(wrapper).append('<div class="col-md-12"><div  class="col-md-3 col-sm-3"><div class="form-group"><select class="select sub_item'+ package_item +' form-control" name="products[' + package_item + '][product]" ></select></div></div><div  class="col-md-3 col-sm-3"><div class="form-group"><select class="select sub_item_category'+ package_item +' form-control" name="products[' + package_item + '][grade]" ></select></div></div>' +
                                         '<div  class="col-md-3 col-sm-3"><div class="form-group"> <input type="text" placeholder="Threshold" name="products[' + package_item + '][threshold]" class="form-control"></div></div><div class="col-md-3 col-sm-3"><a href="#" class="remove_field">Remove</a></div></div>'); //add input box
                             }
                         }
                         $('.sub_item'+package_item )
                                 .find('option')
                                 .remove()
                                 .end();
                         $(result.products).each(function (index, element) {

                             $('.sub_item'+package_item).append(
                                     $('<option >', {value: element.id} ) .text(element.name)
                             );
                         });
                         $('.sub_item_category'+package_item)
                                 .find('option')
                                 .remove()
                                 .end();
                         $(result.target_grade).each(function (index, element) {

                             $('.sub_item_category'+package_item).append(
                                     $('<option >', {value: element.id} ) .text(element.grade+' - '+element.value)
                             );
                         });
                     },
                     error: function () {
                     }
                 });
             });

             $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
                 e.preventDefault(); $(this).parent().parent('div').remove(); x--;
                 $('#package_item').val( function(i, oldval) {
                     return parseInt( oldval, 10)- 1;
                 });
             })
         });
     </script>
     <script>
         $(document).ready(function() {
             $('#re_visit_type').trigger("change");
         });
         $(document).ready(function() {
             $('#country').trigger("change");
         });
         $(document).on('change', '#re_visit_type', function() {
            var revisit_type=$("#re_visit_type").val();
             if(typeof revisit_type!='undefined' && revisit_type!=''){
                 if(revisit_type==1){
                     $("#fixed").show();
                     $("#weekly").hide();
                     $("#month").hide();
                 }else if(revisit_type==2){
                     $("#fixed").hide();
                     $("#weekly").show();
                     $("#month").hide();
                 }else if(revisit_type==3){
                     $("#fixed").hide();
                     $("#weekly").hide();
                     $("#month").show();
                 }
             }
         });
         $(document).on('change', '#country', function() {
             var ID=$(this).val();
             if(ID==1){
                 $('#distributor').show();
             }else{
                 $('#distributor').hide();
             }
             $('#region')
                     .find('option')
                     .remove()
                     .end();
             $('#region').attr('disabled', 'disabled');
             $('#city').attr('disabled', 'disabled');
             $.ajax({
                 url: '{{url('/country-regions/')}}/'+ID,
                 type: 'GET',
                 contentType: 'application/json; charset=utf-8',
                 dataType: 'json',
                 success: function (data) {
                     $inputValues = $("#old_region").val();
                     $(data).each(function (index, element) {
                         $('#region').removeAttr("disabled")
                         $('#region').append(
                                 $('<option >', {value: element.id} ) .text(element.name)
                         );
                         if (element.id == $inputValues) {
                             $("#region option[value='" + $inputValues + "']").prop("selected", "selected");
                         }
                     });
                     $('#region').trigger('change');
                 },
                 error: function () {
                 }
             });

         });
         $(document).on('change', '#region', function() {
             var ID=$(this).val();
             $('#city')
                     .find('option')
                     .remove()
                     .end();
             $.ajax({
                 url: '{{url('/region-cities/')}}/'+ID,
                 type: 'GET',
                 contentType: 'application/json; charset=utf-8',
                 dataType: 'json',
                 success: function (data) {
                     $inputValues2 = $("#old_city").val();
                     $(data).each(function (index, element) {
                         $('#city').removeAttr("disabled")
                         $('#city').append(
                                 $('<option >', {value: element.id} ) .text(element.name)
                         );
                         if (element.id == $inputValues2) {
                             $("#city option[value='" + $inputValues2 + "']").prop("selected", "selected");
                         }
                     });

                 },
                 error: function () {
                 }
             });

         });
     </script>
     {{--Append Sub Area--}}
     <script  type="text/javascript">
         $(document).ready(function() {
             var max_fields      = 40; //maximum input boxes allowed
             var wrapper         = $(".input_fields_wrap2"); //Fields wrapper
             var add_button      = $(".add_field_button2"); //Add button ID
             //            var package_item = $('#package_item').val()+1;
             var x = 1; //initlal text box count
             $(add_button).click(function(e){ //on add input button click
                 //                var package_item = $('#package_item').val()+1;
                 $('#package_item2').val( function(i, oldval) {
                     return parseInt( oldval, 10) + 1;
                 });
                 e.preventDefault();
                             var package_item = parseInt($('#package_item2').val());
                             if(x < max_fields){ //max input box allowed
                                 x++; //text box increment
                                 $(wrapper).append('<div class=""><div  class="col-md-4 col-sm-4"><div class="form-group"><input class="select sub_item'+ package_item +' form-control" name="areas[' + package_item + '][area]" placeholder="Sub Area Name"></div></div>' +
                                         '<div class="col-md-2 col-sm-2"><a href="#" class="remove_field">Remove</a></div></div>'); //add input box
                             }
             });
             $(wrapper).on("click",".remove_field2", function(e){ //user click on remove text
                 e.preventDefault(); $(this).parent().parent('div').remove(); x--;
                 $('#package_item2').val( function(i, oldval) {
                     return parseInt( oldval, 10)- 1;
                 });
             })
         });
     </script>



 @endsection