@extends('layouts.apex')

@section('title', 'Status Kolam')

@section('content')
<div class="page-header">
    <div class="page-header-content">
        <div>
            <h1 class="page-header-title">Status Kolam</h1>
            <p class="page-header-subtitle">Monitoring status budidaya tambak</p>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-primary" onclick="switchView('simple')" id="btnSimpleView">
                <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: text-bottom; margin-right: 0.5rem;">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>
                </svg>
                Simple View
            </button>
            <button type="button" class="btn btn-outline-primary" onclick="switchView('detail')" id="btnDetailView">
                <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: text-bottom; margin-right: 0.5rem;">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
                Detail View
            </button>
            <button type="button" class="btn btn-success" onclick="syncAllData()" id="btnSync">
                <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: text-bottom; margin-right: 0.5rem;">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                </svg>
                Sync Data
            </button>
        </div>
    </div>
</div>

<div class="page-body">
    <!-- Simple View -->
    <div id="simpleView">
        <!-- Status Legend -->
        <div class="alert alert-info mb-3 py-2 px-3">
            <div class="row g-3">
                <div class="col-12">
                    <span class="fw-bold">Keterangan Warna:</span>
                </div>
                <div class="col-md-4 col-sm-12">
                    <div class="d-flex align-items-center gap-2">
                        <span class="badge rounded-pill" style="background: linear-gradient(135deg, rgba(40, 167, 69, 0.8) 0%, rgba(40, 167, 69, 0.6) 100%); padding: 8px 16px; font-size: 13px;">Hijau</span>
                        <span class="small">Belum Panen</span>
                    </div>
                </div>
                <div class="col-md-4 col-sm-12">
                    <div class="d-flex align-items-center gap-2">
                        <span class="badge rounded-pill" style="background: linear-gradient(135deg, rgba(255, 193, 7, 0.8) 0%, rgba(255, 193, 7, 0.6) 100%); padding: 8px 16px; font-size: 13px;">Kuning</span>
                        <span class="small">Panen Partial</span>
                    </div>
                </div>
                <div class="col-md-4 col-sm-12">
                    <div class="d-flex align-items-center gap-2">
                        <span class="badge rounded-pill" style="background: linear-gradient(135deg, rgba(220, 53, 69, 0.8) 0%, rgba(220, 53, 69, 0.6) 100%); padding: 8px 16px; font-size: 13px;">Merah</span>
                        <span class="small">Panen Total</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Filter Status Panen -->
        <div class="card mb-3">
            <div class="card-body py-2 px-3">
                <div class="d-flex flex-wrap align-items-center gap-3">
                    <span class="fw-bold small text-muted">Filter Status:</span>
                    <div class="btn-group" role="group" id="statusFilter">
                        <button type="button" class="btn btn-sm filter-btn filter-all active" data-status="all" onclick="filterByStatus('all')">
                            Semua
                        </button>
                        <button type="button" class="btn btn-sm filter-btn filter-belum" data-status="belum" onclick="filterByStatus('belum')">
                            Belum Panen
                        </button>
                        <button type="button" class="btn btn-sm filter-btn filter-partial" data-status="partial" onclick="filterByStatus('partial')">
                            Panen Partial
                        </button>
                        <button type="button" class="btn btn-sm filter-btn filter-total" data-status="total" onclick="filterByStatus('total')">
                            Panen Total
                        </button>
                    </div>
                    <div class="ms-auto">
                        <span class="small text-muted">
                            <span id="filteredCount">{{ count($kolams) }}</span> kolam ditampilkan
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Pagination Controls -->
        <div class="d-flex justify-content-between align-items-center mb-3 flex-nowrap">
            <div class="d-flex align-items-center gap-2">
                <span class="text-muted small">Tampilkan:</span>
                <div  style="width: 160px;">
                    <select id="itemsPerPage" class="form-select form-select-sm select2-paging">
                        <option value="3" selected>3</option>
                        <option value="5">5</option>
                        <option value="10">10</option>
                        <option value="20">20</option>
                        <option value="30">30</option>
                        <option value="40">40</option>
                        <option value="100">100</option>
                    </select>
                </div>
                <span class="text-muted small">/hal</span>
                <span class="text-muted small ms-2">Grid:</span>
                <div style="width: 160px;">
                    <select id="gridCols" class="form-select form-select-sm select2-paging">
                        <option value="3" selected>3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                    </select>
                </div>
            </div>
            <div class="text-muted small">
                <span id="showingFrom">1</span>-<span id="showingTo">10</span> dari <span id="totalItems">{{ count($kolams) }}</span>
            </div>
        </div>

        <div class="row g-4" id="kolamGrid">
            @foreach($kolams as $kolam)
            <div class="col-12 kolam-item" data-kolam-id="{{ $kolam->id }}" data-status-panen="{{ $kolam->status_panen }}">
                <div class="stat-card h-100 stat-card-{{ $kolam->status_panen }}">
                    <h3 class="mb-3" style="margin-left:15px;">{{ $kolam->nama }}</h3>
                    <small  style="margin-left:15px;"class="text-muted d-block mb-3">{{ number_format($kolam->luas, 0) }} M²</small>
                    <div class="table-responsive">
                        <table class="table table-sm mb-0" style="border: none;border-collapse: separate;border-spacing: 15px;">
                            <colgroup>
                                <col style="width: 50%;">
                                <col style="width: 5%;">
                                <col style="width: 45%;">
                            </colgroup>
                            <tbody>
                                <tr>
                                    <td class="p-2 bg-light rounded-start" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="top" title="Rumus:<br>DoC = Hari ini - Tanggal Tebar">
                                        <small class="text-muted">DoC</small>
                                    </td>
                                    <td class="p-2 bg-light text-center">
                                        <small class="text-muted">:</small>
                                    </td>
                                    <td class="p-2 bg-light rounded-end text-end fw-bold" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="top" title="Rumus:<br>DoC = Hari ini - Tanggal Tebar<br>Status: {{ $kolam->status_panen_label }}">
                                        {{ number_format($kolam->doc, 0) }} Hari
                                    </td>
                                </tr>
                                <tr>
                                    <td class="p-2 bg-light rounded-start" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="top" title="Rumus:<br>Tebar/M² = Jumlah Benur ÷ Luas Kolam">
                                        <small class="text-muted">Tebar / M²</small>
                                    </td>
                                    <td class="p-2 bg-light text-center">
                                        <small class="text-muted">:</small>
                                    </td>
                                    <td class="p-2 bg-light rounded-end text-end fw-bold" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="top" title="Rumus:<br>Tebar/M² = Jumlah Benur ÷ Luas Kolam">
                                        {{ number_format($kolam->tebar_per_m2, 0) }}
                                    </td>
                                </tr>
                                <tr>
                                    <td class="p-2 bg-light rounded-start" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="top" title="MBW (Mean Body Weight)<br>Data dari sampling terakhir">
                                        <small class="text-muted">MBW</small>
                                    </td>
                                    <td class="p-2 bg-light text-center">
                                        <small class="text-muted">:</small>
                                    </td>
                                    <td class="p-2 bg-light rounded-end text-end fw-bold" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="top" title="MBW (Mean Body Weight)<br>Data dari sampling terakhir">
                                        {{ number_format($kolam->mbw, 2) }} Gr
                                    </td>
                                </tr>
                                <tr>
                                    <td class="p-2 bg-light rounded-start" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="top" title="ADG (Average Daily Gain)<br>Rumus: MBW Saat Ini - MBW Sampling Sebelumnya<br><small>Selisih pertumbuhan dari sampling sebelumnya</small>">
                                        <small class="text-muted">ADG</small>
                                    </td>
                                    <td class="p-2 bg-light text-center">
                                        <small class="text-muted">:</small>
                                    </td>
                                    <td class="p-2 bg-light rounded-end text-end fw-bold" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="top" title="ADG (Average Daily Gain)<br>Rumus: MBW Saat Ini - MBW Sampling Sebelumnya<br><small>Selisih pertumbuhan dari sampling sebelumnya</small>">
                                        {{ number_format($kolam->adg, 2) }} Gr
                                    </td>
                                </tr>
                                <tr>
                                    <td class="p-2 bg-light rounded-start" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="top" title="Total hasil panen dari kolam">
                                        <small class="text-muted">Total Panen</small>
                                    </td>
                                    <td class="p-2 bg-light text-center">
                                        <small class="text-muted">:</small>
                                    </td>
                                    <td class="p-2 bg-light rounded-end text-end fw-bold" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="top" title="Total hasil panen dari kolam">
                                        {{ number_format($kolam->total_panen, 2) }} Kg
                                    </td>
                                </tr>
                                <tr>
                                    <td class="p-2 bg-light rounded-start" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="top" title="Total pakan yang digunakan">
                                        <small class="text-muted">Total Pakan</small>
                                    </td>
                                    <td class="p-2 bg-light text-center">
                                        <small class="text-muted">:</small>
                                    </td>
                                    <td class="p-2 bg-light rounded-end text-end fw-bold" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="top" title="Total pakan yang digunakan">
                                        {{ number_format($kolam->total_pakan, 2) }} Kg
                                    </td>
                                </tr>
                                <tr>
                                    <td class="p-2 bg-light rounded-start" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="top" title="Rumus:<br>FCR = Total Pakan ÷ Total Panen">
                                        <small class="text-muted">FCR</small>
                                    </td>
                                    <td class="p-2 bg-light text-center">
                                        <small class="text-muted">:</small>
                                    </td>
                                    <td class="p-2 bg-light rounded-end text-end fw-bold" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="top" title="Rumus:<br>FCR = Total Pakan ÷ Total Panen">
                                        {{ number_format($kolam->fcr, 2) }}
                                    </td>
                                </tr>
                                <tr>
                                    <td class="p-2 bg-light rounded-start" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="top" title="Rumus:<br>Productivity = Total Panen ÷ Luas Kolam">
                                        <small class="text-muted">Productivity</small>
                                    </td>
                                    <td class="p-2 bg-light text-center">
                                        <small class="text-muted">:</small>
                                    </td>
                                    <td class="p-2 bg-light rounded-end text-end fw-bold" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="top" title="Rumus:<br>Productivity = Total Panen ÷ Luas Kolam">
                                        {{ number_format($kolam->luas > 0 ? $kolam->total_panen / $kolam->luas : 0, 2) }} Kg/m²
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-3">
                        <button type="button" class="btn btn-sm btn-outline-primary w-100" onclick="showDetail({{ $kolam->id }})">
                            Lihat Detail
                        </button>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        <!-- Pagination Navigation -->
        <nav class="d-flex justify-content-center mt-4" id="paginationNav">
            <ul class="pagination" id="pagination"></ul>
        </nav>
    </div>

    <!-- Detail View Placeholder -->
    <div id="detailView" style="display: none;">
        <div class="card">
            <div class="card-body text-center py-5">
                <svg width="64" height="64" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="text-muted mb-3">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
                </svg>
                <h5 class="text-muted">Pilih Kolam</h5>
                <p class="text-muted">Silakan pilih kolam dari Simple View untuk melihat detail</p>
            </div>
        </div>
    </div>
</div>

<!-- Kolam Selection Modal -->
<div id="kolamSelectModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Pilih Kolam untuk Detail View</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="form-group mb-3">
                    <label class="form-label">Kolam</label>
                    <select id="kolamSelect" class="form-select select2" style="width: 100%;">
                        @foreach($kolams as $kolam)
                        <option value="{{ $kolam->id }}">{{ $kolam->nama }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-primary" onclick="loadDetailView()">Tampilkan Detail</button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<style>
.pagination {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.25rem;
}

.pagination .page-item .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--text);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    text-decoration: none;
    transition: all 0.2s;
}

.pagination .page-item .page-link:hover {
    background: var(--light);
    color: var(--primary);
}

.pagination .page-item.active .page-link {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.pagination .page-item.disabled .page-link {
    color: var(--text-muted);
    pointer-events: none;
    opacity: 0.5;
}

/* Grid Layout Styles */
#kolamGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

#kolamGrid.grid-3 .kolam-item {
    flex: 0 0 calc(33.333% - 21.33px);
    max-width: calc(33.333% - 21.33px);
}

#kolamGrid.grid-4 .kolam-item {
    flex: 0 0 calc(25% - 24px);
    max-width: calc(25% - 24px);
}

#kolamGrid.grid-5 .kolam-item {
    flex: 0 0 calc(20% - 25.6px);
    max-width: calc(20% - 25.6px);
}

#kolamGrid.grid-6 .kolam-item {
    flex: 0 0 calc(16.666% - 26.67px);
    max-width: calc(16.666% - 26.67px);
}

@media (max-width: 1199px) {
    #kolamGrid.grid-3 .kolam-item,
    #kolamGrid.grid-4 .kolam-item,
    #kolamGrid.grid-5 .kolam-item,
    #kolamGrid.grid-6 .kolam-item {
        flex: 0 0 calc(50% - 16px);
        max-width: calc(50% - 16px);
    }
}

@media (max-width: 575px) {
    #kolamGrid.grid-3 .kolam-item,
    #kolamGrid.grid-4 .kolam-item,
    #kolamGrid.grid-5 .kolam-item,
    #kolamGrid.grid-6 .kolam-item {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Tooltip Styles with Semi-Transparent Background */
.tooltip {
    --bs-tooltip-bg: rgba(11, 20, 52, 0.9);
    --bs-tooltip-color: #fff;
}

.tooltip-inner {
    background-color: rgba(11, 20, 52, 0.9) !important;
    color: #fff !important;
    backdrop-filter: blur(4px);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: rgba(11, 20, 52, 0.9) !important;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: rgba(11, 20, 52, 0.9) !important;
}

.tooltip.bs-tooltip-left .tooltip-arrow::before {
    border-left-color: rgba(11, 20, 52, 0.9) !important;
}

.tooltip.bs-tooltip-right .tooltip-arrow::before {
    border-right-color: rgba(11, 20, 52, 0.9) !important;
}

/* Select2 Paging Dropdown Styles */
.select2-paging-dropdown .select2-results__option {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

.select2-paging {
    display: none; /* Hide original select */
}

.select2-paging + .select2-container {
    width: 60px !important;
    min-width: 60px !important;
}

.select2-paging + .select2-container .select2-selection {
    min-height: 31px;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.select2-paging + .select2-container .select2-selection__rendered {
    padding-left: 0;
}

.select2-paging + .select2-container .select2-selection__arrow {
    height: 28px;
}

/* Status Panen Color Styles */
.stat-card-belum {
    border: 3px solid #28a745;
    border-left: 8px solid #28a745;
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.15) 0%, rgba(40, 167, 69, 0.05) 100%);
    position: relative;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.stat-card-partial {
    border: 3px solid #ffc107;
    border-left: 8px solid #ffc107;
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 193, 7, 0.05) 100%);
    position: relative;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
}

.stat-card-total {
    border: 3px solid #dc3545;
    border-left: 8px solid #dc3545;
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.15) 0%, rgba(220, 53, 69, 0.05) 100%);
    position: relative;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}

/* Filter Button Styles */
.filter-btn {
    border: none;
    transition: all 0.2s;
}

.filter-all {
    background: #e9ecef;
    color: #495057;
}

.filter-all:hover,
.filter-all.active {
    background: var(--primary) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.4);
}

.filter-belum {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.6) 0%, rgba(40, 167, 69, 0.4) 100%);
    color: white;
}

.filter-belum:hover,
.filter-belum.active {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.9) 0%, rgba(40, 167, 69, 0.7) 100%) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.4);
}

.filter-partial {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.6) 0%, rgba(255, 193, 7, 0.4) 100%);
    color: #000;
}

.filter-partial:hover,
.filter-partial.active {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.9) 0%, rgba(255, 193, 7, 0.7) 100%) !important;
    color: #000 !important;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.4);
}

.filter-total {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.6) 0%, rgba(220, 53, 69, 0.4) 100%);
    color: white;
}

.filter-total:hover,
.filter-total.active {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.9) 0%, rgba(220, 53, 69, 0.7) 100%) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4);
}

/* Detail Grid Layout Styles */
#detailGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

#detailGrid > div {
    transition: all 0.3s ease;
}

/* Grid Layout - 2 Columns */
#detailGrid.detail-grid-2 > div {
    flex: 0 0 calc(50% - 8px);
    max-width: calc(50% - 8px);
}

/* Grid Layout - 3 Columns */
#detailGrid.detail-grid-3 > div {
    flex: 0 0 calc(33.333% - 11px);
    max-width: calc(33.333% - 11px);
}

/* Grid Layout - 4 Columns */
#detailGrid.detail-grid-4 > div {
    flex: 0 0 calc(25% - 12px);
    max-width: calc(25% - 12px);
}

/* Grid Layout - 5 Columns */
#detailGrid.detail-grid-5 > div {
    flex: 0 0 calc(20% - 13px);
    max-width: calc(20% - 13px);
}

/* Responsive behavior for detail grid */
@media (max-width: 991px) {
    #detailGrid.detail-grid-4 > div,
    #detailGrid.detail-grid-5 > div,
    #detailGrid.detail-grid-3 > div {
        flex: 0 0 calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
    }
}

@media (max-width: 575px) {
    #detailGrid > div {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Grid Select Styles */
#detailGridCols {
    width: 80px;
    min-width: 80px;
    display: inline-block;
}
</style>
<script>
let currentView = 'simple';

// Initialize Select2
$(document).ready(function() {
    // Initialize kolam select in modal
    $('.select2').select2({
        theme: 'bootstrap4',
        placeholder: 'Pilih Kolam',
        allowClear: true,
        dropdownParent: $('#kolamSelectModal')
    });

    // Initialize paging and grid selects
    $('.select2-paging').select2({
        theme: 'bootstrap4',
        minimumResultsForSearch: -1,
        width: '60px',
        dropdownCssClass: 'select2-paging-dropdown'
    });

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

    // Initialize pagination
    initPagination();
});

// Pagination variables
let currentPage = 1;
let itemsPerPage = 3;
let currentFilter = 'all';
let allKolamItems = document.querySelectorAll('.kolam-item');
let kolamItems = Array.from(allKolamItems);

function filterByStatus(status) {
    currentFilter = status;
    currentPage = 1;

    // Update active button
    document.querySelectorAll('#statusFilter button').forEach(btn => {
        btn.classList.remove('active');
        if (btn.dataset.status === status) {
            btn.classList.add('active');
        }
    });

    // Filter items
    if (status === 'all') {
        kolamItems = Array.from(allKolamItems);
    } else {
        kolamItems = Array.from(allKolamItems).filter(item => {
            return item.dataset.statusPanen === status;
        });
    }

    // Update filtered count
    document.getElementById('filteredCount').textContent = kolamItems.length;

    // Re-render pagination
    renderPagination();
}

function initPagination() {
    const totalItems = kolamItems.length;
    const totalPages = Math.ceil(totalItems / itemsPerPage);

    // Set initial items per page from dropdown
    const itemsPerPageSelect = $('#itemsPerPage');
    if (itemsPerPageSelect.length) {
        itemsPerPage = parseInt(itemsPerPageSelect.val());

        // Use Select2 change event
        itemsPerPageSelect.on('change', function() {
            itemsPerPage = parseInt($(this).val());
            currentPage = 1;
            renderPagination();
        });
    }

    // Initialize grid layout
    const gridColsSelect = $('#gridCols');
    const kolamGrid = $('#kolamGrid');

    if (gridColsSelect.length && kolamGrid.length) {
        // Set initial grid class
        kolamGrid.addClass('grid-' + gridColsSelect.val());

        // Use Select2 change event
        gridColsSelect.on('change', function() {
            // Remove all grid classes
            kolamGrid.removeClass('grid-3 grid-4 grid-5 grid-6');
            // Add selected grid class
            kolamGrid.addClass('grid-' + $(this).val());
        });
    }

    renderPagination();
}

function renderPagination() {
    const totalItems = kolamItems.length;
    const totalPages = Math.ceil(totalItems / itemsPerPage);
    const startIndex = (currentPage - 1) * itemsPerPage;
    const endIndex = Math.min(startIndex + itemsPerPage, totalItems);

    // Hide ALL items first
    allKolamItems.forEach(item => {
        item.style.display = 'none';
    });

    // Show only filtered items for current page
    kolamItems.forEach((item, index) => {
        if (index >= startIndex && index < endIndex) {
            item.style.display = '';
        }
    });

    // Update showing info
    document.getElementById('showingFrom').textContent = totalItems > 0 ? startIndex + 1 : 0;
    document.getElementById('showingTo').textContent = endIndex;
    document.getElementById('totalItems').textContent = totalItems;

    // Render pagination buttons
    const pagination = document.getElementById('pagination');
    pagination.innerHTML = '';

    // Previous button
    const prevLi = document.createElement('li');
    prevLi.className = `page-item ${currentPage === 1 ? 'disabled' : ''}`;
    prevLi.innerHTML = `<a class="page-link" href="#" onclick="goToPage(${currentPage - 1}); return false;">&laquo;</a>`;
    pagination.appendChild(prevLi);

    // Page numbers
    const maxVisiblePages = 5;
    let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
    let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);

    if (endPage - startPage + 1 < maxVisiblePages) {
        startPage = Math.max(1, endPage - maxVisiblePages + 1);
    }

    for (let i = startPage; i <= endPage; i++) {
        const pageLi = document.createElement('li');
        pageLi.className = `page-item ${i === currentPage ? 'active' : ''}`;
        pageLi.innerHTML = `<a class="page-link" href="#" onclick="goToPage(${i}); return false;">${i}</a>`;
        pagination.appendChild(pageLi);
    }

    // Next button
    const nextLi = document.createElement('li');
    nextLi.className = `page-item ${currentPage === totalPages ? 'disabled' : ''}`;
    nextLi.innerHTML = `<a class="page-link" href="#" onclick="goToPage(${currentPage + 1}); return false;">&raquo;</a>`;
    pagination.appendChild(nextLi);

    // Hide pagination if only one page
    const paginationNav = document.getElementById('paginationNav');
    if (totalPages <= 1) {
        paginationNav.style.display = 'none';
    } else {
        paginationNav.style.display = 'flex';
    }
}

function goToPage(page) {
    const totalItems = kolamItems.length;
    const totalPages = Math.ceil(totalItems / itemsPerPage);

    if (page < 1 || page > totalPages) return;

    currentPage = page;
    renderPagination();

    // Scroll to top of grid
    document.getElementById('simpleView').scrollIntoView({ behavior: 'smooth' });
}

function switchView(view) {
    currentView = view;
    const simpleView = document.getElementById('simpleView');
    const detailView = document.getElementById('detailView');
    const btnSimple = document.getElementById('btnSimpleView');
    const btnDetail = document.getElementById('btnDetailView');

    if (view === 'simple') {
        simpleView.style.display = 'block';
        detailView.style.display = 'none';
        btnSimple.classList.remove('btn-outline-primary');
        btnSimple.classList.add('btn-primary');
        btnDetail.classList.remove('btn-primary');
        btnDetail.classList.add('btn-outline-primary');
    } else {
        simpleView.style.display = 'none';
        detailView.style.display = 'block';
        btnSimple.classList.add('btn-outline-primary');
        btnSimple.classList.remove('btn-primary');
        btnDetail.classList.add('btn-primary');
        btnDetail.classList.remove('btn-outline-primary');

        // Show modal to select kolam
        const modal = new bootstrap.Modal(document.getElementById('kolamSelectModal'));
        modal.show();
    }
}

function showDetail(kolamId) {
    $('#kolamSelect').val(kolamId).trigger('change');
    switchView('detail');
    loadDetailView();
}

// Initialize detail grid functionality
function initDetailGrid() {
    const gridColsSelect = $('#detailGridCols');
    const detailGrid = $('#detailGrid');

    if (gridColsSelect.length && detailGrid.length) {
        // Set initial grid class
        const initialCols = gridColsSelect.val();
        detailGrid.removeClass('detail-grid-2 detail-grid-3 detail-grid-4 detail-grid-5');
        detailGrid.addClass('detail-grid-' + initialCols);

        // Handle grid change
        gridColsSelect.off('change.detailGrid').on('change.detailGrid', function() {
            const cols = $(this).val();

            // Remove all grid classes
            detailGrid.removeClass('detail-grid-2 detail-grid-3 detail-grid-4 detail-grid-5');

            // Add selected grid class
            detailGrid.addClass('detail-grid-' + cols);
        });
    }
}

function loadDetailView() {
    const kolamId = $('#kolamSelect').val();

    // Close modal
    const modalEl = document.getElementById('kolamSelectModal');
    const modal = bootstrap.Modal.getInstance(modalEl);
    if (modal) {
        modal.hide();
    }

    // Load detail view via AJAX
    $.ajax({
        url: '{{ route("status-kolam.index") }}',
        method: 'GET',
        data: {
            view: 'detail',
            kolam_id: kolamId
        },
        success: function(response) {
            document.getElementById('detailView').innerHTML = response;

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

            // Initialize detail grid
            initDetailGrid();
        },
        error: function() {
            Swal.fire({
                icon: 'error',
                title: 'Gagal',
                text: 'Gagal memuat detail kolam!'
            });
        }
    });
}

// Sync all data function
function syncAllData() {
    Swal.fire({
        title: 'Sinkronisasi Data',
        text: 'Apakah Anda ingin menyinkronkan semua data (ADG, DOC, MBW, dll)?',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#28a745',
        cancelButtonColor: '#dc3545',
        confirmButtonText: 'Ya, Sync!',
        cancelButtonText: 'Batal'
    }).then((result) => {
        if (result.isConfirmed) {
            // Show loading
            Swal.fire({
                title: 'Menyinkronkan Data...',
                text: 'Mohon tunggu sebentar',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            $.ajax({
                url: '{{ route("sync.all") }}',
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil!',
                        text: response.message,
                        timer: 2000,
                        showConfirmButton: false
                    }).then(() => {
                        location.reload();
                    });
                },
                error: function(xhr) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal!',
                        text: xhr.responseJSON?.message || 'Terjadi kesalahan saat sinkronisasi'
                    });
                }
            });
        }
    });
}
</script>
@endpush
@endsection