@extends('layouts.master')

@section('custom_stylesheet')
    <link href="https://cdn.datatables.net/2.3.5/css/dataTables.tailwindcss.css" rel="stylesheet" />
    <link href="https://cdn.datatables.net/buttons/3.2.0/css/buttons.dataTables.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    @yield('extra_styles')
@endsection

@section('content')
    <!-- Loading Overlay -->
    <div id="apps-loader">
        <span class="loader"></span>
    </div>
    
    <main class="grow pt-5" id="content" role="content">
        <!-- Container -->
        <div class="kt-container-fluid">
            @yield('content_body')
        </div>
        <!-- End of Container -->
    </main>
@endsection

@section('custom_scripts')
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/2.3.5/js/dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/2.3.5/js/dataTables.tailwindcss.js"></script>
    <script src="https://cdn.datatables.net/buttons/3.2.0/js/dataTables.buttons.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/3.2.0/js/buttons.html5.min.js"></script>

    <script src="{{ asset('assets/js/highcharts/highcharts.js') }}"></script>
    <script src="{{ asset('assets/js/highcharts/modules/exporting.js') }}"></script>
    <script src="{{ asset('assets/js/highcharts/modules/export-data.js') }}"></script>
    <script src="{{ asset('assets/js/highcharts/modules/accessibility.js') }}"></script>
    <script src="{{ asset('assets/js/highcharts/themes/adaptive.js') }}"></script>

    @include('partials.google-maps')
    
    @yield('config')
    

    <script src="{{ asset('assets/js/apps/speedlimit/common.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    
    <script>
        // Only initialize map if the map div exists
        if (document.getElementById('map')) {
            initializeGoogleMap(null, 'map', "Google Normal", 10, ['visualization']);
        }
    </script>
    
    @yield('extra_scripts')
@endsection