@extends('layout.master')

@section('title', 'Laman Utama')

@push('css')
<style>
    /* Force #main to fill available height in laman utama only */
    #main {
        display: flex;
        flex-direction: column;
    }

    .main-content {
        display: flex; 
        flex-direction: column;
        flex: 1 0 auto;
    }

    .greeting h1 {
        font-family: 'Roboto', sans-serif;
        color: white;
        text-shadow:
        -2px -2px 0 #1E3A8A,  
        2px -2px 0 #1E3A8A,
        -2px 2px 0 #1E3A8A,
        2px 2px 0 #1E3A8A;
    }
</style>    
@endpush


@section('content')
<section class="section d-flex flex-grow-1">
    <div class="row flex-grow-1">
        <div class="col-lg-12 d-flex flex-column flex-grow-1">
            @php
                $bgImagePath = $cms->where('type', 'pengenalan-bgimage')->value('content');
                $bgColor = $cms->where('type', 'pengenalan-overlay-color')->value('content') ?? '#000000';
                $bgOpacity = $cms->where('type', 'pengenalan-overlay-opacity')->value('content') ?? '0';
                
                $hex = ltrim($bgColor, '#');
                if (strlen($hex) == 3) {
                    $r = hexdec(substr($hex,0,1).substr($hex,0,1));
                    $g = hexdec(substr($hex,1,1).substr($hex,1,1));
                    $b = hexdec(substr($hex,2,1).substr($hex,2,1));
                } elseif (strlen($hex) == 6) {
                    $r = hexdec(substr($hex,0,2));
                    $g = hexdec(substr($hex,2,2));
                    $b = hexdec(substr($hex,4,2));
                } else {
                    $r = 0; $g = 0; $b = 0;
                }
                
                $rgbaOverlay = "rgba($r, $g, $b, $bgOpacity)";
            @endphp
            <div class="card flex-grow-1 m-0" style="background-image: linear-gradient({{ $rgbaOverlay }}, {{ $rgbaOverlay }}), url('{{ asset('storage/' . $bgImagePath) }}'); background-size: cover; background-position: center;">
                <div class="card-body position-relative d-flex flex-column justify-content-center align-items-center" style="z-index: 1;">

                    <div class="greeting text-center w-100 mb-3">
                        <h1 class="fs-40 fw-bold">Selamat Datang, <span class="text-info">{{ Auth::user()->name }}</span></h1>
                        <hr class="w-50 mx-auto border-info">
                        <p class="fs-20 fw-bold text-white">Sistem e-Geospatial Perhutanan</p>
                    </div>
                    
                    <div id="editor-container" class="h-auto w-100 mt-3 mb-auto text-center" style="color:black;"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Penafian -->
    <div class="modal fade" id="myModal" data-bs-backdrop='static' tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header border-0">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <h5 class="fs-22 fw-bold">PENAFIAN</h5>
                    Pihak Jabatan tidak bertanggungjawab terhadap apa-apa kehilangan atau kerugian yang disebabkan oleh penggunaan mana-mana maklumat yang diperolehi dari laman web ini.
                </div>
                <div class="modal-footer border-0 justify-content-center">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="notice_modal()">Setuju</button>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('js')
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        var isNoticed = "{{ auth()->user()->is_noticed }}";

        if(isNoticed == 0) {
            var myModal = new bootstrap.Modal(document.getElementById('myModal'));
            myModal.show();
        }
    });

    function notice_modal() {
        $.ajax({
            type:'POST',
            url: "{{ route('laman_utama') }}",
            data: {
                _token: "{{ csrf_token() }}",
                data: 'accepted'
            },
            success: (data) => {
                console.log('success')
            },
            error: function(data){
                console.log(data);
            }
        });
    }

    var quill = new Quill('#editor-container');
    quill.enable(false);
    quill.setContents({!! $pengenalan !!});

</script>
@endsection