@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <style>
    #list_solusi_kategori thead th {
        text-align: center !important;
    }
    #list_solusi_kategori tbody td:first-child {
        text-align: center;
    }
    </style>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">

                {{-- Card 1: List Kategori Solusi --}}
                <div class="row mx-1">
                    <div class="card">
                        <div class="row">
                            <div class="card-header col-md-auto">
                                <h5 class="mb-0">{{ $title_menu }}</h5>
                            </div>
                            <div class="col">
                                @include('components.alert')
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">

                        <div class="row px-4 py-2">
                            <div class="col-lg d-flex flex-wrap gap-2 align-items-center">

                            <a href="{{ url('/solusi-master/kategori/edit') }}" class="btn btn-primary btn-sm mb-0">
                                <i class="fas fa-plus me-1"></i> Tambah
                            </a>

                            <a href="{{ url('/solusi-master') }}?export=excel" class="btn btn-secondary btn-sm mb-0">
                                <i class="fas fa-file-excel me-1 text-success"></i><span class="font-weight-bold"> Excel</span>
                            </a>

                            <a href="{{ url('/solusi-master') }}?export=pdf" class="btn btn-secondary btn-sm mb-0">
                                <i class="fas fa-file-pdf me-1 text-danger"></i><span class="font-weight-bold"> PDF</span>
                            </a>

                            <div class="ms-auto d-flex align-items-center">
                                <input type="text" id="customSearchSolusiKategori" class="form-control form-control-sm" style="width: 220px;" placeholder="Cari data...">
                            </div>

                        </div>
                        </div>

                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                @if ($kategori->isEmpty())
                                    <p class="text-center text-muted py-4">Belum ada kategori solusi.</p>
                                @else
                                    <table class="table display" id="list_solusi_kategori">
                                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th width="220">Action</th>
                                                <th>Gambar</th>
                                                <th>Judul</th>
                                                <th>Deskripsi</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($kategori as $item)
                                                @php $l = $lang[$item->idsolusikategori] ?? null; @endphp
                                                <tr {{ $item->isactive == 0 ? 'class=not style=background-color:#ffe9ed;' : '' }}>
                                                    <td>
                                                        <div class="d-flex gap-2">
                                                            <button class="btn btn-primary btn-sm mb-0 px-3 btn-kategori-detail" type="button" data-id="{{ $item->idsolusikategori }}">
                                                                <i class="fas fa-eye"></i><span class="font-weight-bold"> Detail</span>
                                                            </button>
                                                            <a href="{{ url('/solusi-master/kategori/edit/' . $item->idsolusikategori) }}"
                                                                class="btn btn-sm btn-warning mb-0 px-3">
                                                                <i class="fas fa-edit"></i><span class="font-weight-bold"> Edit</span>
                                                            </a>
                                                            <form action="{{ url('/solusi-master/kategori/toggle/' . $item->idsolusikategori) }}" method="POST" style="display:inline">
                                                                @csrf
                                                                <button type="submit" class="btn btn-sm mb-0 px-3 btn-{{ $item->isactive == '0' ? 'success' : 'danger' }}"
                                                                    onclick="return toggleItem(event, '{{ $l->judul ?? 'Kategori' }}', '{{ $item->isactive == '0' ? 'Aktifkan' : 'Non Aktifkan' }}')">
                                                                    <i class="fas fa-random"></i><span class="font-weight-bold">
                                                                        {{ $item->isactive == '0' ? 'Aktifkan' : 'Non Aktifkan' }}</span>
                                                                </button>
                                                            </form>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        @if ($item->gambar)
                                                            <img src="{{ img_src($item->gambar) }}" style="height:40px;" class="rounded">
                                                        @endif
                                                    </td>
                                                    <td>{{ $l->judul ?? '-' }}</td>
                                                    <td>{{ \Illuminate\Support\Str::limit(strip_tags($l->deskripsi ?? ''), 60) }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                @endif
                            </div>
                        </div>
                        <div class="card-footer bg-white border-0 py-3"></div>
                    </div>
                </div>

                {{-- Card 2: List Konten (AJAX) --}}
                <div class="row mx-1 mt-3">
                    <div class="col-12 p-0">
                        <div id="konten-list-area"></div>
                    </div>
                </div>

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

@push('js')
<script>
    @if ($kategori->isNotEmpty())
    $('#list_solusi_kategori').DataTable({
        paging: false, info: false, searching: true, responsive: true,
        dom: 'rtip',
        language: { zeroRecords: "Maaf - Data tidak ada" },
        initComplete: function () {
            $('.dataTables_filter').remove();
            $('#customSearchSolusiKategori').on('keyup', function () {
                $('#list_solusi_kategori').DataTable().search(this.value).draw();
            });
        }
    });
    @endif

    function toggleItem(event, name, msg) {
        event.preventDefault();
        Swal.fire({
            title: 'Konfirmasi',
            text: `Apakah Anda Yakin ${msg} "${name}" ini?`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: `Ya, ${msg}`,
            cancelButtonText: 'Batal',
            confirmButtonColor: '#028284'
        }).then((result) => {
            if (result.isConfirmed) {
                event.target.closest('form').submit();
            }
        });
    }

    function loadKontenList(idkategori, tipe = 'artikel') {
        const $area = $('#konten-list-area');
        $area.html(`
            <div class="card">
                <div class="card-body text-center text-muted py-5">
                    <i class="fa fa-spinner fa-spin me-2"></i> Memuat konten...
                </div>
            </div>`);

        $.get(`${window.APP_BASE_URL}/solusi-master/konten/${idkategori}/${tipe}`)
            .done(function (html) {
                $area.html(html);
                $area[0].scrollIntoView({ behavior: 'smooth' });
            })
            .fail(function () {
                $area.html(`<div class="card"><div class="card-body text-danger">Gagal memuat konten.</div></div>`);
            });
    }
    $(document).on('click', '.btn-kategori-detail', function () {
        loadKontenList($(this).data('id'));
    });

    $(document).on('click', '.tab-tipe-konten', function () {
        loadKontenList($(this).data('idkategori'), $(this).data('tipe'));
    });

    $(function () {
        const params = new URLSearchParams(window.location.search);
        const idkategoriParam = params.get('kategori');
        const tipeParam = params.get('tipe');
        if (idkategoriParam) {
            loadKontenList(idkategoriParam, tipeParam || 'artikel');
        }
    });

    $(document).on('click', '.btn-kategori-detail', function () {
        loadKontenList($(this).data('id'));
    });

    $(document).on('click', '.tab-tipe-konten', function () {
        loadKontenList($(this).data('idkategori'), $(this).data('tipe'));
    });
</script>
@endpush