Laravel Controller Fill Select Option

Controller :

<?php

namespace App\Http\Controllers;

use App\Models\Type;
use App\Models\User;
use App\Models\Block;
use App\Models\Project;
use App\Models\MktRumah;
use App\Models\Property;
use Illuminate\Support\Str;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use Spatie\Permission\Models\Role;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Gate;
use Spatie\Permission\Models\Permission;
use Illuminate\Support\Facades\Validator;

class PropertyController extends Controller
{
  public function index()
  {
    try {
      $project = Project::orderBy('created_at', 'desc')->get();

      $type = Type::select('*')->get();
      $block = Block::all();

      return view('content.projects.property-index', compact('project', 'type', 'block'));
    } catch (\Throwable $th) {
      if ($th->getmessage() == 'Attempt to read property "project_code" on null') {
        return redirect()
          ->route('project.create')
          ->with('warningPropertyNull', 'Buat minimal 1 Project terlebih dahulu');
      }
      return redirect()
        ->back()
        ->with('warningPropertyNull', $th->getmessage())
        ->withInput();
    }
  }

  public function fillSelectProjectId()
  {
    $dP['data'] = Project::orderBy('created_at', 'desc')->get();
    return response()->json($dP);
  }

  public function fillTblProperty(Request $request)
  {
    if (empty($request->input('search.value'))) {
      $query = Property::orderBy('created_at', 'asc');
    } else {
      $search = $request->input('search.value');
      $query = Property::where('property_id', 'like', "$search")->orderBy('created_at', 'asc');
    }

    $draw = $request->input('draw');
    $start = $request->input('start');
    $length = $request->input('length');

    $recordsTotal = $query->count(); //total records without filtering
    $recordsFiltered = $query->count(); //total records with filtering

    if ($length == -1) {
      $data = $query->get();
    } else {
      $data = $query
        ->skip($start)
        ->take($length)
        ->get();
    }

    $user = Auth::user();
    $permissions = $user->getAllPermissions();

    // Build the actions column HTML
    $actions = [];
    foreach ($data as $properties) {
      $properties->property_id = $properties->property_id;
      $properties->project_id = mb_substr($properties->property_id, 0, 3);
      $properties->project_name = $properties->projects->project_name;
      $properties->type_id = $properties->types->type_name;
      $properties->block = $properties->blocks->block_name;
      $properties->harga_awal = number_format($properties->harga_awal, 0, ',', '.');
      $properties->number = mb_substr($properties->property_id, 10, 3);
      $properties->release = $properties->release;

      if ($user->can('project-property-info')) {
        $canInfo = true;
      } else {
        $canInfo = true;
      }

      if ($user->can('project-property-edit')) {
        $canEdit = true;
      } else {
        $canEdit = false;
      }

      if ($user->can('project-property-delete')) {
        $canDelete = true;
      } else {
        $canDelete = false;
      }

      if ($user->can('project-property-release')) {
        $canRelease = true;
      } else {
        $canRelease = false;
      }

      $properties->canInfo = $canInfo;
      $properties->canEdit = $canEdit;
      $properties->canDelete = $canDelete;
      $properties->canRelease = $canRelease;

      $actions[] = $properties;
    }

    $response = [
      'draw' => (int) $draw,
      'recordsTotal' => $recordsTotal,
      'recordsFiltered' => $recordsFiltered,
      'data' => $data,
      'actions' => $actions, // include the actions column
    ];
    return response()->json($response);
  }

  public function create()
  {
    $project = Project::orderBy('created_at', 'asc')->get();
    $type = Type::select('*')->get();

    return view('property_create', compact('project', 'type'));
  }

  public function store(Request $request)
  {
    $validator = Validator::make($request->all(), [
      'project_id' => 'required|max:3|min:3',
      'type_id' => 'required|min:3|max:3',
      'block' => 'required|min:4|max:4',
      'nowal' => 'required|digits:3',
      'nohir' => 'required|digits:3',
    ]);

    if ($validator->fails()) {
      return response()->json([
        'success' => false,
        'message' => 'Ada data yang belum sesuai',
      ]);
    }

    $kodeProjectTypeBlock = $request->project_id . '' . $request->type_id . '' . $request->block;

    //check Nomor awal < nomor akhir
    if ($request->nowal > $request->nohir) {
      return response()->json([
        'success' => false,
        'message' => 'Nomor awal tidak bolah lebih besar',
      ]);
    }

    //check if exist
    $i = $request->nowal;
    do {
      $propertyID = $kodeProjectTypeBlock . '' . sprintf('%03s', $i);
      $isExistPropertyID = Property::where('property_id', $propertyID)->exists();
      if ($isExistPropertyID) {
        return response()->json([
          'success' => false,
          'message' => 'Property ini sudah ada',
        ]);
      }
      $i = $i + 1;
    } while ($i <= $request->nohir);

    //store
    try {
      $i = $request->nowal;
      do {
        $propertyID = $kodeProjectTypeBlock . '' . sprintf('%03s', $i);

        $userId = Auth::user()->user_id;

        Property::create([
          'property_id' => $propertyID,
          'property_id_ascender' => $propertyID,
          'project_id' => $request->project_id,
          'type_id' => $request->type_id,
          'block_id' => $request->block,
          'harga_awal' => str_replace('.', '', $request->hargaAwal),
          'luas_tanah' => $request->luasTanah,
          'arah_id' => $request->arah,
          'is_hadap_taman' => $request->is_hadap_taman,
          'user_id' => $userId,
        ]);

        $i = $i + 1;
      } while ($i <= $request->nohir);
    } catch (\Throwable $th) {
      return response()->json([
        'success' => false,
        'message' => $th->getMessage(),
      ]);
    }

    return response()->json([
      'success' => true,
      'message' => 'Data Property berhasil dibuat',
    ]);
  }

  public function fillBlock(Request $request)
  {
    if (!$request->project_id) {
      $html = '<option value="">please</option>';
    } else {
      $html = '<option value="all">* BLOK</option>';

      $property = Property::with('blocks')
        ->where('property_id', 'like', "$request->project_id%")
        ->orderBy('created_at', 'desc')
        ->get();

      foreach ($property as $properties) {
        $html .= '<option value="' . $properties->block_id . '">' . $properties->blocks->block_name . '</option>';
      }
    }

    return response()->json(['html' => $html]);
  }

  public function fillTableByProject(Request $request)
  {
    $project_id = $request->input('project_id');

    $request->session()->put('projectId', $project_id);

    if (empty($request->input('search.value'))) {
      if ($project_id == 'all') {
        $query = Property::orderBy('created_at', 'asc');
      } else {
        $query = Property::where('project_id', $project_id)->orderBy('created_at', 'asc');
      }
    } else {
      $search = $request->input('search.value');
      $query = Property::where('property_id', 'like', "$search")->orderBy('created_at', 'asc');
    }

    $draw = $request->input('draw');
    $start = $request->input('start');
    $length = $request->input('length');

    $recordsTotal = $query->count(); // total records without filtering
    $recordsFiltered = $query->count(); // total records with filtering

    if ($length == -1) {
      $data = $query->get();
    } else {
      $data = $query
        ->skip($start)
        ->take($length)
        ->get();
    }

    $user = Auth::user();
    $permissions = $user->getAllPermissions();

    // Build the actions column HTML
    $actions = [];
    foreach ($data as $properties) {
      $properties->property_id = $properties->property_id;
      $properties->project_id = mb_substr($properties->property_id, 0, 3);
      $properties->project_name = $properties->projects->project_name;
      $properties->type_id = $properties->types->type_name;
      $properties->block = $properties->blocks->block_name;
      $properties->harga_awal = number_format($properties->harga_awal, 0, ',', '.');
      $properties->number = mb_substr($properties->property_id, 10, 3);

      if ($user->can('project-property-info')) {
        $canInfo = true;
      } else {
        $canInfo = true;
      }

      if ($user->can('project-property-edit')) {
        $canEdit = true;
      } else {
        $canEdit = false;
      }

      if ($user->can('project-property-delete')) {
        $canDelete = true;
      } else {
        $canDelete = false;
      }
      if ($user->can('project-property-release')) {
        $canRelease = true;
      } else {
        $canRelease = false;
      }

      $properties->canInfo = $canInfo;
      $properties->canEdit = $canEdit;
      $properties->canDelete = $canDelete;
      $properties->canRelease = $canRelease;

      $actions[] = $properties;
    }

    $response = [
      'draw' => (int) $draw,
      'recordsTotal' => $recordsTotal,
      'recordsFiltered' => $recordsFiltered,
      'data' => $data,
      'actions' => $actions, // include the actions column
    ];

    return response()->json($response);
  }

  public function fillTableByBlock(Request $request)
  {
    $project_id = $request->input('project_id');
    $block = $request->input('block_id');

    if (empty($request->input('search.value'))) {
      if ($block == 'all') {
        $query = Property::where('property_id', 'like', "$project_id%")->orderBy('created_at', 'asc');
      } else {
        $query = Property::where('property_id', 'like', "$project_id%")
          ->where('block_id', 'like', "$block")
          ->orderBy('created_at', 'asc');
      }
    } else {
      $search = $request->input('search.value');
      $query = Property::where('property_id', 'like', "$search")->orderBy('created_at', 'asc');
    }

    $draw = $request->input('draw');
    $start = $request->input('start');
    $length = $request->input('length');

    $recordsTotal = $query->count(); // total records without filtering
    $recordsFiltered = $query->count(); // total records with filtering

    if ($length == -1) {
      $data = $query->get();
    } else {
      $data = $query
        ->skip($start)
        ->take($length)
        ->get();
    }

    $user = Auth::user();
    $permissions = $user->getAllPermissions();

    // Build the actions column HTML
    $actions = [];
    foreach ($data as $properties) {
      $properties->property_id = $properties->property_id;
      $properties->project_id = mb_substr($properties->property_id, 0, 3);
      $properties->project_name = $properties->projects->project_name;
      $properties->type_name = $properties->types->type_name;
      $properties->block_name = $properties->blocks->block_name;
      $properties->harga_awal = number_format($properties->harga_awal, 0, ',', '.');
      $properties->number = mb_substr($properties->property_id, 10, 3);

      if ($user->can('project-property-info')) {
        $canInfo = true;
      } else {
        $canInfo = false;
      }

      if ($user->can('project-property-edit')) {
        $canEdit = true;
      } else {
        $canEdit = false;
      }

      if ($user->can('project-property-delete')) {
        $canDelete = true;
      } else {
        $canDelete = false;
      }
      if ($user->can('project-property-release')) {
        $canRelease = true;
      } else {
        $canRelease = false;
      }

      $properties->canInfo = $canInfo;
      $properties->canEdit = $canEdit;
      $properties->canDelete = $canDelete;
      $properties->canRelease = $canRelease;

      $actions[] = $properties;
    }

    $response = [
      'draw' => (int) $draw,
      'recordsTotal' => $recordsTotal,
      'recordsFiltered' => $recordsFiltered,
      'data' => $data,
      //'actions' => $actions, // include the actions column
    ];

    return response()->json($response);
  }

  public function info(Request $request, $property_id)
  {
    $request->session()->put('propertyId', $property_id);

    $property = Property::with(
      'projects:project_id,project_name',
      'types:type_id,type_name',
      'blocks:block_id,block_name',
      'arahs:arah_id,arah_name'
    )->find($property_id);

    $propertyId = $property->property_id;
    $projectId = $property->project_id;
    $projectName = $property->projects->project_name;
    $typeId = $property->type_id;
    $typeName = $property->types->type_name;
    $blockId = $property->block_id;
    $blockName = $property->blocks->block_name;
    $number = substr($property->property_id, 10, 3);
    if ($property->arah_id == null) {
      $arah = '';
      $arahName = 'Belum di Set';
    } else {
      $arah = $property->arah_id;
      $arahName = $property->arahs->arah_name;
    }

    if ($property->is_hook == 0) {
      $hook = 'Tidak';
    } else {
      $hook = 'Ya';
    }
    if ($property->is_hadap_taman == 0) {
      $hadapTaman = 'Tidak';
    } else {
      $hadapTaman = 'Ya';
    }

    $luasTanah = $property->luas_tanah ? $property->luas_tanah : '';
    $luasKelebihanTanah = $property->luas_kt ? $property->luas_kt : '';
    $createdAt = $property->created_at;
    $updatedAt = $property->updated_at;

    $data = [
      'property_id' => $propertyId,
      'project_id' => $projectId,
      'project_name' => $projectName,
      'type_id' => $typeId,
      'type_name' => $typeName,
      'block_id' => $blockId,
      'block_name' => $blockName,
      'number' => $number,
      'arah_id' => $arah,
      'arah_name' => $arahName,
      'is_hook' => $hook,
      'is_hadap_taman' => $hadapTaman,
      'luas_tanah' => $luasTanah,
      'luas_kt' => $luasKelebihanTanah,
      'created_at' => $createdAt,
      'updated_at' => $updatedAt,
    ];

    return $data;
  }

  public function edit(Request $request, $property_id)
  {
    $request->session()->put('propertyId', $property_id);

    $property = Property::find($property_id);

    $propertyId = $property->property_id;
    $projectId = $property->project_id;
    $typeId = $property->type_id;
    $block = $property->block_id;
    $number = substr($property->property_id, 10, 3);
    $arah = $property->arah_id;
    $hook = $property->is_hook;
    $hadapTaman = $property->is_hadap_taman;
    $luasTanah = $property->luas_tanah;
    $luasKelebihanTanah = $property->luas_kt;

    $data = [
      'property_id' => $propertyId,
      'project_id' => $projectId,
      'type_id' => $typeId,
      'block' => $block,
      'number' => $number,
      'arah_id' => $arah,
      'is_hook' => $hook,
      'is_hadap_taman' => $hadapTaman,
      'luas_tanah' => $luasTanah,
      'luas_kt' => $luasKelebihanTanah,
    ];

    return $data;
  }

  public function update(Request $request, $property_id)
  {
    $validator = Validator::make($request->all(), [
      'number' => 'required|max:3|min:3',
    ]);

    if ($validator->fails()) {
      return response()->json([
        'success' => false,
        'message' => 'Gagal mengubah, data belum sesuai',
      ]);
    }

    // $isHasCustomer = MktRumah::where('property_id', $property_id)->exists();
    // if ($isHasCustomer) {
    //   return response()->json([
    //     'success' => false,
    //     'message' => 'Property ini memiliki customer',
    //   ]);
    // }

    if ($property_id != $request->property_id) {
      $isExistPropertyId = Property::where('property_id', $request->property_id)->exists();
      if ($isExistPropertyId) {
        return response()->json([
          'success' => false,
          'message' => 'Gagal mengubah data, property ini sudah ada',
        ]);
      }

      try {
        $property = Property::find($property_id);
        $property->update([
          'property_id' => $request->property_id,
          'arah_id' => $request->arah_id,
          'is_hook' => $request->is_hook,
          'is_hadap_taman' => $request->is_hadap_taman,
          'luas_tanah' => $request->luas_tanah,
          'luas_kt' => $request->luas_kt,
        ]);

        return response()->json([
          'success' => true,
          'message' => 'Data Berhasil Diupdate',
        ]);
      } catch (\Throwable $th) {
        return response()->json([
          'success' => false,
          'message' => $th->getMessage(),
        ]);
      }
    }

    try {
      $property = Property::find($property_id);
      $property->update([
        'arah_id' => $request->arah_id,
        'is_hook' => $request->is_hook,
        'is_hadap_taman' => $request->is_hadap_taman,
        'luas_tanah' => $request->luas_tanah,
        'luas_kt' => $request->luas_kt,
      ]);

      return response()->json([
        'success' => true,
        'message' => 'Data Berhasil Diupdate',
      ]);
    } catch (\Throwable $th) {
      return response()->json([
        'success' => false,
        'message' => $th->getMessage(),
      ]);
    }
  }

  public function release(Request $request, $property_id)
  {
    try {
      $property = Property::find($property_id);
      $property->update([
        'release' => 1,
      ]);

      return response()->json([
        'success' => true,
        'message' => 'Data Berhasil di Release',
      ]);
    } catch (\Throwable $th) {
      return response()->json([
        'success' => false,
        'message' => $th->getMessage(),
      ]);
    }
  }

  public function delete($property_id)
  {
    $isHasCustomer = MktRumah::where('property_id', $property_id)->exists();
    if ($isHasCustomer) {
      return response()->json([
        'success' => false,
        'message' => 'Property ini memiliki customer',
      ]);
    }
    try {
      $property = Property::find($property_id)->delete();
      return response()->json([
        'success' => true,
        'message' => 'Data berhasil di hapus',
      ]);
    } catch (\Throwable $th) {
      return response()->json([
        'success' => false,
        'message' => $th->getMessage(),
      ]);
    }
  }
}

 

Blade :

@php
// phpinfo();die();
$configData = Helper::appClasses();
@endphp

@extends('layouts/layoutMaster')

{{-- @extends('layouts/contentNavbarLayout') --}}

@section('vendor-style')
<link rel="stylesheet" href="/{{asset('assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css')}}">
<link rel="stylesheet" href="/{{asset('assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css')}}">
{{-- <link rel="stylesheet" href="/{{asset('assets/vendor/libs/datatables-checkboxes-jquery/datatables.checkboxes.css')}}"> --}}
<link rel="stylesheet" href="/{{asset('assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css')}}">
<link rel="stylesheet" href="/{{asset('assets/vendor/libs/flatpickr/flatpickr.css')}}" />
<!-- Row Group CSS -->
{{-- <link rel="stylesheet" href="/{{asset('assets/vendor/libs/datatables-rowgroup-bs5/rowgroup.bootstrap5.css')}}"> --}}
<!-- Form Validation -->
{{-- <link rel="stylesheet" href="/{{asset('assets/vendor/libs/@form-validation/umd/styles/index.min.css')}}" /> --}}

<link rel="stylesheet" href="/{{asset('assets/vendor/libs/sweetalert2/sweetalert2.css')}}" />
<link rel="stylesheet" href="/{{asset('assets/vendor/libs/toastr/toastr.css')}}" />
@endsection

@section('vendor-script')
<script src="/{{asset('assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js')}}"></script>
<!-- Flat Picker -->
{{-- <script src="/{{asset('assets/vendor/libs/moment/moment.js')}}"></script> --}}
<script src="/{{asset('assets/vendor/libs/flatpickr/flatpickr.js')}}"></script>
<!-- Form Validation -->
{{-- <script src="/{{asset('assets/vendor/libs/@form-validation/umd/bundle/popular.min.js')}}"></script> --}}
<script src="/{{asset('assets/vendor/libs/@form-validation/umd/plugin-bootstrap5/index.min.js')}}"></script>
{{-- <script src="/{{asset('assets/vendor/libs/@form-validation/umd/plugin-auto-focus/index.min.js')}}"></script> --}}
<script src="/{{asset('assets/vendor/libs/toastr/toastr.js')}}"></script>
<script src="/{{asset('assets/vendor/libs/sweetalert2/sweetalert2.js')}}"></script>
{{-- <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script> --}}




@endsection

@section('page-script')
<script src="/{{asset('assets/js/tables-datatables-basic.js')}}"></script>
<script src="/{{asset('assets/js/ui-toasts.js')}}"></script>
  @include('content.projects.property-ajax');
@endsection

@section('title', 'Property')

@section('content')

<!-- Basic Bootstrap Table -->
<div class="py-5 px-3">
    <div class="container">
        <div class="mb-5">
            <div class="row">
                <div class="col-lg-4">
                    <div class="pageTitle">
                      <span>@yield('title')</span>
                    </div>
                </div>
                <div class="col-lg-8 text-end">
                    <button id="btnCopy" value="copy" type="button" class="btn btn-sm btn-outline-primary mb-2 me-2">
                    <span class="tf-icons ti ti-copy"></span>&nbsp;&nbsp;Copy
                    <button id="btnCsv" value="csv" type="button" class="btn btn-sm btn-outline-primary mb-2 me-2">
                    <span class="tf-icons ti ti-menu"></span>&nbsp;&nbsp;Excel
                    <button id="btnPrint" value="print" type="button" class="btn btn-sm btn-primary mb-2 me-2">
                    <span class="tf-icons ti ti-printer"></span>&nbsp;&nbsp;Print
                    @can('project-property-create')
                    <button id="btnPropertyCreate" type="button" class="btn btn-sm btn-primary mb-2 me-2">
                    <span class="tf-icons ti ti-circle-plus"></span>&nbsp;&nbsp;Tambah Property
                    @endcan
                </div>
                <!-- <div class="col-lg-8 text-end">
                  @can('project-property-create')
                      <button id="btnPropertyCreate" type="button" class="btn btn-sm btn-primary">
                      <span class="tf-icons ti ti-circle-plus"></span>&nbsp;&nbsp;Tambah Property
                  @endcan
                </div> -->
            </div>
        </div>

        <div class="row mb-5">
            <div class="col-md-6 mb-3">
                <div class="row">
                    <div class="input-group">
                        <span class="input-group-text bg-primary"><i class="text-white ti ti-paint"></i></span>
                        <select id="selectProject" class="form-select col" aria-label="Default select example">
                        <option value="all" selected>* PROYEK</option>
                        </select>
                    </div>
                </div>
                <div class="" style="display:none;">
                  <button id="btnFillProjectId" type="button" class="btn btn-primary" style="display:none;" hidden>Fill</button>
                </div>
            </div>
            <div class="col-md-6">
                <div class="row">
                    <div class="input-group">
                        <span class="input-group-text bg-primary"><i class="text-white ti ti-box"></i></span>
                        <select id="selectBlock" class="form-select col" aria-label="Default select example">
                        <option value="all">* BLOK</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="table-responsive text-nowrap">
            <table id="tableProperty" class="table table-hover mb-3 dt-print-table nowrap table-striped">
                <tbody></tbody>
            </table>
        </div>

        <!-- Modal Create Property-->
        <div class="col-lg-4 col-md-6">
            <div class="modal fade" id="modalPropertyCreate" data-bs-backdrop="static" tabindex="-1" aria-labelledby="modalPropertyCreate" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel1">Buat Property Baru</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body p-5">
                            <div class="col mb-3">
                                <label for="group" class="form-label">Nama Proyek *</label>
                                <select class="form-select" id="selectProjectPropertyCreate" name="selectProjectPropertyCreate" aria-label="Default select example">
                                    <option value="">----</option>
                                    @foreach ($project as $projects)
                                        <option value="{{ $projects->project_id}}" {{ old('selectProjectPropertyCreate') == $projects->project_id ? 'selected' : '' }}>{{ $projects->project_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="row mb-3">
                                <div class="col-lg-6 mb-3">
                                    <label for="group" class="form-label">Type *</label>
                                    <select class="form-select" id="selectTypePropertyCreate" name="selectTypePropertyCreate" aria-label="Default select example">
                                        <option value="">----</option>
                                        @foreach ($type as $types)
                                            <option value="{{ $types->type_id}}" {{ old('selectTypePropertyCreate') == $types->type_id ? 'selected' : '' }}>{{ $types->type_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-6">
                                    <label for="group" class="form-label">Blok *</label>
                                    <select class="form-select" id="selectBlockPropertyCreate" name="selectBlockPropertyCreate" aria-label="Default select example">
                                        <option value="">----</option>
                                        @foreach ($block as $blocks)
                                            <option value="{{ $blocks->block_id}}" {{ old('selectBlockPropertyCreate') == $blocks->block_id ? 'selected' : '' }}>{{ $blocks->block_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="form-group col-lg-6 mb-3">
                                    <label for="project_code" class="form-label">Nomor Awal *</label>
                                    <input type="text" size="10" class="form-control" id="inputNowalPropertyCreate" name="inputNowalPropertyCreate" value="{{ old('inputNowalPropertyCreate') }}" placeholder="3 digit (cth: 001)" required>
                                </div>
                                <div class="form-group col-lg-6 mb-3">
                                    <label for="project_code" class="form-label">Nomor Akir *</label>
                                    <input type="text" size="10" class="form-control" id="inputNohirPropertyCreate" name="inputNohirPropertyCreate" value="{{ old('inputNohirPropertyCreate') }}" placeholder="3 digit (cth: 010)" required>
                                </div>
                            </div>
                            <div class="row mb-5">
                                <div class="col-lg-6 mb-3">
                                    <label for="nameBasic" class="form-label">Luas Tanah</label>
                                    <div class="input-group">
                                        <input type="text" id="inputLuasTanahPropertyCreate" name="inputLuasTanahPropertyCreate" class="form-control" placeholder="cth: 160" value="{{ old('inputLuasTanahPropertyCreate') }}">
                                        <span class="input-group-text">M</span>
                                    </div >
                                </div>
                                <div class="form-group col-lg-6">
                                    <label for="project_code" class="form-label">Harga Awal</label>
                                    <div class="input-group">
                                        <span class="input-group-text">Rp</span>
                                        <input type="text" size="10" class="form-control" id="inputHargaAwalPropertyCreate" name="inputHargaAwalPropertyCreate" value="{{ old('inputHargaAwalPropertyCreate') }}" onkeydown="return numbersonly(this, event);" onkeyup="javascript:tandaPemisahTitik(this);" placeholder="cth: 250.000.000" required>
                                    </div>
                                </div>
                            </div>

                            <div class="row mb-5">
                                <div class="col-lg-6 mb-3">
                                    <label for="nameBasic" class="form-label">Arah</label>
                                    <select id="selectArahPropertyCreate" name="selectArahPropertyCreate" class="form-select" aria-label="Default select example" value="{{ old('selectArahPropertyCreate') }}">
                                        <option value="0" @selected(old('selectArahPropertyCreate') == 0)>----</option>
                                        <option value="1" @selected(old('selectArahPropertyCreate') == 1)>Timur</option>
                                        <option value="2" @selected(old('selectArahPropertyCreate') == 2)>Tenggara</option>
                                        <option value="3" @selected(old('selectArahPropertyCreate') == 3)>Selatan</option>
                                        <option value="3" @selected(old('selectArahPropertyCreate') == 4)>Barat Daya</option>
                                        <option value="3" @selected(old('selectArahPropertyCreate') == 5)>Barat</option>
                                        <option value="3" @selected(old('selectArahPropertyCreate') == 6)>Barat Laut</option>
                                        <option value="3" @selected(old('selectArahPropertyCreate') == 7)>Utara</option>
                                        <option value="3" @selected(old('selectArahPropertyCreate') == 8)>Timur Laut</option>
                                    </select>
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label for="nameBasic" class="form-label">Hadap Taman</label>
                                    <select id="selectIsHadapTamanPropertyCreate" name="selectIsHadapTamanPropertyCreate" class="form-select" aria-label="Default select example" value="{{ old('selectHadapTamanPropertyInfo') }}">
                                        <option value="0" @selected(old('selectIsHadapTamanPropertyCreate') == 0)>----</option>
                                        <option value="1" @selected(old('selectIsHadapTamanPropertyCreate') == 1)>Ya</option>
                                        <option value="2" @selected(old('selectIsHadapTamanPropertyCreate') == 2)>Tidak</option>
                                    </select>
                                </div>
                            </div>


                            <div class="float-end">
                            <button id="btnSimpanPropertyCreate" type="button" class="btn btn-sm btn-primary">Simpan</button>
                            </div>
                        </div class="modal-body">
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal Create Property End-->

        <!-- Modal Info -->
            <div class="col-lg-4 col-md-6 p-5">
            <div class="modal fade" id="modalPropertyInfo" data-bs-backdrop="static" tabindex="-1" aria-labelledby="modalPropertyInfo" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel1">Info Property</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>


                        <div class="table-responsive p-3">
                            <table class="table table-hover table-border table-striped text-nowrap tableModal">
                            <tr>
                                <td>ID Property</td>
                                <td><span id="spnPropertyId" class="text-muted"></span></td>
                              </tr>
                              <tr>
                                <td>Nama Proyek</td>
                                <td><span id="spnProject" class="text-muted"></span></td>
                              </tr>
                              <tr>
                                <td>Type</td>
                                <td><span id="spnType" class="text-muted"></span></td>
                              </tr>
                              <tr>
                                <td>Blok</td>
                                <td><span id="spnBlock" class="text-muted"></span></td>
                              </tr>
                              <tr>
                                <td>Nomor</td>
                                <td><span id="spnNomor" class="text-muted"></span></td>
                              </tr>
                              <tr>
                                <td>Arah</td>
                                <td><span id="spnArah" class="text-muted"></span></td>
                              </tr>
                              <tr>
                                <td>Hook</td>
                                <td><span id="spnHook" class="text-muted"></span></td>
                              </tr>
                              <tr>
                                <td>Hadap Taman ?</td>
                                <td><span id="spnHadapTaman" class="text-muted"></span></td>
                              </tr>
                              <tr>
                                <td>Luas Tanah</td>
                                <td><span id="spnLuasTanah" class="text-muted"></span> (M)</td>
                              </tr>
                              <tr>
                                <td>Luas Kelebihan Tanah</td>
                                <td><span id="spnLuasKelebihanTanah" class="text-muted"></span> (M)</td>
                              </tr>
                              <tr>
                                <td>Dibuat</td>
                                <td><span id="spnCreatedAt" class="text-muted"></span></td>
                              </tr>
                              <tr>
                                <td>Diupdate</td>
                                <td><span id="spnUpdatedAt" class="text-muted"></span></td>
                              </tr>
                            </table>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <!-- Modal Info End-->

        <!-- modalEdit -->
        <div class="col-lg-4 col-md-6">
            <div class="modal fade" id="modalPropertyEdit" data-bs-backdrop="static" tabindex="-1" aria-labelledby="modalPropertyEdit" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel1">Edit Property</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <form id="formPropertyEdit" action="" method="post">
                            @csrf
                            @method('put')
                                <div class="modal-body p-5">
                                    <div class="col mb-3">
                                        <input type="text" id="inputOldPropertyIdPropertyEdit" name="inputOldPropertyIdPropertyEdit" class="form-control" style="text-transform:uppercase" value="{{ old('inputOldPropertyIdPropertyEdit') }}" hidden>
                                    </div>
                                    <div class="row mb-5">
                                        <div class="col-lg-6 mb-3">
                                            <label for="nameBasic" class="form-label">ID Proyek *</label>
                                            <input type="text" id="inputProjectIdPropertyEdit" name="inputProjectIdPropertyEdit" class="form-control" style="text-transform:uppercase" value="{{ old('inputProjectIdPropertyEdit') }}" readonly>
                                        </div>
                                        <div class="col-lg-6 mb-3">
                                            <label for="nameBasic" class="form-label">ID Type * </label>
                                            <input type="text" id="inputTypeIdPropertyEdit" name="inputTypeIdPropertyEdit" class="form-control" style="text-transform:uppercase" value="{{ old('inputTypeIdPropertyEdit') }}" readonly>
                                        </div>
                                        <div class="col-lg-6 mb-3">
                                            <label for="nameBasic" class="form-label">Blok*</label>
                                            <input type="text" id="inputBlockPropertyEdit" name="inputBlockPropertyEdit" class="form-control" style="text-transform:uppercase" value="{{ old('inputBlockPropertyEdit') }}" readonly>
                                        </div>
                                        <div class="col-lg-6 mb-3">
                                            <label for="nameBasic" class="form-label">Nomor *</label>
                                            <input type="text" id="inputNumberPropertyEdit" name="inputNumberPropertyEdit" class="form-control" style="text-transform:uppercase" value="{{ old('inputNumberPropertyEdit') }}" required>
                                        </div>
                                    </div>
                                    <div class="row mb-5">
                                        <div class="col-lg-4 mb-3">
                                            <label for="nameBasic" class="form-label">Arah</label>
                                            <select id="selectArahPropertyEdit" name="selectArahPropertyEdit" class="form-select" aria-label="Default select example" value="{{ old('selectArahPropertyEdit') }}">
                                                <option value="0" @selected(old('selectArahPropertyCreate') == 0)>----</option>
                                                <option value="1" @selected(old('selectArahPropertyCreate') == 1)>Timur</option>
                                                <option value="2" @selected(old('selectArahPropertyCreate') == 2)>Tenggara</option>
                                                <option value="3" @selected(old('selectArahPropertyCreate') == 3)>Selatan</option>
                                                <option value="3" @selected(old('selectArahPropertyCreate') == 4)>Barat Daya</option>
                                                <option value="3" @selected(old('selectArahPropertyCreate') == 5)>Barat</option>
                                                <option value="3" @selected(old('selectArahPropertyCreate') == 6)>Barat Laut</option>
                                                <option value="3" @selected(old('selectArahPropertyCreate') == 7)>Utara</option>
                                                <option value="3" @selected(old('selectArahPropertyCreate') == 8)>Timur Laut</option>
                                            </select>
                                        </div>
                                        <div class="col-lg-4 mb-3">
                                            <label for="nameBasic" class="form-label">Hook</label>
                                            <select id="selectHookPropertyEdit" name="selectHookPropertyEdit" class="form-select" aria-label="Default select example" value="{{ old('selectHookPropertyEdit') }}">
                                                <option value="0" @selected(old('selectHookPropertyEdit') == 0)>----</option>
                                                <option value="1" @selected(old('selectHookPropertyEdit') == 1)>Ya</option>
                                                <option value="2" @selected(old('selectHookPropertyEdit') == 2)>Tidak</option>
                                            </select>
                                        </div>
                                        <div class="col-lg-4 mb-3">
                                            <label for="nameBasic" class="form-label">Hadap Taman</label>
                                            <select id="selectHadapTamanPropertyEdit" name="selectHadapTamanPropertyEdit" class="form-select" aria-label="Default select example" value="{{ old('selectHadapTamanPropertyEdit') }}">
                                                <option value="0" @selected(old('selectHadapTamanPropertyEdit') == 0)>----</option>
                                                <option value="1" @selected(old('selectHadapTamanPropertyEdit') == 1)>Ya</option>
                                                <option value="2" @selected(old('selectHadapTamanPropertyEdit') == 2)>Tidak</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row mb-5">
                                        <div class="col-lg-6 mb-3">
                                            <label for="nameBasic" class="form-label">Luas Tanah</label>
                                            <div class="input-group">
                                                <input type="text" id="inputLuasTanahPropertyEdit" name="inputLuasTanahPropertyEdit" class="form-control" style="text-transform:uppercase" value="{{ old('inputLuasTanahPropertyEdit') }}">
                                                <span class="input-group-text">M</span>
                                            </div >
                                        </div>
                                        <div class="col-lg-6 mb-3">
                                            <label for="nameBasic" class="form-label">Luas Kelebihan Tanah</label>
                                            <div class="input-group">
                                                <input type="text" id="inputLuasKelebihanTanahPropertyEdit" name="inputLuasKelebihanTanahPropertyEdit" class="form-control" style="text-transform:uppercase" value="{{ old('inputLuasKelebihanTanahPropertyEdit') }}">
                                                <span class="input-group-text">M</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mt-2 mb-3 float-end">
                                        <button id="btnSimpanPropertyEdit" type="button" class="btn btn-sm btn-primary btnSimpanPropertyEdit">Simpan</button>
                                    </div>
                                </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal Edit End-->
    </div>
</div>

@endsection

 

Script :

<style>
@media print
{
    html, body * {
        height: auto;
    }

    .dt-print-table {
        border: 1px solid silver !important;
        background-color: none !important;
    }

    @page {
        @bottom-right {
            content: "Page " counter(page) " of " counter(pages);
        }
    }
    @page {
        @bottom-left {
            content: " Sisfo Property v1.0";
        }
    }
}
</style>

<script> //fill table property
    $(document).ready(function() {
    $('#loading-image').show();
    $('#tableProperty').children('thead').remove();
    $('#tableProperty').append(
        '<thead>'+
            '<tr>'+
                '<th>ID Property</th>'+
                '<th>Nama Proyek</th>'+
                '<th>Type</th>'+
                '<th>Blok</th>'+
                '<th>Nomor</th>'+
                '<th>Hrg. Awal(Rp)</th>'+
                '<th>Aksi</th>'+
            '</tr>'+
        '</thead>'
        );
        var dataTable = $('#tableProperty').DataTable({
            cache : false,
            processing:  true,
            info : true,
            //searching: true,
            destroy :  true,
            //dom : 'Bfrt<"top"l>ip',
            //dom: 'Brtlip',
            dom : 'Bf<"toolbox"l>rtip',
                lengthMenu: [[10, 25, 50, 100, 500], [10, 25, 50, 100, 500]],
            buttons: [
                'copy',
                'excel',
                'csv',
                {
                  extend: 'pdf',
                  footer: true,
                  exportOptions: {
                  columns: [ 0,1,2,3,4 ]
                  },

                  //title: 'Daftar Property',
                  //messageTop: 'Message Top',
                  messageBottom: function () {
                    return 'Jumlah : '+dataTable.rows().count();
                  },
                  footer: true,

                },

                {
                    extend: 'print',
                    footer: true,
                    exportOptions: {
                    columns: [ 0,1,2,3,4 ]
                    },

                    
                    messageTop: function() {
                        return '<span class="titleWhenPrint">Daftar Property</span><br><br><span class="subTitleWhenPrint">Nama Proyek : *<br>Blok : *</span>';
                    },
                    messageBottom: function () {
                      return 'Jumlah : '+dataTable.rows().count();
                    },
                    footer: true,
                    customize: function ( win ) {
                        
                        $(win.document.body)
                            .css( 'font-size', '12px' )
                            .css('font-weight','700');
                        $(win.document.body)
                            .find('h1')
                            .css('font-size', '24px');
                        $(win.document.body)
                            .find('th')
                            .css('font-size', '12px')
                            .css('font-weight','700');
                        $(win.document.body).children("h1:first").remove();
                    }
                }
                ],
            initComplete: function() {
                var $buttons = $('.dt-buttons').hide();
                $('#btnPrint').on('click', function() {
                    var btnClass = $(this).val()
                    ? '.buttons-' + $(this).val()
                    : null;
                    if (btnClass) $buttons.find(btnClass).click();
                });
                $('#btnCsv').on('click', function() {
                    var btnClass = $(this).val()
                    ? '.buttons-' + $(this).val()
                    : null;
                    if (btnClass) $buttons.find(btnClass).click();
                });
                $('#btnExcel').on('click', function() {
                    var btnClass = $(this).val()
                    ? '.buttons-' + $(this).val()
                    : null;
                    if (btnClass) $buttons.find(btnClass).click();
                });
                $('#btnCopy').on('click', function() {
                    var btnClass = $(this).val()
                    ? '.buttons-' + $(this).val()
                    : null;
                    if (btnClass) $buttons.find(btnClass).click();
                });
                $('#loading-image').hide();
                $('.container').show();
            },

            "pageLength": 25,
            "language": {
                "lengthMenu": "Tampilkan _MENU_ Data",
                "zeroRecords": "Tidak ada data",
                "info": "Halaman _PAGE_ dari _PAGES_ (_MAX_ Data)",
                "infoEmpty": "Tidak ada data",
                "infoFiltered": "(filtered from _MAX_ total records)",
            },
            "oLanguage": {
                "sSearch": "Cari ID Property "
            },
            serverSide: true,
            ajax: {
                url: '{{ route('project-property-filltblproperty') }}',
                type: 'GET',
            },

            columns: [
                {
                    data: 'property_id',
                    name: 'property_id',
                    render: function(data){
                        return '<badge class="badge bg-primary" style="font-size:0.7rem;">'+data+'</badge>';
                    }
                },
                {
                    data: 'project_name',
                    name: 'project_name'
                },
                {
                    data: 'type_id',
                    name: 'type_id'
                },
                {
                    data: 'block',
                    name: 'block'
                },
                {
                    data: 'number',
                    name: 'number',
                    render: function(data){
                        return '<badge class="badge bg-success" style="font-size:0.7rem;">'+data+'</badge>';
                    }
                },
                {
                    data: 'harga_awal',
                    name: 'harga_awal',
                    className: 'text-end',
                    render: function(data){
                        return '<badge class="badge bg-primary" style="font-size:0.7rem;">'+data+'</badge>';
                    }
                },
                {
                    data: null,
                    render: function(data, type, row) {
                        var actionsHtml = '';
                        if (data.canInfo) {
                            actionsHtml +='<button value="' + row.property_id + '" class="btn btn-xs text-primary openModalPropertyInfo" style="margin-right: 5px;"><i class="ti ti-eye" title="Show"></i></button></a>';
                        }
                        if (data.canEdit) {
                            actionsHtml +='<button value="' + row.property_id + '"class="btn btn-xs text-warning openModalPropertyEdit" style="margin-right: 5px;"><i class="ti ti-edit" title="Edit"></i></button></a>';
                        }
                        if (data.canDelete) {
                            actionsHtml +='<button value="' + row.property_id + '" class="btn btn-xs text-danger openModalPropertyDelete"><i class="ti ti-trash" title="Delete"></i></button></a>';
                        }
                        if (data.canRelease) {
                            if(data.release == 0) {
                                actionsHtml +='<button value="' + row.property_id + '" class="btn btn-xs text-danger openModalPropertyRelease"><i class="ti ti-lock" title="Status Locked, Klik untuk Release"></i></button></a>';
                            } else {
                                actionsHtml +='<button value="' + row.property_id + '" class="btn btn-xs text-success openModalPropertyRelease"><i class="ti ti-check" title="Status Unlocked"></i></button></a>';
                            }    
                            
                        }
                        return actionsHtml;
                    }
                }
            ],
            drawCallback: function() {
                var api = this.api();
                var num_rows = api.page.info().recordsTotal;
                var records_displayed = api.page.info().recordsDisplay;
                // now do something with those variables

            },
        });
    $('#tableProperty').show();
    $('#btnFillProjectId').click();
    });
</script>

<script> //fill table property by project
    $('#selectProject').on('change', function() {
        $('.container').hide();
        $('#loading-image').show();
        let projectName = $('#selectProject').val();
            if(projectName == 'all'){
                projectName = true
            }
            else {
                projectName = false
            }
        let namaProyek = $('#selectProject').find("option:selected").text();
    $('#tableProperty').children('thead').remove();
    $('#tableProperty').append(
        '<thead>'+
            '<tr>'+
                '<th>Property ID</th>'+
                '<th>Nama Proyek</th>'+
                '<th>Type</th>'+
                '<th>Blok</th>'+
                '<th>Nomor</th>'+
                '<th>Hrg. Awal</th>'+
                '<th>Aksi</th>'+
            '</tr>'+
        '</thead>'
        );
        var dataTable = $('#tableProperty').DataTable({
            cache : false,
            processing:  true,
            info : true,
            //searching: true,
            destroy :  true,
            //dom : 'Bfrt<"top"l>ip',
            //dom: 'Brtlip',
            dom : 'Bf<"toolbox"l>rtip',
                lengthMenu: [[10, 25, 50, 100, 500], [10, 25, 50, 100, 500]],
            buttons: [
                'copy',
                'excel',
                {
                    extend: 'print',
                    footer: true,
                    exportOptions: {
                    columns: [ 0,2,3,4 ]
                    },
                    messageTop: function() {
                        return '<span class="titleWhenPrint">Daftar Property</span><br><br><span class="subTitleWhenPrint">Nama Proyek : '+namaProyek+'<br>Blok : *</span>';
                    },
                    
                    messageBottom: function () {
                      return 'Jumlah : '+dataTable.rows().count();
                    },
                    footer: true,
                    customize: function ( win ) {
                        $(win.document.body).find('h1').css('text-align', 'left');
                        $(win.document.body).find('h1').css('font-size', '16px');
                        $(win.document.body).css( 'font-size', '10px' );
                        $(win.document.body).find('th').css('font-size', '10px');
                        $(win.document.body).find( 'table' )
                        .addClass( 'compact' )
                        .css( 'font-size', 'inherit' );
                        $(win.document.body).children("h1:first").remove();

                    }
                }
                ],
            initComplete: function() {
                var $buttons = $('.dt-buttons').hide();
                $('#btnPrint').on('click', function() {
                    var btnClass = $(this).val()
                    ? '.buttons-' + $(this).val()
                    : null;
                    if (btnClass) $buttons.find(btnClass).click();
                });
                $('#btnExcel').on('click', function() {
                    var btnClass = $(this).val()
                    ? '.buttons-' + $(this).val()
                    : null;
                    if (btnClass) $buttons.find(btnClass).click();
                });
                $('#btnCopy').on('click', function() {
                    var btnClass = $(this).val()
                    ? '.buttons-' + $(this).val()
                    : null;
                    if (btnClass) $buttons.find(btnClass).click();
                });
                $('#loading-image').hide();
                $('.container').show();
            },

            "pageLength": 25,
            "language": {
                "lengthMenu": "Tampilkan _MENU_ Data",
                "zeroRecords": "Tidak ada data",
                "info": "Halaman _PAGE_ dari _PAGES_ (_MAX_ Data)",
                "infoEmpty": "Tidak ada data",
                //"infoFiltered": "(filtered from _MAX_ total records)",
            },
            "oLanguage": {
                "sSearch": "Cari ID Property "
            },
            serverSide: true,
            ajax: {
                url: '{{ route('project-property-fillbyproject') }}',
                type: 'GET',

                data: function(d) {
                    d.project_id = $('#selectProject').val();
                },
            },

            columns: [
                {
                    data: 'property_id',
                    name: 'property_id',
                    render: function(data){
                        return '<badge class="badge bg-primary" style="font-size:0.7rem;">'+data+'</badge>';
                    }
                },
                {
                    data: 'project_name',
                    name: 'project_name'
                },
                {
                    data: 'type_id',
                    name: 'type_id'
                },
                {
                    data: 'block',
                    name: 'block'
                },
                {
                    data: 'number',
                    name: 'number',
                    render: function(data){
                        return '<badge class="badge bg-success" style="font-size:0.7rem;">'+data+'</badge>';
                    }
                },
                {
                    data: 'harga_awal',
                    name: 'harga_awal',
                    className: 'text-end',
                    render: function(data){
                        return '<badge class="badge bg-primary" style="font-size:0.7rem;">'+data+'</badge>';
                    }
                },
                {
                    data: null,
                    render: function(data, type, row) {
                        var actionsHtml = '';
                        if (data.canInfo) {
                            actionsHtml +='<button value="' + row.property_id + '" class="btn btn-xs text-primary openModalPropertyInfo" style="margin-right: 5px;"><i class="ti ti-eye" title="Show"></i></button></a>';
                        }
                        if (data.canEdit) {
                            actionsHtml +='<button value="' + row.property_id + '"class="btn btn-xs text-warning openModalPropertyEdit" style="margin-right: 5px;"><i class="ti ti-edit" title="Edit"></i></button></a>';
                        }
                        if (data.canDelete) {
                            actionsHtml +='<button value="' + row.property_id + '" class="btn btn-xs text-danger openModalPropertyDelete"><i class="ti ti-trash" title="Delete"></i></button></a>';
                        }
                        if (data.canRelease) {
                            if(data.release == 0) {
                                actionsHtml +='<button value="' + row.property_id + '" class="btn btn-xs text-danger openModalPropertyRelease"><i class="ti ti-lock" title="Status Locked, Klik untuk Release"></i></button></a>';
                            } else {
                                actionsHtml +='<button value="' + row.property_id + '" class="btn btn-xs text-success openModalPropertyRelease"><i class="ti ti-check" title="Status Unlocked"></i></button></a>';
                            }    
                            
                        }
                        return actionsHtml;
                    }
                }
            ]
        });

        //Fill Block
        $.ajax({
            url: "{{ route('project-property-fillblock') }}?project_id=" + $(this).val(),
            method: 'GET',
            success: function(data) {
                $('#selectBlock').html(data.html);

                var optionValues =[];
                $('#selectBlock option').each(function(){
                    if($.inArray(this.value, optionValues) >-1){
                        $(this).remove()
                    }else{
                        optionValues.push(this.value);
                    }
                });
            }
        });
    });
</script>

<script> //fill table property by block
    $('#selectBlock').on('change', function() {
        $('.container').hide();
        $('#loading-image').show();
        let namaProyek = $('#selectProject').find("option:selected").text();
        let namaBlok = $('#selectBlock').find("option:selected").text();
        $('#tableProperty').children('thead').remove();
        $('#tableProperty').append(
            '<thead>'+
                '<tr>'+
                    '<th>ID Property</th>'+
                    '<th>Nama Proyek</th>'+
                    '<th>Type</th>'+
                    '<th>Blok</th>'+
                    '<th>Nomor</th>'+
                    '<th>Hrg. Awal</th>'+
                    '<th>Aksi</th>'+
                '</tr>'+
            '</thead>'
        );
        var dataTable = $('#tableProperty').DataTable({
            cache : false,
            processing:  true,
            info : true,
            destroy :  true,
            dom : 'Bf<"toolbox"l>rtip',
                lengthMenu: [[10, 25, 50, 100, 500], [10, 25, 50, 100, 500]],
            buttons: [
                'copy',
                'excel',
                {
                    extend: 'print',
                    footer: true,
                    exportOptions: {
                    columns: [ 0,2,3,4 ]
                    },

                    messageTop: function() {
                        return '<span class="titleWhenPrint">Daftar Property</span><br><br><span class="subTitleWhenPrint">Nama Proyek : '+namaProyek+'<br>Blok : '+namaBlok+'</span>';
                    },
                    messageBottom: function () {
                        return 'Jumlah : '+dataTable.rows().count();
                    },
                    footer: true,
                    customize: function ( win ) {
                        $(win.document.body).find('h1').css('text-align', 'left');
                        $(win.document.body).find('h1').css('font-size', '16px');
                        $(win.document.body).css( 'font-size', '10px' );
                        $(win.document.body).find('th').css('font-size', '10px');
                        $(win.document.body).find( 'table' )
                        .addClass( 'compact' )
                        .css( 'font-size', 'inherit' );
                    }
                }
                ],
            initComplete: function() {
                var $buttons = $('.dt-buttons').hide();
                $('#btnPrint').on('click', function() {
                    var btnClass = $(this).val()
                    ? '.buttons-' + $(this).val()
                    : null;
                    if (btnClass) $buttons.find(btnClass).click();
                });
                $('#btnExcel').on('click', function() {
                    var btnClass = $(this).val()
                    ? '.buttons-' + $(this).val()
                    : null;
                    if (btnClass) $buttons.find(btnClass).click();
                });
                $('#btnCopy').on('click', function() {
                    var btnClass = $(this).val()
                    ? '.buttons-' + $(this).val()
                    : null;
                    if (btnClass) $buttons.find(btnClass).click();
                });
                $('#loading-image').hide();
                $('.container').show();
            },

            "pageLength": 25,
            "language": {
                "lengthMenu": "Tampilkan _MENU_ Data",
                "zeroRecords": "Tidak ada data",
                "info": "Halaman _PAGE_ dari _PAGES_ (_MAX_ Data)",
                "infoEmpty": "Tidak ada data"
                // "processing": '<div class="d-flex justify-content-center"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div></div>'
            },
            "oLanguage": {
                "sSearch": "Cari ID Property "
            },
            serverSide: true,
            ajax: {
                url: '{{ route('project-property-fillbyblock') }}',
                type: 'GET',

                data: function(d) {
                    d.project_id = $('#selectProject').val();
                    d.block_id = $('#selectBlock').val();
                },
            },
            columns: [
                {
                    data: 'property_id',
                    name: 'property_id',
                    render: function(data){
                        return '<badge class="badge bg-primary" style="font-size:0.7rem;">'+data+'</badge>';
                    }
                },
                {
                    data: 'project_name',
                    name: 'project_name'
                },
                {
                    data: 'type_name',
                    name: 'type_name',
                    visible: true
                },
                {
                    data: 'block_name',
                    name: 'block_name'
                },
                {
                    data: 'number',
                    name: 'number',
                    render: function(data){
                        return '<badge class="badge bg-success" style="font-size:0.7rem;">'+data+'</badge>';
                    }
                },
                {
                    data: 'harga_awal',
                    name: 'harga_awal',
                    className: 'text-end',
                    render: function(data){
                        return '<badge class="badge bg-primary" style="font-size:0.7rem;">'+data+'</badge>';
                    }
                },
                {
                    data: null,
                    render: function(data, type, row) {
                        var actionsHtml = '';
                        if (data.canInfo) {
                            actionsHtml +='<button value="' + row.property_id + '" class="btn btn-xs text-primary openModalPropertyInfo" style="margin-right: 5px;"><i class="ti ti-eye" title="Show"></i></button></a>';
                        }
                        if (data.canEdit) {
                            actionsHtml +='<button value="' + row.property_id + '"class="btn btn-xs text-warning openModalPropertyEdit" style="margin-right: 5px;"><i class="ti ti-edit" title="Edit"></i></button></a>';
                        }
                        if (data.canDelete) {
                            actionsHtml +='<button value="' + row.property_id + '" class="btn btn-xs text-danger openModalPropertyDelete"><i class="ti ti-trash" title="Delete"></i></button></a>';
                        }
                        if (data.canRelease) {
                            if(data.release == 0) {
                                actionsHtml +='<button value="' + row.property_id + '" class="btn btn-xs text-danger openModalPropertyRelease"><i class="ti ti-lock" title="Status Locked, Klik untuk Release"></i></button></a>';
                            } else {
                                actionsHtml +='<button value="' + row.property_id + '" class="btn btn-xs text-success openModalPropertyRelease"><i class="ti ti-check" title="Status Unlocked"></i></button></a>';
                            }    
                            
                        }
                        return actionsHtml;
                    }
                }
            ]
        });
        $('#tableProperty').show();
    });
</script>

<script>  //Fill Project Combo
    $(document).on('click','#btnFillProjectId', function() {
        $('#selectProject').find('option').not(':first').remove();
        $.ajax({
            url: '/project/property/fill/project',
            type: 'get',
            dataType: 'json',

            success: function(response){

                var len = 0;
                if(response['data'] != null){
                    len = response['data'].length;
                }

                if(len > 0){
                    // Read data and create <option >
                    for(var i=0; i<len; i++){

                        var id = response['data'][i].project_id;
                        var name = response['data'][i].project_name;

                        var option = "<option value='"+id+"'>"+name+"</option>";
                        $("#selectProject").append(option);
                    }
                }

            }
        });
    });
</script>

<script>  //create
    $(document).on('click','#btnPropertyCreate', function() {
        $('#selectProjectPropertyCreate').val('');
        $('#selectBlockPropertyCreate').val('');
        $('#inputNowalPropertyCreate').val('');
        $('#inputNohirPropertyCreate').val('');
        $('#inputHargaAwalPropertyCreate').val('');
        $('#selectTypePropertyCreate').val('');
        $('#inputLuasTanahPropertyCreate').val('');
        $('#selectArahPropertyCreate').val('0');
        $('#selectIsHadapTamanPropertyCreate').val('0');
        $('#modalPropertyCreate').modal('show');
    });
</script>

<script> //store data
    $("#btnSimpanPropertyCreate").click(function(e){
        e.preventDefault();

        //define variable
        let projectId = $("#selectProjectPropertyCreate").val();
        let block = $("#selectBlockPropertyCreate").val();
        let nowal = $("#inputNowalPropertyCreate").val();
        let nohir = $("#inputNohirPropertyCreate").val();
        let hargaAwal = $("#inputHargaAwalPropertyCreate").val();
        let typeId = $("#selectTypePropertyCreate").val();
        let luasTanah = $("#inputLuasTanahPropertyCreate").val();
        let arah = $("#selectArahPropertyCreate").val();
        let isHadapTaman = $("#selectIsHadapTamanPropertyCreate").val();
        let token   = $("meta[name='csrf-token']").attr("content");

        $.ajax({
            url:`/project/property/store`,
            type:'POST',
            cache: false,
            data:{
                "project_id" : projectId,
                "type_id": typeId,
                "block" : block,
                "nowal" : nowal,
                "hargaAwal" : hargaAwal,
                "nohir" : nohir,
                "luasTanah" : luasTanah,
                "arah" : arah,
                "is_hadap_taman" : isHadapTaman,
                "_token": token
            },
            success:function(response){
                if(response.success == true) {
                    $('#modalPropertyCreate').modal('hide');
                    $('#tblProperty').DataTable().ajax.reload();
                    toastr.success(response.message);
                    $('#btnFillProjectId').click();
                    $('#selectProject').val(projectId).change();
                    $('#selectBlock').val(block).change();
                }
                else if (response.success == false){
                    toastr.error(response.message);
                    $('#modalPropertyCreate').modal('show');
                }
            }
        });
    });
</script>

<script> //ajax info
    $(document).on('click','.openModalPropertyInfo', function() {
        var url = "/project/property/info";
        var property_id = $(this).val();
        $.get(url + '/' +property_id, function (data) {

        //success data
        console.log(data);
        $('#spnPropertyId').text(data.property_id);
        $('#spnProject').text(data.project_name);
        $('#spnType').text(data.type_name);
        $('#spnBlock').text(data.block_name);
        $('#spnNomor').text(data.number);
        $('#spnArah').text(data.arah_name);
        $('#spnHook').text(data.is_hook);
        $('#spnHadapTaman').text(data.is_hadap_taman);
        $('#spnLuasTanah').text(data.luas_tanah);
        $('#spnLuasKelebihanTanah').text(data.luas_kt);
        $('#spnCreatedAt').text(data.created_at);
        $('#spnUpdatedAt').text(data.updated_at);

        $('#modalPropertyInfo').modal('show');
        })
    });
</script>

{{-- ajaxEdit --}}
<script>
$(document).on('click','.openModalPropertyEdit', function() {
    var url = "/project/property/edit";
    var property_id = $(this).val();
    $.get(url + '/' +property_id, function (data) {

    //success data
    console.log(data);
    $('#inputOldPropertyIdPropertyEdit').val(property_id);
    $('#inputProjectIdPropertyEdit').val(data.project_id);
    $('#inputTypeIdPropertyEdit').val(data.type_id);
    $('#inputBlockPropertyEdit').val(data.block);
    $('#inputNumberPropertyEdit').val(data.number);
    $('#selectArahPropertyEdit').val(data.arah_id);
    $('#selectHookPropertyEdit').val(data.is_hook);
    $('#selectHadapTamanPropertyEdit').val(data.is_hadap_taman);
    $('#inputLuasTanahPropertyEdit').val(data.luas_tanah);
    $('#inputLuasKelebihanTanahPropertyEdit').val(data.luas_kt);

    $('#formPropertyEdit').attr('action', '/project/property/update/'+property_id);
    $("#alertSuccessFalseEdit").find("#alertMessage").remove();
    $('#modalPropertyEdit').modal('show');
    })
});
</script>
{{-- ajaxEdit End --}}

{{-- ajaxDelete --}}
<script>
$(document).on('click','.openModalPropertyDelete', function() {

    const swalWithBootstrapButtons = Swal.mixin({
        customClass: {
            confirmButton: "btn btn-sm btn-outline-primary",
            cancelButton: "btn btn-sm btn-outline-danger me-2"
        },
        buttonsStyling: false
        });
        swalWithBootstrapButtons.fire({
        text: "Yakin ingin menghapus ini ?",
        icon: "warning",
        showCancelButton: true,
        confirmButtonText: "Ya, hapus saja!",
        cancelButtonText: "Tidak, batalkan!",
        reverseButtons: true
        }).then((result) => {
        if (result.isConfirmed) {
            let property_id = $(this).val();
            let token = $("meta[name='csrf-token']").attr("content");

            $.ajax({
                    url:`/project/property/delete/${property_id}`,
                    type:"DELETE",
                    cache: false,
                    data: {
                        "_token": token
                    },

                    success:function(response){
                        if(response.success == true) {
                            $('#tableProperty').DataTable().ajax.reload();
                            toastr.success(response.message);
                        }
                        else if (response.success == false){
                            toastr.error(response.message);
                        }
                    }
            });
        }
    });



});
</script>

<script>
    $(document).on('click','.openModalPropertyRelease', function(e) {
        e.preventDefault();

        const swalWithBootstrapButtons = Swal.mixin({
            customClass: {
                confirmButton: "btn btn-sm btn-outline-primary",
                cancelButton: "btn btn-sm btn-outline-danger me-2"
            },
            buttonsStyling: false
            });
            swalWithBootstrapButtons.fire({
            text: "Yakin ingin Release Property ini ?",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Ya, Lanjutkan!",
            cancelButtonText: "Tidak, batalkan!",
            reverseButtons: true
            }).then((result) => {
            if (result.isConfirmed) {
                let property_id = $(this).val();
                let token = $("meta[name='csrf-token']").attr("content");
                $.ajax({
                    url:`/project/property/release/${property_id}`,
                    type:'PUT',
                    cache: false,
                    data: {
                        "_token": token
                    },
                    success:function(response){
                        if(response.success == true) {
                            $('#tableProperty').DataTable().ajax.reload();
                            toastr.success(response.message);
                        }
                        else if (response.success == false){
                            toastr.error(response.message);
                        }
                    }
                });
            }
        });
    
    
    
    });
    </script>

<script> //release
    $(".openModalPropertyReleasexxx").click(function(e) {
        e.preventDefault();
        //define variable
        let property_id = $(this).val();
        let token   = $("meta[name='csrf-token']").attr("content");
        // $.ajax({
        //     url:`/project/property/release/${property_id}`,
        //     type:'PUT',
        //     cache: false,
        //     data:{
        //         "_token": token
        //     },
        //     success:function(response){
        //         if(response.success == true) {
        //             $('#tableProperty').DataTable().ajax.reload();
        //             toastr.success(response.message);
        //         }
        //         else if (response.success == false){
        //             toastr.error(response.message);
        //         }
        //     }
        // });
        $('#modalPropertyEdit').modal('show');

    });
</script>

{{-- ajaxUpdate --}}
<script type="text/javascript">
    $(".btnSimpanPropertyEdit").click(function(e){
        e.preventDefault();

        //define variable
        let property_id = $("#inputOldPropertyIdPropertyEdit").val();
        let projectId = $("#inputProjectIdPropertyEdit").val();
        let propertyType = $("#inputTypeIdPropertyEdit").val();
        let block = $("#inputBlockPropertyEdit").val();
        let number = $("#inputNumberPropertyEdit").val();
        let newPropertyId = projectId + propertyType + block + number;

        let arah_id = $("#selectArahPropertyEdit").val();
        let is_hook = $("#selectHookPropertyEdit").val();
        let is_hadap_taman = $("#selectHadapTamanPropertyEdit").val();
        let luas_tanah = $("#inputLuasTanahPropertyEdit").val();
        let luas_kt = $("#inputLuasKelebihanTanahPropertyEdit").val();
        let token   = $("meta[name='csrf-token']").attr("content");

        $.ajax({
            url:`/project/property/update/${property_id}`,
            type:'PUT',
            cache: false,
            data:{
                "number" : number,
                "property_id":newPropertyId,
                "arah_id":arah_id,
                "is_hook":is_hook,
                "is_hadap_taman":is_hadap_taman,
                "luas_tanah":luas_tanah,
                "luas_kt":luas_kt,
                "_token": token
            },
            success:function(response){
                if(response.success == true) {
                    $('#modalPropertyEdit').modal('hide');
                    $('#tableProperty').DataTable().ajax.reload();
                    toastr.success(response.message);
                }
                else if (response.success == false){
                    toastr.error(response.message);
                    $('#modalPropertyEdit').modal('show');
                }
            }
        });

    });
</script>

 

Related Articles