<!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', 'Dashboard') | 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() }}">

    <!-- Layout config Js -->
    <script src="{{ asset('assets/velzon/js/layout.js') }}"></script>
    <!-- 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>
    <div id="layout-wrapper">
        <header id="page-topbar">
            <div class="layout-width">
                <div class="navbar-header">
                    <div class="d-flex"></div>
                    <div class="d-flex align-items-center">
                        <div class="dropdown ms-sm-3 header-item topbar-user">
                            <button type="button" class="btn" id="page-header-user-dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="d-flex align-items-center">
                                    <span class="text-start ms-xl-2">
                                        <span class="d-none d-xl-inline-block ms-1 fw-medium user-name-text">{{ auth()->user()->name }}</span>
                                    </span>
                                </span>
                            </button>
                            <div class="dropdown-menu dropdown-menu-end">
                                <a class="dropdown-item" href="/profile"><i class="mdi mdi-account-circle text-muted fs-16 align-middle me-1"></i> <span class="align-middle">Profile</span></a>
                                <form method="POST" action="{{ route('logout') }}">
                                    @csrf
                                    <button type="submit" class="dropdown-item"><i class="mdi mdi-logout text-muted fs-16 align-middle me-1"></i> <span class="align-middle" data-key="t-logout">Logout</span></button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- ========== App Menu ========== -->
        <div class="app-menu navbar-menu">
            <!-- LOGO -->
            <div class="navbar-brand-box">
                <a href="/" class="logo logo-light text-white dt-fs-24 fw-bold mt-4 d-block">
                    Infra24
                </a>
                <button type="button" class="btn btn-sm p-0 fs-20 header-item float-end btn-vertical-sm-hover" id="vertical-hover">
                    <i class="ri-record-circle-line"></i>
                </button>
            </div>

            <div id="scrollbar">
                <div class="container-fluid">
                    <div id="two-column-menu"></div>
                    <ul class="navbar-nav" id="navbar-nav">
                        <li class="menu-title"><span data-key="t-menu">Menu</span></li>
                        
                        @role('super_admin')
                        <li class="nav-item">
                            <a class="nav-link menu-link" href="#">
                                <i class="ri-dashboard-2-line"></i> <span data-key="t-dashboards">Admin Dashboard</span>
                            </a>
                        </li>
                        @endrole

                        @hasanyrole('company_admin|planner')
                        <li class="nav-item">
                            <a class="nav-link menu-link" href="#">
                                <i class="ri-building-line"></i> <span data-key="t-company-dash">Company Dashboard</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link menu-link" href="#sidebarJobs" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarJobs">
                                <i class="ri-briefcase-line"></i> <span data-key="t-jobs">Jobs</span>
                            </a>
                            <div class="collapse menu-dropdown" id="sidebarJobs">
                                <ul class="nav nav-sm flex-column">
                                    <li class="nav-item"><a href="#" class="nav-link">Create Job</a></li>
                                    <li class="nav-item"><a href="#" class="nav-link">My Jobs</a></li>
                                </ul>
                            </div>
                        </li>
                        @role('company_admin')
                        <li class="nav-item">
                            <a class="nav-link menu-link" href="#">
                                <i class="ri-team-line"></i> <span data-key="t-team">Team Management</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link menu-link" href="#">
                                <i class="ri-settings-line"></i> <span data-key="t-settings">Company Settings</span>
                            </a>
                        </li>
                        @endrole
                        @endhasanyrole

                        @role('executor')
                        <li class="nav-item">
                            <a class="nav-link menu-link" href="#">
                                <i class="ri-dashboard-2-line"></i> <span data-key="t-dashboards">Dashboard</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link menu-link" href="#">
                                <i class="ri-profile-line"></i> <span data-key="t-profile">My Profile</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link menu-link" href="#">
                                <i class="ri-file-list-line"></i> <span data-key="t-applications">My Applications</span>
                            </a>
                        </li>
                        @endrole
                    </ul>
                </div>
            </div>
            <div class="sidebar-background"></div>
        </div>
        <!-- Left Sidebar End -->
        
        <div class="vertical-overlay"></div>

        <div class="main-content">
            <div class="page-content">
                <div class="container-fluid">
                    @yield('content')
                </div>
            </div>
            
            <footer class="footer">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-sm-6">
                            <script>document.write(new Date().getFullYear())</script> © Infra24.
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    </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>
    <script src="{{ asset('assets/velzon/js/pages/plugins/lord-icon-2.1.0.js') }}"></script>

    <!-- App js -->
    <script src="{{ asset('assets/velzon/js/app.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>
