@extends('layouts.main')

@section('page-style')
	<link href="{{ env('STORAGE_URL_VIEW') }}{{('assets/global/plugins/select2/css/select2.min.css') }}" rel="stylesheet" type="text/css" />
	<link href="{{ env('STORAGE_URL_VIEW') }}{{('assets/global/plugins/select2/css/select2-bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
	<link href="{{ env('STORAGE_URL_VIEW') }}{{('assets/global/plugins/bootstrap-select/css/bootstrap-select.css') }}" rel="stylesheet" type="text/css" />
	<link href="{{ env('STORAGE_URL_VIEW') }}{{('assets/global/plugins/jquery-multi-select/css/multi-select.css') }}" rel="stylesheet" type="text/css" />
	<link href="{{ env('STORAGE_URL_VIEW') }}{{('assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.css') }}" rel="stylesheet" type="text/css" />
   <link href="{{ env('STORAGE_URL_VIEW') }}{{('assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css')}}" rel="stylesheet" type="text/css" />
@endsection
@section('page-plugin')
   <script src="{{ env('STORAGE_URL_VIEW') }}{{('assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js')}}" type="text/javascript"></script>
   <script src="{{ env('STORAGE_URL_VIEW') }}{{('assets/global/plugins/select2/js/select2.full.min.js') }}" type="text/javascript"></script>
   <script src="{{ env('STORAGE_URL_VIEW') }}{{('assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.js') }}" type="text/javascript"></script>
   <script src="{{ env('STORAGE_URL_VIEW') }}{{('assets/global/plugins/bootstrap-select/js/bootstrap-select.min.js') }}" type="text/javascript"></script>
   <script src="{{ env('STORAGE_URL_VIEW') }}{{('assets/global/plugins/jquery-multi-select/js/jquery.multi-select.js') }}" type="text/javascript"></script>
@endsection
@section('page-script')
   <script src="{{ env('STORAGE_URL_VIEW') }}{{('assets/pages/scripts/components-select2.min.js') }}" type="text/javascript"></script>
   <script src="{{ env('STORAGE_URL_VIEW') }}{{('assets/pages/scripts/components-multi-select.min.js') }}" type="text/javascript"></script>
   <script>
      let token = "{{ csrf_token() }}";
      $('#province').change(function() {
         $('#city').empty();
         $('#city').prop('disabled', true);

         var isi         = $('#province').val();

         $.ajax({
            type    : "POST",
            url     : "{{ url('cities') }}",
            data    : "_token="+token+"&id_province="+isi,
            success : function(result) {
               if (result['status'] == "success") {
                  $('#city').prop('disabled', false);
                  var city = result['result'];
                  var selectCity = '<option value=""></option>';
                  for (var i = 0; i < city.length; i++) {
                     selectCity += '<option value="'+city[i]['id_city']+'" >'+city[i]['city_name']+'</option>';
                  }
                  $('#city').html(selectCity);
               }
               else {
                  $('#city').prop('disabled', true);
               }
            }
         });
      });
   </script>
@endsection
@section('content')
   <div class="page-bar">
      <ul class="page-breadcrumb">
         <li>
               <a href="/">Home</a>
               <i class="fa fa-circle"></i>
         </li>
         <li>
               <span>{{ $title }}</span>
               @if (!empty($sub_title))
                  <i class="fa fa-circle"></i>
               @endif
         </li>
         @if (!empty($sub_title))
               <li>
                  <span>{{ $sub_title }}</span>
               </li>
         @endif
      </ul>
   </div>
   <br>
   <a href="{{ url('label/list') }}" class="btn green" style="margin-bottom: 2%;"><i class="fa fa-arrow-left"></i> Back</a>

   @include('layouts.notifications')
   <div class="portlet light bordered">
      <div class="portlet-title tabbable-line">
          <div class="caption">
              <span class="caption-subject bold uppercase font-blue">New Label</span>
          </div>
      </div>
      <div class="portlet-body">
         <form role="form" id="LabelStore" class="form-horizontal" action="{{ url('label/store') }}"  method="POST" enctype="multipart/form-data">
            <div class="form-group">
               <label for="multiple" class="control-label col-md-3">
                  Name
                  <span class="required" aria-required="true"> * </span>
               </label>
               <div class="col-md-6">
                  <input class="form-control" placeholder="Label name" name="name" required>
               </div>
            </div>
            <div class="form-group">
               <label for="multiple" class="control-label col-md-3">
                  Alias
                  <span class="required" aria-required="true"> * </span>
               </label>
               <div class="col-md-6">
                  <input class="form-control" placeholder="Alias Name" name="alias" required>
               </div>
            </div>
            <div class="form-group">
               <label for="multiple" class="control-label col-md-3">
                  Description
                  <span class="required" aria-required="true"> * </span>
               </label>
               <div class="col-md-6">
                  <input class="form-control" placeholder="Description" name="description" required>
               </div>
            </div>
            <div class="form-group">
               <label for="multiple" class="control-label col-md-3">
                  Phone
                  <span class="required" aria-required="true"> * </span>
               </label>
               <div class="col-md-6">
                  <input class="form-control" placeholder="Phone Number" name="phone" required>
               </div>
            </div>
            <div class="form-group">
               <label for="multiple" class="control-label col-md-3">
                  Email
                  <span class="required" aria-required="true"> * </span>
               </label>
               <div class="col-md-6">
                  <input class="form-control" placeholder="Active Email" name="email">
               </div>
            </div>
            
            <div class="form-group">
               <label for="multiple" class="control-label col-md-3">Address </label>
               <div class="col-md-6">
                   <textarea type="text" name="address" placeholder="Input your address here..." class="form-control"></textarea>
               </div>
           </div>

            <div class="form-group">
               <label class="col-md-3 control-label">
                   Image
               </label>
               <div class="col-md-8">
                   <div class="fileinput fileinput-new" data-provides="fileinput">
                       <div class="fileinput-new thumbnail" style="width: 200px; height: 200px;">
                           <img src="" alt="">
                       </div>
                       <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 200px;"></div>
                       <div>
                       <span class="btn default btn-file">
                       <span class="fileinput-new"> Select image </span>
                       <span class="fileinput-exists"> Change </span>
                       <input type="file" accept="image/*" class="file" name="image">
                       </span>
                           <a href="javascript:;" id="removeImage" class="btn red fileinput-exists" data-dismiss="fileinput"> Remove </a>
                       </div>
                   </div>
               </div>
           </div>

           <div class="form-group">
            <div class="input-icon right">
                <label class="col-md-3 control-label">
                Province
                <span class="required" aria-required="true"> * </span>
                </label>
            </div>
            <div class="col-md-9">
                <select name="id_province" id="province" class="form-control input-sm select2" placeholder="Search Province" data-placeholder="Choose Users Province" required>
                    <option value="">Select...</option>
                    @if(isset($province))
                        @foreach($province as $row)
                            <option value="{{$row['id_province']}}">{{$row['province_name']}}</option>
                        @endforeach
                    @endif
                     </select>
                  </div>
            </div>

            <div class="form-group">
                  <div class="input-icon right">
                     <label class="col-md-3 control-label">
                     City
                     <span class="required" aria-required="true"> * </span>
                     </label>
                  </div>
                  <div class="col-md-9">
                     <select name="id_city" id="city" class="form-control input-sm select2" placeholder="Search City" data-placeholder="Choose Users City" required>
                        <option value="">Select...</option>
                        @if(isset($city))
                              @foreach($city as $row)
                                 <option value="{{$row['id_city']}}">{{$row['city_name']}}</option>
                              @endforeach
                        @endif
                     </select>
                  </div>
            </div>
            
            <div class="form-group">
                  <label for="multiple" class="control-label col-md-3">Active </label>
                  <div class="col-md-6">
                     <input type="checkbox" value="1" name="is_active" class="make-switch switch-large switch-change" data-on-text="True" data-off-text="False" checked>
                  </div>
            </div>
            {{ csrf_field() }}
            <div class="row" style="text-align: center">
               <br>
               <br>
               <button class="btn green" type="submit">Save</button>
            </div>
         </form>
      </div>
   </div>

@endsection