@extends('layouts.usermaster')

@section('styles')

<!-- INTERNAL Data table css -->
<link href="{{asset('build/assets/plugins/datatable/css/dataTables.bootstrap5.min.css')}}?v=1750822432" rel="stylesheet" />
<link href="{{asset('build/assets/plugins/datatable/responsive.bootstrap5.css')}}?v=1750822432" rel="stylesheet" />

<style>
    .custom-notify {
        color: #704700 !important;
        background-color: #fff9aa;
    }
    .custom-notify .mark-as-read svg{
        color: #e49e00 !important;
        width: 20px;
        height: 20px;
        position: relative;
        animation: myfirst 1s infinite;
        animation-direction: alternate;
    }
    .custom-notify .btn-close {
        border: 1px solid #70470063;
        color: #704700 !important;
        font-size: 20px;
    }
    .sprukocnotify {
        top: 10px;
        right: 10px;
    }
    @keyframes myfirst {
        0%   { left: 0px; top: 0px;}
        100%  { left: 10px; top: 0;}
    }
</style>

@endsection

@section('content')
<section>
    <div class="bannerimg cover-image" data-bs-image-src="{{asset('build/assets/images/photos/banner1.jpg')}}">
        <div class="header-text mb-0">
            <div class="container ">
                <div class="row text-white">
                    <div class="col">
                        <h1 class="mb-0">{{lang('Dashboard', 'menu')}}</h1>
                    </div>
                    <div class="col col-auto">
                        <ol class="breadcrumb text-center">
                            <li class="breadcrumb-item">
                                <a href="{{url('/')}}" class="text-white-50">{{lang('Home', 'menu')}}</a>
                            </li>
                            <li class="breadcrumb-item active">
                                <a href="#" class="text-white">{{lang('Dashboard', 'menu')}}</a>
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Section -->

<!--Dashboard List-->
<section>
    <div class="cover-image sptb">
        <div class="container">
            <div class="row">
                @include('includes.user.verticalmenu')
                <div class="col-xl-9">
                    <!--- Custom notification -->
                    @php $customernotify = auth()->guard('customer')->user()->unreadNotifications()->where('data->status', 'mail')->get();  @endphp
                    @if($customernotify->isNotEmpty())
                    <div class="alert alert-warning-light br-13  border-0 d-flex align-items-start custom-notify pe-5" role="alert">
                        <div class="d-flex">
                            <svg class="alt-notify  me-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                <path fill="#eec466"
                                    d="M19,20H5a3.00328,3.00328,0,0,1-3-3V7A3.00328,3.00328,0,0,1,5,4H19a3.00328,3.00328,0,0,1,3,3V17A3.00328,3.00328,0,0,1,19,20Z" />
                                <path fill="#e49e00"
                                    d="M22,7a3.00328,3.00328,0,0,0-3-3H5A3.00328,3.00328,0,0,0,2,7V8.061l9.47852,5.79248a1.00149,1.00149,0,0,0,1.043,0L22,8.061Z" />
                            </svg>
                        </div>
                        <ul class="notify vertical-scroll5 custom-ul ht-0 me-5">
                            @if(auth()->guard('customer')->user())
                            @forelse( $customernotify as $key => $notification)
                            @if ($notification->data['status'] == 'mail')
                            <li class="item {{ $key > 0 ? 'd-none' : '' }}">
                                <p class="mb-0">{{strip_tags($notification->data['mailsubject'])}}
                                    {!! Str::limit($notification->data['mailtext'], 600, '...') !!} <a href="{{route('customer.notiication.view', $notification->id)}}"
                                    class="text-warning mark-as-read">
                                    {{-- Read More --}}
                                    <svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 -960 960 960" width="18px" fill="#704700 "><path d="m242-200 200-280-200-280h98l200 280-200 280h-98Zm238 0 200-280-200-280h98l200 280-200 280h-98Z"/></svg>
                                </a></p>
                            </li>
                            @endif
                            @empty
                            @endforelse
                            @endif
                    
                        </ul>
                        <div class="d-flex ms-6 sprukocnotify">
                            <button class="btn-close ms-2 mt-0 text-warning" data-bs-dismiss="alert"
                                aria-hidden="true">×</button>
                        </div>
                    </div>
                    @endif
                    <!--- End Custom notification -->

                    @if(setting('ANNOUNCEMENT_USER') == 'only_login_user' || setting('ANNOUNCEMENT_USER') == 'all_users')
                        @foreach ($announcement as $anct)
                            @if ($anct->status == 1)
                                <div class="alert alert-announcement p-5 announcement-alert" role="alert" data-id="{{$anct->id}}" style="background: {{$anct->primary_color}}; color:{{$anct->secondary_color}}; display:none ">
                                    <button type="submit" class="btn-close ms-5 text-danger float-end notifyclose" style="color:{{$anct->secondary_color}};" data-id="{{$anct->id}}">×</button>
                                    <div class="d-flex align-items-start gap-3">
                                        <div class="lh-1 svg-icon flex-shrink-0" style="background: {{ str_replace(', 1)', ', 0.1)', $anct->secondary_color) }}; color:{{$anct->secondary_color}};">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M160,160h40a40,40,0,0,0,0-80H160Z" opacity="0.2"/><path d="M160,80V200.67a8,8,0,0,0,3.56,6.65l11,7.33a8,8,0,0,0,12.2-4.72L200,160" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M40,200a8,8,0,0,0,13.15,6.12C105.55,162.16,160,160,160,160h40a40,40,0,0,0,0-80H160S105.55,77.84,53.15,33.89A8,8,0,0,0,40,40Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                                        </div>
                                        <div>
                                            <h5 class="fw-semibold mb-1" style="color:{{$anct->secondary_color}};">{{$anct->title}}</h5>
                                            <span>{!!$anct->notice!!}</span>
                                            @if ($anct->buttonlable != null && $anct->buttonurl != null)
                                                <div class="ms-auto mt-auto">
                                                    <a href="{{ $anct->buttonurl }}" target="_blank" class="btn btn-info">{{ $anct->buttonlable }}<i class="ri-arrow-right-line align-middle ms-1"></i></a>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endif
                        @endforeach

                        @foreach ($announcements as $ancts)
                            @php
                            $announceDay = explode(',', $ancts->announcementday);
                            $now = today()->format('D');

                            @endphp
                            @foreach ($announceDay as $announceDays)
                                @if ($ancts->status == 1 && $announceDays == $now)
                                    <div class="alert alert-announcement p-5 announcement-alert" role="alert" data-id="{{$ancts->id}}"  style="background: {{$ancts->primary_color}}; color:{{$ancts->secondary_color}}; display:none">
                                        <button type="submit" class="btn-close ms-5 text-danger float-end notifyclose" style="color:{{$ancts->secondary_color}};" data-id="{{$ancts->id}}">×</button>
                                        <div class="d-flex align-items-start gap-3">
                                            <div class="lh-1 svg-icon flex-shrink-0" style="background: {{ str_replace(', 1)', ', 0.1)', $ancts->secondary_color) }}; color:{{$ancts->secondary_color}};">
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M160,160h40a40,40,0,0,0,0-80H160Z" opacity="0.2"/><path d="M160,80V200.67a8,8,0,0,0,3.56,6.65l11,7.33a8,8,0,0,0,12.2-4.72L200,160" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M40,200a8,8,0,0,0,13.15,6.12C105.55,162.16,160,160,160,160h40a40,40,0,0,0,0-80H160S105.55,77.84,53.15,33.89A8,8,0,0,0,40,40Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                                            </div>
                                            <div>
                                                <h5 class="fw-semibold mb-1" style="color:{{$ancts->secondary_color}};">{{$ancts->title}}</h5>
                                                <span>{!!$ancts->notice!!}</span>
                                                @if ($ancts->buttonlable != null && $ancts->buttonurl != null)
                                                    <div class="ms-auto mt-auto">
                                                        <a href="{{ $ancts->buttonurl }}" target="_blank" class="btn btn-info">{{ $ancts->buttonlable }}<i class="ri-arrow-right-line align-middle ms-1"></i></a>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        @endforeach
                    @endif

                    <div class="row">

                        <div class="col-xl-3 col-lg-3 col-md-12">
                            <div class="card">
                                <span>
                                    <a href="{{route('client.dashboard')}}">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-7">
                                                    <div class="mt-0 text-start">
                                                        <span class="fs-14 font-weight-semibold">{{lang('Total Tickets',
                                                            'menu')}}</span>
                                                        <h3 class="mb-0 mt-1 text-primary fs-20">{{$usertickets->count()}}</h3>
                                                    </div>
                                                </div>
                                                <div class="col-5">
                                                    <div class="icon1 bg-primary-transparent my-auto float-end"> <i
                                                            class="las la-ticket-alt"></i> </div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </span>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-3 col-md-12">
                            <div class="card">
                                <span>
                                    <a href="{{route('activeticket')}}">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-7">
                                                    <div class="mt-0 text-start">
                                                        <span class="fs-14 font-weight-semibold">{{lang('Active Tickets',
                                                            'menu')}}</span>
                                                        <h3 class="mb-0 mt-1 text-success fs-20">

                                                            {{$active->count()}}

                                                        </h3>
                                                    </div>
                                                </div>
                                                <div class="col-5">
                                                    <div class="icon1 bg-success-transparent my-auto float-end"> <i
                                                            class="ri-ticket-2-line"></i> </div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </span>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-3 col-md-12">
                            <div class="card">
                                <span>
                                    <a href="{{route('onholdticket')}}">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-7">
                                                    <div class="mt-0 text-start">
                                                        <span class=" fs-14 font-weight-semibold">{{lang('On-Hold Tickets','menu')}}</span>
                                                        <h3 class="mb-0 mt-1 text-secondary fs-20">{{$onhold->count()}}</h3>
                                                    </div>
                                                </div>
                                                <div class="col-5">
                                                    <div class="icon1 bg-warning-transparent my-auto  float-end"> <i
                                                            class="ri-coupon-2-line"></i> </div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </span>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-3 col-md-12">
                            <div class="card">
                                <span>
                                    <a href="{{route('closedticket')}}">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-7">
                                                    <div class="mt-0 text-start">
                                                        <span class="fs-14  font-weight-semibold">{{lang('Closed Tickets',
                                                            'menu')}}</span>
                                                        <h3 class="mb-0 mt-1 text-secondary fs-20">{{$closed->count()}}</h3>
                                                    </div>
                                                </div>
                                                <div class="col-5">
                                                    <div class="icon1 bg-danger-transparent my-auto  float-end"> <i
                                                            class="ri-coupon-2-line"></i> </div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </span>
                            </div>
                        </div>
                        @if($quotations->count() > 0)
                        <div class="col-xl-3 col-lg-3 col-md-12">
                            <div class="card">
                                <span>
                                    <a href="{{ route('cust.quotations') }}">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-7">
                                                    <div class="mt-0 text-start">
                                                        <span class="fs-14  font-weight-semibold">{{ lang('Quotations','menu')}}</span>
                                                        <h3 class="mb-0 mt-1 text-secondary fs-20">{{ $quotations->count() }}</h3>
                                                    </div>
                                                </div>
                                                <div class="col-5">
                                                    <div class="icon1 bg-danger-transparent my-auto  float-end"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-receipt" viewBox="0 0 16 16">
                                                        <path d="M1.92.506a.5.5 0 0 1 .434.14L3 1.293l.646-.647a.5.5 0 0 1 .708 0L5 1.293l.646-.647a.5.5 0 0 1 .708 0L7 1.293l.646-.647a.5.5 0 0 1 .708 0L9 1.293l.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .801.13l.5 1A.5.5 0 0 1 15 2v12a.5.5 0 0 1-.053.224l-.5 1a.5.5 0 0 1-.8.13L13 14.707l-.646.647a.5.5 0 0 1-.708 0L11 14.707l-.646.647a.5.5 0 0 1-.708 0L9 14.707l-.646.647a.5.5 0 0 1-.708 0L7 14.707l-.646.647a.5.5 0 0 1-.708 0L5 14.707l-.646.647a.5.5 0 0 1-.708 0L3 14.707l-.646.647a.5.5 0 0 1-.801-.13l-.5-1A.5.5 0 0 1 1 14V2a.5.5 0 0 1 .053-.224l.5-1a.5.5 0 0 1 .367-.27m.217 1.338L2 2.118v11.764l.137.274.51-.51a.5.5 0 0 1 .707 0l.646.647.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.509.509.137-.274V2.118l-.137-.274-.51.51a.5.5 0 0 1-.707 0L12 1.707l-.646.647a.5.5 0 0 1-.708 0L10 1.707l-.646.647a.5.5 0 0 1-.708 0L8 1.707l-.646.647a.5.5 0 0 1-.708 0L6 1.707l-.646.647a.5.5 0 0 1-.708 0L4 1.707l-.646.647a.5.5 0 0 1-.708 0z"/>
                                                        <path d="M3 4.5a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5m8-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5"/>
                                                    </svg> </div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </span>
                            </div>
                        </div>
                        @endif

                        @if($invoices->count() > 0)
                        <div class="col-xl-3 col-lg-3 col-md-12">
                            <div class="card">
                                <span>
                                    <a href="{{ route('cust.customInvoice') }}">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-7">
                                                    <div class="mt-0 text-start">
                                                        <span class="fs-14 font-weight-semibold">{{lang('Invoices',
                                                            'menu')}}</span>
                                                        <h3 class="mb-0 mt-1 text-secondary fs-20">{{ $invoices->count() }}</h3>
                                                    </div>
                                                </div>
                                                <div class="col-5">
                                                    <div class="icon1 bg-danger-transparent my-auto  float-end"> <i
                                                            class="ri-coupon-2-line"></i> </div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </span>
                            </div>
                        </div>
                        @endif

                        @if(setting('enableRefund') == 'on')
                            @if($refunds->count() > 0)
                            <div class="col-xl-3 col-lg-3 col-md-12">
                                <div class="card">
                                    <span>
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-7">
                                                    <div class="mt-0 text-start">
                                                        <span class="fs-14 font-weight-semibold">{{lang('Refunds',
                                                            'menu')}}</span>
                                                        <h3 class="mb-0 mt-1 text-secondary fs-20">{{ $refunds->count() }}</h3>
                                                    </div>
                                                </div>
                                                <div class="col-5">
                                                    <div class="icon1 bg-danger-transparent my-auto  float-end"> <i
                                                        class="ri-coupon-2-line"></i> </div>
                                                </div>
                                            </div>
                                        </div>
                                    </span>
                                </div>
                            </div>
                            @endif
                        @endif

                    </div>


                    <div class="row">
                        <div class="col-xl-12 col-lg-12 col-md-12">
                            <div class="card mb-0">
                                <div class="card-header border-0 d-flex">
                                    <h4 class="card-title">{{lang('Tickets Summary')}}</h4>
                                    {{-- @if(setting('CUSTOMER_TICKET') == 'no')
                                    <div class="float-end ms-auto"><a href="{{route('client.ticket')}}" class="btn btn-secondary ms-auto"><i class="fa fa-paper-plane-o me-2"></i>{{lang('Create Ticket', 'menu')}}</a></div>
                                    @endif --}}
                                </div>
                                <div class="card-body overflow-scroll custom-show-data">
                                    <div>
                                        <div class="sprukoloader-img"><i class="fa fa-spinner fa-spin"></i><span>{{ lang('Loading...') }}</span></div>
                                        <div class="fetchedusertabledata">
                                            @include('user.usertableinclude')
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--Dashboard List-->

@endsection

@section('scripts')

<!-- INTERNAL Vertical-scroll js-->
<script src="{{asset('build/assets/plugins/vertical-scroll/jquery.bootstrap.newsbox.js')}}?v=1750822432"></script>

<!-- INTERNAL Data tables -->
<script src="{{asset('build/assets/plugins/datatable/js/jquery.dataTables.min.js')}}?v=1750822432"></script>
<script src="{{asset('build/assets/plugins/datatable/js/dataTables.bootstrap5.js')}}?v=1750822432"></script>
<script src="{{asset('build/assets/plugins/datatable/dataTables.responsive.min.js')}}?v=1750822432"></script>
<script src="{{asset('build/assets/plugins/datatable/responsive.bootstrap5.min.js')}}?v=1750822432"></script>

<!-- INTERNAL Index js-->
@vite(['resources/assets/js/support/support-sidemenu.js'])

<script type="text/javascript">
    $(function() {
        "use strict";

        (function($){

            // Variables
            var SITEURL = '{{url('')}}';

            // Csrf Field
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
          
            var customernotify = @json(auth()->guard('customer')->user()->unreadNotifications()->where('data->status', 'mail')->get());
            if(customernotify.length > 1){

                $(".vertical-scroll5").bootstrapNews({
                    newsPerPage: 1,
                    autoplay: true,
                    pauseOnHover: true,
                    navigation: false,
                    direction: 'down',
                    newsTickerInterval: 2500,
                    onToDo: function () {
                    }
                });
            }

            document.querySelectorAll(".notifyclose").forEach((button) => {
                button.addEventListener("click", function (event) {
                    const id = event.target.getAttribute("data-id");
                    setCookie(id);
                    event.target.closest(".announcement-alert").style.display = "none"; // Hide the announcement
                });
            });


            function setCookie(id) {
                const expiry = new Date();
                expiry.setTime(expiry.getTime() + 30 * 60 * 1000);
                document.cookie = `${id}=announcement_close;expires=${expiry.toUTCString()};path=/`;
               
            }

            // Function to retrieve a cookie
            function getCookie(name) {
                const cookieName = `${name}=`;
                const cookies = document.cookie.split(";");
                for (let i = 0; i < cookies.length; i++) {
                    let cookie = cookies[i].trim();
                    if (cookie.indexOf(cookieName) === 0) {
                        return cookie.substring(cookieName.length, cookie.length);
                    }
                }
                return null;
            }

            const announcements = document.querySelectorAll(".announcement-alert");
            announcements.forEach((alert) => {
                const id = alert.getAttribute("data-id");
                const cookieValue = getCookie(id);
               
                if (!cookieValue) {
                    alert.style.display = "block";
                } else {
                    alert.style.display = "none";
                   
                }
            });

        })(jQuery);
    })
</script>

@endsection