@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 >
            <form action="{{ route('admin.otp-verify') }}" method="POST">
                @csrf
                <div class="row" style="flex-direction: column;">
                    <div class="form-group mb-0 col-sm-10" style="max-width: 100%;">
                        <div>
                            <div class="input-daterange input-group" id="otp">
                                <input type="number" class="form-control" name="otp" required />
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2 align-self-center" style="margin-top: 10px;max-width: 100%;">
                        <input type="submit" class="btn btn-primary btn-block" value="تاكيد">
                    </div>
                </div>
            </form>
        </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