@extends('layouts.admin')

@section('content')
<div class="container">
  <div class="content">
    <div class="card">
      <div class="card-header">
        <h6 class="card-title">@lang('keyword.edit')@lang('keyword.merchant')</h6>
        @if ($errors->any())
          <div class="alert alert-danger">
              <ul>
                  @foreach ($errors->all() as $error)
                      <li>{{ $error }}</li>
                  @endforeach
              </ul>
          </div>
      @endif
      </div>
      <div class="card-body">
        <form class="" action="/admin/merchants/update/{{ $merchant->id }}" method="post" enctype="multipart/form-data">
          @csrf
          <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" class="form-control" value="{{ $merchant->name }}">
    				</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" name="email" class="form-control" value="{{ $merchant->email }}">
    				</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" class="form-control" value="{{ $merchant->brand_name }}">
    				</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" value="{{ $merchant->code }}" name="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="{{ $merchant->address }}">
    				</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">
                  @isset($merchantProvince)
                    <option value="{{$merchantProvince->pro_id}}">{{ $merchantProvince->province }}</option>
                  @endisset
                  @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">
                @isset($merchantDistrict)
                  <option value="{{$merchantDistrict->dis_id}}">{{ $merchantDistrict->district }}</option>
                @endisset
                @foreach ($allDistricts as $allDistrict)
                  <option value="{{$allDistrict->dis_id}}">{{ $allDistrict->district }}</option>
                @endforeach
                <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">
                @isset($merchantCommune)
                  <option value="{{$merchantCommune->com_id}}">{{ $merchantCommune->commune }}</option>
                @endisset
                @foreach ($allCommunes as $allCommune)
                  <option value="{{$allCommune->com_id}}">{{ $allCommune->commune }}</option>
                @endforeach
                <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="primary_tel" class="form-control" value="{{ $merchant->primary_tel }}">
    				</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="secondary_tel" class="form-control" value="{{ $merchant->secondary_tel }}">
    				</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" value="{{ $merchant->image }}">
                  </div>
                @if($merchant->picture)
                  <img id="holder" src="{{ asset('uploads') }}/{{$merchant->picture}}" style="margin-top:15px;max-height:100px;">
                @endif
                  {{-- <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" {{ $merchant->status == 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.edit')">
            </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