{{-- ============================================================
    Reusable CRUD Table Component
    Usage: @include('admin.partials.crud-table', [
        'title'      => 'Judul',
        'headers'    => ['Col1', 'Col2'],
        'columns'    => ['field1', 'field2'],
        'rows'       => $collection,
        'primaryKey' => 'id',
        'storeRoute' => 'admin.xxx.store',
        'updateRoute'=> 'admin.xxx.update',
        'deleteRoute'=> 'admin.xxx.destroy',
        'fields'     => [
            ['name'=>'field1', 'label'=>'Label1', 'type'=>'text', 'required'=>true],
            ['name'=>'field2', 'label'=>'Label2', 'type'=>'select', 'options'=>$arr, 'optionValue'=>'id', 'optionLabel'=>'name'],
        ],
    ])
============================================================ --}}

@if(session('success'))
<div class="alert alert-success alert-dismissible fade show" style="font-size: 13px; border-radius: 8px;">
    <i class="bi bi-check-circle me-1"></i> {{ session('success') }}
    <button type="button" class="btn-close btn-sm" data-bs-dismiss="alert"></button>
</div>
@endif

<div class="card-flat">
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <h6 class="fw-bold mb-0">{{ $title ?? 'Data' }} <span class="badge bg-secondary ms-1" style="font-size:10px;">{{ method_exists($rows ?? [], 'total') ? $rows->total() : count($rows ?? []) }}</span></h6>
        <div class="d-flex gap-2 align-items-center flex-wrap">
            <form method="GET" action="" class="position-relative m-0 p-0">
                <i class="bi bi-search position-absolute" style="left:10px; top:50%; transform:translateY(-50%); color:#94a3b8; font-size:12px;"></i>
                <input type="text" name="search" class="form-control form-control-sm" placeholder="Cari data..."
                       style="font-size:12px; border-radius:6px; padding-left:30px; width:200px; border:1px solid #e2e8f0;"
                       value="{{ request('search') }}">
            </form>
            @if(isset($storeRoute))
            <button class="btn btn-sm text-white" style="background-color:#0f172a; font-size:12px; border-radius:6px;" data-bs-toggle="modal" data-bs-target="#modalTambah">
                <i class="bi bi-plus-lg me-1"></i>Tambah
            </button>
            @endif
            @if(isset($exportType))
            <div class="dropdown d-inline-block">
                <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" style="font-size:12px; border-radius:6px; border-color:#e2e8f0; color:#475569;">
                    <i class="bi bi-download me-1"></i> Export
                </button>
                <ul class="dropdown-menu dropdown-menu-end shadow-sm" style="font-size: 13px; border-radius:8px; border:none;">
                    <li>
                        <a class="dropdown-item py-2" target="_blank" href="{{ route('admin.laporan.export', ['type' => $exportType, 'format' => 'pdf'] + request()->query()) }}">
                            <i class="bi bi-file-earmark-pdf text-danger me-2"></i>Cetak / Save PDF
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item py-2" href="{{ route('admin.laporan.export', ['type' => $exportType, 'format' => 'csv'] + request()->query()) }}">
                            <i class="bi bi-file-earmark-excel text-success me-2"></i>Download Excel (CSV)
                        </a>
                    </li>
                </ul>
            </div>
            @endif
        </div>
    </div>

    <div class="table-responsive">
        <table class="table table-sm table-hover align-middle mb-0" id="crudTable_{{ $title ?? 'data' }}" style="font-size: 13px;">
            <thead class="table-light">
                <tr>
                    <th style="width:40px;">No</th>
                    @foreach($headers as $header)
                        <th>{{ $header }}</th>
                    @endforeach
                    @if(isset($updateRoute) || isset($deleteRoute))
                        <th style="width:110px;" class="text-center">Aksi</th>
                    @endif
                </tr>
            </thead>
            <tbody>
                @forelse($rows as $i => $row)
                    <tr>
                        <td class="text-muted">{{ method_exists($rows, 'firstItem') && $rows->firstItem() ? $rows->firstItem() + $i : $i + 1 }}</td>
                        @foreach($columns as $col)
                            <td>{{ data_get($row, $col, '-') }}</td>
                        @endforeach
                        @if(isset($updateRoute) || isset($deleteRoute))
                        <td class="text-center">
                            <div class="d-flex justify-content-center gap-1">
                                @if(isset($updateRoute))
                                <button class="btn btn-sm btn-outline-primary" style="font-size:11px; padding:3px 8px; border-radius:5px;"
                                    data-bs-toggle="modal" data-bs-target="#modalEdit{{ data_get($row, $primaryKey) }}">
                                    <i class="bi bi-pencil"></i>
                                </button>
                                @endif
                                @if(isset($deleteRoute))
                                <form action="{{ route($deleteRoute, data_get($row, $primaryKey)) }}" method="POST"
                                      onsubmit="return confirm('Yakin ingin menghapus data ini?')">
                                    @csrf @method('DELETE')
                                    <button class="btn btn-sm btn-outline-danger" style="font-size:11px; padding:3px 8px; border-radius:5px;">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                                @endif
                            </div>
                        </td>
                        @endif
                    </tr>
                @empty
                    <tr>
                        <td colspan="{{ count($headers) + (isset($updateRoute) || isset($deleteRoute) ? 2 : 1) }}" class="text-center text-muted py-4">
                            <i class="bi bi-inbox" style="font-size:24px;"></i>
                            <div class="mt-1">{{ $emptyMsg ?? 'Belum ada data.' }}</div>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if(isset($rows) && method_exists($rows, 'links'))
    <div class="mt-3 d-flex justify-content-end">
        {{ $rows->withQueryString()->links() }}
    </div>
    @endif
</div>

{{-- ====== MODAL TAMBAH ====== --}}
@if(isset($storeRoute) && isset($fields))
<div class="modal fade" id="modalTambah" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content" style="border-radius:12px; border:none;">
            <form action="{{ route($storeRoute) }}" method="POST">
                @csrf
                <div class="modal-header" style="border-bottom:1px solid #e2e8f0;">
                    <h6 class="modal-title fw-bold" style="font-size:15px;"><i class="bi bi-plus-circle me-2"></i>Tambah {{ $title }}</h6>
                    <button type="button" class="btn-close btn-sm" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    @foreach($fields as $field)
                    <div class="mb-3">
                        <label class="form-label fw-bold" style="font-size:12px; color:#64748b;">{{ $field['label'] }}</label>
                        @if(($field['type'] ?? 'text') === 'select')
                            <select name="{{ $field['name'] }}" class="form-select form-select-sm" style="font-size:13px; border-radius:6px;" {{ ($field['required'] ?? false) ? 'required' : '' }}>
                                <option value="">-- Pilih --</option>
                                @foreach($field['options'] as $opt)
                                    <option value="{{ data_get($opt, $field['optionValue']) }}">{{ data_get($opt, $field['optionLabel']) }}</option>
                                @endforeach
                            </select>
                        @elseif(($field['type'] ?? 'text') === 'textarea')
                            <textarea name="{{ $field['name'] }}" class="form-control form-control-sm" rows="3" style="font-size:13px; border-radius:6px;" {{ ($field['required'] ?? false) ? 'required' : '' }}></textarea>
                        @else
                            <input type="{{ $field['type'] ?? 'text' }}" name="{{ $field['name'] }}" class="form-control form-control-sm"
                                   style="font-size:13px; border-radius:6px;" {{ ($field['required'] ?? false) ? 'required' : '' }}>
                        @endif
                    </div>
                    @endforeach
                </div>
                <div class="modal-footer" style="border-top:1px solid #e2e8f0;">
                    <button type="button" class="btn btn-sm btn-light" data-bs-dismiss="modal" style="font-size:12px;">Batal</button>
                    <button type="submit" class="btn btn-sm text-white" style="background-color:#0f172a; font-size:12px; border-radius:6px;">
                        <i class="bi bi-check-lg me-1"></i>Simpan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif

{{-- ====== MODAL EDIT (per row) ====== --}}
@if(isset($updateRoute) && isset($fields))
@foreach($rows as $row)
<div class="modal fade" id="modalEdit{{ data_get($row, $primaryKey) }}" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content" style="border-radius:12px; border:none;">
            <form action="{{ route($updateRoute, data_get($row, $primaryKey)) }}" method="POST">
                @csrf @method('PUT')
                <div class="modal-header" style="border-bottom:1px solid #e2e8f0;">
                    <h6 class="modal-title fw-bold" style="font-size:15px;"><i class="bi bi-pencil-square me-2"></i>Edit {{ $title }}</h6>
                    <button type="button" class="btn-close btn-sm" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    @foreach($fields as $field)
                    <div class="mb-3">
                        <label class="form-label fw-bold" style="font-size:12px; color:#64748b;">{{ $field['label'] }}</label>
                        @if(($field['type'] ?? 'text') === 'select')
                            <select name="{{ $field['name'] }}" class="form-select form-select-sm" style="font-size:13px; border-radius:6px;">
                                <option value="">-- Pilih --</option>
                                @foreach($field['options'] as $opt)
                                    <option value="{{ data_get($opt, $field['optionValue']) }}" {{ data_get($row, $field['name']) == data_get($opt, $field['optionValue']) ? 'selected' : '' }}>
                                        {{ data_get($opt, $field['optionLabel']) }}
                                    </option>
                                @endforeach
                            </select>
                        @elseif(($field['type'] ?? 'text') === 'textarea')
                            <textarea name="{{ $field['name'] }}" class="form-control form-control-sm" rows="3" style="font-size:13px; border-radius:6px;">{{ data_get($row, $field['name']) }}</textarea>
                        @elseif(($field['type'] ?? 'text') === 'password')
                            <input type="password" name="{{ $field['name'] }}" class="form-control form-control-sm"
                                   style="font-size:13px; border-radius:6px;" placeholder="Kosongkan jika tidak diganti">
                        @else
                            <input type="{{ $field['type'] ?? 'text' }}" name="{{ $field['name'] }}" class="form-control form-control-sm"
                                   style="font-size:13px; border-radius:6px;" value="{{ data_get($row, $field['name']) }}">
                        @endif
                    </div>
                    @endforeach
                </div>
                <div class="modal-footer" style="border-top:1px solid #e2e8f0;">
                    <button type="button" class="btn btn-sm btn-light" data-bs-dismiss="modal" style="font-size:12px;">Batal</button>
                    <button type="submit" class="btn btn-sm text-white" style="background-color:#0284c7; font-size:12px; border-radius:6px;">
                        <i class="bi bi-check-lg me-1"></i>Update
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endforeach
@endif