@extends('layouts.app', [
    'class' => '',
    'elementActive' => 'town-plan'
])

@section('content')
<div class="content">
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header">
          <h2> @if (isset($town_plan->id))Town Plan [Edit] #<strong title="ID">{{ $town_plan->id }}</strong> @else New Town Plan @endif</h2>
        </div>
        <div class="card-body">
          <form action="{{ isset($town_plan) ? route('admin.town-plan.update', $town_plan) : route('admin.town-plan.store') }}" method="POST" enctype="multipart/form-data">
            @isset($town_plan)
              @method('PUT')
            @endisset
            @csrf
            @if ($message = Session::get('success'))
              <div class="alert alert-success">
                <button type="button" class="close" data-dismiss="alert">×</button>
                <strong>{{ $message }}</strong>
              </div>
            @endif
    
            {{--@if ($errors->any())
              <div class="alert alert-danger">
                  <ul>
                      @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                      @endforeach
                  </ul>
              </div>
            @endif --}}
            <div class="form-group required {!! $errors->first('title', 'has-error') !!}">
                <label for="title" class="require">@lang('Title') <span class="text-danger"> * </span></label>
                    <input type="text" placeholder="" name="title" id="title" class="form-control" value="{{ old('title', isset($town_plan->title) ? $town_plan->title: '') }}" required="true">
                    {!! $errors->first('title', '<p class="help-block text-danger mt-1">:message</p>') !!}
            </div>            
            <div class="form-group required {!! $errors->first('state_or_region_id', 'has-error') !!}">
              <label for="state_or_region_id"> State or Regions <span class="text-danger"> * </span></label>
              <select class="form-control" id="state_or_region_id" name="state_or_region_id" required="true">
                <option value="">Please select one option</option>
                @foreach ($stateOrRegions as $stateOrRegion)
                    <option value="{{ $stateOrRegion->id }}" {{old('state_or_region_id', isset($town_plan) ? $town_plan->township->stateOrRegion->id : '') == $stateOrRegion->id ? 'selected' :  ''}}>{{ $stateOrRegion->name }}</option>
                @endforeach
              </select>
              {!! $errors->first('state_or_region_id', '<p class="help-block text-danger mt-1">:message</p>') !!}
            </div>
            <div class="form-group required {!! $errors->first('township_id', 'has-error') !!}">
              <label for="township_id"> Townships <span class="text-danger"> * </span></label>
              <select class="form-control" id="township_id" name="township_id" required="true">
                <option value="">Please select one option</option>
              </select>
              {!! $errors->first('township_id', '<p class="help-block text-danger mt-1">:message</p>') !!}
            </div>
            @if(isset($town_plan->id))
            <div class="form-group {!! $errors->first('attachement', 'has-error') !!}">
              <label for="town_plan">@lang('Attachement')</label>
              <input type="file" class="form-control file" id="town_plan" name="town_plan" >
                <p class="pt-2">
                  <a href="{{ asset($town_plan->getAttachementLink('town_plan')) }}" target="_blank"> {{ $town_plan->town_plan }} </a>
                </p>
              {!! $errors->first('town_plan', '<p class="help-block">:message</p>') !!}
            </div>
            @else
            <div class="form-group required {!! $errors->first('attachement', 'has-error') !!}">
              <label for="town_plan">@lang('Attachement') <span class="text-danger"> * </span></label>
              <input type="file" class="form-control file" id="town_plan" name="town_plan" >
              {!! $errors->first('town_plan', '<p class="help-block">:message</p>') !!}
            </div>
            @endif
            <div class="form-group">
              <button class="btn btn-primary" type="submit" name="btnSave" value="1">Save</button>
              <button class="btn btn-primary" type="submit" name="btnSaveClose" value="1">Save & Close</button>
              <a href="{{ route('admin.town-plan.index') }}" class="btn btn-flat">Cancel</a>
            </div>
          </form>

        </div>
      </div>
    </div>
  </div>
</div>
@stop

@push('scripts')
<script>
    $(function(){

      // on load
      fetch_township_by_region()

      $('body').on('change', '#state_or_region_id', function(e){
          fetch_township_by_region()
      });
    })

    // fetch township by region code
    function fetch_township_by_region(){
        let state_or_region_id = $('#state_or_region_id').val()
        $.ajax({
            headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: "/en/ajax/townships-by-region",
            type: 'post',
            dataType: 'json',
            data: { state_or_region_id :  state_or_region_id},
            success: function(result){
                $('#township_id').empty();
                $('#township_id').append('<option value=""> Please select one option </option>');
                let old_value =  '