@extends('layouts.app')

@section('content')
<div class="card">
    <div class="card-body">
    <h4 class="card-title">Create Plot</h4>
    <h6 class="card-subtitle"></h6>
      <div class="x_content">
        <form id="demo-form2" action="{{ url('/admin/plots/create') }}" method="post" data-parsley-validate class="form-horizontal form-label-left">
          {{ csrf_field() }}
          <div class="form-group">
            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">Title <span class="required">*</span>
            </label>
            <div class="col-md-6 col-sm-6 col-xs-12">
              <input type="text" id="first-name" name="name" required="required" class="form-control col-md-7 col-xs-12" value="">
              @if ($errors->has('name'))
                  <span class="help-block">
                      <strong>{{ $errors->first('name') }}</strong>
                  </span>
              @endif
            </div>
          </div>
          <div class="form-group" id="project_id">
              <label class="control-label col-md-3 col-sm-3 col-xs-12" for="project_id">Project<span class="required">*</span></label>
              <div class="col-md-6 col-sm-6 col-xs-12">
              {!! Form::select('project_id', $projects, old('project_id'), ['class' => 'form-control col-md-7 col-xs-12']) !!}
              @if($errors->has('project_id'))
                  <span class="help-block error alert">
                      {{ $errors->first('project_id') }}
                  </span>
              @endif
            </div>
          </div>
          <div class="form-group" id="sector_id">
              <label class="control-label col-md-3 col-sm-3 col-xs-12" for="sector_id">Sector<span class="required">*</span></label>
              <div class="col-md-6 col-sm-6 col-xs-12">
              {!! Form::select('sector_id', [], old('sector_id'), ['class' => 'form-control col-md-7 col-xs-12', 'id'=>'select_sector']) !!}
              @if($errors->has('sector_id'))
                  <span class="help-block error alert">
                      {{ $errors->first('sector_id') }}
                  </span>
              @endif
            </div>
          </div>
          <div class="form-group" id="block_id">
              <label class="control-label col-md-3 col-sm-3 col-xs-12" for="block_id">Block<span class="required">*</span></label>
              <div class="col-md-6 col-sm-6 col-xs-12">
              {!! Form::select('block_id', [], old('block_id'), ['class' => 'form-control col-md-7 col-xs-12', 'id'=>'select_sector']) !!}
              @if($errors->has('block_id'))
                  <span class="help-block error alert">
                      {{ $errors->first('block_id') }}
                  </span>
              @endif
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="area">Area <span class="required">*</span>
            </label>
            <div class="col-md-6 col-sm-6 col-xs-12">
              <input type="text" id="area" name="area" required="required" class="form-control col-md-7 col-xs-12" value="">
              @if ($errors->has('area'))
                  <span class="help-block">
                      <strong>{{ $errors->first('area') }}</strong>
                  </span>
              @endif
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="dimension">Dimension <span class="required">*</span>
            </label>
            <div class="col-md-6 col-sm-6 col-xs-12">
              <input type="text" id="dimension" name="dimension" required="required" class="form-control col-md-7 col-xs-12" value="">
              @if ($errors->has('dimension'))
                  <span class="help-block">
                      <strong>{{ $errors->first('dimension') }}</strong>
                  </span>
              @endif
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="plot_count_start">Plot Count Start<span class="required">*</span>
            </label>
            <div class="col-md-6 col-sm-6 col-xs-12">
              <input type="number" id="plot_count_start" name="plot_count_start" required="required" class="form-control col-md-7 col-xs-12" value="1">
              @if ($errors->has('plot_count_start'))
                  <span class="help-block">
                      <strong>{{ $errors->first('plot_count_start') }}</strong>
                  </span>
              @endif
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="plot_count">Plot Count<span class="required">*</span>
            </label>
            <div class="col-md-6 col-sm-6 col-xs-12">
              <input type="number" id="plot_count" name="plot_count" required="required" class="form-control col-md-7 col-xs-12" value="1">
              @if ($errors->has('plot_count'))
                  <span class="help-block">
                      <strong>{{ $errors->first('plot_count') }}</strong>
                  </span>
              @endif
            </div>
          </div>
          <div class="ln_solid"></div>
          <div class="form-group">
            <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
              <button type="submit" class="btn btn-success">Submit</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
<div class="card">
  <div class="card-body">
    <h4 class="card-title">Plots</h4>
      <div class="x_content">
        <table id="datatable-fixed-header" class="table table-striped table-bordered">
          <thead>
            <tr>
              <th>Title</th>
              <th>Project</th>
              <th>Sector</th>
              <th>Block</th>
              <th>Area</th>
              <th>Dimension</th>
              <th>PLC</th>
              <th>Created at</th>
              <th>Status</th>
              <th>Action</th>
            </tr>
          </thead>


          <tbody>
          @foreach ($plots as $plot)
            <tr>
              <td>{{ $plot->name }}</td>
              <td>{{ $plot->projectName }}</td>
              <td>{{ $plot->sectorName }}</td>
              <td>{{ $plot->blockName }}</td>
              <td>{{ $plot->area }}</td>
              <td>{{ $plot->dimension }}</td>
              <td>{{ $plot->plcName }}</td>
              <td>{{ $plot->created_at }}</td>
              <td>
                @if($plot->status=='available')
                <form method="post" action="plots/plot_status_update/{{$plot->id}}" class="form-horizontal form-label-left">
                  @csrf
                  <select class="form-control col-md-7 col-xs-12" name="admin_status" onchange="this.form.submit()">
                    <option value="available" @if($plot->admin_status==NULL) selected="selected" @endif>Available</option>
                    <option value="onhold" @if($plot->admin_status=="onhold") selected="selected" @endif>On Hold</option>
                    <option value="registered" @if($plot->admin_status=="registered") selected="selected" @endif>Registered</option>
                  </select>
                </form>
                @else
                {{$plot->status}}
                @endif
              </td>
              <td>
                <a type="button" class="btn btn-success" href="{{ url('/admin/plots'.'/'.$plot->id) }}">Edit</a>
                <a type="button" class="btn btn-danger" href="{{ url('/admin/deleteplots'.'/'.$plot->id) }}">Delete</a>
              </td>
            </tr>
          @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>
@endsection
@section('javascript')
<script>
  jQuery(document).ready(function() {
   jQuery('#datatable-fixed-header').DataTable({
      fixedHeader: true,
      initComplete: function () {
        this.api()
            .columns()
            .every(function () {
                let column = this;
                console.log(column.selector.cols);
                if(column.selector.cols>0 && column.selector.cols<4){
                // Create select element
                let select = document.createElement('select');
                select.add(new Option(''));
                column.header().replaceChildren(select);
 
                // Apply listener for user change in value
                select.addEventListener('change', function () {
                    column
                        .search(select.value, {exact: true})
                        .draw();
                });
 
                // Add list of options
                column
                    .data()
                    .unique()
                    .sort()
                    .each(function (d, j) {
                        select.add(new Option(d));
                    });
                }
            });
      }
    });
  
  $("select[name='project_id']").change(function(){
      var project_id = $(this).val();
      var token = $("input[name='_token']").val();
      $.ajax({
          url: "<?php echo route('admin.select-ajax') ?>",
          method: 'POST',
          data: {project_id:project_id, _token:token},
          success: function(data) {
            $("select[name='sector_id'").html('');
            $("select[name='sector_id'").html(data.options);
          }
      });
  });
  $("select[name='sector_id']").change(function(){
      var sector_id = $(this).val();
      var token = $("input[name='_token']").val();
      $.ajax({
          url: "<?php echo route('admin.select-ajax') ?>",
          method: 'POST',
          data: {sector_id:sector_id, _token:token},
          success: function(data) {
            $("select[name='block_id'").html('');
            $("select[name='block_id'").html(data.options);
          }
      });
  });

  $("select[name='block_id']").change(function(){
      var block_id = $(this).val();
      var token = $("input[name='_token']").val();
      $.ajax({
          url: "<?php echo route('admin.data-ajax') ?>",
          method: 'POST',
          data: {block_id:block_id, _token:token},
          success: function(data) {
            $("input[name='area'").val(data.area);
            $("input[name='dimension'").val(data.dimension);
            $("input[name='plc'").val(data.plc);
            $("input[name=plot_count_start]").val(data.max_plot_cnt);
          }
      });
  });
  
  });
</script>
@endsection