@extends('master')
@push('styles')

@endpush

@section('content')
    <div class="list-page" id="list-page">
        <div class="reg-filter-card">
            <div class="reg-filter-head">
                <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>
            <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 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 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>
                <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 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>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>

@endsection

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

@endpush