<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="icon" href="{{ asset('icon/favicon.png') }}">
        <title>{{ $title ?? 'Marketing Data Analysis' }}</title>
        <link href="{{ asset('css/styles.css') }}" rel="stylesheet" data-navigate-track/>
        <link rel="stylesheet" href="{{asset('assets/font-awesome/css/fontawesome-v6.3.0.all.min.css')}}" data-navigate-track>
        @livewireStyles
        <script src="{{asset('assets/font-awesome/fontawesome-v6.3.0.all.js')}}" crossorigin="anonymous"></script>
        <script src="{{asset('js/jquery-3.5.1.min.js')}}"></script>
        <script src="{{asset('js/bootstrap-5.2.3.bundle.min.js')}}" crossorigin="anonymous"></script>
        <script src="{{asset('js/highcharts-v11.4.3.min.js')}}"></script>
    </head>
    <body class="sb-nav-fixed">
        {{-- If the user is authenticated --}}
        @auth()
            @include('components.layouts.auth.navbar')
            <div id="layoutSidenav">
                <div  wire:ignore>
                @include('components.layouts.auth.sidebar')
                </div>
                <div id="layoutSidenav_content">
                    <div class="m-5">
                        <livewire:offline-state />
                        {{ $slot }}
                    </div>
                    @include('components.layouts.auth.footer')
                </div>
            </div>
        @endauth

        {{-- If the user is not authenticated (if the user is a guest) --}}
        @guest
            {{-- If the user is on the login page --}}
            {{ $slot }}
        @endguest

        @if (session()->has('success') || session()->has('error'))
            <div class="position-fixed top-0 right-0 p-3 mt-5" style="z-index: 1100; right: 0; bottom: 0;">
                <div class="toast {{ !empty(session('success')) ?  'text-white bg-success' : 'text-white bg-danger' }} border-0" role="alert" aria-live="assertive" aria-atomic="true" data-delay="4000">
                    <div class="d-flex">
                        <div class="toast-body">
                            {{ session('success') ??  session('error')}}
                        </div>
                        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                    </div>
                </div>
            </div>
            <script>
                $(document).ready(function(){
                    $('.toast').toast('show');
                });
            </script>
        @endif
        <script>
            function showData(id) {
                $.ajax({
                    url: '{{ URL('view-table-data') }}',
                    type: "GET",
                    data:  {data_id: id},
                    beforeSend:function(){					

                    },
                    success: function (response) {
                        if (response.success) {
                            $("#dataModal").modal('show');
                            $(".contentBody").html(response.html);
                        }
                    },
                    error: function (error) {
                        console.error('Error submitting form:', error);
                    }
                });
            }
        </script>
        <script src="{{ asset('js/scripts.js') }}" data-navigate-track></script>
        @livewireScripts
    </body>
</html>