@extends('admin.layouts.master')

@section('head-tag')
    <style>
        .header .tophead .th-menu .menu-item a{
            font-size: 1rem;
            margin: 12px;
            font-family: "IRANYekan", Serif !important;
        }
        @media (max-width: 768px) {
            .main-img img
            {
                width: 100%; /* نصف عرض برای لوگو */
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }

        @media (max-width: 1442px) {
            .main-img img
            {
                width: 70% !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
            }
        }
        .main-img
        {
            width: 100% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            margin: 0;
        }
        .main-img img
        {
            width: 50% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            margin: 0;
        }

    </style>
@endsection

@section('header')
    <!-- ---------- Loding ---------- -->
    <div id="loading-wrapper">
        <div class="content-loaging">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <div class="header shadows d-none d-lg-block">
        <div class="header-container">
            <div class="middle-menu" style="padding: 5px 0 !important;">
                <div class="container">
                    <div class="col-lg-12 d-flex">
                        <div class="responsive col-lg-4 col-sm-12 d-flex ml-auto align-items-center" style="font-family: 'vazir'">
                            <div>مرحباً: <span class="text-warning p-2"> {{ auth()->user()->name}} </span></div>
                            |
                            <div class="text-white clock p-2"></div>
                            |
                            <div class="text-white date p-2"></div>
                        </div>
                        <div class="col-lg-8 order-lg-1 justify-content-end d-flex" style="font-family: 'vazir'">
                            <ul class="th-menu">
                                @can('admin.shop.index')
                                    <li class="menu-item">
                                        <a class="trs-3 btn text-white" href="{{ route('admin.shop.index') }}">دخل مغازه</a>
                                    </li>
                                @endcan
                                @can('admin.slider.index')
                                    <li class="menu-item">
                                        <a class="trs-3 btn text-white" href="{{ route('admin.slider.index') }}">اسلایدر</a>
                                    </li>
                                @endcan
                                @can('admin.option.index')
                                    <li class="menu-item">
                                        <a class="trs-3 btn text-white" href="{{ route('admin.option.index') }}">تنظیمات سایت</a>
                                    </li>
                                @endcan
                                @can('admin.option.printers')
                                    <li class="menu-item">
                                        <a class="trs-3 btn text-white" href="{{ route('admin.option.printers') }}">تنظیمات پرینتر</a>
                                    </li>
                                @endcan
                                @if(auth()->user()->can('admin.rateb.index'))
                                    <li class="menu-item">
                                        <a class="trs-3 btn text-white" href="{{ route('admin.rateb.index') }}">حقوق و دستمزد</a>
                                    </li>
                                @endif
                                @if(auth()->user()->can('admin.user.index'))
                                    <li class="menu-item">
                                        <a class="trs-3 btn text-white" href="{{ route('admin.user.index') }}">کاربران ادمین</a>
                                    </li>
                                @endif
                                @can('admin.order.list')
                                    <li class="menu-item">
                                        <a class="trs-3 btn text-white pop_tooltip" data-style="tooltip" data-tip="Orders List"
                                           href="{{ route('admin.order.list') }}">لیست سفارشات</a>
                                    </li>
                                @endcan
                                @can('admin.role-permission.index')
                                    <li class="menu-item">
                                        <a class="trs-3 btn text-white" href="{{ route('admin.role-permission.index') }}">مدیریت نقش‌ها</a>
                                    </li>
                                @endcan
                                <li class="menu-item">
                                    <form action="#" method="POST">
                                        @csrf
                                        <button type="submit" class="btn btn-danger w-100 pop_tooltip" data-style="tooltip" data-tip="Logout">خروج</button>
                                    </form>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('main-img')
    <div class="authincation d-flex justify-content-center align-items-center" style="height: 90vh !important;">
        <div class="container text-center align-content-center" style="height: 100vh !important;">
            <div class="main-img">
                <img src="{{ asset('assets/img/tailor-logo.png') }}" class="img-fluid mx-auto d-block">
            </div>
        </div>
    </div>


@endsection

@section('scripts')
    <script>
        $(document).ready(function(){
            function displayDateTime() {
                var currentTime = new Date();
                var year = currentTime.getFullYear();
                var month = currentTime.getMonth() + 1;
                var day = currentTime.getDate();
                var dayOfWeek = currentTime.getDay();
                var arabicDays = ["الأحد", "الإثنين", "الثلاثاء", "الأربعاء", "الخميس", "الجمعة", "السبت"];

                month = (month < 10 ? "0" : "") + month;
                day = (day < 10 ? "0" : "") + day;

                var dateString = year + "/" + month + "/" + day + " - " + arabicDays[dayOfWeek];

                var hours = currentTime.getHours();
                var minutes = currentTime.getMinutes();
                var seconds = currentTime.getSeconds();

                hours = (hours < 10 ? "0" : "") + hours;
                minutes = (minutes < 10 ? "0" : "") + minutes;
                seconds = (seconds < 10 ? "0" : "") + seconds;

                var timeString = hours + ":" + minutes + ":" + seconds;

                $(".date").html(dateString);
                $(".clock").html(timeString);
            }

            setInterval(displayDateTime, 1000);
        });
    </script>
    @if (session('toast'))
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const Toast = Swal.mixin({
                    toast: true,
                    position: 'top',
                    showConfirmButton: false,
                    timer: 5000,
                    timerProgressBar: true,
                    didOpen: (toast) => {
                        toast.addEventListener('mouseenter', Swal.stopTimer);
                        toast.addEventListener('mouseleave', Swal.resumeTimer);
                    }
                });

                Toast.fire({
                    icon: 'warning',
                    title: '{{ session('toast') }}'
                });
            });
        </script>
    @endif
@endsection