@extends('layouts.app')
@push('styles')
<style>
   /* -------------------------
   MAIN CONTAINER
--------------------------*/
.weather-box {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    font-family: Arial, sans-serif;
}

/* -------------------------
   CURRENT WEATHER (TOP)
--------------------------*/
.weather-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.left {
    display: flex;
    align-items: center;
}

.icon {
    font-size:45px;
    margin-right: 15px;
    color: #3c7dd9;
}

.temp {
    font-size:33px;
    font-weight: bold;
    margin-right: 25px;
}

.details-small {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}

.right {
    text-align: right;
}

.right .weather_title {
    font-size: 22px;
    font-weight: bold;
}

.time,
.status {
    font-size: 14px;
    color: #555;
    margin-top: 3px;
}

/* -------------------------
   GRAPH (MIDDLE)
--------------------------*/
.weather-graph {
    width: 100%;
    height: 100px;
    margin: 15px 0;
    display: block;
}

.weather-graph text {
    dominant-baseline: middle;
    pointer-events: none;
}

.weather-graph circle {
    stroke: #dba500;
    stroke-width: 1;
}

/* -------------------------
   7-DAY FORECAST (BOTTOM)
--------------------------*/
.weather-days {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 15px;
    padding: 0 5px;
    text-align: center;
}

.weather-day {
    flex-shrink: 0;
    font-size: 14px;
    text-align: center;
}

.weather-day img {
    width: 30px;
    height: 30px;
    margin: 5px auto;
    display: block;
}

</style>
@endpush

@section('content')
    <!-- Main content -->
    @if(Auth::check() && !empty(Auth::user()->user_type) && in_array(Auth::user()->user_type, ['VENDOR', 'CUSTOMER']))

        @if(Auth::user()->user_type == 'CUSTOMER')
            <customer-dashboard  get-customer-project-details="{{route("get.customer.details")}}"></customer-dashboard>
        @endif

        @if(Auth::user()->user_type == 'VENDOR')
            <vendor-workorders></vendor-workorders>
        @endif

    @else
    <section class="content">
        @if($can_see_stickers)
            <home-stickers get-stickers="{{route("get_stickers")}}"></home-stickers>
        @endif
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6">
                  {{-- Whether --}}
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <i class="livicon" data-name="barchart" data-size="16" data-loop="true" data-c="#fff" data-hc="#fff"></i>
                             Weather Forecast
                        </h3>
                       <span class="pull-right">
                            <i class="glyphicon glyphicon-chevron-up showhide clickable"></i>
                            <i class="glyphicon glyphicon-remove removepanel clickable"></i>
                        </span>
                    </div>
                    <div class="weather-box panel-body">
                        @if(isset($weather['error']) && $weather['error'])
                            <div class="alert alert-danger">
                                {{ $weather['message'] ?? 'Unable to fetch weather data.' }}
                            </div>
                        @else
                            <div class="weather-container">
                                <div class="weather-header">
                                    <div class="left">
                                        <div class="icon">{{ $weather['current_weather']['image_path']['icon'] }}</div>
                                        <div class="temp nowrap">{{ $weather['current_weather']['temperature'] }} {{  $weather['current_weather_units']['temperature'] }}</div>

                                        <div class="details-small">
                                            <div>{{ $weather['location']['place_name'] ?? '' }}, {{ $weather['location']['city'] ?? 'Unknown' }}, {{ $weather['location']['country'] ?? '' }}</div>
                                            <div>Wind: {{ $weather['current_weather']['windspeed'] }}  {{  $weather['current_weather_units']['windspeed'] }}</div>
                                            <div>Code: {{ $weather['current_weather']['weathercode'] }}  {{  $weather['current_weather_units']['weathercode'] }}</div>
                                        </div>
                                    </div>

                                    <div class="right">
                                        <div class="weather_title">Weather</div>
                                        <div class="time nowrap">
                                            {{ \Carbon\Carbon::parse($weather['current_weather']["time"])->format('D,M j g:i A'); }}
                                        </div>
                                        <div>{{ $weather['current_weather']['image_path']['label'] }}</div>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <div>
                                <!-- TEMPERATURE GRAPH WITH DATE LABELS -->
                                <svg class="weather-graph" width="100%" height="130">
                                    @php
                                        $temps = $weather['daily']['temperature_2m_max'];
                                        $dates = $weather['daily']['time'];
                                        $count = count($temps);
                                        $max = max($temps);
                                        $min = min($temps);
                                    @endphp

                                    @for($i = 0; $i < $count; $i++)
                                        @php
                                            $x = ($i / ($count - 1)) * 100;
                                            $y = 80 - (($temps[$i] - $min) / ($max - $min)) * 60;
                                            $day = \Carbon\Carbon::parse($dates[$i])->day;   // Example: 17, 18, 19, 20
                                            if($x == 0){ $x =2;  }
                                            if($x ==100){ $x =98; }
                                        @endphp
                                        <!-- Graph dots -->
                                        <circle cx="{{ $x }}%" cy="{{ $y }}" r="3" fill="#f4c542"></circle>
                                        <text x="{{ $x }}%"   y="{{ $y - 10 }}" text-anchor="middle"  font-size="12"   fill="#666"> {{ $day }} </text>
                                        <!-- Connecting lines -->
                                            @if($i > 0)
                                                @php
                                                    $prevX = (($i - 1) / ($count - 1)) * 100;
                                                    $prevY = 80 - (($temps[$i - 1] - $min) / ($max - $min)) * 60;
                                                    if($prevX == 0){  $prevX =2; }
                                                @endphp
                                                <line x1="{{ $prevX }}%" y1="{{ $prevY }}" x2="{{ $x }}%" y2="{{ $y }}" stroke="#f4c542" stroke-width="2"></line>
                                            @endif

                                            {{-- <!-- DATE LABELS -->
                                            <text x="{{ $x }}%" y="115"
                                                text-anchor="middle"
                                                font-size="12"
                                                fill="#666">
                                                {{ $day }}
                                            </text> --}}
                                    @endfor
                                </svg>
                            </div>
                            <!-- 7-DAY FORECAST -->
                            <div class="weather-days">
                                @foreach($weather['daily']['time'] as $i => $date)
                                    @php
                                    $image = \AppHelper::instance()->getWeatherInfo($weather['daily']['weathercode'][$i])
                                    @endphp
                                    <div class="weather-day" title="{{$image['label']}}">
                                        <div>{{ \Carbon\Carbon::parse($date)->shortDayName }}</div>
                                        <div style="font-size:27px;">{{ $image['icon'] }}</div>
                                        <!-- PNG ICON -->
                                        {{-- <img src="{{ asset('img/logo/sun_icon.png') }}" width="36"> --}}
                                        <div>{{ $weather['daily']['temperature_2m_max'][$i] }}</div>
                                        <div style="color:#666; font-size:12px;">
                                            {{ $weather['daily']['temperature_2m_min'][$i] }}
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                        @endif
                    </div>

                </div>
                {{-- Whether End--}}
                {{-- Calender --}}

                <div class="panel panel-success panel-border">
                    <div class="panel-heading  border-light">
                        <h4 class="panel-title">
                            <i class="livicon" data-name="calendar" data-size="16" data-loop="true"
                               data-c="#fff" data-hc="#fff"></i> Calendar
                        </h4>
                        <span class="pull-right">
                            <i class="glyphicon glyphicon-chevron-up showhide clickable"></i>
                            <i class="glyphicon glyphicon-remove removepanel clickable"></i>
                        </span>
                    </div>
                    <div class="panel-body">
                        <div id='external-events'></div>
                        <calendar-widget
                                get-month-schedule="{{route("schedule.get_month_schedule")}}"
                                get-day-schedule="{{route("schedule.get_day_schedule")}}"
                        ></calendar-widget>
                        <div class="box-footer pad-5">
                            <div class="form-group row">
                                <div class="col-md-8 square_box">
                                    <div class="number">Phases Scheduled For</div>
                                    <div class="number" id="home_calendar_date">{{\Carbon\Carbon::now()->format('l - F d, Y')}}</div>
                                </div>
                            </div>
                            <div class="form-group justify-content-between" id="schedule-calendar-home">
                                @include ('home.scheduleLine')
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <!-- To do list -->
            <div class="col-lg-6 col-md-6 col-sm-6">
                {{-- <div class="news-page">
                    <div class="news-blocks">
                        {!! optional(\App\ProEdgeModel\Announcement::getLast())->Content !!}
                    </div>
                </div> --}}
                {{-- New Lead --}}
                <div class="panel panel-success">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <i class="livicon" data-name="linechart" data-size="16" data-loop="true"
                               data-c="#fff" data-hc="#fff"></i>{{$title_lead_table}}
                        </h3>
                        <span class="pull-right">
                            <i class="glyphicon glyphicon-chevron-up showhide clickable"></i>
                            <i class="glyphicon glyphicon-remove removepanel clickable"></i>
                        </span>
                    </div>
                    <div class="panel-body">
                        <div class="table-scrollable scrollbar lead-table">
                            <table class="table table-striped table-bordered table-hover"
                                   id="lead_table"  style="width: 100%; table-layout: fixed; border-collapse: collapse;">
                                <thead>
                                <tr>
                                    <th style="width: 23%;">Contact</th>
                                    <th style="width: 45%;">Location</th>
                                    <th style="width: 20%;">Lead Source</th>
                                    <th style="width: 12%; text-align: center;">Info</th>
                                </tr>
                                </thead>
                                <tbody>
                                    @if(!empty($leads) && $leads->count() > 0)
                                        @foreach ($leads as $lead)
                                            <tr>
                                                <td>
                                                    <a class="js-single-modal pointer show-name" data-id="{{ $lead->id }}">
                                                       {{ $lead?->contact?->full_name }}
                                                    </a>
                                                </td>
                                                <td>
                                                    <span class="show-address">
                                                       {{ $lead?->contact?->_address() ?? '' }}
                                                    </span>
                                                </td>
                                                <td class="inline-text">
                                                   {{ $lead?->sourceType?->Name ?? '' }}
                                                </td>

                                                <td>
                                                  @if ($phone = $lead?->contact?->primary_phone)
                                                        <a id="mobile{{ $lead->id }}"
                                                        href="tel:{{ \App\AppHelper::cleanPhoneNumber($phone) }}"
                                                        class="link-style"
                                                        title="{{ \App\AppHelper::phone_number_format($phone) }}">
                                                            <i class="glyphicon glyphicon-earphone"></i>
                                                        </a>
                                                    @else

                                                        <i class="glyphicon glyphicon-earphone" style="color:red" title="No phone available"></i>
                                                    @endif
                                                    &nbsp;&nbsp;
                                                    @if (!empty($lead->Email) || !empty(optional($lead->contact)->Email))
                                                        @php
                                                            $email = optional($lead->contact)->Email ?? $lead->Email;
                                                        @endphp
                                                        <a href="https://mail.google.com/mail/?view=cm&to={{ urlencode($email) }}"
                                                            {{-- href="mailto:{{ optional($lead->contact)->Email ?? $lead->Email }}" --}}
                                                            class="link-style"
                                                            target="_blank"
                                                            title="{{ $email }}">
                                                            <i class="glyphicon glyphicon-envelope"></i>
                                                        </a>
                                                    @else
                                                        <i class="glyphicon glyphicon-envelope" style="color:red" title="No email available"></i>
                                                    @endif
                                                </td>
                                            </tr>

                                        @endforeach
                                    @else
                                    <tr>
                                        <td colspan="5" class="text-center text-muted">
                                            No New leads found.
                                        </td>
                                    </tr>
                                    @endif
                                </tbody>
                            </table>
                            <single-modal></single-modal>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="clearfix"></div>
    </section>
    @endif
@endsection