@extends('mainlayout.layout')


@section('title')
{{env('APP_NAME')}}

@endsection

@push('css')
<script src="{{url('/ckeditor/styles.css')}}"></script>
<script src="{{url('/ckeditor/ckeditor.js')}}"></script>
@endpush



@section('content')

<!-- start page title -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-flex align-items-center justify-content-between">
            <h4 class="mb-0 font-size-18">Add Project</h4>
        </div>
    </div>
</div>
<!-- end page title -->



<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-body">

                <form action="/property/store" enctype="multipart/form-data" method="POST">

                    @csrf



                    <!--fin_partner DETAILS -->
                    <h4 class="card-title mt-4 mb-2 text-uppercase"
                        style="background-color:#f8f8fb;padding:0.5em 0.25em;">Project Details</h4>
                    <div class="row">

                        <div class="col-lg-4">
                            <div class="form-group">
                                <label for="formrow-inputState">Project Name</label>
                                <input type="text" class="form-control" name="name" id="formrow-firstname-input"
                                    required="">
                            </div>
                        </div>

                        <div class="col-lg-4">
                            <div class="form-group">
                                <label for="formrow-inputState">Project Plot Id</label>
                                <input type="text" class="form-control" name="plotid" id="formrow-firstname-input"
                                    required="">
                            </div>
                        </div>



                        @role('superadmin')
                        <div class="col-lg-2">
                            <div class="form-group">
                                <label for="formrow-inputState">Project Owner</label>
                                <select id="formrow-inputState" class="form-control" name="propertyowner" required="">
                                    <option selected>Choose</option>

                                    @foreach($propertyowners as $propowner)
                                    <option value="{{$propowner->id}}">{{$propowner->name}}
                                    </option>
                                    @endforeach

                                </select>

                            </div>
                        </div>
                        @else
                        <input type="hidden" name="propertyowner" value="{{Auth::user()->propertyownerid}}">
                        @endrole

                        <!--    <div class="col-lg-2">
                            <div class="form-group">
                                <label for="formrow-inputState">Land Use</label>
                                <select id="formrow-inputState" class="form-control" name="landuse">
                                    <option selected>Choose</option>

                                    @foreach($landuses as $use)
                                    <option value="{{$use->id}}">{{$use->use_en}}
                                    </option>
                                    @endforeach

                                </select>

                            </div>
                        </div> -->

                    </div>


                    <div class="row">

                        <div class="col-lg-2">
                            <div class="form-group">
                                <label for="formrow-inputState">Region</label>
                                <select id="formrow-inputState" class="form-control region" name="region" required="">
                                    <option>Choose</option>

                                    @foreach($regions as $region)
                                    <option value="{{$region->id}}">{{$region->name}}</option>
                                    @endforeach
                                </select>

                            </div>
                        </div>

                        <div class="col-lg-2">
                            <div class="form-group">
                                <label for="formrow-inputState">District</label>
                                <select id="formrow-inputState " class="form-control districts" name="district"
                                    required="">
                                    <option>Choose</option>


                                </select>

                            </div>
                        </div>


                        <div class="col-lg-4">
                            <div class="form-group">
                                <label for="formrow-inputState">Block Id</label>

                                <input type="text" class="form-control" name="block_id" />

                            </div>
                        </div>


                        <div class="col-lg-4">
                            <div class="form-group">
                                <label for="formrow-inputState">Area In (SQM)</label>

                                <input type="text" class="form-control" name="area" required="" />

                            </div>
                        </div>

                    </div>


                    <div class="row">

                        <div class="col-lg-4">
                            <div class="form-group">
                                <label for="formrow-inputState">Project Tags <span class="muted">(separate with comma ,
                                        )</span></label>
                                <input type="text" name="tags" id="tags" placeholder="beacharea,marketarea"
                                    class="form-control" required="">

                            </div>
                        </div>

                        <div class="col-lg-4">
                            <div class="form-group">
                                <label for="formrow-inputState">Project Launch Date</label>
                                <input type="date" name="livedate" id="livedate" class="form-control" required="">


                            </div>
                        </div>


                        <div class="col-lg-4">
                            <div class="form-group">
                                <label for="formrow-inputState">Number Of Plots</label>

                                <input type="number" name="numberofplots" id="numberofplots" class="form-control"
                                    required="">

                            </div>
                        </div>


                        <!--     <div class="col-lg-4">
                            <div class="form-group">
                                <label for="formrow-inputState">Project Images</label>
                                <input type="file" class="form-control" multiple="multiple" name="projectimages[]" />


                            </div>
                        </div> -->





                    </div>

                    <!--      <div class="row">








                        <div class="col-lg-4">
                            <div class="form-group">
                                <label for="formrow-inputState">Terms and Conditions</label>

                                <textarea class="form-control" rows="9" cols="50" name="tc"></textarea>

                            </div>
                        </div> 
                    </div> -->

                    <div class="row">


                        <div class="col-md-6 col-xs-12 col-sm-12">
                            <div class="form-group">
                                <label for="formrow-inputState">Description (English)</label>


                                <textarea class="form-control" id="ckview" rows="30" cols="50"
                                    name="description"></textarea>

                            </div>
                        </div>

                        <div class="col-md-6 col-xs-12 col-sm-12">
                            <div class="form-group">
                                <label for="formrow-inputState">Description (Swahili)</label>


                                <textarea class="form-control" id="ckview1" rows="30" cols="50"
                                    name="description_sw"></textarea>

                            </div>
                        </div>
                    </div>


                    <div class="row">
                        <div class="col-lg-3">
                            <button href="#" class="mt-4 btn btn_blck w-md" style="width:100%;">Add Project</button>
                        </div>
                    </div>

                </form>

            </div>
        </div>
    </div>
</div>


@endsection



@push('scripts')

<!-- twitter-bootstrap-wizard js -->


<script src="{{ asset('/web/assets/libs/select2/js/select2.min.js')}}"></script>
<script src="{{ asset('/web/assets/js/pages/form-advanced.init.js')}}"></script>



<script>
    CKEDITOR.replace( 'ckview' );
    CKEDITOR.replace( 'ckview1' );

    $(document).ready(function(){


        $(".region").change(function(){
            let regionid=$(this).val();

            
            $.ajax({
  type: 'GET',
  url: '/locations/getdistricts/'+regionid,
  data: null,
  async: false,
  beforeSend: (xhr) => {
    if (xhr && xhr.overrideMimeType) {
      xhr.overrideMimeType('application/json;charset=utf-8');
    }
  },
  dataType: 'json',
  success: (data) => {
      $(".districts").html("<option> select </option>");
    $.each(data, function(index, value) { 
        

        $(".districts").append("<option value='"+value.id+"'> "+value.name+"</option>");

    
    });

}
});






        });


    });


</script>

@endpush