@extends('layouts.app')

@section('content')
<div class="container">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>JPPH Data</h1>
        <div class="d-flex gap-2">
            
            <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addJpphModal">
                <i class="fas fa-plus"></i> Add New Manually
            </button>
            <!-- <a href="/valuations/upload" class="btn btn-primary">
                <i class="fas fa-upload"></i> Import CSV
            </a> -->
        </div>
    </div>

    <!-- Add JPPH Modal -->
    <div class="modal fade" id="addJpphModal" tabindex="-1" aria-labelledby="addJpphModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="addJpphModalLabel">Add New JPPH Data</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <form method="POST" action="{{ route('valuations.store') }}">
            @csrf
            <div class="modal-body">
              <div class="row g-3">
                <h5 class="mb-2 mt-2">Basic Information</h5>
                <div class="col-md-4">
                  <label for="mukim_bandar" class="form-label">Mukim</label>
                  <input type="text" class="form-control" id="mukim_bandar" name="mukim_bandar" placeholder="e.g. Bandar Kuala Lumpur">
                </div>
                <select class="form-select searchable-dropdown" id="daerah" name="daerah">
                    <option value="">Select District</option>
                    @foreach($districts as $district)
                        <option value="{{ $district }}" {{ old('daerah') == $district ? 'selected' : '' }}>{{ $district }}</option>
                    @endforeach
                </select>
                <div class="col-md-4">
                  <label for="seksyen_blok" class="form-label">Section</label>
                  <input type="text" class="form-control" id="seksyen_blok" name="seksyen_blok" placeholder="e.g. Seksyen 1">
                </div>
                <div class="col-md-4">
                  <label for="jenis_lot_plot" class="form-label">Lot Type</label>
                  <select class="form-select" id="jenis_lot_plot" name="jenis_lot_plot">
                    <option value="">Select Lot Type</option>
                    <option>Individual</option>
                    <option>Strata</option>
                    <option>...</option>
                  </select>
                </div>
                <div class="col-md-4">
                  <label for="no_lot_plot" class="form-label">Lot No.</label>
                  <input type="text" class="form-control" id="no_lot_plot" name="no_lot_plot" placeholder="e.g. 1234">
                </div>
                <div class="col-md-4">
                  <label for="status_lot" class="form-label">Lot Status</label>
                  <select class="form-select" id="status_lot" name="status_lot">
                    <option value="">Select Status</option>
                    <option>Freehold</option>
                    <option>Leasehold</option>
                  </select>
                </div>
                <div class="col-md-12">
                  <label for="alamat" class="form-label">Address</label>
                  <input type="text" class="form-control" id="alamat" name="alamat" placeholder="Full address">
                </div>
                <div class="col-md-12">
                  <label for="kawasan_skim_perumahan" class="form-label">Scheme/Project</label>
                  <input type="text" class="form-control" id="kawasan_skim_perumahan" name="kawasan_skim_perumahan" placeholder="e.g. Taman Melati">
                </div>
                <hr class="mt-4 mb-2">
                <h5 class="mb-2 mt-2">Property Details</h5>
                <div class="col-md-12">
                  <label for="jenis_harta_tanah" class="form-label">Property Category</label>
                  <select class="form-select" id="jenis_harta_tanah" name="jenis_harta_tanah">
                    <option value="">Select Category</option>
                    <option>Industri</option>
                    <option>Kediaman</option>
                    <option>Pembangunan</option>
                    <option>Perdagangan</option>
                    <option>Pertanian</option>
                    <option>Lain-lain</option>
                  </select>
                </div>
                <div class="col-md-6">
                  <label for="jenis_bangunan" class="form-label">Building Type</label>
                  <select class="form-select" id="jenis_bangunan" name="jenis_bangunan">
                    <option value="">Select Type</option>
                    <option>Terrace</option>
                    <option>Semi-D</option>
                    <option>Flat</option>
                    <option>Shoplot</option>
                    <option>...</option>
                  </select>
                </div>
                <div class="col-md-6">
                  <label for="luas_bangunan_utama" class="form-label">Built-Up Area (BU)</label>
                  <input type="number" class="form-control" id="luas_bangunan_utama" name="luas_bangunan_utama" step="0.01" placeholder="e.g. 1200">
                </div>
                <div class="col-md-3">
                  <label for="bil_tgkt_atas_tanah" class="form-label">No. of Storeys (Above Ground)</label>
                  <input type="number" class="form-control" id="bil_tgkt_atas_tanah" name="bil_tgkt_atas_tanah" placeholder="e.g. 2">
                </div>
                <div class="col-md-3">
                  <label for="bil_tgkt_bawah_tanah" class="form-label">No. of Storeys (Below Ground)</label>
                  <input type="number" class="form-control" id="bil_tgkt_bawah_tanah" name="bil_tgkt_bawah_tanah" placeholder="e.g. 0">
                </div>
                <div class="col-md-2">
                  <label for="bilangan_bilik" class="form-label">No. of Bedrooms</label>
                  <input type="number" class="form-control" id="bilangan_bilik" name="bilangan_bilik" placeholder="e.g. 4">
                </div>
                <div class="col-md-4">
                  <label for="jenis_tanaman" class="form-label">Crop<br>(if applicable)</label>
                  <input type="text" class="form-control" id="jenis_tanaman" name="jenis_tanaman" placeholder="e.g. Palm Oil">
                </div>
                <hr class="mt-4 mb-2">
                <h5 class="mb-2 mt-2">Land Details</h5>
                <div class="col-md-3">
                  <label for="luas_lot_petak" class="form-label">Land Area (sqft)</label>
                  <input type="number" class="form-control" id="luas_lot_petak" name="luas_lot_petak" step="0.01" placeholder="e.g. 1800">
                </div>
                <div class="col-md-2">
                  <label for="no_hakmilik" class="form-label">Title No.</label>
                  <input type="text" class="form-control" id="no_hakmilik" name="no_hakmilik" placeholder="e.g. GM1234">
                </div>
                <div class="col-md-4">
                  <label for="jenis_hakmilik" class="form-label">Title Type</label>
                  <select class="form-select" id="jenis_hakmilik" name="jenis_hakmilik">
                    <option value="">Select Title Type</option>
                    <option>Advance Certificate</option>
                    <option>Agriculture Grant</option>
                    <option>Agriculture Lease</option>
                    <option>Agrmnt. For Lease Of</option>
                    <option>Akuan Menerima Tuntutan</option>
                    <option>Alsagoff</option>
                  </select>
                </div>
                <div class="col-md-4">
                  <label for="jenis_pegangan" class="form-label">Tenure</label>
                  <select class="form-select" id="jenis_pegangan" name="jenis_pegangan">
                    <option value="">Select Tenure</option>
                    <option>Freehold</option>
                    <option>Leasehold</option>
                  </select>
                </div>
                <div class="col-md-4">
                  <label for="tempoh_pajakan" class="form-label">Lease Duration</label>
                  <input type="number" class="form-control" id="tempoh_pajakan" name="tempoh_pajakan" placeholder="e.g. 99">
                </div>
                <div class="col-md-4">
                  <label for="tarikh_luput_pajakan" class="form-label">Lease Expiry Date</label>
                  <input type="date" class="form-control" id="tarikh_luput_pajakan" name="tarikh_luput_pajakan">
                </div>
                <div class="col-md-4">
                  <label for="klasifikasi_tanah" class="form-label">Land Classification</label>
                  <select class="form-select" id="klasifikasi_tanah" name="klasifikasi_tanah">
                    <option value="">Select Classification</option>
                    <option>Pertanian</option>
                    <option>Kediaman</option>
                    <option>Perniagaan</option>
                    <option>Perindustrian</option>
                    <option>...</option>
                  </select>
                </div>
                <hr class="mt-4 mb-2">
                <h5 class="mb-2 mt-2">Ownership & Transaction</h5>
                <div class="col-md-4">
                  <label for="tarikh_pindahmilik" class="form-label">Date Transaction</label>
                  <input type="date" class="form-control" id="tarikh_pindahmilik" name="tarikh_pindahmilik">
                </div>
                <div class="col-md-4">
                  <label for="syer" class="form-label">Share</label>
                  <input type="text" class="form-control" id="syer" name="syer" placeholder="e.g. 1/1">
                </div>
                <div class="col-md-4">
                  <label for="nama_pemberi_pindahmilik" class="form-label">Seller</label>
                  <input type="text" class="form-control" id="nama_pemberi_pindahmilik" name="nama_pemberi_pindahmilik" placeholder="Seller Name">
                </div>
                <div class="col-md-4">
                  <label for="nama_penerima_pindahmilik" class="form-label">Buyer</label>
                  <input type="text" class="form-control" id="nama_penerima_pindahmilik" name="nama_penerima_pindahmilik" placeholder="Buyer Name">
                </div>
                <div class="col-md-4">
                  <label for="balasan_rm" class="form-label">Price (RM)</label>
                  <input type="number" class="form-control" id="balasan_rm" name="balasan_rm" step="0.01" placeholder="e.g. 450000">
                </div>
                <div class="col-md-4">
                  <label for="psf" class="form-label">PSF (RM)</label>
                  <input type="number" class="form-control" id="psf" name="psf" step="0.01" readonly placeholder="Auto-calculated">
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
              <button type="submit" class="btn btn-success">Save</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <!-- Filter/Search Bar and More Filters (Offcanvas Sidebar) -->
    <form method="GET" action="{{ route('jpph.index') }}" class="card shadow-sm mb-4 border-0 p-3 corporate-filter-bar" id="mainSearchForm">
        <div class="row g-3 align-items-end">
            <div class="col-md-3">
                <label for="address" class="form-label mb-1">Address / Project / Area</label>
                <input type="text" class="form-control" id="address" name="address" placeholder="Address, Project, Area" value="{{ request('address') }}">
            </div>
            <!--
            <div class="col-md-3">
                <label for="state" class="form-label mb-1">State</label>
                <select class="form-select" id="state" name="state">
                @foreach($states as $state)
                        <option value="{{ $states }}" {{ request('state') == $state ? 'selected' : '' }}>{{ $state }}</option>
                    @endforeach
                </select>
            </div>
-->
            <div class="col-md-3">
                <label for="state_id" class="form-label mb-1">State</label>
                <select class="form-select" id="state_id" name="state_id">
                    <option value="">All States</option>
                    {{-- This uses the $states collection passed from the controller --}}
                    @foreach($states as $id => $name)
                        <option value="{{ $id }}" {{ request('state_id') == $id ? 'selected' : '' }}>
                            {{ $name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label for="district" class="form-label mb-1">District</label>
                <select class="form-select searchable-dropdown-modal" id="district" name="district">
                    <option value="">Select District</option>
                    @foreach($districts as $district)
                        <option value="{{ $district }}" {{ request('district') == $district ? 'selected' : '' }}>{{ $district }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label for="mukim" class="form-label mb-1">Mukim</label>
                {{-- Add the 'searchable-dropdown' class here --}}
                <select class="form-select searchable-dropdown" id="mukim" name="mukim">
                    <option value="">Select Mukim</option>
                    @foreach($mukims as $mukim)
                        <option value="{{ $mukim }}" {{ request('mukim') == $mukim ? 'selected' : '' }}>{{ $mukim }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label for="category" class="form-label mb-1">Property Category</label>
                <select class="form-select" id="category" name="category">
                    <option value="">Select Category</option>
                    @foreach($categories as $category)
                        <option value="{{ $category }}" {{ request('category') == $category ? 'selected' : '' }}>{{ $category }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label for="building_type" class="form-label mb-1">Building Type</label>
                <select class="form-select" id="building_type" name="building_type">
                    <option value="">All</option>
                    @foreach($buildingTypes as $type)
                        <option value="{{ $type }}" {{ request('building_type') == $type ? 'selected' : '' }}>{{ $type }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label for="date_from" class="form-label mb-1">Date From</label>
                <input type="date" class="form-control" id="date_from" name="date_from" value="{{ request('date_from') }}">
            </div>
            <div class="col-md-3">
                <label for="date_to" class="form-label mb-1">Date To</label>
                <input type="date" class="form-control" id="date_to" name="date_to" value="{{ request('date_to') }}">
            </div>
            <div class="col-md-2 d-flex align-items-end">
                <button class="btn btn-outline-secondary w-100" type="button" data-bs-toggle="offcanvas" data-bs-target="#moreFiltersOffcanvas" aria-controls="moreFiltersOffcanvas">
                    <i class="fas fa-sliders-h"></i> More Filters
                </button>
            </div>
            <div class="col-md-10 d-flex align-items-end justify-content-end gap-2">
                <a href="{{ route('jpph.index') }}" class="btn btn-light">Reset</a>
                <button type="submit" class="btn btn-primary">Search</button>
            </div>
        </div>

        <!-- More Filters (Offcanvas Sidebar) -->
        <div class="offcanvas offcanvas-end" tabindex="-1" id="moreFiltersOffcanvas" aria-labelledby="moreFiltersOffcanvasLabel">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title" id="moreFiltersOffcanvasLabel">More Filters</h5>
                <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                <div class="row g-4">
                    <div class="col-md-12">
                        <label for="address_more" class="form-label">Address</label>
                        <input type="text" class="form-control mb-3" id="address_more" name="address_more" placeholder="Address">
                    </div>
                    <div class="col-md-12">
                        <label for="project_area" class="form-label">Project/Township/Area</label>
                        <input type="text" class="form-control mb-3" id="project_area" name="project_area" placeholder="Type to start search...">
                    </div>
                    <div class="col-md-12">
                        <label for="lease_type" class="form-label">Lease Type</label>
                        <select class="form-select mb-3" id="lease_type" name="lease_type">
                            <option value="">All</option>
                        </select>
                    </div>
                    <!-- Price -->
                    <div class="col-md-12">
                        <label class="form-label">Price</label>
                        <div class="row g-2">
                            <div class="col-6">
                                <div class="input-group">
                                    <span class="input-group-text">RM</span>
                                    <input type="number" class="form-control" name="price_min" placeholder="Min">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="input-group">
                                    <span class="input-group-text">RM</span>
                                    <input type="number" class="form-control" name="price_max" placeholder="Max">
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Price Per Sqft -->
                    <div class="col-md-12">
                        <label class="form-label">Price Per Sqft</label>
                        <div class="row g-2">
                            <div class="col-6">
                                <div class="input-group">
                                    <span class="input-group-text">RM</span>
                                    <input type="number" class="form-control" name="psf_min" placeholder="Min">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="input-group">
                                    <span class="input-group-text">RM</span>
                                    <input type="number" class="form-control" name="psf_max" placeholder="Max">
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Built-Up Area -->
                    <div class="col-md-12">
                        <label class="form-label">Built-Up Area</label>
                        <div class="row g-2">
                            <div class="col-6">
                                <div class="input-group">
                                    <input type="number" class="form-control" name="builtup_min" placeholder="Min">
                                    <span class="input-group-text">sqft</span>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="input-group">
                                    <input type="number" class="form-control" name="builtup_max" placeholder="Max">
                                    <span class="input-group-text">sqft</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Land Area -->
                    <div class="col-md-12">
                        <label class="form-label">Land Area</label>
                        <div class="row g-2">
                            <div class="col-6">
                                <div class="input-group">
                                    <input type="number" class="form-control" name="land_min" placeholder="Min">
                                    <span class="input-group-text">sqft</span>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="input-group">
                                    <input type="number" class="form-control" name="land_max" placeholder="Max">
                                    <span class="input-group-text">sqft</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- No. of Storeys -->
                    <div class="col-md-12">
                        <label class="form-label">No. of Storeys</label>
                        <div class="row g-2">
                            <div class="col-6">
                                <input type="number" class="form-control" name="storey_from" placeholder="From">
                            </div>
                            <div class="col-6">
                                <input type="number" class="form-control" name="storey_to" placeholder="To">
                            </div>
                        </div>
                    </div>
                    <!-- Rooms & Floors No. -->
                    <div class="col-md-6">
                        <label class="form-label">Rooms</label>
                        <input type="number" class="form-control" name="rooms" min="0" placeholder="All">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Floors No.</label>
                        <input type="number" class="form-control" name="floors" min="0" placeholder="All">
                    </div>
                    <!-- Lot No., Lot Info, Lot Range -->
                    <div class="col-md-12">
                        <label class="form-label">Lot No.</label>
                        <input type="text" class="form-control mb-2" name="lot_no" placeholder="Enter Lot No.">
                        <label class="form-label">Lot Info</label>
                        <input type="text" class="form-control mb-2" name="lot_info" placeholder="Enter Lot Info">
                        <label class="form-label">Lot Range</label>
                        <div class="row g-2">
                            <div class="col-6">
                                <input type="text" class="form-control" name="lot_range_from" placeholder="From">
                            </div>
                            <div class="col-6">
                                <input type="text" class="form-control" name="lot_range_to" placeholder="To">
                            </div>
                        </div>
                    </div>
                    <!-- Section, Grid, RSS, Title No., Share -->
                    <div class="col-md-12">
                        <label class="form-label">Section</label>
                        <input type="text" class="form-control mb-2" name="section" placeholder="Enter Section">
                        <label class="form-label">Grid</label>
                        <input type="text" class="form-control mb-2" name="grid" placeholder="Enter Grid">
                        <label class="form-label">RSS No.</label>
                        <input type="text" class="form-control mb-2" name="rss_no" placeholder="Enter RSS No.">
                        <label class="form-label">Title No.</label>
                        <input type="text" class="form-control mb-2" name="title_no" placeholder="Enter Title No.">
                        <label class="form-label">Share</label>
                        <div class="row g-2">
                            <div class="col-6">
                                <input type="text" class="form-control" name="share_from" placeholder="From">
                            </div>
                            <div class="col-6">
                                <input type="text" class="form-control" name="share_to" placeholder="To">
                            </div>
                        </div>
                    </div>
                    <!-- Date Range (side by side, auto-width) -->
                    <div class="col-md-12">
                        <label class="form-label">Date Range</label>
                        <div class="d-flex gap-2 align-items-center">
                            <input type="date" class="form-control flex-shrink-1 w-auto" name="date_from" placeholder="From" style="min-width:130px;">
                            <span class="mx-1">-</span>
                            <input type="date" class="form-control flex-shrink-1 w-auto" name="date_to" placeholder="To" style="min-width:130px;">
                        </div>
                    </div>
                </div>
                <div class="row mt-4">
                    <div class="col-6">
                        <button type="button" class="btn btn-light w-100" id="clearMoreFiltersBtn">Clear All</button>
                    </div>
                    <div class="col-6">
                        <button type="button" class="btn btn-primary w-100" id="applyFiltersBtn">Apply Filters</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <button type="button" class="btn btn-primary" id="printSelectedBtn" disabled>
        <i class="fas fa-print"></i> Print Selected
    </button>
    <button type="button" class="btn btn-success ms-2" id="exportSelectedBtn" disabled>
        <i class="fas fa-file-export"></i> Export Selected
    </button>
    <div class="corporate-table card shadow-sm mb-4 w-100">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="corporate-thead">
                        <tr>
                            <th><input type="checkbox" class="form-check-input" id="selectAll"></th>
                            <th>Bil.<br></th>
                            <th>Date</th>
                            <th>Address</th>
                            <th>Scheme/Project/Township</th>
                            <th>Property Category</th>
                            <th>Building Type</th>
                            <th>L/A (sqft)</th>
                            <th>B/U (sqft)</th>
                            <th>Price (RM)</th>
                            <th>PSF (RM)</th>
                            <th></th>
                        </tr>
                    </thead>
                    
                    <tbody>
                    
                        @forelse($valuations as $valuation)
                        <tr class="valuation-row corporate-row {{ $valuation->selected ? 'highlight-row' : '' }}" data-valuation-id="{{ $valuation->id }}">
                            <td style="text-align: center;">
                                <input type="checkbox" class="form-check-input row-checkbox" value="{{ $valuation->id }}">
                            </td>
                            <td style="text-align: center;">
                                <span class="id-badge">{{ $valuation->id }}</span><br>
                            
                            </td>
                            <td>{{ $valuation->tarikh_pindahmilik }}</td>
                            <td>{{ $valuation->alamat }}</td>
                            <td>{{ $valuation->kawasan_skim_perumahan }}</td>
                            <td>{{ $valuation->jenis_harta_tanah }}</td>
                            <td>{{ $valuation->jenis_bangunan }}</td>
                            <td>{{ number_format($valuation->luas_lot_petak, 2) }}</td>
                            <td>{{ number_format($valuation->luas_bangunan_utama, 2) }}</td>
                            <td>{{ number_format($valuation->balasan_rm, 2) }}</td>
                            <td>
                                @if($valuation->luas_lot_petak && $valuation->luas_lot_petak != 0)
                                    {{ number_format($valuation->balasan_rm / $valuation->luas_lot_petak, 2) }}
                                @else
                                    -
                                @endif
                            </td>
                            <td>
                                <button class="btn btn-sm btn-link toggle-details" data-valuation-id="{{ $valuation->id }}">
                                    <i class="fas fa-chevron-down"></i>
                                </button>
                            </td>
                        </tr>
                        
                        <tr class="details-row d-none" id="details-{{ $valuation->id }}">
                            <td colspan="20">
                                <div class="details-content corporate-details p-4">
                                    <div class="row g-4">
                                        <div class="col-md-6">
                                            <div class="details-panel mb-4">
                                                <div class="details-header">Basic Information</div>
                                                <dl class="row mb-0">
                                                    <dt class="col-sm-5">Mukim</dt>
                                                    <dd class="col-sm-7">{{ $valuation->mukim_bandar }}</dd>
                                                    <dt class="col-sm-5">District</dt>
                                                    <dd class="col-sm-7">{{ $valuation->daerah }}</dd>
                                                    <dt class="col-sm-5">Section</dt>
                                                    <dd class="col-sm-7">{{ $valuation->seksyen_blok ?: '-' }}</dd>
                                                    <dt class="col-sm-5">Lot Type</dt>
                                                    <dd class="col-sm-7">{{ $valuation->jenis_lot_plot ?: '-' }}</dd>
                                                    <dt class="col-sm-5">Lot No.</dt>
                                                    <dd class="col-sm-7">{{ $valuation->no_lot_plot ?: '-' }}</dd>
                                                    <dt class="col-sm-5">Lot Status</dt>
                                                    <dd class="col-sm-7">{{ $valuation->status_lot ?: '-' }}</dd>
                                                    <dt class="col-sm-5">Address</dt>
                                                    <dd class="col-sm-7">{{ $valuation->alamat ?: '-' }}</dd>
                                                </dl>
                                            </div>
                                            <div class="details-panel mb-4">
                                                <div class="details-header">Land Details</div>
                                                <dl class="row mb-0">
                                                    <dt class="col-sm-5">Land Area (L/A)</dt>
                                                    <dd class="col-sm-7">{{ $valuation->luas_lot_petak ? number_format($valuation->luas_lot_petak, 2) . ' sqft' : 'N/A' }}</dd>
                                                    <dt class="col-sm-5">Title No.</dt>
                                                    <dd class="col-sm-7">{{ $valuation->no_hakmilik ?: '-' }}</dd>
                                                    <dt class="col-sm-5">Title Type</dt>
                                                    <dd class="col-sm-7">{{ $valuation->jenis_hakmilik ?: '-' }}</dd>
                                                    <dt class="col-sm-5">Tenure</dt>
                                                    <dd class="col-sm-7">{{ $valuation->jenis_pegangan ?: '-' }}</dd>
                                                    <dt class="col-sm-5">Lease Duration</dt>
                                                    <dd class="col-sm-7">{{ $valuation->tempoh_pajakan ?: '-' }}</dd>
                                                    <dt class="col-sm-5">Lease Expiry Date</dt>
                                                    <dd class="col-sm-7">{{ $valuation->tarikh_luput_pajakan ? date('d/m/Y', strtotime($valuation->tarikh_luput_pajakan)) : '-' }}</dd>
                                                    <dt class="col-sm-5">Land Classification</dt>
                                                    <dd class="col-sm-7">{{ $valuation->klasifikasi_tanah ?: '-' }}</dd>
                                                </dl>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="details-panel mb-4">
                                                <div class="details-header">Property Details</div>
                                                <dl class="row mb-0">
                                                    <dt class="col-sm-5">Property Category</dt>
                                                    <dd class="col-sm-7">{{ $valuation->jenis_harta_tanah ?: '-' }}</dd>
                                                    <dt class="col-sm-5">Building Type</dt>
                                                    <dd class="col-sm-7">{{ $valuation->jenis_bangunan ?: '-' }}</dd>
                                                    <dt class="col-sm-5">No. of Storeys</dt>
                                                    <dd class="col-sm-7">{{ $valuation->bil_tgkt_atas_tanah ?: '-' }}</dd>
                                                    <dt class="col-sm-5">Built-Up Area (B/U)</dt>
                                                    <dd class="col-sm-7">{{ $valuation->luas_bangunan_utama ? number_format($valuation->luas_bangunan_utama, 2) . ' sqft' : '-' }}</dd>
                                                    <dt class="col-sm-5">No. of Rooms</dt>
                                                    <dd class="col-sm-7">{{ $valuation->bilangan_bilik ?: '-' }}</dd>
                                                    <dt class="col-sm-5">Crop</dt>
                                                    <dd class="col-sm-7">{{ $valuation->jenis_tanaman ?: '-' }}</dd>
                                                    <dt class="col-sm-5">RSS Number</dt>
                                                    <dd class="col-sm-7">{{ $valuation->no_rss ?: '-' }}</dd>
                                                </dl>
                                            </div>
                                            <div class="details-panel mb-4">
                                                <div class="details-header">Ownership & Transactions</div>
                                                <dl class="row mb-0">
                                                    <dt class="col-sm-5">Share</dt>
                                                    <dd class="col-sm-7">{{ $valuation->syer ?: '-' }}</dd>
                                                    <dt class="col-sm-5">Date</dt>
                                                    <dd class="col-sm-7">{{ $valuation->tarikh_pindahmilik ? date('d/m/Y', strtotime($valuation->tarikh_pindahmilik)) : '-' }}</dd>
                                                    <dt class="col-sm-5">Seller</dt>
                                                    <dd class="col-sm-7">{{ $valuation->nama_pemberi_pindahmilik ?: '-' }}</dd>
                                                    <dt class="col-sm-5">Buyer</dt>
                                                    <dd class="col-sm-7">{{ $valuation->nama_penerima_pindahmilik ?: '-' }}</dd>
                                                    <dt class="col-sm-5">Price (RM)</dt>
                                                    <dd class="col-sm-7">{{ $valuation->balasan_rm ? number_format($valuation->balasan_rm, 2) : '-' }}</dd>
                                                    <dt class="col-sm-5">PSF (RM)</dt>
                                                    <dd class="col-sm-7">
                                                        @if($valuation->luas_lot_petak && $valuation->luas_lot_petak != 0 && $valuation->balasan_rm)
                                                            {{ number_format($valuation->balasan_rm / $valuation->luas_lot_petak, 2) }}
                                                        @else
                                                            -
                                                        @endif
                                                    </dd>
                                                </dl>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="11" class="text-center">No valuation data found.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="d-flex justify-content-center mt-4">
                {{ $valuations->links('pagination::bootstrap-5') }}
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize Select2 for dropdowns
    $('.corporate-filter-bar .searchable-dropdown').select2({
        theme: 'bootstrap-5'
    });

    // Initialize Select2 for dropdowns in modal
    $('#addJpphModal').on('shown.bs.modal', function () {
        $(this).find('.searchable-dropdown-modal').select2({
            theme: 'bootstrap-5',
            dropdownParent: $('#addJpphModal')
        });
    });

    // Get the offcanvas element
    const offcanvasElement = document.getElementById('moreFiltersOffcanvas');
    const offcanvas = offcanvasElement ? new bootstrap.Offcanvas(offcanvasElement) : null;
    
    // Handle apply filters button click
    const applyFiltersBtn = document.getElementById('applyFiltersBtn');
    if (applyFiltersBtn) {
        applyFiltersBtn.addEventListener('click', function(e) {
            e.preventDefault();
            document.getElementById('mainSearchForm').submit();
            if (offcanvas) {
                offcanvas.hide();
            }
        });
    }

    // Handle clear all filters button
    const clearMoreFiltersBtn = document.getElementById('clearMoreFiltersBtn');
    if (clearMoreFiltersBtn && offcanvasElement) {
        clearMoreFiltersBtn.addEventListener('click', function() {
            const inputs = offcanvasElement.querySelectorAll('input, select, textarea');
            inputs.forEach(element => {
                if (element.type === 'button' || element.type === 'submit') return;
                if (element.tagName === 'SELECT') {
                    element.selectedIndex = 0;
                } else if (element.type === 'checkbox' || element.type === 'radio') {
                    element.checked = false;
                } else {
                    element.value = '';
                }
            });
        });
    }

    // Handle row selection
    const selectAll = document.getElementById('selectAll');
    const checkboxes = document.querySelectorAll('.row-checkbox');
    const printBtn = document.getElementById('printSelectedBtn');
    const exportBtn = document.getElementById('exportSelectedBtn');
    const selectedIds = new Set();

    // Toggle select all
    if (selectAll) {
        selectAll.addEventListener('change', function() {
            const isChecked = this.checked;
            checkboxes.forEach(checkbox => {
                checkbox.checked = isChecked;
                const row = checkbox.closest('tr');
                if (isChecked) {
                    selectedIds.add(checkbox.value);
                    row.classList.add('table-active', 'highlight-row');
                } else {
                    selectedIds.delete(checkbox.value);
                    row.classList.remove('table-active', 'highlight-row');
                }
            });
            updateButtons();
        });
    }

    // Handle individual checkbox changes
    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const row = this.closest('tr');
            if (this.checked) {
                selectedIds.add(this.value);
                row.classList.add('table-active', 'highlight-row');
            } else {
                selectedIds.delete(this.value);
                row.classList.remove('table-active', 'highlight-row');
                if (selectAll) selectAll.checked = false;
            }
            updateButtons();
        });
    });

    // Update buttons state
    function updateButtons() {
        const hasSelection = selectedIds.size > 0;
        if (printBtn) printBtn.disabled = !hasSelection;
        if (exportBtn) exportBtn.disabled = !hasSelection;
    }

    // Handle print button click
    if (printBtn) {
        printBtn.addEventListener('click', function() {
            if (selectedIds.size === 0) return;
            const ids = Array.from(selectedIds).join(',');
            const printWindow = window.open(`/jpph/print?ids=${ids}`, '_blank');
            if (printWindow) printWindow.focus();
        });
    }

    // Handle export button click
    if (exportBtn) {
        exportBtn.addEventListener('click', function() {
            if (selectedIds.size === 0) return;
            const ids = Array.from(selectedIds).join(',');
            window.location.href = `/jpph/export?ids=${ids}`;
        });
    }

    // Toggle details row - make entire row clickable
    document.querySelectorAll('.valuation-row').forEach(row => {
        row.addEventListener('click', function(event) {
            if (event.target.type === 'checkbox' || 
                event.target.closest('input[type="checkbox"]') || 
                event.target.closest('a') || 
                event.target.closest('button')) {
                return;
            }
            
            const valuationId = this.getAttribute('data-valuation-id');
            const detailsRow = document.getElementById(`details-${valuationId}`);
            const toggleButton = this.querySelector('.toggle-details');
            
            if (!detailsRow) return;
            
            // Close all other open details
            document.querySelectorAll('.details-row').forEach(row => {
                if (row.id !== `details-${valuationId}` && !row.classList.contains('d-none')) {
                    row.classList.add('d-none');
                    const otherId = row.id.replace('details-', '');
                    const otherRow = document.querySelector(`.valuation-row[data-valuation-id="${otherId}"]`);
                    const otherButton = document.querySelector(`.toggle-details[data-valuation-id="${otherId}"]`);
                    if (otherRow) otherRow.classList.remove('active-row');
                    if (otherButton) otherButton.classList.remove('active');
                }
            });
            
            // Toggle current details
            detailsRow.classList.toggle('d-none');
            this.classList.toggle('active-row');
            if (toggleButton) toggleButton.classList.toggle('active');
        });
    });

    // Toggle details button functionality
    document.querySelectorAll('.toggle-details').forEach(button => {
        button.addEventListener('click', function(event) {
            event.stopPropagation();
            const valuationId = this.getAttribute('data-valuation-id');
            const detailsRow = document.getElementById(`details-${valuationId}`);
            const row = this.closest('.valuation-row');
            
            if (!detailsRow) return;
            
            // Close all other open details
            document.querySelectorAll('.details-row').forEach(row => {
                if (row.id !== `details-${valuationId}` && !row.classList.contains('d-none')) {
                    row.classList.add('d-none');
                    const otherId = row.id.replace('details-', '');
                    const otherRow = document.querySelector(`.valuation-row[data-valuation-id="${otherId}"]`);
                    const otherButton = document.querySelector(`.toggle-details[data-valuation-id="${otherId}"]`);
                    if (otherRow) otherRow.classList.remove('active-row');
                    if (otherButton) otherButton.classList.remove('active');
                }
            });
            
            // Toggle current details
            detailsRow.classList.toggle('d-none');
            this.classList.toggle('active');
            if (row) row.classList.toggle('active-row');
        });
    });
});
</script>
@endpush

@push('styles')
<style>
    /* ID Badge Styling */
    .id-badge {
        display: inline-block;
        min-width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: var(--maroon-lighter);
        border-radius: 50%;
        font-weight: 600;
        color: var(--maroon);
        font-size: 0.85rem;
        border: 1px solid var(--border-color);
    }

    /* Table Styling */
    .corporate-table {
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.05);
        border: 1px solid var(--border-color);
    }

    .corporate-thead th {
        background-color: var(--maroon);
        color: white;
        font-weight: 500;
        text-transform: uppercase;
        font-size: 0.8rem;
        letter-spacing: 0.5px;
        padding: 0.75rem 1rem;
        vertical-align: middle;
        border: none;
    }

    .corporate-table .table {
        margin-bottom: 0;
    }

    .corporate-table .table td {
        padding: 0.75rem 1rem;
        vertical-align: middle;
        border-color: var(--border-color);
    }

    .corporate-table .table tr:not(:last-child) {
        border-bottom: 1px solid var(--border-color);
    }

    .corporate-table .table tr:hover {
        background-color: var(--maroon-lighter);
    }

    /* Details Panel Styling */
    .details-content {
        background-color: #f8f9fa;
        border-radius: 8px;
    }

    .details-panel {
        background: white;
        border-radius: 8px;
        padding: 1.25rem 1rem;
        margin-bottom: 1.5rem;
        box-shadow: 0 1px 4px 0 rgba(0,0,0,0.03);
        border: 1px solid #e5e8eb;
    }

    .details-panel:last-child {
        margin-bottom: 0;
    }

    .details-header {
        font-size: 1.05rem;
        font-weight: 600;
        color: #2a4365;
        border-bottom: 1px solid #e5e8eb;
        padding-bottom: 0.75rem;
        margin-bottom: 1rem;
        border-bottom: 2px solid var(--maroon);
    }

    .details-content dl {
        margin-bottom: 0;
    }

    .details-content dt {
        font-weight: 500;
        color: var(--gray);
    }

    .details-content dd {
        margin-bottom: 0.75rem;
        color: var(--gray-dark, #343a40);
    }

    /* Highlight Row */
    .highlight-row {
        background-color: var(--maroon-lighter) !important;
    }

    /* Toggle Details Button */
    .toggle-details {
        background: none;
        border: none;
        color: var(--gray);
        padding: 0.25rem 0.5rem;
        cursor: pointer;
        font-size: 0.875rem;
        transition: all 0.2s;
    }

    .toggle-details:hover {
        color: var(--maroon);
    }

    .toggle-details i {
        transition: transform 0.2s;
    }

    .toggle-details.active i {
        transform: rotate(180deg);
    }
    .details-content {
        background-color: #f8f9fa;
        border-radius: 0.5rem;
    }
    dl.row {
        margin-bottom: 0;
    }
    dt {
        font-weight: 500;
        color: #495057;
    }
    dd {
        color: #212529;
    }
    /* ID Badge Styling */
    .id-badge {
        display: inline-block;
        min-width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: var(--maroon-lighter);
        border-radius: 50%;
        font-weight: 600;
        color: var(--maroon);
        font-size: 0.85rem;
        border: 1px solid var(--border-color);
    }

    /* Table Styling */
    .corporate-table {
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.05);
        border: 1px solid var(--border-color);
    }

    .corporate-thead th {
        background-color: var(--maroon);
        color: white;
        font-weight: 500;
        text-transform: uppercase;
        font-size: 0.8rem;
        letter-spacing: 0.5px;
        padding: 0.75rem 1rem;
        vertical-align: middle;
        border: none;
    }

    .corporate-table .table {
        margin-bottom: 0;
    }

    .corporate-table .table td {
        padding: 0.75rem 1rem;
        vertical-align: middle;
        border-color: var(--border-color);
    }

    .corporate-table .table tr:not(:last-child) {
        border-bottom: 1px solid var(--border-color);
    }

    .corporate-table .table tr:hover {
        background-color: var(--maroon-lighter);
    }

    /* Details Panel Styling */
    .details-content {
        background-color: #f8f9fa;
        border-radius: 8px;
    }

    .details-panel {
        background: white;
        border-radius: 8px;
        padding: 1.25rem 1rem;
        margin-bottom: 1.5rem;
        box-shadow: 0 1px 4px 0 rgba(0,0,0,0.03);
        border: 1px solid #e5e8eb;
    }

    .details-panel:last-child {
        margin-bottom: 0;
    }

    .details-header {
        font-size: 1.05rem;
        font-weight: 600;
        color: #2a4365;
        border-bottom: 1px solid #e5e8eb;
        margin-bottom: 1rem;
        padding-bottom: 0.4rem;
        letter-spacing: 0.01em;
        background: transparent;
    }

    .details-content dl {
        margin: 0;
        row-gap: 0.15rem;
    }
    
    .details-content dt {
        font-weight: 500;
        color: #6b7280;
        text-align: left;
        padding-right: 0.25rem;
        white-space: nowrap;
        margin-bottom: 0.15rem;
        font-size: 0.98rem;
    }
    
    .details-content dd {
        color: #212529;
        margin-bottom: 0.15rem;
        font-size: 0.98rem;
    }
    
    .details-content dd:empty::after {
        content: "-";
        color: #adb5bd;
    }
    
    /* Fix for details row */
    .details-row > td {
        padding: 0 !important;
    }
    
    .corporate-details {
        background: #f9fbfc;
        border-radius: 12px;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,0.04);
        padding: 2rem 1.5rem;
        margin-bottom: 1rem;
    }
    
    /* Responsive adjustments */
    @media (max-width: 991.98px) {
        .corporate-details {
            padding: 1.5rem 1rem;
        }
        
        .details-panel {
            padding: 1rem 0.75rem;
        }
        
        .details-content dt,
        .details-content dd {
            font-size: 0.94rem;
        }
    }
    
    .corporate-filter-bar {
        background: #f9fbfc;
        border-radius: 12px;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,0.04);
        margin-bottom: 2rem !important;
    }
    .corporate-filter-bar label {
        font-weight: 500;
        color: #2a4365;
        font-size: 0.97rem;
    }
    .corporate-filter-bar .form-control, .corporate-filter-bar .form-select {
        border-radius: 6px;
        border: 1px solid #e5e8eb;
        font-size: 0.97rem;
        background: #fff;
    }
    .corporate-filter-bar .btn {
        border-radius: 6px;
        font-size: 0.99rem;
        font-weight: 500;
    }
    .corporate-filter-bar .btn-outline-secondary {
        color: #4f46e5;
        border-color: #e5e8eb;
        background: #f2f6fa;
    }
    .corporate-filter-bar .btn-outline-secondary:disabled {
        opacity: 0.7;
    }
    @media (max-width: 991.98px) {
        .corporate-filter-bar .form-label {
            font-size: 0.95rem;
        }
        .corporate-filter-bar .btn {
            font-size: 0.97rem;
        }
    }
    .highlight-row {
        background-color: #e3f2fd !important;
    }
    
    .active-row {
        background-color: #f0f7ff !important;
    }
</style>
@endpush

@endsection