<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	@foreach($tentang as $ttg)
    <link rel="shortcut icon" href="{{asset('mystyle/image/'.$ttg->favicon)}}">
    <title>{{$ttg->judul_website}}</title>
    @endforeach
    <link rel="stylesheet" href="{{ asset('bootstrap/css/bootstrap.min.css') }}">

    <link rel="stylesheet" href="{{ asset('mystyle/css/style.css') }}">
    <link rel="stylesheet" href="{{ asset('mystyle/css/landingstyle.css') }}">
    <link rel="stylesheet" href="{{ asset('mystyle/css/navbar.css') }}">
    <link rel="stylesheet" href="{{ asset('mystyle/css/hero.css') }}">
    
    <link rel="stylesheet" type="text/css" href="{{ asset('owlCarousel/docs/assets/owlcarousel/assets/owl.carousel.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('owlCarousel/docs/assets/owlcarousel/assets/owl.theme.default.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('fontawesome/css/all.min.css') }}">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js" integrity="sha512-AA1Bzp5Q0K1KanKKmvN/4d3IRKVlv9PYgwFPvm32nPO6QS8yH1HO7LbgB1pgiOxPtfeg5zEn2ba64MUcqJx6CA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
	<div id="headercek" class="header">
        <header>
          <div class="container">
            <div class="float-start me-3 toggle-button d-lg-none">
              <div onclick="togglebar()">
                <div class="bars" id="bar1"></div>
                <div class="bars" id="bar2"></div>
                <div class="bars" id="bar3"></div>
              </div>
            </div>
            <div class="float-start">
            	@foreach($tentang as $ttg)
              	<h2><a href="/">{{$ttg->logo_nama}}</a></h2>
              	@endforeach
            </div>
            <div class="float-end ms-3 text-end mt-1 pt-lg-1">
              <a href="#contact" class="pt-1 pb-2 pe-3 ps-3 rounded-pill text-contact" >CONTACT</a>
            </div>
            <div class="float-end me-1 ms-2 mt-2 pt-lg-1">
              <div class="cover-mode rounded-pill" onclick="mode()">
                <div class="button-mode" id="mode"></div>
              </div>
            </div>
            <div class="float-end me-2 d-lg-block d-none mt-2">
              <ul class="cover-menu">
                <li><a href="#home" class="menu-item me-5">Home</a></li>
                <li><a href="#about" class="menu-item me-5">About</a></li>
                <li><a href="#achievement" class="menu-item me-5">Achievement</a></li>
                <li><a href="#portfolio" class="menu-item me-5">Portfolio</a></li>
                <li><a href="#testimonial" class="menu-item me-5">Testimonials</a></li>
                <li><a href="#blog" class="menu-item me-5">Blog</a></li>
              </ul>
            </div>
          </div>
        </header>
        <div id="menu-res" class="menu-responsive ps-5 pt-lg-1 pt-md-1 d-lg-none pt-1 off">
          <div class="menu-fix text-center">
            <a href="#home" class="menu-item me-5">Home</a><br /><br class="mb-md-2 mb-1" />
            <a href="#about" class="menu-item me-5">About</a><br /><br class="mb-md-2 mb-1" />
            <a href="#achievement" class="menu-item me-5">Achievement</a><br /><br class="mb-md-2 mb-1" />
            <a href="#portfolio" class="menu-item me-5">Portfolio</a><br /><br class="mb-md-2 mb-1" />
            <a href="#testimoinial" class="menu-item me-5">Testimonials</a><br /><br class="mb-md-2 mb-1" />
            <a href="#blog" class="menu-item me-5">Blog</a>
          </div>
        </div>
    </div>
    <div id="content">
    	@yield('main')
    </div>
    @if ($message = Session::get('primary'))
        <script type="text/javascript">
            swal('Berhasil', 'Data berhasil dikirim', 'success')
        </script>
    @endif
    <script type="text/javascript">
    	let cookie = {};
        document.cookie.split(';').forEach(function(el) {
            let [key,value] = el.split('=');
            cookie[key.trim()] = value;
        })
        console.log(cookie['mode'])

        if(cookie['mode'] == 'dark'){
            document.querySelector('#mode').classList.add('on')
            document.getElementById('headercek').classList.add('dark')
            document.getElementById('section').classList.add('dark')
            document.getElementById('headercek').classList.remove('light')
            document.getElementById('section').classList.remove('light')
        } else {
            document.querySelector('#mode').classList.remove('on')
            document.getElementById('headercek').classList.remove('dark')
            document.getElementById('section').classList.remove('dark')
            document.getElementById('headercek').classList.add('light')
            document.getElementById('section').classList.add('light')
        }

        function togglebar(){
            document.querySelector('#bar1').classList.toggle('on')
            document.querySelector('#bar2').classList.toggle('on')
            document.querySelector('#bar3').classList.toggle('on')
            document.querySelector('#menu-res').classList.toggle('on')
            document.querySelector('#menu-res').classList.toggle('off')
        }
        function mode(){
            let cookie = {};
            document.cookie.split(';').forEach(function(el) {
                let [key,value] = el.split('=');
                cookie[key.trim()] = value;
            })
            if(cookie['mode'] == 'dark'){
                document.querySelector('#mode').classList.remove('on')
                document.getElementById('headercek').classList.remove('dark')
                document.getElementById('headercek').classList.add('light')
                document.getElementById('section').classList.remove('dark')
                document.getElementById('section').classList.add('light')
                document.cookie = "mode=light"
            } else {
                document.querySelector('#mode').classList.add('on')
                document.getElementById('headercek').classList.add('dark')
                document.getElementById('headercek').classList.remove('light')
                document.getElementById('section').classList.add('dark')
                document.getElementById('section').classList.remove('light')
                document.cookie = "mode=dark"
            }
              console.log(cookie['mode'])
        }
    </script>
    <script type="text/javascript" src="{{ asset('mystyle/js/script.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('jquery/jquery.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('owlCarousel/docs/assets/owlcarousel/owl.carousel.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bootstrap/js/bootstrap.min.js') }}"></script>
    <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap5.min.js"></script>
    <script type="text/javascript" src="{{asset('ckeditor/ckeditor.js')}}"></script>
    @yield('script')
</body>
</html>