@extends('dashboard.layouts.master')

@section('css')
    <!--Chartist Chart CSS -->
    <link rel="stylesheet" href="{{ URL::asset('dashboard/plugins/morris/morris.css') }}">
    <link rel="stylesheet" href="{{ URL::asset('dashboard/plugins/chartist/css/chartist.min.css') }}">

    <style>
        @import url("https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Playwrite+AT:ital,wght@0,100..400;1,100..400&display=swap");
    </style>
    <style>
        .login-logout-btn {
            display: block;
        }
        .main-con-image-lanterns-logo {
            position: absolute;
            top: 100%;
            left: calc(50% + 30px);
            transform: translate(-50%, 0px);
            height: 120px !important;
            transform-origin: top center;
            animation: rotate 3s ease-in-out infinite alternate;
            z-index: 22;
        }
        .main-con-web-header-logo {
            position: relative;
            width: fit-content;
        }
        @keyframes rotate {
            0% {
            transform: translate(-50%, 0px) rotate(10deg);
            }
            100% {
            transform: translate(-50%, 0px) rotate(-10deg);
            }
        }
        .moon-rope {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translate(-50%, 0px);
            height: 120px !important;
            transform-origin: top center;
            animation: rotate 3s ease-in-out infinite alternate;
            z-index: 22;
            padding-top: 20px;
        }
        .moon-rope img {
            top: 0px;
        }
        .moon-rope::after {
            content: "";
            position: absolute;
            top: 0px;
            left: 0px;
            width: 2px;
            height: 30px;
            background-color: #c49753;
            z-index: 1;
        }
        .main-con-shape-ramadan-banner-right {
            position: absolute;
            display: flex;
            align-items: flex-start;
            right: 20px;
            top: 0px;
            z-index: 22;
        }
        .main-con-shape-ramadan-banner-right img {
            height: 100px;
        }
        .main-con-shape-ramadan-banner-right > div::after {
            content: "";
            position: absolute;
            top: 0px;
            left: 50%;
            transform: translate(-50%, 0px);
            width: 2px;
            height: 100px;
            background-color: #c49753;
        }
        .main-con-shape-ramadan-banner-right > div img {
            transform: scaleX(-1);
            height: 70px;
            margin-top: 100px;
        }
        .main-con-shape-ramadan-banner-right > div {
            position: relative;
            display: flex;
            align-items: center;
            flex-direction: column;
            margin: 0px 10px;
        }
        .main-con-shape-ramadan-banner-left {
            position: absolute;
            display: flex;
            align-items: flex-start;
            left: 20px;
            top: 0px;

            z-index: 22;
        }
        .main-con-shape-ramadan-banner-left img {
            height: 100px;
        }
        .main-con-shape-ramadan-banner-left > div::after {
            content: "";
            position: absolute;
            top: 0px;
            left: 50%;
            transform: translate(-50%, 0px);
            width: 2px;
            height: 100px;
            background-color: #c49753;
        }
        .main-con-shape-ramadan-banner-left > div img {
            transform: scaleX(1);
            height: 70px;
            margin-top: 100px;
        }
        .main-con-shape-ramadan-banner-left > div {
            position: relative;
            display: flex;
            align-items: center;
            flex-direction: column;
            margin: 0px 10px;
        }
        .main-con-banner-count-down {
            width: 100%;
            border-radius: 20px;
            height: 100%;
            overflow: hidden;
            background: url("{{asset('frontend/ramadan/bg-coount.jpeg')}}")
            center center no-repeat scroll;
            background-size: cover !important;
            min-height: 400px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .main-con-banner-ramadan-content {
            position: relative;
            z-index: 3;
            color: white;
        }
        .main-con-banner-ramadan-content h2 {
            font-size: 50px;
            color: white;
            font-weight: 700;
            position: relative;
            text-align: center;
            margin-bottom: 20px;
            font-family: "Playwrite AT", cursive;
        }
        .main-con-banner-ramadan-content h2::after {
            content: "";
            position: absolute;
            bottom: -10px;
            width: 80%;
            height: 3px;
            left: 50%;
            transform: translate(-50%, 0px);
            background-color: #fff;
            border-radius: 50%;
        }
        .main-con-banner-ramadan-content p {
            font-size: 15px;
            color: white;
            font-weight: 700;
            position: relative;
            text-align: center;
            margin-bottom: 20px;
        }
        .main-con-banner-ramadan {
            margin-top: 50px;
            margin-bottom: 50px;
        }
        .main-con-banner-count-down::after {
            content: "";
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(to bottom, #000000cf, #00000096);
            z-index: 1;
        }
        .main-con-count-down {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .main-con-count-down > span {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 50px;
            font-weight: 800;
            color: white;
            font-family: "Playwrite AT", cursive;
        }
        .main-con-count-down > span span {
            font-size: 15px;
            color: white;
            font-weight: 500;
            font-family: "Alexandria", Courier, monospace;
        }
        .main-con-congratulate-card-ramadan {
            background: url("{{asset('frontend/ramadan/bg.jpeg')}}")
            center center no-repeat scroll;
            background-size: cover;
            border-radius: 20px;
            overflow: hidden;
            padding: 20px;
            height: 100%;
            position: relative;
        }
        .main-con-congratulate-card-ramadan h2 {
            font-size: 25px;
            text-align: center;
            font-weight: 700;
            color: #1e1f22;
            margin: 10px auto 15px;
        }
        .main-con-congratulate-card-ramadan p {
            font-size: 25px;
            color: #1e1f22;
            font-weight: 400;
            text-align: center;
            margin-bottom: 10px;
            font-family: "Playwrite AT", cursive;
        }
        .main-con-congratulate-card-ramadan span {
            font-size: 25px;
            color: #1e1f22;
            font-weight: 400;
            text-align: center;
            font-family: "Playwrite AT", cursive;
            display: block;
        }
        .main-con-images-card-ramadan {
            display: flex;
            align-items: flex-end;
            justify-content: center;
        }
        .main-con-images-card-ramadan img {
            height: 70px;
        }
        .modal {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            width: 100%;
            left: 100%;
            height: 100vh;
            border-radius: 0px;
        }
        .modal-content {
            background: #fff;
            padding: 25px;
            border-radius: 0px;
            text-align: center;
            height: 100vh;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .modal.show {
            display: flex;
        }
        .modal-content img {
            height: 400px;
            margin: 20px;
        }
        .modal-content p {
            font-size: 20px;
            color: #1e1f22;
            font-weight: 600;
            margin: 10px 0px;
            text-align: center;
        }
        .btn-close-cannon {
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 40px;
            color: #c1185b;
            background-color: transparent;
            border: none;
            outline: none;
        }
        .main-con-image-rabeat-ramadan{
            background: url("{{asset('frontend/ramadan/bg-line-2.png')}}") center center repeat-x scroll;
            background-size: contain;
            width: 94%;
            height: 90px;
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translate(-50%, 0px);
        }
        @media (max-width: 992px) {
            .moon-rope img {
            height: 50px !important;
            }

            a.login-logout-btn {
                font-size: 12px;
                padding: 13px;
                margin: 0px 4px;
            }
            a.login-logout-btn img {
                height: 20px !important;
            }
            .main-con-banner-count-down{
                margin-top:20px;
            }
            .main-con-image-rabeat-ramadan{
                width: 100%;
                height: 42px;
            }
        }
    </style>
@endsection

@section('breadcrumb')
    <!--<div class="col-sm-6">-->
    <!--    <h4 class="page-title">{{ trans('labels.dashboard') }}</h4>-->
    <!--    <ol class="breadcrumb">-->
    <!--        <li class="breadcrumb-item active">{{ trans('labels.welcome_to') }} {{ trans('labels.admin') }}</li>-->
    <!--    </ol>-->
    <!--</div>-->
@endsection

@section('content')
    <div class="row" style="justify-content: center;">
        <h3>مرحبا بك {{auth()->user()->name}}</h3>

        <div class="main-con-banner-ramadan">
            <div class="row">
            <div class="col-12 col-lg-5">
                <div class="main-con-congratulate-card-ramadan">
                <h2>رمضان كريم يا ✨🌙 {{auth()->user()->firstName()}} 🌙✨</h2>
                <p>كل سنة وأنت طيب، ربنا يجعله شهر خير وبركة عليك 🤍</p>
                <span
                    >خلي رمضان السنة دي مختلف… عبادة أكتر، تركيز أكتر، وإنجاز أكتر
                    🚀🌟
                </span>
                <p>رمضان مبارك عليك وعلى أسرتك 🌙💙</p>
                <div class="main-con-images-card-ramadan">
                    <img
                    src="{{asset('frontend/ramadan/fanos.png')}}"
                    alt=""
                    style="transform: translate(-20px, 0px); height: 100px"
                    />
                    <img
                    src="{{asset('frontend/ramadan/quran.png')}}"
                    alt=""
                    style="position: relative; z-index: 22"
                    />
                </div>
                </div>
            </div>
            <div class="col-12 col-lg-7">
                <div class="main-con-banner-count-down">
                <div class="main-con-shape-ramadan-banner-right">
                    <div>
                    <img
                        src="{{asset('frontend/ramadan/moon.png')}}"
                        alt=""
                    />
                    </div>
                    <img
                    src="{{asset('frontend/ramadan/fanos.png')}}"
                    alt=""
                    />
                </div>
                <div class="main-con-shape-ramadan-banner-left">
                    <img
                    src="{{asset('frontend/ramadan/fanos.png')}}"
                    alt=""
                    />
                    <div>
                    <img
                        src="{{asset('frontend/ramadan/moon.png')}}"
                        alt=""
                    />
                    </div>
                </div>
                <div class="main-con-banner-ramadan-content">
                    <h2>رمضان كريم</h2>
                    <p id="magreb-text">الوقت المتبقى على اذان المغرب</p>
                    <p>حسب التوقيت المحلى لمدينة القاهرة</p>
                    <div class="main-con-count-down">
                    <span>01 <span>ساعة</span></span>
                    <span>53 <span>دقيقة</span></span>
                    <span>21 <span>ثانية</span></span>
                    </div>
                </div>
                </div>
            </div>
            </div>
        </div>
      
    </div>

    <div id="maghribModal" class="modal">
        <div class="modal-content" style="padding:0px">
            <video id="myVideo" width="100%" preload="metadata"  autoplay muted playsinline loop>
                <source src="{{asset('frontend/ramadan/1.webm')}}" type="video/webm">
            </video>

            <button id="playBtn" style="display:none;">Play</button>
        <!-- <img
            src="{{asset('frontend/ramadan/cannon-1.png')}}"
            autoplay
        />
        <p>صوماً مقبولا وافطاراً شهياً</p>
        <audio id="myAudio" preload="auto" style="display:none;">
            <source
            src="{{asset('frontend/ramadan/cannon.mp3')}}"/>
            <!-- Your browser does not support audio. -->
        </audio> -->
        <button onclick="closeModal()" class="btn-close-cannon">
            <i class="fa-solid fa-xmark"></i>
        </button>
        </div>
    </div>

@endsection

@section('script')
    <!-- <script>
        function isBetweenMaghribAndFajr(prayerTimes) {
            const now = new Date();

            const [maghribHour, maghribMinute] = prayerTimes.Maghrib.split(":").map(Number);
            const [fajrHour, fajrMinute] = prayerTimes.Fajr.split(":").map(Number);

            const maghrib = new Date();
            maghrib.setHours(maghribHour, maghribMinute, 0, 0);

            const fajr = new Date();
            fajr.setHours(fajrHour, fajrMinute, 0, 0);

            // لو الفجر قبل المغرب (يعني اليوم اللي بعده)
            if (fajr <= maghrib) {
                fajr.setDate(fajr.getDate() + 1);
            }

            // console.log(now);
            // console.log(maghrib);
            // console.log(fajr);
            return now > maghrib && now < fajr;
        }
    </script>
    <script>
        let audioUnlocked = false;
        let sound = false;
        const video = document.getElementById("myVideo");

    //    document.addEventListener("click", () => {
    //     if (!audioUnlocked) {
    //         sound = document.getElementById("myAudio");
    //         sound.play().then(() => {
    //             sound.pause();
    //             sound.currentTime = 0;
    //             audioUnlocked = true;

    //             console.log("---");
    //         });
    //     }
    //     });
      /* ==== 1. SET TO DAY PRAYER TIMES (24h format) ==== */
      let prayerTimes = {
        Fajr: "05:12",
        Dhuhr: "12:07",
        Asr: "15:28",
        Maghrib: "17:21",
        Isha: "19:22",
      };

      /* ==== 2. GET NEXT PRAYER ==== */
      function getNextPrayer() {
        const now = new Date();
        const today = now.toISOString().split("T")[0];

        let nextName = null;
        let nextTime = null;

        for (const [name, time] of Object.entries(prayerTimes)) {
          const [h, m] = time.split(":");
          const date = new Date(`${today}T${h.padStart(2, "0")}:${m}:00`);

          if (date > now) {
            nextName = name;
            nextTime = date;
            break;
          }
        }

        /* if all prayers passed → next is tomorrow Fajr */
        if (!nextTime) {
          const [h, m] = prayerTimes.Fajr.split(":");
          nextTime = new Date(now);
          nextTime.setDate(now.getDate() + 1);
          nextTime.setHours(h, m, 0);
          nextName = "Fajr";
        }

        return { nextName, nextTime };
      }
      let maghribTriggered = false;

      function checkMaghribTime() {
        const now = new Date();
        const current =
          now.getHours().toString().padStart(2, "0") +
          ":" +
          now.getMinutes().toString().padStart(2, "0");

        let expectedTime = "";
        
        if(isBetweenMaghribAndFajr(prayerTimes)){
            expectedTime = prayerTimes.Fajr;
        }else{
            expectedTime = prayerTimes.Maghrib;
        }
        
        if (current === expectedTime && !maghribTriggered) {
          maghribTriggered = true;
          openModal();
        //   audio.currentTime = 0;

            video.play(); // هيشتغل لأنه muted

            document.addEventListener("click", () => {
                video.muted = false;
            });
            // if(sound){
            //      sound.play();
            // }
         
            // setInterval(() => {
            //     if(sound){
            //         sound.pause();
            //         sound.currentTime = 0;
            //         sound.play();
            //     }
                
            // }, 6000);
        }
      }

      function openModal() {
        document.getElementById("maghribModal").classList.add("show");
      }

      function closeModal() {
        video.pause();
        
        document.getElementById("maghribModal").classList.remove("show");
      }
      /* ==== 3. UPDATE COUNTDOWN ==== */
      function updateCountdown() {
        // const { nextTime } = getNextPrayer();
        const now = new Date();
        const check = isBetweenMaghribAndFajr(prayerTimes);
        const today = now.toISOString().split("T")[0];
        
        
        // console.log(check);
        if(check == true){
            // console.log(check);
            const [h, m] = prayerTimes.Fajr.split(":");
            const date = new Date(`${today}T${h.padStart(2, "0")}:${m}:00`);
            nextTime = new Date(now);
            if(now > date){
                nextTime.setDate(now.getDate() + 1);
            }else{
                nextTime.setDate(now.getDate());
            }
            nextTime.setHours(h, m, 0);
            document.getElementById("magreb-text").textContent = "الوقت المتبقى على اذان الفجر";
        }else{
            const [h, m] = prayerTimes.Maghrib.split(":");
            nextTime = new Date(now);
            nextTime.setDate(now.getDate());
            nextTime.setHours(h, m, 0);
            document.getElementById("magreb-text").textContent = "الوقت المتبقى على اذان المغرب";

        }

        // console.log(nextTime);
        // const now = new Date();
        const diff = nextTime - now;

        const h = Math.floor(diff / (1000 * 60 * 60));
        const m = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
        const s = Math.floor((diff % (1000 * 60)) / 1000);

        const spans = document.querySelectorAll(".main-con-count-down > span");

        spans[0].childNodes[0].nodeValue = String(h).padStart(2, "0") + " ";
        spans[1].childNodes[0].nodeValue = String(m).padStart(2, "0") + " ";
        spans[2].childNodes[0].nodeValue = String(s).padStart(2, "0") + " ";
      }

      /* ==== 4. RUN ==== */
      updateCountdown();
      setInterval(() => {
        updateCountdown();
        checkMaghribTime();
      }, 1000);
    </script>
    <script>
        async function getMaghrib() {
            try {
                const city = "Cairo";
                const country = "Egypt";

                const response = await fetch(
                `https://api.aladhan.com/v1/timingsByCity?city=${city}&country=${country}&method=5`
                );

                const data = await response.json();
                const maghrib = data.data.timings.Maghrib;
                const fajr = data.data.timings.Fajr;

                console.log("Maghrib time:", maghrib);
                console.log("Maghrib time:", fajr);
                
                prayerTimes = {
                    Fajr: fajr,
                    Maghrib: maghrib,
                }

                 console.log(prayerTimes);
            } catch (error) {
                console.error("Error:", error);
            }
        }

        getMaghrib();
    </script> -->
@endsection