@extends('layouts.app')

@section('content')
<div class="container">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1> Sales Transactions</h1>
        <div class="d-flex gap-2">
            <div class="form-check form-switch">
                <label class="form-check-label me-2" for="advanceSearch">Advance Search</label>
                <input class="form-check-input" type="checkbox" id="advanceSearch">
            </div>
            
        </div>
    </div>

    <!-- Add Valuation Modal -->
    <div class="modal fade" id="addValuationModal" tabindex="-1" aria-labelledby="addValuationModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="addValuationModalLabel">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>
                <div class="col-md-4">
                  <label for="daerah" class="form-label">District</label>
                  <select class="form-select" id="daerah" name="daerah">
                    <option value="">Select District</option>
                    <option>Petaling</option>
                    <option>Hulu Langat</option>
                    <option>Kuala Lumpur</option>
                    <option>Gombak</option>
                  </select>
                </div>
                <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 -->
    <form method="GET" action="{{ route('valuations.index') }}" class="mb-4">
        <div class="input-group" id="simpleSearchBar">
            <input type="text" class="form-control" name="q" placeholder="Search..." value="{{ request('q') }}">
            <button class="btn btn-danger" type="submit">SEARCH</button>
            <button class="btn btn-outline-secondary" type="button" id="toggle-fields"><i class="fas fa-sync-alt"></i></button>
        </div>
        
        <!-- Advanced Search Form -->
        <div id="advancedSearchForm" class="card mt-3 mb-4 d-none">
            <div class="card-body">
                <div class="row g-3">
                 <div class="col-md-2">
                    <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">District</label>
                        <select class="form-select" 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">Mukim/Town</label>
                        <select class="form-select" 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="scheme" class="form-label">Scheme</label>
                        <input type="text" class="form-control" id="scheme" name="scheme" placeholder="Scheme">
                    </div>
                    <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">
                    </div>
                    <div class="col-md-3">
                        <label for="rss_no" class="form-label">RSS Number</label>
                        <input type="text" class="form-control" id="rss_no" name="rss_no" placeholder="RSS Number">
                    </div>
                    <div class="col-md-3">
                        <label for="seller" class="form-label">Seller</label>
                        <input type="text" class="form-control" id="seller" name="seller" placeholder="Seller">
                    </div>
                    <div class="col-md-3">
                        <label for="buyer" class="form-label">Buyer</label>
                        <input type="text" class="form-control" id="buyer" name="buyer" placeholder="Buyer">
                    </div>
                    <div class="col-md-3">
                        <label for="date_from" class="form-label">Date From</label>
                        <input type="date" class="form-control" id="date_from" name="date_from">
                    </div>
                    <div class="col-md-3">
                        <label for="date_to" class="form-label">Date To</label>
                        <input type="date" class="form-control" id="date_to" name="date_to">
                    </div>
                    <div class="col-md-3">
                        <label for="lot_no" class="form-label">Lot No</label>
                        <input type="text" class="form-control" id="lot_no" name="lot_no" placeholder="Lot No">
                    </div>
                    <div class="col-md-3">
                        <label for="no_hakmilik" class="form-label">No Hakmilik</label>
                        <input type="text" class="form-control" id="no_hakmilik" name="no_hakmilik" placeholder="No Hakmilik">
                    </div>
                    <div class="col-md-3">
                        <label for="price_min" class="form-label">Price (RM) From</label>
                        <input type="number" class="form-control" id="price_min" name="price_min" placeholder="Min Price">
                    </div>
                    <div class="col-md-3">
                        <label for="price_max" class="form-label">Price (RM) To</label>
                        <input type="number" class="form-control" id="price_max" name="price_max" placeholder="Max Price">
                    </div>
                    <div class="col-md-3">
                        <label for="area_min" class="form-label">Area From</label>
                        <input type="number" class="form-control" id="area_min" name="area_min" placeholder="Min Area">
                    </div>
                    <div class="col-md-3">
                        <label for="area_max" class="form-label">Area To</label>
                        <input type="number" class="form-control" id="area_max" name="area_max" placeholder="Max Area">
                    </div>
                    <div class="col-md-3">
                        <label for="square_foot" class="form-label">Square Foot</label>
                        <input type="number" class="form-control" id="square_foot" name="square_foot" placeholder="Square Foot">
                    </div>
                    <div class="col-md-3">
                        <label for="hectare" class="form-label">Hectare</label>
                        <input type="number" class="form-control" id="hectare" name="hectare" placeholder="Hectare">
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-md-3">
                        <label for="sort_by" class="form-label">Sort By</label>
                        <select class="form-select" id="sort_by" name="sort_by">
                            <option value="date">Date</option>
                            <option value="price">Price</option>
                            <option value="area">Area</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="sort_order" class="form-label">Order</label>
                        <select class="form-select" id="sort_order" name="sort_order">
                            <option value="desc">Descending</option>
                            <option value="asc">Ascending</option>
                        </select>
                    </div>
                    <div class="col-md-6 d-flex align-items-end justify-content-end">
                        <button type="submit" class="btn btn-danger me-2">Search</button>
                        <button type="button" class="btn btn-secondary" id="refreshButton">Reset</button>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="mt-2" id="fieldsSection">
            <div class="d-flex align-items-center mb-2">
                <button class="btn btn-sm btn-outline-secondary me-2" type="button" id="fields-dropdown">Fields <i class="fas fa-caret-down"></i></button>
            </div>
            
            @php
                $availableFields = [
                    'daerah' => 'DISTRICT',
                    'mukim_bandar' => 'MUKIM/TOWN',
                    'kawasan_skim_perumahan' => 'SCHEME',
                    'alamat' => 'ADDRESS',
                    'no_rss' => 'RSS NO',
                    'nama_pemberi_pindahmilik' => 'SELLER',
                    'nama_penerima_pindahmilik' => 'BUYER',
                    'jenis_harta_tanah' => 'PROPERTY TYPE',
                    'jenis_bangunan' => 'PROPERTY',
                    'bil_tgkt_atas_tanah' => 'STOREYS',
                    'jenis_tanaman' => 'CULTIVATION',
                    'tarikh_pindahmilik' => 'DATE',
                    'luas_lot_petak' => 'AREA SF',
                    'balasan_rm' => 'PRICE',
                    'no_lot_plot' => 'LOT NO'
                ];
                $selectedFields = request('fields', ['daerah', 'mukim_bandar', 'kawasan_skim_perumahan', 'alamat', 'no_rss']);
                if (!is_array($selectedFields)) {
                    $selectedFields = explode(',', $selectedFields);
                }
            @endphp
            
            <div class="field-selection d-none" id="field-selection-panel">
                <ul class="list-unstyled field-list m-0 p-0">
                    @foreach($availableFields as $field => $label)
                        <li class="field-item">
                            <a href="#" class="field-link {{ in_array($field, $selectedFields) ? 'active' : '' }}" data-field="{{ $field }}">
                                <i class="fas fa-{{ in_array($field, $selectedFields) ? 'check-square' : 'plus' }} me-2"></i> {{ $label }}
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>
            
            <div class="selected-fields mt-2">
                @foreach($availableFields as $field => $label)
                    @if(in_array($field, $selectedFields))
                        <span class="badge field-badge bg-primary me-1" data-field="{{ $field }}" style="cursor: pointer;">
                            {{ $label }} <i class="fas fa-times ms-1 close-field"></i>
                        </span>
                    @endif
                @endforeach
            </div>
            
            <!-- Hidden inputs for selected fields -->
            @foreach($selectedFields as $field)
                <input type="hidden" name="fields[]" value="{{ $field }}">
            @endforeach
        </div>
    </form>

    <!-- 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="reset" class="btn btn-light w-100">Clear All</button>
                </div>
                <div class="col-6">
                    <button type="submit" class="btn btn-primary w-100">Apply Filters</button>
                </div>
            </div>
        </div>
    </div>

    <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" id="select-all-checkbox"></th>
                            <th>Bil.<br></th>
                            <th>#</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 }}" style="cursor: pointer;">
                            <td>
                                <input type="checkbox" name="selected_ids[]" value="{{ $valuation->id }}" class="row-check" {{ $valuation->selected ? 'checked' : '' }}>
                            </td>
                            <td style="text-align: center;">
                                <span class="id-badge">{{ $valuation->id }}</span><br>
                            </td>
                            <td>
                                <button type="button" class="btn btn-outline-secondary btn-sm ms-2 copy-indicate-btn" data-valuation-id="{{ $valuation->id }}" title="Indicate">
                                    <i class="fas fa-copy"></i>
                                </button>   
                            </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
                                            {{ $valuation->$field }}
                                        @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="13">
                                <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">{{ 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)
                                                            {{ number_format($valuation->balasan_rm / $valuation->luas_lot_petak, 2) }}
                                                        @else
                                                            N/A
                                                        @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>

<!-- Error Modal for Indicate -->
<div class="modal fade" id="indicateWarningModal" tabindex="-1" aria-labelledby="indicateWarningModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="indicateWarningModalLabel">Warning</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Are you sure you want to use this JPPH record to create a new indication? This action cannot be undone.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-danger" id="confirmIndicateBtn">Confirm</button>
      </div>
    </div>
  </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Handle row selection
    const selectAll = document.getElementById('select-all-checkbox');
    const checkboxes = document.querySelectorAll('.row-check');
    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(`/valuations/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 = `/valuations/export?ids=${ids}`;
        });
    }

    // Advanced Search Toggle
    const advanceSearchToggle = document.getElementById('advanceSearch');
    const advancedSearchForm = document.getElementById('advancedSearchForm');
    const simpleSearchBar = document.getElementById('simpleSearchBar');
    const fieldsSection = document.getElementById('fieldsSection');
    
    if (advanceSearchToggle && advancedSearchForm && simpleSearchBar && fieldsSection) {
        // Check if the toggle was previously enabled via localStorage
        const advancedSearchEnabled = localStorage.getItem('advancedSearchEnabled') === 'true';
        
        // Only auto-enable if explicitly set in localStorage
        if (advancedSearchEnabled) {
            advanceSearchToggle.checked = true;
            advancedSearchForm.classList.remove('d-none');
            simpleSearchBar.classList.add('d-none');
            fieldsSection.classList.add('d-none');
        }
        
        // Toggle form visibility when switch is clicked
        advanceSearchToggle.addEventListener('change', function() {
            if (this.checked) {
                advancedSearchForm.classList.remove('d-none');
                simpleSearchBar.classList.add('d-none');
                fieldsSection.classList.add('d-none');
                localStorage.setItem('advancedSearchEnabled', 'true');
            } else {
                advancedSearchForm.classList.add('d-none');
                simpleSearchBar.classList.remove('d-none');
                fieldsSection.classList.remove('d-none');
                localStorage.setItem('advancedSearchEnabled', 'false');
            }
        });
    }
    
    // Refresh button functionality
    const refreshButton = document.getElementById('refreshButton');
    if (refreshButton) {
        refreshButton.addEventListener('click', function() {
            window.location.href = '{{ route("valuations.index") }}';
        });
    }
    // Fields dropdown toggle

    const fieldsDropdown = document.getElementById('fields-dropdown');
    const fieldSelectionPanel = document.getElementById('field-selection-panel');
    if (fieldsDropdown && fieldSelectionPanel) {
        fieldsDropdown.addEventListener('click', function() {
            fieldSelectionPanel.classList.toggle('d-none');
        });
    }
    
    // Reset button
    const toggleFields = document.getElementById('toggle-fields');
    if (toggleFields) {
        toggleFields.addEventListener('click', function() {
            window.location.href = '{{ route("valuations.index") }}';
        });
    }
    
    // Field selection functionality
    document.querySelectorAll('.field-link').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const fieldName = this.dataset.field;
            const currentUrl = new URL(window.location.href);
            const searchParams = currentUrl.searchParams;
            
            // Get current fields
            let selectedFields = searchParams.getAll('fields[]');
            
            if (selectedFields.includes(fieldName)) {
                // Remove field if already selected
                selectedFields = selectedFields.filter(field => field !== fieldName);
                this.classList.remove('active');
                this.querySelector('i').classList.remove('fa-check-square');
                this.querySelector('i').classList.add('fa-plus');
            } else {
                // Add field if not selected
                selectedFields.push(fieldName);
                this.classList.add('active');
                this.querySelector('i').classList.remove('fa-plus');
                this.querySelector('i').classList.add('fa-check-square');
            }
            
            // Clear existing fields
            searchParams.delete('fields[]');
            
            // Add selected fields
            selectedFields.forEach(field => {
                searchParams.append('fields[]', field);
            });
            
            // Update URL and reload
            currentUrl.search = searchParams.toString();
            window.location.href = currentUrl.toString();
        });
    });
    
    // Handle clicking on selected field badges
    document.querySelectorAll('.selected-fields .field-badge').forEach(badge => {
        badge.addEventListener('click', function(e) {
            const fieldName = this.dataset.field;
            const currentUrl = new URL(window.location.href);
            const searchParams = currentUrl.searchParams;
            
            // Get current fields
            let selectedFields = searchParams.getAll('fields[]');
            
            // If no fields are explicitly set in the URL, use the default fields
            if (selectedFields.length === 0) {
                // These should match the defaults in the controller
                selectedFields = ['district', 'mukim_bandar', 'kawasan_skim_perumahan', 'alamat', 'no_rss'];
            }
            
            // Remove this field
            selectedFields = selectedFields.filter(field => field !== fieldName);
            
            // If removing a field would leave us with no fields, restore the defaults
            if (selectedFields.length === 0) {
                selectedFields = ['district', 'mukim_bandar', 'kawasan_skim_perumahan', 'alamat', 'no_rss'];
            }
            
            // Clear existing fields
            searchParams.delete('fields[]');
            
            // Add remaining selected fields
            selectedFields.forEach(field => {
                searchParams.append('fields[]', field);
            });
            
            // Update URL and reload
            currentUrl.search = searchParams.toString();
            window.location.href = currentUrl.toString();
        });
    });
    // Toggle details row - make entire row clickable
    document.querySelectorAll('.valuation-row').forEach(row => {
        row.addEventListener('click', function(event) {
            // Don't toggle if clicking on checkbox or indicate button
            if (event.target.type === 'checkbox' || 
                event.target.closest('input[type="checkbox"]') ||
                event.target.closest('.copy-indicate-btn')) {
                return;
            }
            
            const valuationId = this.getAttribute('data-valuation-id');
            const detailsRow = document.getElementById(`details-${valuationId}`);
            const toggleButton = this.querySelector('.toggle-details');
            
            // Close all other open details
            document.querySelectorAll('.details-row').forEach(detailsRow => {
                if (detailsRow.id !== `details-${valuationId}` && !detailsRow.classList.contains('d-none')) {
                    detailsRow.classList.add('d-none');
                    const otherId = detailsRow.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');
        });
    });
    
    // Keep the original button functionality as a fallback
    document.querySelectorAll('.toggle-details').forEach(button => {
        button.addEventListener('click', function(event) {
            event.stopPropagation(); // Prevent the row click event from firing
            const valuationId = this.getAttribute('data-valuation-id');
            const detailsRow = document.getElementById(`details-${valuationId}`);
            const row = this.closest('.valuation-row');
            
            // Close all other open details
            document.querySelectorAll('.details-row').forEach(detailsRow => {
                if (detailsRow.id !== `details-${valuationId}` && !detailsRow.classList.contains('d-none')) {
                    detailsRow.classList.add('d-none');
                    const otherId = detailsRow.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');
        });
    });

    // Highlight row when checkbox is checked
    document.querySelectorAll('.row-check').forEach(function(checkbox) {
        checkbox.addEventListener('change', function() {
            const row = this.closest('tr');
            if (this.checked) {
                row.classList.add('table-active', 'highlight-row');
            } else {
                row.classList.remove('table-active', 'highlight-row');
            }
        });
        // Initial state
        if (checkbox.checked) {
            checkbox.closest('tr').classList.add('table-active', 'highlight-row');
        }
    });
    //tambahan
    document.addEventListener('DOMContentLoaded', function () {
    const indicateWarningModal = new bootstrap.Modal(document.getElementById('indicateWarningModal'));
    const confirmIndicateBtn = document.getElementById('confirmIndicateBtn');
    let valuationIdToIndicate = null;

    // Add click listener to all "copy-indicate-btn" buttons
    document.querySelectorAll('.copy-indicate-btn').forEach(button => {
        button.addEventListener('click', function (event) {
            // Stop the click from bubbling up to the row's click listener if you have one
            event.stopPropagation(); 
            
            // Get the valuation ID from the button's data attribute
            valuationIdToIndicate = this.dataset.valuationId;
            
            // Show the confirmation modal
            indicateWarningModal.show();
        });
    });

    // Add click listener to the final confirm button inside the modal
    confirmIndicateBtn.addEventListener('click', function () {
        if (valuationIdToIndicate) {
            // Construct the URL and redirect the user
            window.location.href = `/indications/create?valuation_id=${valuationIdToIndicate}`;
        }
    });
});

    // Copy/indicate button
    let selectedValuationId = null;
    let indicateWarningModal = null;
    const indicateWarningModalEl = document.getElementById('indicateWarningModal');
    if (indicateWarningModalEl) {
        indicateWarningModal = new bootstrap.Modal(indicateWarningModalEl);
    }
    document.querySelectorAll('.copy-indicate-btn').forEach(function(btn) {
        btn.addEventListener('click', function() {
            selectedValuationId = this.getAttribute('data-valuation-id');
            if (indicateWarningModal) indicateWarningModal.show();
        });
    });
    const confirmBtn = document.getElementById('confirmIndicateBtn');
    if (confirmBtn) {
        confirmBtn.addEventListener('click', function() {
            if (selectedValuationId) {
                window.location.href = `/indications/create?valuation_id=${selectedValuationId}`;
            }
        });
    }

    // Auto-calculate PSF when price or land area changes
    function calcPSF() {
        const price = parseFloat(document.getElementById('balasan_rm')?.value) || 0;
        const area = parseFloat(document.getElementById('luas_lot_petak')?.value) || 0;
        const psfField = document.getElementById('psf');
        if (psfField) {
            if (price > 0 && area > 0) {
                psfField.value = (price / area).toFixed(2);
            } else {
                psfField.value = '';
            }
        }
    }
    const balasanInput = document.getElementById('balasan_rm');
    const luasInput = document.getElementById('luas_lot_petak');
    if (balasanInput) {
        balasanInput.addEventListener('input', calcPSF);
    }
    if (luasInput) {
        luasInput.addEventListener('input', calcPSF);
    }
});
</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;
        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;
    }



    /* 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;
    }
    .details-row {
        background-color: #fff;
    }
    .details-row.show {
        display: table-row;
    }

    td input[type="checkbox"] {
        transform: scale(1.2);
        cursor: pointer;
    }
    th:nth-child(2),
    td:nth-child(2) {
        width: 40px;
        text-align: center;
    }

    .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;
    }
    .corporate-details .details-panel {
        background: #fff;
        border: 1px solid #e5e8eb;
        border-radius: 8px;
        padding: 1.25rem 1rem;
        margin-bottom: 1.5rem;
        box-shadow: 0 1px 4px 0 rgba(0,0,0,0.03);
    }
    .corporate-details .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;
    }
    .corporate-details dl.row {
        margin-bottom: 0;
        row-gap: 0.15rem;
    }
    .corporate-details dt {
        font-weight: 500;
        color: #6b7280;
        text-align: left;
        padding-right: 0.25rem;
        white-space: nowrap;
        margin-bottom: 0.15rem;
        font-size: 0.98rem;
    }
    .corporate-details dd {
        color: #22223b;
        margin-bottom: 0.15rem;
        word-break: break-word;
        font-size: 0.98rem;
    }
    @media (max-width: 991.98px) {
        .corporate-details {
            padding: 1rem 0.5rem;
        }
        .corporate-details .details-panel {
            padding: 0.75rem 0.5rem;
        }
        .corporate-details dt, .corporate-details dd {
            font-size: 0.96rem;
        }
    }

    .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:rgb(105, 37, 37);
        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;
    }
    
    /* Search form styling */
    .field-selection {
        background-color: #fff;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        padding: 0;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        position: absolute;
        z-index: 1000;
        width: 200px;
        margin-top: 5px;
    }
    
    .field-item {
        border-bottom: 1px solid #f0f0f0;
    }
    
    .field-item:last-child {
        border-bottom: none;
    }
    
    .field-link {
        display: block;
        padding: 8px 15px;
        color: #333;
        text-decoration: none;
        font-size: 0.9rem;
        transition: background-color 0.2s;
    }
    
    .field-link:hover {
        background-color: #f8f9fa;
        text-decoration: none;
        color: #333;
    }
    
    .field-link.active {
        color:rgb(90, 25, 25);
    }
    
    .selected-fields .badge {
        font-size: 0.85rem;
        padding: 5px 10px;
        border: 1px solid #dee2e6;
        background-color:rgb(230, 184, 171);
        color: white;
        margin-right: 5px;
    }
</style>
@endpush

@endsection