@extends('layout.app')

@section('content')
    <div class="page-header">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">Home</li>
            <li class="breadcrumb-item active">Data Sub Kriteria</li>
        </ol>
    </div>

    <div class="row gutters">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="card shadow-sm" style="border-radius: 12px; border: none;">

                {{-- Header & Dropdown Per Page --}}
                <div class="card-header bg-white py-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="d-flex align-items-center" style="gap: 15px;">
                            <h5 class="m-0 font-weight-bold text-dark">Daftar Sub Kriteria & Kondisi</h5>

                            {{-- Dropdown Pilihan Halaman --}}
                            <form action="{{ route('subkriteria.index') }}" method="GET" id="form-per-page" class="m-0">
                                <div class="d-flex align-items-center" style="gap: 8px;">
                                    <label class="text-muted mb-0" style="font-size: 0.9rem; font-weight: normal; white-space: nowrap;">Tampil:</label>
                                    <select name="per_page" class="form-control form-control-sm shadow-sm" style="width: 75px; cursor: pointer; border-radius: 6px; border-color: #ced4da;" onchange="document.getElementById('form-per-page').submit();">
                                        <option value="10" {{ ($perPage ?? 10) == 10 ? 'selected' : '' }}>10</option>
                                        <option value="25" {{ ($perPage ?? 10) == 25 ? 'selected' : '' }}>25</option>
                                        <option value="50" {{ ($perPage ?? 10) == 50 ? 'selected' : '' }}>50</option>
                                        <option value="100" {{ ($perPage ?? 10) == 100 ? 'selected' : '' }}>100</option>
                                    </select>
                                </div>
                            </form>
                        </div>

                        <a href="{{ route('subkriteria.create') }}" class="btn btn-primary btn-rounded px-4">
                            <i class="icon-plus"></i> Tambah Sub Kriteria
                        </a>
                    </div>
                </div>

                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0 text-center">
                            <thead class="bg-light">
                                <tr>
                                    <th width="60">No</th>
                                    <th width="100">Kode</th>
                                    <th class="text-left">Nama Sub Kriteria / Kondisi</th>
                                    <th width="120">Level (Urutan)</th>
                                    <th width="150">Bobot Lokal</th>
                                    <th width="120">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php $globalNo = 1; @endphp
                                @forelse ($kriterias as $k)
                                    <tr style="background-color: #f0f4f8;">
                                        <td colspan="6" class="text-left py-2">
                                            <span class="badge badge-primary px-3 py-2" style="font-size: 13px; border-radius: 6px;">
                                                <i class="icon-layers mr-1"></i> {{ $k->kode }} - {{ $k->nama }}
                                            </span>
                                        </td>
                                    </tr>

                                    @forelse ($k->subKriterias as $sub)
                                        <tr>
                                            <td class="text-muted small">{{ $globalNo++ }}</td>
                                            <td><span class="badge badge-light border text-success font-weight-bold">{{ $sub->kode }}</span></td>
                                            <td class="text-left">
                                                <span class="font-weight-600 text-dark">{{ $sub->nama_sub }}</span>
                                            </td>
                                            <td>
                                                <span class="badge badge-info-soft">Level {{ $sub->nilai_acuan }}</span>
                                            </td>
                                            <td>
                                                <div class="badge {{ $sub->bobot_lokal > 0 ? 'badge-info' : 'badge-light border' }} px-3 py-2">
                                                    {{ number_format($sub->bobot_lokal, 4) }}
                                                </div>
                                            </td>
                                            <td>
                                                {{-- Tombol Aksi disejajarkan pakai Flexbox murni --}}
                                                <div class="d-flex justify-content-center align-items-center" style="gap: 5px;">
                                                    <a href="{{ route('subkriteria.edit', $sub->id) }}"
                                                       class="btn btn-sm btn-outline-primary m-0"
                                                       title="Edit Sub Kriteria">
                                                        <i class="icon-edit1"></i>
                                                    </a>

                                                    <form id="delete-form-{{ $sub->id }}" action="{{ route('subkriteria.destroy', $sub->id) }}" method="POST" class="m-0">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="button" class="btn btn-sm btn-outline-danger m-0"
                                                                onclick="confirmDelete('{{ $sub->id }}', '{{ $sub->nama_sub }}')"
                                                                title="Hapus Sub Kriteria">
                                                            <i class="icon-trash-2"></i>
                                                        </button>
                                                    </form>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-center py-4 text-muted italic">
                                                <i class="icon-info-outline mr-1"></i> Belum ada data sub kriteria untuk kriteria ini.
                                            </td>
                                        </tr>
                                    @endforelse
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center py-4 text-muted">
                                            Data kriteria kosong. Silakan isi data kriteria terlebih dahulu.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    {{-- Menampilkan Tombol Next / Previous (Pagination) --}}
                    <div class="mt-4 d-flex justify-content-between align-items-center">
                        <div class="text-muted small">
                            Menampilkan Kriteria {{ $kriterias->firstItem() ?? 0 }} sampai {{ $kriterias->lastItem() ?? 0 }} dari total {{ $kriterias->total() }} Kriteria
                        </div>
                        <div>
                            {{ $kriterias->links('pagination::bootstrap-4') }}
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <style>
        .badge-info-soft {
            background-color: #e3f2fd;
            color: #0d47a1;
            border: 1px solid #bbdefb;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 11px;
        }
        .font-weight-600 { font-weight: 600; }
        .table thead th { border-top: none; text-transform: uppercase; font-size: 12px; letter-spacing: 0.5px; }
        .italic { font-style: italic; }
    </style>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        function confirmDelete(id, name) {
            Swal.fire({
                title: 'Hapus Sub Kriteria?',
                html: `Apakah Anda yakin ingin menghapus kondisi <br><strong>"${name}"</strong>?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#858796',
                confirmButtonText: 'Ya, Hapus!',
                cancelButtonText: 'Batal',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('delete-form-' + id).submit();
                }
            })
        }
    </script>

    @if (session('success'))
        <script>
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true
            });
            Toast.fire({
                icon: 'success',
                title: '{{ session("success") }}'
            });
        </script>
    @endif
@endpush