@extends('layouts.designer') 
@php $page_title = 'Mon calendrier'; @endphp 

@section('meta-title','Espace designers') 
@section('meta-keywords','') 
@section('meta-description','') 
@section('content')

<div class="row">
    <div class="col-md-4">
        
        <div class="panel pb-1">            
            <div class="form-group text-center">
                <a href="{{route('designer.disponibilite', 1)}}" class="btn btn17 font-size-13 btn-xsm {{ auth()->user()->designer->profile->disponibilite == 1 ? 'bg-black text-white':'' }}"> Disponible </a>
                <a href="{{route('designer.disponibilite', 0)}}" class="btn btn17 font-size-13 btn-xsm {{ auth()->user()->designer->profile->disponibilite == 0 ? 'bg-black text-white':'' }}"> Disponible prochainement </a>            </div>
        </div>

        <div class="panel">
            <form class="disabled" method="post" action="{{route('designer.calendrier.numberProject' )}}">
                {{csrf_field()}}
                <div class="form-group">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="font-size-14 font-weight-semibold mb-30">{!! lang('Nombre de projets à prendre') !!}</div>
                        </div>
                        <div class="col">
                            <input type="number" min="0" step="1" class="form-control" value="{{Auth::user()->designer->profile->nombre_projet}}" required="" placeholder="" name="numberProject">
                        </div>
                        <div class="col-auto text-left">
                            @if(auth()->user()->designer->profile->disponibilite == 1)
                                <div class="btn btn-sm btn2 btn-formulaire show-disabled">{!! lang('Modifier') !!}</div>
                            @endif
                            <button class="btn btn-sm btn2 btn-formulaire hide-disabled">{!! lang('Enregistrer') !!}</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="panel">
            <form class="disabled" method="post" action="{{route('designer.calendrier.indisponible')}}">
                {{csrf_field()}}
                <div class="row">
                    <div class="col-md-12">
                        <div class="font-size-14 font-weight-semibold mb-30">{!! lang("Dates d'indisponibilité") !!} :</div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="">{!! lang('Date de début') !!}</label>

                            <input type="date" class="form-control" min="{{ \Carbon\Carbon::parse()->format('Y-m-d') }}" required="" name="debut">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="">{!! lang('Date de fin') !!}</label>
                            <input type="date" class="form-control" min="{{ \Carbon\Carbon::parse()->format('Y-m-d') }}" required="" name="fin">
                        </div>
                    </div>
                    <div class="col-md-12 text-right">
                        @if(auth()->user()->designer->profile->disponibilite == 1)
                        <div class="btn btn-sm btn2 btn-formulaire show-disabled">{!! lang('Modifier') !!}</div>
                        @endif
                        <button class="btn btn-sm btn2 btn-formulaire hide-disabled">{!! lang('Ajouter') !!}</button>
                    </div>
                </div>
            </form>
        </div>
        @if(count($periodes))
        <div class="panel">
            <div class="row">
                <div class="col-md-12">
                    <div class="font-size-14 font-weight-semibold mb-30">{!! lang("Dates d'indisponibilité") !!} :</div>
                </div>
                @foreach($periodes as $periode)
                <div class="col-auto">
                    <div class="form-group">
                        <label for="">{!! lang('Début') !!} :</label>
                        <label for="">{{$periode->date_debut}}</label>
                    </div>
                </div>
                <div class="col-auto">
                    <div class="form-group">
                        <label for="">{!! lang('Fin') !!} :</label>
                        <label for="">{{$periode->date_fin}}</label>
                    </div>
                </div>
                <div class="col text-right">
                    <a href="{{route('designer.calendrier.delete', $periode->id)}}" class=" text-danger"><i class="fa fa-trash"></i></a>
                </div>
                @endforeach
            </div>
        </div>
        @endif

    </div>
    <div class="col-md-8">

         
        <div class="panel">
            <div id='calendar'></div>
        </div>
    </div>
</div>
@endsection 
@section('style')
<link rel="stylesheet" href="{{ asset('css/fullcalendar.min.css') }}"> 
@endsection 

@section('script')
<script src="{{ asset('js/moment.min.js') }}"></script>
<script src="{{ asset('js/fullcalendar.min.js') }}"></script>
<script src="{{ asset('js/moment_fr.js') }}"></script>
<script>

var colors = ['#b1dae1','#0e6b8a','#d8ad7f','#eacbb3','#5e6473','#bdbebd'];

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var endDates = [];
    @foreach ($periodes as $periode)
        var date = new Date('{{$periode->date_fin}}');
        date.setDate(date.getDate() + 1);
        var dd = ("0" + date.getDate()).slice(-2);
        var mm = ("0" + (date.getMonth() + 1)).slice(-2);
        var y = date.getFullYear();
        var someFormattedDate = y + '-' + mm + '-' + dd;
        endDates.push(someFormattedDate);
    @endforeach
    var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: ['dayGrid', 'timeGrid'],
        locale: 'fr',
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek'
        },
        events: [
            @foreach($periodes as $key=>$periode)
            {
                start: '{{$periode->date_debut}}',
                end: endDates['{{$key}}'],
                overlap: true,
                rendering: 'background',
                color: '#ffb3b3'
            },
            @endforeach

            @foreach($projets as $projet)
                @if($projet->projet??0)
                    {
                        title:' {{ $projet->projet->nom }}',
                        start: '{{$projet->date_debut}}',
                        end: '{{$projet->date_fin}}',
                        color: colors[Math.floor(Math.random() * 6)],
                        url: '{{ route('designer.projets.details', $projet->projet->id) }}'
                    },
                @endif
            @endforeach

        ]
    });

    calendar.render();
});
</script>
@endsection