@extends('layouts.app')

@section('content')
<div class="container">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>Indication 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>

    <!-- Filter/Search Bar -->
    <form method="GET" action="{{ route('indications.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">
                {{-- STATE FILTER --}}
                <div class="col-md-3">
                    <label for="filter_state_id" class="form-label">State</label>
                    {{-- The 'name' attribute is now 'filter_state_id' --}}
                    <select name="filter_state_id" id="filter_state_id" class="form-select form-select-sm">
                        <option value="">All States</option>
                        @if(isset($states))
                            @foreach($states as $id => $name)
                                <option value="{{ $id }}" {{ request('filter_state_id') == $id ? 'selected' : '' }}>
                                    {{ $name }}
                                </option>
                            @endforeach
                        @endif
                    </select>
                </div>

                {{-- DISTRICT FILTER --}}
                <div class="col-md-3">
                    <label for="filter_district_id" class="form-label">District</label>
                    {{-- The 'name' attribute is now 'filter_district_id' --}}
                    <select name="filter_district_id" id="filter_district_id" class="form-select form-select-sm">
                        <option value="">All Districts</option>
                        {{-- The loop now uses ID and Name correctly --}}
                        @if(isset($districts))
                            @foreach($districts as $id => $name)
                                <option value="{{ $id }}" {{ request('filter_district_id') == $id ? 'selected' : '' }}>
                                    {{ $name }}
                                </option>
                            @endforeach
                        @endif
                    </select>
                </div>

                {{-- MUKIM/TOWN FILTER --}}
                <div class="col-md-3">
                    <label for="filter_mukim_id" class="form-label">Mukim/Town</label>
                    {{-- The 'name' attribute is now 'filter_subdistrict_id' --}}
                    <select name="filter_subdistrict_id" id="filter_subdistrict_id" class="form-select form-select-sm">
                        <option value="">All Mukims/Towns</option>
                        {{-- The loop now uses ID and Name correctly --}}
                        @if(isset($mukims))
                            @foreach($mukims as $id => $name)
                                <option value="{{ $id }}" {{ request('filter_subdistrict_id') == $id ? 'selected' : '' }}>
                                    {{ $name }}
                                </option>
                            @endforeach
                        @endif
                    </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>
    <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="card shadow-sm mb-4">
        <div class="card-header d-flex justify-content-between align-items-center py-2">
            <div id="resultCount" data-total="{{ $indications->total() }}">Results: {{ $indications->firstItem() }} - {{ $indications->lastItem() }} of {{ $indications->total() }}</div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0 w-100">
                    <thead class="table-dark">
                        <tr>
                            <th><input type="checkbox" id="select-all-checkbox"></th>    
                            <th class="text-center">#</th>
                            <th>VALUER</th>
                            <th>LOCATION</th>
                            <th>SCHEME / ADDRESS</th>
                            <th>DATE</th>
                            <th>PRICE (RM)</th>
                            <th>AREA / PSF</th>
                            <th>PROPERTY INFO</th>
                            <th>LOT / TITLE</th>
                            <th>SELLER</th>
                            <th>BUYER</th>
                            <th>REMARKS</th>
                            <th>ACTIONS</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($indications as $index => $indication)
                        <tr class="indication-row" data-indication-id="{{ $indication->id }}">
                            
                            <td class="text-center">
                                <input type="checkbox" name="selected_ids[]" value="{{ $indication->id }}" class="row-check">
                            </td>
                            <td class="text-center">{{ $indications->firstItem() + $index }}</td>
                            <td>V: {{ $indication->user->name ?? 'N/A' }}</td>
                            <td>
                                {{ collect([
                                    $indication->subdistrict->subdistrict_name ?? $indication->mukim_bandar,
                                    $indication->district->district_name ?? $indication->daerah,
                                    $indication->state->state_name ?? $indication->state_name_if_direct_column
                                ])->filter()->implode(', ') }}
                            </td>
                            <td>
                                <b>{{ $indication->kawasan_skim_perumahan ?? '-' }}</b><br>
                                {{ $indication->alamat ?? '-' }}
                            </td>
                            <td>{{ $indication->tarikh_pindahmilik ? \Carbon\Carbon::parse($indication->tarikh_pindahmilik)->format('d-m-Y') : '-' }}</td>
                            <td class="text-nowrap">{{ number_format($indication->balasan_rm ?? 0, 0) }}</td>
                            <td>
                                Land: {{ number_format($indication->luas_lot_petak ?? 0, 0) }} m² <br>
                                B/U: {{ number_format($indication->luas_bangunan_utama ?? 0, 0) }} m² <br>
                                PSF: {{ number_format($calcPSF ?? 0, 2) }}
                            </td>
                            <td>
                                {{ $indication->jenis_harta_tanah ?? '-' }} <br>
                                Tenure: {{ $indication->jenis_pegangan ?? '-' }}
                            </td>
                            <td>
                                Lot: {{ $indication->no_lot_plot ?? '-' }} <br>
                                Title: {{ $indication->no_hakmilik ?? '-' }}
                            </td>
                            <td>{{ $indication->nama_pemberi_pindahmilik ?? '-' }}</td>
                            <td>{{ $indication->nama_penerima_pindahmilik ?? '-' }}</td>
                            <td>{{ $indication->remarks ?? '-' }}</td>
                            <td>
                                <div class="d-flex gap-1">
                                    <a href="{{ route('indications.show', $indication) }}" class="btn btn-sm btn-info">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a href="{{ route('indications.edit', $indication) }}" class="btn btn-sm btn-primary">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <form action="{{ route('indications.destroy', $indication) }}" method="POST" class="d-inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure?')">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="13" class="text-center py-4">No indications found.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer d-flex justify-content-between align-items-center py-2">
            <div>Page: {{ $indications->currentPage() }}</div>
            <div class="d-flex gap-1">
                @if ($indications->onFirstPage())
                    <button class="btn btn-sm btn-outline-secondary" disabled><i class="fas fa-chevron-left"></i></button>
                @else
                    <a href="{{ $indications->previousPageUrl() }}" class="btn btn-sm btn-outline-secondary"><i class="fas fa-chevron-left"></i></a>
                @endif
                @for ($i = 1; $i <= $indications->lastPage(); $i++)
                    @if ($i == $indications->currentPage())
                        <button class="btn btn-sm btn-outline-primary">{{ $i }}</button>
                    @else
                        <a href="{{ $indications->url($i) }}" class="btn btn-sm btn-outline-secondary">{{ $i }}</a>
                    @endif
                @endfor
                @if ($indications->hasMorePages())
                    <a href="{{ $indications->nextPageUrl() }}" class="btn btn-sm btn-outline-secondary"><i class="fas fa-chevron-right"></i></a>
                @else
                    <button class="btn btn-sm btn-outline-secondary" disabled><i class="fas fa-chevron-right"></i></button>
                @endif
            </div>
            <div>Results: {{ $indications->firstItem() }} - {{ $indications->lastItem() }} of {{ $indications->total() }}</div>
        </div>
    </div>
</div>

@push('styles')
<style>
    /* Checkbox Styling */
    .form-check-input {
        width: 1.2em;
        height: 1.2em;
        margin-top: 0;
        vertical-align: middle;
        background-color: #fff;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        border: 1px solid #dee2e6;
        appearance: none;
        color-adjust: exact;
        cursor: pointer;
    }

    .form-check-input:checked {
        background-color: var(--maroon);
        border-color: var(--maroon);
    }

    .form-check-input:focus {
        border-color: var(--maroon);
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(122, 31, 31, 0.25);
    }

    /* Table Styling */
    .table th {
        position: sticky;
        top: 0;
        z-index: 10;
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
        background-color: rgb(94, 17, 17);
    }

    .table td {
        vertical-align: middle;
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
    }

    .table-dark {
        background-color: rgb(102, 51, 51);
    }

    .id-badge {
        display: inline-block;
        padding: 3px 8px;
        background-color: #e9ecef;
        border-radius: 4px;
        font-size: 0.875rem;
        font-weight: 500;
    }

    .indication-row:hover {
        background-color: #f8f9fa;
    }

    .selected-fields .badge {
        cursor: pointer;
    }

    .selected-fields .badge:hover {
        opacity: 0.8;
    }

    .card-header, .card-footer {
        background-color: #f8f9fa;
        font-size: 0.85rem;
    }

    .btn-outline-secondary {
        border-color: #dee2e6;
    }

    .btn-outline-primary {
        background-color: rgb(104, 39, 39);
        color: white;
    }

    .table-responsive {
        max-height: 70vh;
    }

    .table {
        table-layout: auto;
        width: 100%;
    }

    /* Highlight Row */
    .highlight-row {
        background-color: #e3f2fd !important;
    }
    
    .active-row {
        background-color: #f0f7ff !important;
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Toggle advanced search form
    const advanceSearchToggle = document.getElementById('advanceSearch');
    const advancedSearchForm = document.getElementById('advancedSearchForm');
    const simpleSearchBar = document.getElementById('simpleSearchBar');
    const fieldsSection = document.getElementById('fieldsSection');
    
    if (advanceSearchToggle && advancedSearchForm && simpleSearchBar) {
        // Check if the toggle was previously enabled via localStorage
        const advancedSearchEnabled = localStorage.getItem('advancedSearchEnabled') === 'true';
        
        if (advancedSearchEnabled) {
            advanceSearchToggle.checked = true;
            advancedSearchForm.classList.remove('d-none');
            simpleSearchBar.classList.add('d-none');
            fieldsSection.classList.add('d-none');
        }
        
        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');
            }
        });
    }
    
    
    // Select All checkbox functionality
    const selectAllCheckbox = document.getElementById('select-all-checkbox');
    const printBtn = document.getElementById('printSelectedBtn');
    const exportBtn = document.getElementById('exportSelectedBtn');
    const selectedIds = new Set();

    if (selectAllCheckbox) {
        selectAllCheckbox.addEventListener('change', function() {
            const checkboxes = document.querySelectorAll('.row-check');
            checkboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
                const row = checkbox.closest('tr');
                if (this.checked) {
                    selectedIds.add(checkbox.value);
                    row.classList.add('table-active', 'highlight-row');
                } else {
                    selectedIds.delete(checkbox.value);
                    row.classList.remove('table-active', 'highlight-row');
                }
            });
            updateButtons();
        });
        
        // Update select all checkbox when individual checkboxes change
        document.querySelectorAll('.row-check').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');
                }
                
                const allCheckboxes = document.querySelectorAll('.row-check');
                const checkedCheckboxes = document.querySelectorAll('.row-check:checked');
                selectAllCheckbox.checked = allCheckboxes.length === checkedCheckboxes.length;
                selectAllCheckbox.indeterminate = checkedCheckboxes.length > 0 && checkedCheckboxes.length < allCheckboxes.length;
                
                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(`/indications/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 = `/indications/export?ids=${ids}`;
        });
    }

    // Initialize tooltips
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });

    // 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');
        });
    }
    // 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) {
                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();
        });
    });
});
</script>
@endpush

@push('styles')
<style>
    .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