@extends('master')
@push('styles')
    <style>
        .reg-table-header {
            overflow: visible; /* Memastikan dropdown tidak terpotong */
        }
        .reg-table-card {
            overflow: visible; /* Memastikan dropdown tidak terpotong */
        }

        .action-dropdown {
            position: relative;
            display: inline-block;
        }

        .action-dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 200px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 10; /* Naikkan z-index */
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid #e2e8f0;
            right: 0;
            font-size: 13px;
        }

        .action-dropdown-content a {
            color: black;
            padding: 10px 14px;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .action-dropdown-content a:hover {
            background-color: #f1f1f1;
        }

        .action-dropdown-content a svg {
            width: 14px;
            height: 14px;
        }

        .action-dropdown-divider {
            height: 1px;
            background-color: #e2e8f0;
            margin: 4px 0;
        }

        .show {
            display: block;
        }

        .filter-body {
            transition: all 0.3s ease-in-out;
        }
    </style>
@endpush

@section('content')
    <div class="list-page" id="list-page">
        <div class="reg-filter-card">
            <div class="reg-filter-head">
                <div style="display: flex; align-items: center; gap: 8px;">
                    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6">
                        <path d="M2 4h12M4 8h8M6 12h4"/>
                    </svg>
                    Filter Data
                </div>
                <button class="btn-secondary" style="padding: 4px 10px; font-size: 12px;" onclick="toggleFilter()">
                    <span id="filter-toggle-text">Sembunyikan</span>
                </button>
            </div>
            <div id="filter-body">
                <div class="reg-filter-row">
                    <div class="c-field">
                        <div class="c-label">Tipe Customer</div>
                        <select class="c-input" id="f-tipe">
                            <option value="">Semua</option>
                            <option value="1">Dealer</option>
                            <option value="2">Retailer</option>
                            <option value="3">Petani</option>
                        </select>
                    </div>
                    <div class="c-field">
                        <div class="c-label">Provinsi</div>
                        <select class="c-input" id="f-province">
                            <option value="">Semua</option>
                        </select>
                    </div>
                    <div class="c-field">
                        <div class="c-label">Kota/Kabupaten</div>
                        <select class="c-input" id="f-city">
                            <option value="">Semua</option>
                        </select>
                    </div>
                    <div style="display:flex;gap:8px;align-self:flex-end;">
                        <button class="btn-primary" onclick="applyFilter()">Terapkan</button>
                        <button class="btn-secondary" onclick="resetFilter()">Reset</button>
                    </div>
                </div>
                <div style="margin-top: 8px" class="c-row">
                    <div class="c-field">
                        <div class="c-label">Nama Customer</div>
                        <input class="c-input" id="f-nama" placeholder="Cari nama..." oninput="searchFilter()"/>
                    </div>
                    <div style="margin-top: 8px" class="c-field">
                        <div class="c-label">Alamat</div>
                        <input class="c-input" id="f-alamat" placeholder="Cari alamat..." oninput="searchFilter()"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="reg-table-card">
            <div class="reg-table-header">
                <div class="reg-table-header-left">
                    <span class="reg-table-title">List Customer</span>
                    <span class="reg-badge-count" id="badge-count">0 data</span>
                </div>
                <div style="display: flex; gap: 8px;">
                    <div class="action-dropdown">
                        <button onclick="toggleDropdown()" class="btn-secondary">
                            Actions
                            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width: 14px; height: 14px;">
                                <path d="m4 6 4 4 4-4"/>
                            </svg>
                        </button>
                        <div id="actionDropdown" class="action-dropdown-content">
                            <a href="#" onclick="openImportModal()">
                                <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M3 10v3a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-3"/>
                                    <path d="M8 3v9"/>
                                    <path d="m12 7-4-4-4 4"/>
                                </svg>
                                Import
                            </a>
                            <a href="{{ route('customer.export') }}">
                                <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M3 10v3a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-3"/>
                                    <path d="M8 12V3"/>
                                    <path d="m12 7-4 4-4-4"/>
                                </svg>
                                Export
                            </a>
                            <div class="action-dropdown-divider"></div>
                            <a href="{{ route('customer.download-template', ['type' => 'petani']) }}">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                                    <polyline points="7 10 12 15 17 10"/>
                                    <line x1="12" y1="15" x2="12" y2="3"/>
                                </svg>
                                Download Format Petani
                            </a>
                            <a href="{{ route('customer.download-template', ['type' => 'dealer']) }}">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                                    <polyline points="7 10 12 15 17 10"/>
                                    <line x1="12" y1="15" x2="12" y2="3"/>
                                </svg>
                                Download Format Dealer
                            </a>
                            <a href="{{ route('customer.download-template', ['type' => 'retailer']) }}">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                                    <polyline points="7 10 12 15 17 10"/>
                                    <line x1="12" y1="15" x2="12" y2="3"/>
                                </svg>
                                Download Format Retailer
                            </a>
                        </div>
                    </div>
                    <a href="{{route('customer.add')}}" class="btn-primary">
                        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
                            <path d="M8 3v10M3 8h10"/>
                        </svg>
                        Tambah Customer
                    </a>
                </div>
            </div>

            <div class="reg-table-scroll">
                <div id="table-loading" class="table-loading-overlay" style="display: none;">
                    <div class="loading-content">
                        <div class="loading-spinner"></div>
                        <span>Memuat data...</span>
                    </div>
                </div>
                <table id="customerTable" class="reg-table">
                    <thead>
                    <tr>
                        <th style="width:44px">No.</th>
                        <th>Nama</th>
                        <th>Tipe</th>
                        <th>Nama Pemilik</th>
                        <th>Kota/Kabupaten</th>
                        <th>Provinsi</th>
                        <th>Alamat</th>
                        <th>No. HP</th>
                        <th>Info Tambahan</th>
                        <th style="text-align:center;width:110px">Aksi</th>
                    </tr>
                    </thead>
                    <tbody id="tbl-body"></tbody>
                </table>
            </div>

            <div id="reg-empty" class="reg-empty" style="display:none">Tidak ada data yang ditemukan.</div>

            <div class="reg-table-footer">
                <div class="pag-info" id="pag-info"></div>
                <div class="pag-btns" id="pag-btns"></div>
            </div>
        </div>

    </div>

    <div class="confirm-backdrop" id="confirm-modal">
        <div class="confirm-box">
            <div class="confirm-title">Hapus Data?</div>
            <div class="confirm-text" id="confirm-text">Data ini akan dihapus secara permanen.</div>
            <div class="confirm-btns">
                <button class="btn-cancel" onclick="closeConfirm()">Batal</button>
                <button class="btn-save" id="confirm-ok" onclick="confirmDelete(this)">Hapus</button>
            </div>
        </div>
    </div>

    <div class="confirm-backdrop" id="import-modal">
        <div class="confirm-box">
            <div class="confirm-title">Import Customer</div>
            <form id="import-form" onsubmit="submitImport(event)">
                <div class="c-field">
                    <label for="import-type" class="c-label">Tipe Customer</label>
                    <select id="import-type" name="type" class="c-input" required>
                        <option value="">Pilih Tipe</option>
                        <option value="1">Dealer</option>
                        <option value="2">Retailer</option>
                        <option value="3">Petani</option>
                    </select>
                </div>
                <div class="c-field" style="margin-top: 16px;">
                    <label for="import-file" class="c-label">Pilih File Excel</label>
                    <input type="file" id="import-file" name="file" class="c-input" accept=".xlsx, .xls" required>
                </div>
                <div class="confirm-btns" style="margin-top: 24px;">
                    <button type="button" class="btn-cancel" onclick="closeImportModal()">Batal</button>
                    <button type="submit" class="btn-save">Upload</button>
                </div>
            </form>
        </div>
    </div>

@endsection

@push('scripts')
    <script>
        function toggleDropdown() {
            document.getElementById("actionDropdown").classList.toggle("show");
        }

        window.onclick = function (event) {
            if (!event.target.matches('.btn-secondary')) {
                var dropdowns = document.getElementsByClassName("action-dropdown-content");
                var i;
                for (i = 0; i < dropdowns.length; i++) {
                    var openDropdown = dropdowns[i];
                    if (openDropdown.classList.contains('show')) {
                        openDropdown.classList.remove('show');
                    }
                }
            }
        }

        // Helper functions for table loading indicator
        function showTableLoading() {
            document.getElementById('table-loading').style.display = 'flex';
        }

        function hideTableLoading() {
            document.getElementById('table-loading').style.display = 'none';
        }

        window.Laravel = {
            routes: {
                query: '{{ route("customer.query") }}',
                detail: '{{ route("customer.detail", ["id" => ":id"]) }}',
                delete: '{{ route("customer.delete", ["id" => ":id"]) }}',
                export: '{{ route("customer.export") }}'
            }
        };
    </script>
    @vite(['resources/js/customer/customer.js'])

@endpush