<!doctype html>
<html lang="en" data-layout="vertical" data-topbar="light" data-sidebar="dark" data-sidebar-size="lg">
<head>
    <meta charset="utf-8" />
    <title>@yield('title', 'Marketplace') | Infra24</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="Marketplace Platform" name="description" />
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <!-- Bootstrap Css -->
    <link href="{{ asset('assets/velzon/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
    <!-- Icons Css -->
    <link href="{{ asset('assets/velzon/css/icons.min.css') }}" rel="stylesheet" type="text/css" />
    <!-- App Css-->
    <link href="{{ asset('assets/velzon/css/app.min.css') }}" rel="stylesheet" type="text/css" />
    <!-- Custom Css-->
    <link href="{{ asset('assets/velzon/css/infra24-custom.css') }}" rel="stylesheet" type="text/css" />

    <!-- SweetAlert2 & Toastr CSS -->
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet">
    @yield('styles')
</head>

<body>
    <!-- Topbar -->
    <header id="page-topbar" class="bg-white shadow-sm border-bottom" style="position: sticky; top: 0; z-index: 1000; height: 60px;">
        <div class="container h-100">
            <div class="row align-items-center h-100">
                <div class="col">
                    <a href="/" class="logo logo-dark fw-bold fs-20 text-primary">Infra24</a>
                </div>
                <!-- Navigation Menu -->
                <div class="col-8 text-end">
                    <a href="/jobs" class="nav-link fs-15 me-4 fw-medium text-dark d-inline-block">Browse Jobs</a>
                    @auth
                        @role('super_admin')
                            <a href="/admin/dashboard" class="btn btn-outline-primary btn-sm me-2">Dashboard</a>
                        @endrole
                        @role('company_admin|planner')
                            <a href="/company/dashboard" class="btn btn-outline-primary btn-sm me-2">Dashboard</a>
                        @endrole
                        @role('executor')
                            <a href="/freelancer/dashboard" class="btn btn-outline-primary btn-sm me-2">Dashboard</a>
                        @endrole
                    @else
                        <a href="{{ route('login') }}" class="btn btn-soft-primary btn-sm me-2">Login</a>
                        <a href="{{ route('register') }}" class="btn btn-primary btn-sm bg-gradient-primary border-0">Sign Up</a>
                    @endauth
                </div>
            </div>
        </div>
    </header>

    <div class="main-content">
        <div class="page-content bg-light pb-5" style="min-height: 80vh;">
            @yield('content')
        </div>
        
        <!-- Footer -->
        <footer class="footer position-relative bg-white border-top">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6">
                        <script>document.write(new Date().getFullYear())</script> © Infra24.
                    </div>
                    <div class="col-sm-6 text-end">
                        Marketplace Platform
                    </div>
                </div>
            </div>
        </footer>
    </div>

    <!-- JAVASCRIPT -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="{{ asset('assets/velzon/libs/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('assets/velzon/libs/simplebar/simplebar.min.js') }}"></script>
    <script src="{{ asset('assets/velzon/libs/node-waves/waves.min.js') }}"></script>
    <script src="{{ asset('assets/velzon/libs/feather-icons/feather.min.js') }}"></script>

    <!-- SweetAlert2 & Toastr -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.all.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script>
        toastr.options = {
            "closeButton": true,
            "progressBar": true,
            "positionClass": "toast-top-right",
            "timeOut": "5000",
        };
        @if(session('success')) toastr.success("{{ session('success') }}"); @endif
        @if(session('error')) toastr.error("{{ session('error') }}"); @endif
        @if($errors->any())
            @foreach($errors->all() as $error)
                toastr.error("{{ $error }}");
            @endforeach
        @endif

        // Global SweetAlert Confirm Override
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('form').forEach(form => {
                const btn = form.querySelector('[onclick*="confirm"]');
                if (btn) {
                    const confirmTextMatch = btn.getAttribute('onclick').match(/confirm\(['"](.*?)['"]\)/);
                    const confirmText = confirmTextMatch ? confirmTextMatch[1] : "Are you sure you want to proceed?";
                    
                    btn.removeAttribute('onclick'); // Remove native confirm
                    
                    btn.addEventListener('click', function(e) {
                        e.preventDefault();
                        Swal.fire({
                            title: 'Are you sure?',
                            text: confirmText,
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonColor: '#405189',
                            cancelButtonColor: '#f06548',
                            confirmButtonText: 'Yes, proceed!'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                form.submit();
                            }
                        });
                    });
                }
            });
        });
    </script>
    @yield('scripts')
</body>
</html>
