@php use \App\Http\Controllers\PlanningController @endphp
@extends('layouts.app')
@section('title', 'Planning')

@section('content')
<div class="d-flex flex-column flex-column-fluid">
    <style>
        body,
        #kt_app_header {
            background: #f1f5f5 !important;
        }

        .header,
        .timeline {
            display: flex;
        }

        .header .div {
            background: white;
            width: 170px;
            height: 50px;
            display: flex;
            align-items: center;
            margin: 3px;
            justify-content: center;
            border-radius: 8px;
            border: 1px solid #93D500;
        }

        .timeline .div {
            background: white;
            width: 170px;
            height: 100px;
            display: flex;
            align-items: center;
            margin: 3px;
            justify-content: center;
            text-align: center;
            border-radius: 8px;
            border: 1px solid #5E5E5E33;
            @if(!request()->has('m'))
            padding: 5px;
            @endif

        }
        
        


        .clock {
            width: 80px !important;
            border: 1px solid #93D500 !important;
        }
        
        @if(request()->has('view'))
            .header .div, .timeline .div{
                width: 100px;    
            }
        
            .clock {
                width: 150px !important;
                border: 1px solid #93D500 !important;
            }
            
        @endif

        .header .div p,
        .timeline .div p {
            color: #556171;
            font-weight: 500;
            margin-bottom: 0;
        }

        .project-orange {
            border: 2px solid #FFCB33 !important;
            background: #f2f3eb !important;
        }

        .project-green {
            border: 2px solid #29CC39 !important;
            background: #29CC390D !important;
        }

        .project-purple {
            border: 2px solid #8833FF !important;
            background: #8833FF0D !important;
        }

        .project-grey {
            border: 2px solid grey !important;
            background: #ddd !important;
        }

        .project {
            display: block !important;
            text-align: left !important;
        }

        .calendar {
            overflow-x: auto;
        }

        .calendar-data {
            width: 150%;
        }

        .floating-div {
            position: fixed;

            right: 0;
            width: 300px;
            height: 100%;
            background-color: white;
            color: white;
            padding: 15px;

            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
            z-index: 99;
            /* Box shadow */

        }

        .project {
            cursor: pointer;
        }

        .project-select {
            padding: 10px;
            background: #f4fbe5;
            border: 1px solid #e8f6c9;
            margin-bottom: 8px;
            border-radius: 8px;
        }

        .project-list {
            padding-bottom: 120px;
        }
        
        @if(request()->has('m'))
          .tooltip-inner {
                text-align: left !important;
            }
        @endif
            
            .hidden{
                display: none !important;
        }
        

    </style>


    <!--end::Toolbar-->
    <!--begin::Content-->
    <div id="floatingDiv" class="floating-div">
        <div class="mb-5 mt-3">
            <input type="text" style="background:#FCFFF5" class="form-control" placeholder="Search Projects" id="projectFilter">
        </div>
        <div class="project-list pt-5">
            @foreach($projects as $project)
            <!--begin::Item-->
            <div id="project_{{ $project->id }}" data-info="{{ $project->company_name }}" data-id="{{ $project->id }}" class="d-flex flex-stack project-item project-select draggable position-relative">
                <!--begin::Symbol-->
                <span class="projectSettings" style="position:absolute;z-index:99;top:10px;right:10px;cursor:pointer" data-id="{{$project->id}}" data-name="{{$project->company_name}}"><i class="fa fa-2x fa-cog"></i></span>
                <div class="symbol symbol-40px me-5">
                    <img src="{{ asset('img/projects/'.$project->image) }}" class="" alt="">
                </div>
                <!--end::Symbol-->
                <!--begin::Section-->
                <div class="d-flex align-items-start flex-row-fluid flex-wrap">
                    <!--begin:Author-->
                    
                    <div class="flex-grow-1 me-2">
                        <a href="#!" class="text-gray-800 text-hover-primary fs-6 fw-bold user-name">{{ $project->company_name }}</a>
                        <span class="text-muted fw-semibold d-block fs-7 user-company">
                            Project ID: WG-{{str_pad($project->id, 4, '0', STR_PAD_LEFT);}}
                        </span>
                        <span class="text-muted fw-semibold d-block fs-7 user-company">
                            {{ $project->status }}
                        </span>
                    </div>
                </div>
                <!--end::Section-->
            </div>
            @endforeach
        </div>
    </div>
    <div id="kt_app_content" class="app-content flex-column-fluid">
        <!--begin::Content container-->

        <div id="kt_app_content_container" class="app-container container-fluid">
            <!--begin::Row-->
            @if(!request()->has('view'))
            <!--Week View -->
            <div class="row g-5 g-xl-10 mb-xl-10">
                <div class="col-md-12">
                    <div class="mb-8">
                        <a href="?week={{ request()->week-1 }}" class="btn btn-sm btn-icon btn-light">
                            <i class="ki-duotone ki-left fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
                        </a>

                        <span class="mb-0 mx-4" style="font-size:15px;color:#5E5E5E">{{ date('jS M', strtotime($dates[0])) }} - {{ date('jS M', strtotime(end($dates))) }} {{ date('Y', strtotime(end($dates))) }}</span>
                        <a href="?week={{ request()->week+1 }}" class="btn btn-icon btn-sm btn-light">
                            <i class="ki-duotone ki-right fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
                        </a>


                        <div class="btn-group ms-8" role="group" aria-label="Basic outlined example">
                            <a href="{{ route('planning.showPlanning') }}" class="btn btn-sm btn-primary">Week</a>
                            @foreach($months as $month)
                            <a href="{{ route('planning.showPlanning') }}?view=month&m={{$month}}" class="btn btn-sm btn-light">{{ date('F Y', strtotime($month)) }}</a>
                            @endforeach
                        </div>
                        <div class="mt-5" style="display:flex">
                            <label class="form-check form-switch form-check-custom form-check-solid" id="showProjects">
                                <input class="form-check-input w-30px h-20px" type="checkbox" value="1" name="notifications" id="projectsSwitch" checked>
                                <span class="form-check-label text-muted fs-7">Projects</span>
                            </label>
                            <label class="form-check form-switch form-check-custom form-check-solid ms-8" id="showSiteManagers">
                                <input class="form-check-input w-30px h-20px" type="checkbox" value="1" name="" id="siteManagers">
                                <span class="form-check-label text-muted fs-7">Site Managers</span>
                            </label>
                        </div>

                    </div>
                    <div class="calendar">
                        <div class="calendar-data">
                            <div class="header">
                                <div class="clock div">
                                    <p><i class="fa fa-2x fa-clock" style="font-size:18px"></i></p>
                                </div>
                                @foreach($dates as $date)
                                <div class="div">
                                    <p>{{ date('l d', strtotime($date)) }}</p>
                                </div>
                                @endforeach
                            </div>
                            @foreach($users as $user)
                            <div class="timeline user_timeline_{{$user->department}}" id="user_{{$user->id}}">
                                <div class="clock div">
                                    <p>{{ $user->firstname }} {{ $user->lastname }}</p>
                                </div>
                                @foreach($dates as $date)
                                @php $planning = PlanningController::getUserPlannings($user->id, $date) @endphp

                                @if($planning)
                                <div class="@if(empty($planning->background)) project-grey @endif project div droppable-2 draggable" data-id="{{ $planning->project_id }}" data-date="{{ $date }}" data-dateFormated="{{ date('jS M Y', strtotime($date)) }}" data-projectId="WG-{{str_pad($planning->project_id, 4, '0', STR_PAD_LEFT)}}" data-customer="{{ $planning->company_name }}" data-info="{{ $planning->company_name }}" data-type="expandable" id="planning_{{$planning->project_id}}_{{$user->id}}_{{$date}}" style="@if(!empty($planning->background)) background:{{$planning->background}};border:2px solid {{$planning->border}}; @endif">
                                    <p class="fw-bold text-dark">{{ $planning->company_name }}</p>
                                    <small>WG-{{str_pad($planning->project_id, 4, '0', STR_PAD_LEFT)}}</small>
                                    <div class="symbol-group symbol-hover flex-nowrap mt-3">
                                        @php $staffs = PlanningController::getProjectUsers($planning->project_id, $date) @endphp

                                        @foreach($staffs as $staff)
                                        <div class="symbol symbol-35px symbol-circle" data-bs-toggle="tooltip" aria-label="Michael Eberon" data-bs-original-title="{{ $staff->firstname.' '.$staff->lastname }}" data-kt-initialized="1">
                                            <img alt="Pic" src="{{asset('img/users/'.$staff->image)}}">
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                                @else
                                <div class="div droppable" data-id="{{ $user->id }}" data-date="{{ $date }}">
                                    <p></p>
                                </div>
                                @endif
                                @endforeach
                            </div>
                            @endforeach

                        </div>
                    </div>

                </div>
            </div>
            @else
            <!-- Month View -->
            <div class="row g-5 g-xl-10 mb-xl-10">
                <div class="col-md-12">
                    <div class="mb-8">
                       
                       @if(!request()->has('m'))
                        <a href="?week={{ request()->week-1 }}" class="btn btn-sm btn-icon btn-light">
                            <i class="ki-duotone ki-left fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
                        </a>

                        <span class="mb-0 @if(!request()->has('m')) mx-4 @endif" style="font-size:15px;color:#5E5E5E">{{ date('jS M', strtotime($dates[0])) }} - {{ date('jS M', strtotime(end($dates))) }} {{ date('Y', strtotime(end($dates))) }}</span>
                        <a href="?week={{ request()->week+1 }}" class="btn btn-icon btn-sm btn-light">
                            <i class="ki-duotone ki-right fs-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
                        </a>
                        @endif


                        <div class="btn-group ms-8" role="group" aria-label="Basic outlined example">
                            <a href="{{ route('planning.showPlanning') }}" class="btn btn-sm @if(request()->has('m')) btn-light @else btn-primary @endif">Week</a>
                            @foreach($months as $month)
                            <a href="{{ route('planning.showPlanning') }}?view=month&m={{$month}}" class="btn btn-sm @if(request()->has('m')) @if(request()->m==$month) btn-primary @else btn-light @endif @else btn-light @endif">{{ date('F Y', strtotime($month)) }}</a>
                            @endforeach
                        </div>
                        <div class="mt-5" style="display:flex">
                           @if(!request()->has('m'))
                            <label class="form-check form-switch form-check-custom form-check-solid" id="showProjects">
                                <input class="form-check-input w-30px h-20px" type="checkbox" value="1" name="notifications" id="projectsSwitch" checked>
                                <span class="form-check-label text-muted fs-7">Projects</span>
                            </label>
                            @endif
                            <label class="form-check form-switch form-check-custom form-check-solid ms-8" id="showSiteManagers">
                                <input class="form-check-input w-30px h-20px" type="checkbox" value="1" name="" id="siteManagers">
                                <span class="form-check-label text-muted fs-7">Site Managers</span>
                            </label>
                        </div>

                    </div>
                    <div class="calendar">
                        <div class="calendar-data">
                            <div class="header">
                                <div class="clock div">
                                    <p><i class="fa fa-2x fa-clock" style="font-size:18px"></i></p>
                                </div>
                                
                                @php $dates = PlanningController::getDatesOfMonth(request()->m) @endphp
                                
                                @foreach($dates as $date)
                                <div class="div">
                                    <p>{{ date('d', strtotime($date)) }}</p>
                                </div>
                                @endforeach
                            </div>
                            @foreach($users as $user)
                            <div class="timeline user_timeline_{{$user->department}}" id="user_{{$user->id}}">
                                <div class="clock div">
                                    <p>{{ $user->firstname }} {{ $user->lastname }}</p>
                                </div>
                                @foreach($dates as $date)
                                @php $planning = PlanningController::getUserPlannings($user->id, $date) @endphp

                                @if($planning)