@extends('layouts.app',[
    'class' => '',
    'folderActive' => '',
    'elementActive' => 'done'
])

@section('head_supplement')

    <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/bootstrap/main.css" rel="stylesheet">
@endsection

@section('content')

    <div class="app-page-title">
        <div class="page-title-wrapper">
            <div class="page-title-heading">
                <div class="page-title-icon">
                    <i class="fas fa-calendar-alt icon-gradient bg-arielle-smile"> </i>
                </div>
                <div>
                    RDV
                    <div class="page-title-subheading">
                        Liste des rdv programmés | Nombre de résultat <span id="count"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <input type="hidden" id="client_id" value="{{ Auth::user()->client_id }}">
    <input type="hidden" id="user_id" value="{{ Auth::user()->user_id }}">
    <input type="hidden" id="user_type" value="{{ Auth::user()->user_type }}">
    <input type="hidden" id="region_id" value="">
    <input type="hidden" id="departement_code" value="">
    <input type="hidden" id="passer" value="1">
    @if(Auth::user()->user_type < 8)
            @endif
    <div class="row">
        <div class="mb-2 mb-sm-0 col-12 col-md-3">
            <label for="inspecteur_filter" class="mr-sm-2">Inspecteur</label>
            <select class="form-control select_filter select2" id="inspecteur_filter" data-column="5" name="inspecteur">
                <option value="">Filtrer par inspecteur</option>
                <option value="-1">RDV NON ATTRIBUES</option>
                @foreach($inspecteurs as $inspecteur)
                    <option
                            {{ request('inspecteur') == $inspecteur->user_id ? 'selected' : '' }}
                            value="{{ $inspecteur->user_id }}">
                        {{ $inspecteur->user_firstname }} {{ $inspecteur->user_lastname }}
                    </option>
                @endforeach

            </select>
            @if(Auth::user()->user_type == 4)
                <script type="text/javascript">
                    $(document).ready(function () {
                        $('#inspecteur_filter')
                            .val({{ Auth::user()->user_id }})
                            .trigger('change');
                    });
                </script>
            @endif
        </div>

        <div class="mb-2 mb-sm-0 col-12 col-md-3">
            <label for="exampleEmail22" class="mr-sm-2">Statut du rdv</label>
            <select class="form-control select_filter select2" id="statut_filter" data-column="5">
                <option value="">Filtrer par statut</option>
                @foreach(config('types.type_rdv') as $key => $type_rdv)
                    <option value="{{ $key }}">{{ $type_rdv }}</option>
                @endforeach
            </select>
        </div>

        <div id="cancel_filters">
            <i class="fa fa-filter"></i>
            <span class="infobulle">RESET FILTER</span>
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-md-12 col-xl-12">

            <div class="col-md-12">
                <div id='calendar_rdv'></div>
            </div>
        </div>

        <div class="col-md-6 col-xl-6">

            <div class="col-md-12">
                <!-- <div id="map_rdv" style="min-height:700px;height:700px;max-width: 100%;min-width: 100%;"></div> -->
            </div>
        </div>
    </div>

    <!--     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCV4UkRTvyJqdOtY65xeMyCdcVbR_dgWVo&callback=initMap">
        </script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"
            integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ=="
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/locale/fr.min.js"
            integrity="sha512-RAt2+PIRwJiyjWpzvvhKAG2LEdPpQhTgWfbEkFDCo8wC4rFYh5GQzJBVIFDswwaEDEYX16GEE/4fpeDNr7OIZw=="
            crossorigin="anonymous"></script>
    <script type="text/javascript"
            src="https://cdn.datatables.net/v/dt/dt-1.10.23/af-2.3.5/rg-1.1.2/datatables.min.js"></script>
    <script src="{{ asset('js/rdv.js') }}" defer></script>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            // $('#marker4410').setAnimation(google.maps.Animation.BOUNCE);
            if ($('#inspecteur_filter').val() == 0 || $('#inspecteur_filter').val() == '') {
                var user_id_filter = -1;
            } else {
                var user_id_filter = $('#inspecteur_filter').val();
            }
        });

    </script>
    <style>
        .day_count {
            text-align: center;
            vertical-align: middle;
            background: #3f6ad8;
            color: white;
            max-width: 25px;
            margin: auto;
            border-radius: 4px;
        }

        .modif_rdv input, .modif_rdv select {
            max-width: 80%;
        }

        #calendar {
            max-width: 900px;
            margin: 0 auto;
        }

    </style>
@endsection

@section('modal')
    {{--    @include('modals.edit_rdv')--}}
@endsection