<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <title>@yield('page-title') | Client Portal </title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="icon" type="image/png" href="{{ url('public/assets/images/click-logo.png') }}">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Sora:wght@400;600;700&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
    <link href="{{ url('public/assets/css/theme.css') }}" rel="stylesheet">
    <link href="{{ url('public/libs/jquery-confirm/jquery-confirm.min.css') }}" rel="stylesheet">

     @yield('page-css')      
    <script type="text/javascript">
        @if(env('APP_ENV') == 'production')
            var base_url = "https://smsportal.clickmlapps.com";  
        @else
            var base_url = "{{ url('/') }}"; 
        @endif
        //"{!! url('/') !!}";
    </script>
</head>
<body>
    @include('client-traffic.partials.new-app')
    <?php //dump($page_title); ?>
    <div class="container py-3 py-lg-4">
        <header class="topbar">
            <div class="topbar-card d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-3">
                <div class="d-flex align-items-center gap-3">
                    <img src="{{ url('public/assets/images/click-logo.png') }}" alt="Click Mobile" class="brand-logo">
                    <div>
                        <div class="small text-uppercase text-primary fw-semibold">Client Portal</div>
                        <div class="fw-semibold">{{ session('current_user.name') }}</div>
                    </div>
                </div>
                
                <div class="d-flex flex-wrap align-items-center gap-2">
                    <span class="badge rounded-pill text-bg-success px-3 py-2">{{ session('current_user.role') }}</span>
                    <!-- <span class="badge rounded-pill text-bg-light px-3 py-2">{{ session('current_user.name') }}</span> -->
                    <span class="badge rounded-pill text-bg-light px-3 py-2"><i class="bi bi-clock-history me-1"></i> </span>
                    @if(session('current_user.role') == 'administrator')
                        <a href="{{ url('client-users') }}" class="btn btn-click px-4"><i class="bi bi-people me-2"></i>Users</a>
                    @endif
                    @if(in_array(session('current_user.role'), ['administrator', 'finance']))
                        <a href="{{ url('client-traffic') }}" class="btn btn-click px-4"><i class="bi bi-chat-right-text me-2"></i>Messages</a>
                    @endif

                    @if($page_title == 'Applications')
                        <!-- <a href="{{ url('new-app') }}" class="btn btn-clicksuccess px-4" data-bs-toggle="modal" data-bs-target="#newApplicationModal"><i class="bi bi-plus-square me-2"></i>New App</a> -->
                    @else
                        <!-- <a href="{{ url('client-apps') }}" class="btn btn-clicksuccess px-4"><i class="bi bi-list-ul me-2"></i>App List</a> -->
                    @endif
                    <a href="{{ url('client-logout') }} " class="btn btn-ghost px-4">Log out</a>
                </div>
            </div>
        </header>

         @yield('content')

    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <script src="{{ url('public/libs/jquery-3.2.1.min.js') }}"></script>
    <script src="{{ url('public/libs/jquery-confirm/jquery-confirm.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

     @yield('page-js')
     <script>
        const myForm = document.getElementById('clientNewAppForm');
        myForm.addEventListener('submit', function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            const formAction = $(this).attr("action");
            const data = Object.fromEntries(formData.entries());

            // 4. Execute the AJAX (Fetch) request
            fetch(formAction, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json', 
                    'Accept': 'application/json'  
                },
                body: JSON.stringify(data)
            })
            .then(response => response.json())
            .then(result => {
                console.log('Success:', result);
                // $.alert('Data submitted successfully!');
                Swal.fire({
                  title: "Sucess",
                  text: "New App successfully created",
                  icon: "success"
                });
                this.reset();
                setTimeout(() => { location.reload(); }, 2000);
            })
            .catch(error => {
                console.error('Error:', error);
            });
        });


     </script>
</body>
</html>