<?php $__env->startSection('content'); ?>
<div class="card">
    <div class="card-body">
        <h3 class="card-title">Select Property</h3>
        <div class="row">
          <div class="col-md-3">
              <div class="form-group">
                  <label class="control-label" for="project_id">Project*</label>
                  <?php echo Form::select('project_id', $projects, [], ['class' => 'form-control form-control-normal',  'onchange' => '$("#customers-table").DataTable().draw()']); ?>

              </div>
          </div>
          <div class="col-md-3">
              <div class="form-group">
                  <label class="control-label" for="sector_id">Sector*</label>
                  <?php echo Form::select('sector_id', [], [], ['class' => 'form-control form-control-normal',  'onchange' => '$("#customers-table").DataTable().draw()']); ?>

              </div>
          </div>
          <div class="col-md-3">
              <div class="form-group">
                  <label class="control-label" for="block_id">Block*</label>
                  <?php echo Form::select('block_id', [], [], ['class' => 'form-control form-control-normal',  'onchange' => '$("#customers-table").DataTable().draw()']); ?>

              </div>
          </div>

        </div>
        <h4 class="card-title">Plot Avaibility Status</h4>
        <div class="row" style="margin:0 auto 30px auto;">
          <div class="col-4 col-lg-2"><div style="width:100%; height: 50px; padding: 5px; margin-left:5px; background-color:green; color:#fff;">Available</div></div>
          <div class="col-4 col-lg-2"><div style="width:100%; height: 50px; padding: 5px; margin-left:5px; background-color:grey; color:#fff;">On-Hold</div></div>
          <div class="col-4 col-lg-2"><div style="width:100%; height: 50px; padding: 5px; margin-left:5px; background-color:orange; color:#fff;">Booked</div></div>
          <div class="col-4 col-lg-2"><div style="width:100%; height: 50px; padding: 5px; margin-left:5px; background-color:pink; color:#fff;">Alloted</div></div>
          <div class="col-4 col-lg-2"><div style="width:100%; height: 50px; padding: 5px; margin-left:5px; background-color:red; color:#fff;">Registered</div></div>
        </div>
        <div class="row" id="plotStatus" style="margin: 0 auto;">
          Select project/sector/block
        </div>

    </div>
</div>
<!-- The Modal -->
<div class="modal fade" id="loadModalAjax" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: none;" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Deals</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>
<style type="text/css">
  div.hidden{
    display: none;
  }
  .tip {
  display: inline-block;
  cursor: pointer;
  padding: 5px;
  text-align: center;
}
.tip-content{
  width: 500px;
}
table.tip-content-t tr td{
  border:1px solid #fff;
  padding: 10px;
}
</style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('javascript'); ?>
    <script>
      $("select[name='project_id']").change(function(){
          var project_id = $(this).val();
          var token = $("input[name='_token']").val();
          $.ajax({
              url: "<?php echo route('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('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('project.plotStatus') ?>",
              method: 'POST',
              dataType:'html',
              data: {block_id:block_id, _token:token},
              success: function(data) {
                $("div#plotStatus").html('');
                $("div#plotStatus").html(data);
                  $("div#plotStatus div.tip").each(function () {
                      console.log('tooltip');
                      $(this).tooltip(
                      {
                          html: true,
                          title: $("#" + $(this).data("tip")).html()
                      });
                  });

              }
          });
      });
    </script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH G:\xampp\htdocs\yespropmart2.loc\resources\views/deals/plotStatus.blade.php ENDPATH**/ ?>