<!DOCTYPE html>
<html lang="en" class="h-full bg-gray-50">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
        <link rel="icon" type="image/png" sizes="32x32" href="{{ asset('images/logo.png') }}">

    <title>@yield('title', 'Clikzpay') - Clikzpay</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="h-full">
    <div id="toast-container" class="fixed top-4 right-4 z-[100] flex flex-col gap-2 max-w-sm"></div>

    <div id="confirm-modal" class="fixed inset-0 z-[200] hidden">
        <div class="fixed inset-0 bg-gray-900/50" id="confirm-modal-backdrop"></div>
        <div class="fixed inset-0 flex items-center justify-center p-4">
            <div class="bg-white rounded-xl shadow-xl max-w-md w-full p-6 transform transition-all">
                <div class="flex items-center gap-3 mb-4">
                    <div class="h-10 w-10 rounded-full bg-yellow-100 flex items-center justify-center flex-shrink-0">
                        <svg class="h-5 w-5 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" /></svg>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-900" id="confirm-modal-title">Confirm Purchase</h3>
                </div>
                <div id="confirm-modal-body" class="mb-6 text-sm text-gray-600 space-y-2"></div>
                <div class="flex gap-3 justify-end">
                    <button type="button" id="confirm-modal-cancel" class="rounded-lg border border-gray-300 px-4 py-2.5 text-sm font-semibold text-gray-700 hover:bg-gray-50 transition">
                        Cancel
                    </button>
                    <button type="button" id="confirm-modal-proceed" class="rounded-lg bg-green-950 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-green-700 transition">
                        Proceed
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="min-h-full" x-data="{ sidebarOpen: false }">
        <div class="relative z-50 lg:hidden" x-show="sidebarOpen" x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
            <div class="fixed inset-0 bg-gray-900/80" @click="sidebarOpen = false"></div>
            <div class="fixed inset-0 flex">
                <div class="relative mr-16 flex w-full max-w-xs flex-1">
                    <div class="absolute left-full top-0 flex w-16 justify-center pt-5" @click="sidebarOpen = false">
                        <button type="button" class="-m-2.5 p-2.5 text-white">
                            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
                        </button>
                    </div>
                    @include('layouts.sidebar')
                </div>
            </div>
        </div>

        <div class="hidden lg:fixed lg:inset-y-0 lg:flex lg:w-64 lg:flex-col">
            @include('layouts.sidebar')
        </div>

        <div class="lg:pl-64 flex flex-col flex-1">
            @include('layouts.topbar')
            <main class="flex-1">
                <div class="py-6 px-4 sm:px-6 lg:px-8 fade-in">
                    @yield('content')
                </div>
            </main>
        </div>
    </div>

    <script>
    function showToast(message, type) {
        type = type || 'error';
        var container = document.getElementById('toast-container');
        var toast = document.createElement('div');
        var colors = type === 'success'
            ? 'bg-green-50 border-green-200 text-green-800'
            : type === 'warning'
            ? 'bg-yellow-50 border-yellow-200 text-yellow-800'
            : 'bg-red-50 border-red-200 text-red-800';
        toast.className = 'flex items-center gap-3 rounded-lg border px-4 py-3 shadow-lg transition-all duration-300 transform translate-x-full opacity-0 ' + colors;
        toast.innerHTML = '<span class="text-sm font-medium flex-1">' + message + '</span><button onclick="this.parentElement.remove()" class="text-current opacity-50 hover:opacity-100">&times;</button>';
        container.appendChild(toast);
        requestAnimationFrame(function() { toast.classList.remove('translate-x-full', 'opacity-0'); });
        setTimeout(function() { toast.classList.add('translate-x-full', 'opacity-0'); setTimeout(function() { toast.remove(); }, 300); }, 5000);
    }

    var _confirmResolve = null;
    function showConfirm(title, lines) {
        return new Promise(function(resolve) {
            _confirmResolve = resolve;
            document.getElementById('confirm-modal-title').textContent = title || 'Confirm Purchase';
            document.getElementById('confirm-modal-body').innerHTML = lines.map(function(l) {
                return '<div class="flex justify-between"><span class="text-gray-500">' + l.label + '</span><span class="font-medium text-gray-900">' + l.value + '</span></div>';
            }).join('');
            document.getElementById('confirm-modal').classList.remove('hidden');
        });
    }
    function _confirmClose(result) {
        document.getElementById('confirm-modal').classList.add('hidden');
        if (_confirmResolve) { _confirmResolve(result); _confirmResolve = null; }
    }
    document.getElementById('confirm-modal-cancel').addEventListener('click', function() { _confirmClose(false); });
    document.getElementById('confirm-modal-proceed').addEventListener('click', function() { _confirmClose(true); });
    document.getElementById('confirm-modal-backdrop').addEventListener('click', function() { _confirmClose(false); });

    (function() {
        @if(session('success'))
        showToast(@json(session('success')), 'success');
        @endif
        @if(session('error'))
        showToast(@json(session('error')), 'error');
        @endif
        @if($errors->any())
            @foreach($errors->all() as $error)
            showToast(@json($error), 'error');
            @endforeach
        @endif
    })();
    </script>
    @stack('scripts')
</body>
</html>
