@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>

@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;flex-direction: column;align-items: center;">
        <h3>مرحبا بك {{auth()->user()->name}}</h3>
        <p>برجاء الاشتراك في قناة التيليجرام للتمكن من استخدام لوحة التحكم</p>
        <div >
            <script async src="https://telegram.org/js/telegram-widget.js?22" data-telegram-login="mr_gohary_mod_bot" data-size="large" data-onauth="onTelegramAuth(user)" data-request-access="write"></script>
            <script type="text/javascript">
                function onTelegramAuth(user) {
                fetch('{{route('admin.set-telgram-id')}}', {
                    method: 'POST',
                    headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    },
                    body: JSON.stringify({
                    id: user.id,
                    })
                })
                .then(response => response.json())
                .then(data => {
                    console.log(data);
                    if(data){
                    location.reload();  
                    }
                    
                })
                .catch(error => console.error('Error:', error));
                // alert('Logged in as ' + user.first_name + ' ' + user.last_name + ' (' + user.id + (user.username ? ', @' + user.username : '') + ')');
                }
            </script>
        </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