@extends('backend.layouts.app')

@section('title', \App\Http\Helpers\MenuHelper::getPageTitle())

@push('styles')
    <link rel="stylesheet" href="{{ asset('vendor/elfinder/css/elfinder.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendor/elfinder/css/theme.css') }}">
    <!-- jQuery UI CSS (optional tapi elok ada) -->
    <link rel="stylesheet" href="{{ asset('vendor/jquery-ui/jquery-ui.min.css') }}">
@endpush

@section('content')
    <!-- Breadcrumb Start -->
    <div x-data="{ pageName: @js(\App\Http\Helpers\MenuHelper::getPageTitle()) }" class="mb-6">
        <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90" x-text="pageName"></h2>

            <nav>
                <ol class="flex items-center gap-1.5">
                    <li>
                        <a class="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400"
                            href="{{ route('admin.dashboard') }}">
                            Home
                            <svg class="stroke-current" width="17" height="16" viewBox="0 0 17 16" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366" stroke="" stroke-width="1.2"
                                    stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>
                    </li>
                    <li class="text-sm text-gray-800 dark:text-white/90" x-text="pageName"></li>
                </ol>
            </nav>
        </div>
    </div>
    <!-- Breadcrumb End -->
    <div id="elfinder"></div>
@endsection

@push('scripts')
    <!-- LOAD JQUERY FIRST! -->
    <script src="{{ asset('vendor/jquery.min.js') }}"></script>

    <!-- THEN jQuery UI -->
    <script src="{{ asset('vendor/jquery-ui/jquery-ui.min.js') }}"></script>

    <!-- THEN elFinder -->
    <script src="{{ asset('vendor/elfinder/js/elfinder.min.js') }}"></script>

    <!-- FINALLY your code -->
    <script>
        // Wait for jQuery to be ready
        jQuery(document).ready(function ($) {
            console.log('jQuery version:', $.fn.jquery);
            console.log('jQuery UI version:', $.ui.version);
            console.log('elFinder loaded:', typeof $.fn.elfinder);

            if ($.fn.elfinder) {
                $('#elfinder').elfinder({
                    url: '/elfinder/connector',
                    customData: {
                        _token: '{{ csrf_token() }}'
                    }
                });
            } else {
                console.error('elFinder not available');
            }
        });
    </script>
@endpush