@extends('layouts.admin')

@section('content')
<div class="container">
  <div class="content">
    <div class="card">
      <div class="card-header">
        <h6 class="card-title">@lang('keyword.create')@lang('keyword.merchant')</h6>
      </div>
      <div class="card-body">
        <form class="" action="{{ route('merchants.store')}}" method="post" enctype="multipart/form-data">
          @csrf
          @if ($errors->any())
              <div class="alert alert-danger">
                  <ul style="margin-bottom: 0px">
                      @foreach ($errors->all() as $error)
                          <li>{{ $error }}</li>
                      @endforeach
                  </ul>
              </div>
          @endif
          <div class="form-group row">
            <label class="col-form-label col-lg-2">@lang('keyword.name')</label>
            <div class="col-lg-10">
    						<input type="text" name="name"  value="{{ old('name') }}" class="form-control">
    				</div>
          </div>
          <div class="form-group row">
            <label class="col-form-label col-lg-2">@lang('keyword.email')</label>
            <div class="col-lg-10">
    						<input type="email" autocomplete="new-email" value="{{ old('email') }}" name="email" class="form-control">
    				</div>
          </div>
          <div class="form-group row">
            <label class="col-form-label col-lg-2">@lang('keyword.password')</label>
            <div class="col-lg-10">
    						<input type="password" autocomplete="new-password" name="password" class="form-control">
    				</div>
          </div>
          <div class="form-group row">
            <label class="col-form-label col-lg-2">@lang('keyword.brand_name')</label>
            <div class="col-lg-10">
    						<input type="text" name="brand_name" value="{{ old('brand_name') }}" class="form-control">
    				</div>
          </div>
          <div class="form-group row">
            <label class="col-form-label col-lg-2">@lang('keyword.brand_code')</label>
            <div class="col-lg-10">
    						<input type="text" name="code" placeholder="2-digits at least" value="{{ old('code') }}" class="form-control">
    				</div>
          </div>
          <div class="form-group row">
            <label class="col-form-label col-lg-2">@lang('keyword.address')</label>
            <div class="col-lg-10">
    						<input type="text" name="address" class="form-control" value="{{ old('address') }}" placeholder="#20, St. 123, Phum Domnak Ler">
    				</div>
          </div>
          <div class="form-group row">
            <label class="col-form-label col-lg-2">ខេត្ត/ក្រុង</label>
            <div class="col-lg-10">
              <select class="custom-select" id="province_selector" name="province">
                  <option value="">ខេត្ត/ក្រុង</option>
                  @foreach ($provinces as $province)
                    <option value="{{$province->pro_id}}">{{ $province->province }}</option>
                  @endforeach
              </select>
            </div>
          </div>
          <div class="form-group row">
            <label class="col-form-label col-lg-2">ស្រុក/ខណ្ឌ</label>
            <div class="col-lg-10">
              <select class="custom-select " name="district">
                <option value="">សូមជ្រើសរើសខេត្ត/ក្រុង</option>
              </select>
            </div>
          </div>
          <div class="form-group row">
            <label class="col-form-label col-lg-2">ឃុំ/សង្កាត់</label>
            <div class="col-lg-10">
              <select class="custom-select " name="commune">
                <option value="">សូមជ្រើសរើសស្រុក/ខណ្ឌ</option>
              </select>
            </div>
          </div>
          <div class="form-group row">
            <label class="col-form-label col-lg-2">@lang('keyword.primary_tel')</label>
            <div class="col-lg-10">
    						<input type="text" name="pri_phone_number" value="{{ old('pri_phone_number') }}" class="form-control">
    				</div>
          </div>
          <div class="form-group row">
            <label class="col-form-label col-lg-2">@lang('keyword.secondary_tel')</label>
            <div class="col-lg-10">
    						<input type="text" name="sec_phone_number" value="{{ old('sec_phone_number') }}" class="form-control">
    				</div>
          </div>
          <div class="form-group row">
              <label class="col-form-label col-lg-2">@lang('keyword.profile-picture')</label>
              <div class="col-lg-10">
                  <div class="custom-file "id="lfm" data-input="thumbnail">
                      <input type="file" id="thumbnail" name="image" style="border-radius:5px 0px 0px 5px !important;" class="form-control">
                  </div>
                  {{-- <img id="holder" style="margin-top:15px;max-height:100px;"> --}}
              </div>

          </div>
          <div class="row justify-content-between m-1">
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="custom_checkbox_stacked_unchecked" name="status" value="1" checked="">
      		    <label class="custom-control-label" for="custom_checkbox_stacked_unchecked">@lang('keyword.active')</label>
            </div>
            <div class="">
              <input type="submit" name="" class="btn btn-primary" value="@lang('keyword.create')">
            </div>
    			</div>

        </form>
      </div>

    </div>
  </div>
</div>
<script type="text/javascript">

$(document).ready(function(){
  $('#province_selector').on('change',function(){
    var pro_id = $(this).val();
    // console.log(pro_id);
    $.ajax({
      url: "{{route('location.getDistrict')}}",
      method: "post",
      dataType: 'JSON',
      dataSrc: 'data',
      data: {"pro_id": pro_id, "_token": "{{ csrf_token() }}"},
      success: function(data){
          $('select[name="district"]').html('');
          $.each(data.data,function(){
            $('select[name="district"]').append('<option value="'+ this.dis_id +'">'+ this.district +'</option>');
          })
        },
      error: function(){
        alert('Try again later!');
      }
    });
  });
  $('select[name="district"]').on('change',function(){
    var dis_id = $(this).val();
    $.ajax({
      url: "{{route('location.getCommune')}}",
      method: "post",
      dataType: 'JSON',
      dataSrc: 'data',
      data: {"dis_id": dis_id, "_token": "{{ csrf_token() }}"},
      success: function(data){
          $('select[name="commune"]').html('');
          $.each(data.data,function(){
            $('select[name="commune"]').append('<option value="'+ this.com_id +'">'+ this.commune +'</option>');
          })
        },
      error: function(){
        alert('Try again later!');
      }
    });
  });
});

</script>
@endsection