@extends('layouts.squelette')

@section('css_header')
{{-- <link href='{{ asset('plugins/fullcalendar-5.5.1/lib/main.css')}}' rel='stylesheet' />
<script src="{{ asset('plugins/fullcalendar-5.5.1/lib/main.min.js')}}"></script> --}}
<link href='{{ asset('dist/css/themes/standard/scheduler.css')}}' rel='stylesheet' />
@endsection

@section('js_header')
<script src='{{ asset('plugins/fullcalendar-scheduler-6.1.4/dist/index.global.min.js')}}'></script>
<script src="{{ asset('plugins/fullcalendar-5.5.1/lib/locales/fr.js')}}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/7.5.3/rxjs.umd.min.js"></script>
@endsection

<!-- ************************************** -->
@section('titre')
{{ __('Planification des interventions') }}
@endsection
<!-- ************************************** -->
@section('titre_page')
{{ __('Planification des interventions') }}
@endsection
<!-- ************************************** -->

@section('contenu')

<div class="row">
    <div class="col-md-2">
        <div class="card" id='external-events'>
            <div id="list_details">
                {!! $tableaudetail !!}
            </div>
        </div>
    </div>
    <div class="col-md-10">
        <div id='calendar'></div>
        <div class="d-flex justify-content-between mt-2">
            <div class="d-flex">
                <div class="d-flex justify-content-start type_c align-items-center list-group-item mr-2">
                    <span style="font-size: 12px; font-weight: bold;">{{ __('Curative') }}</span>
                </div>
                <div class="d-flex justify-content-start type_p align-items-center list-group-item mr-2">
                    <span style="font-size: 12px; font-weight: bold;">{{ __('Préventive') }}</span>
                </div>
                <div class="d-flex justify-content-start type_r align-items-center  list-group-item ">
                    <span style="font-size: 12px; font-weight: bold;">{{ __('Réglementaire') }}</span>
                </div>
            </div>
            <div class="d-flex">
                <button id="btn-zoom" class="btn btn-circle btn-secondary mr-2">
                    <i class="fa fa-plus" aria-hidden="true"></i>
                </button>
                <button id="btn-refresh" class="btn btn-circle btn-secondary mr-2">
                    <i class="fa fa-refresh" aria-hidden="true"></i>
                </button>
                <button id="btn-zoom-out" class="btn btn-circle btn-secondary">
                    <i class="fa fa-minus" aria-hidden="true"></i>
                </button>
            </div>
            <div class="d-flex justify-content-end">
                <div class="mr-2" style="display: flex; align-items: center; border: 3px solid #D9D9D9; border-radius: 10px; background-color: #fff; position: relative; overflow: hidden;">
                    <div style="flex: 0 0 auto; padding: 9px; background-color: #D9D9D9; border-radius: 7px 1px 1px 7px;">
                        <i class="fa fa-calendar"></i>
                    </div>
                    <div style="flex: 1 1 auto; padding: 9px; display: flex; flex-direction: column; justify-content: center;">
                      <span class="titre" style="font-size: 11px; font-weight: bold;">{{ __('Planifiée') }}</span>
                    </div>
                </div>
                <div class="mr-2" style="display: flex; align-items: center; border: 3px solid #B5D894; border-radius: 10px; background-color: #fff; position: relative; overflow: hidden;">
                    <div style="flex: 0 0 auto; padding: 9px; background-color: #B5D894; border-radius: 7px 1px 1px 7px;">
                        <i class="fa-solid fa-play"></i>
                    </div>
                    <div style="flex: 1 1 auto; padding: 9px; display: flex; flex-direction: column; justify-content: center;">
                      <span class="titre" style="font-size: 11px; font-weight: bold;">{{ __('Démarrée') }}</span>
                    </div>
                </div>
                <div class="mr-2" style="display: flex; align-items: center; border: 3px solid #839DE3; border-radius: 10px; background-color: #fff; position: relative; overflow: hidden;">
                    <div style="flex: 0 0 auto; padding: 9px; background-color: #839DE3; border-radius: 7px 1px 1px 7px;">
                        <i class="fa-regular fa-square"></i>
                    </div>
                    <div style="flex: 1 1 auto; padding: 9px; display: flex; flex-direction: column; justify-content: center;">
                      <span class="titre" style="font-size: 11px; font-weight: bold;">{{ __('Terminée') }}</span>
                    </div>
                </div>
                <div class="" style="display: flex; align-items: center; border: 3px solid #E4A11B; border-radius: 10px; background-color: #fff; position: relative; overflow: hidden;">
                    <div style="flex: 0 0 auto; padding: 9px; background-color: #E4A11B; border-radius: 7px 1px 1px 7px;">
                        <i class="fa fa-pause" aria-hidden="true"></i>
                    </div>
                    <div style="flex: 1 1 auto; padding: 9px; display: flex; flex-direction: column; justify-content: center;">
                      <span class="titre" style="font-size: 11px; font-weight: bold;">{{ __('Suspendue') }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js_footer')
<script>
    var type_inter = "{!! app('request')->input('type') !!}";

</script>
<script src="{{ asset('js/calendar/planning.js')}}"></script>

@endsection

@section('modale')
@endsection