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


@section('head_supplement')
    <link rel="stylesheet" href="{{ asset('css/rdv.css') }}">
@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">
                    </div>
                </div>
            </div>
            <div class="btn-actions-pane-right">
            </div>
        </div>

    </div>

    <form id="rdv_form" action="{{ route('rdv.store') }}" method="post">
        @csrf
        <div class="row">
            <div class="col-md-12 col-xl-12">
                {{-- <div class="wpb_column vc_column_container vc_col-sm-12" style="display: inline-block">
                                    <div id="francemap" style="width: 850px;max-width:100%; height: 600px;margin: auto"></div>
                                    <input type="hidden" id="dpt" name="dpt">
                                </div>
                                <div class="wpb_column vc_column_container vc_col-sm-12" style="display: inline-block">
                                    <label>Choisir une date</label>
                                    <input type="text" id="date_day_fr" name="DateOfBirth" class="form-control"
                                           value="{{ date("d/m/Y", strtotime("now")) }}"/>
                                    <div id="wpajaxdisplay">
                                        <div class="no_result" style="display: block">
                                            <div class="no_result_title">
                                                <i class="fa fa-clock"></i>
                                                Choisissez un département pour vérifier les disponibilités de nos inspecteurs
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <input type="hidden" id="date_day" name="DateOfBirth" class="form-control"
                                       value="{{ date("Y-m-d", strtotime("now")) }}"/>
                                <input type="hidden" name="heure_rdv" id="heure_rdv"> --}}
                <div id="validation_type">
                    <div class="">
                        <div class="col-md-12">
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Date et Heure</h5>
                                    <div>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <a class="btn btn-secondary">Date du rdv</a>
                                            </div>
                                            <input type="text" class="form-control date_picker" name="date" value="">
                                        </div>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <a class="btn btn-secondary">Heure du rdv</a>
                                            </div>
                                            <select name="heure" class="form-control" style="max-width:50px">

                                                @for ($i = 8; $i < 21; $i++)
                                                    {
                                                    @if ($i < 10)
                                                        {
                                                        @php $i = '0' . $i; @endphp
                                                    @endif
                                                    <option value="{{ $i }}">{{ $i }}</option>
                                                @endfor
                                            </select>H
                                            <select name="minutes" class="form-control" style="max-width:50px">

                                                <option value="00">
                                                    00
                                                </option>
                                                <option value="30">
                                                    30
                                                </option>

                                            </select>MN
                                        </div>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <a class="btn btn-secondary">Inspecteur</a>
                                            </div>
                                            <select name="user_id" class="form-control select2">
                                                @foreach ($users as $user)
                                                    <option value="{{ $user->user_id }}">
                                                        {{ $user->user_firstname }} {{ $user->user_lastname }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Inspection</h5>
                                    <div>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <a class="btn btn-secondary">Type d'inspection</a>
                                            </div>
                                            <select id="type_rdv_select" name="type_rdv" class="form-control " required>
                                                <option value="">Choisir un type de rdv</option>
                                                @foreach (config('types.type_rapport') as $index => $type_rapport)
                                                    <option value="{{ $index }}">{{ $type_rapport }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <a class="btn btn-secondary">Durée prévue</a>
                                            </div>
                                            <input type="text" name="duree" value="" class="form-control">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="main-card mb-3 card"
                                style="display: {{ Auth::user()->client_id > 0 ? 'none' : 'block' }}">
                                <div class="card-header-tab card-header">
                                    <div>Clients</div>
                                    <div class="btn-actions-pane-right">
                                        @if (Auth::user()->client_id == 0)
                                            <select required class="form-control select2" id="choose_client"
                                                name="client_id" style="max-width:100%;min-width:100%">
                                                <option value="">Choisir un client existant</option>
                                                @foreach ($clients as $client)
                                                    <option value="{{ $client->client_id }}">
                                                        {{ $client->client_title }}</option>
                                                @endforeach
                                            </select>
                                        @endif
                                    </div>
                                </div>
                                <div class="card-body" id="card-body-client" style="display: none">
                                    <div>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <a class="btn btn-secondary">Nom du client</a>
                                            </div>
                                            <input type="text" name="_billing_last_name" value="" class="form-control">

                                        </div>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <a class="btn btn-secondary">Adresse du client</a>
                                            </div>
                                            <input type="text" name="_billing_address_1" value="" class="form-control">

                                        </div>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <a class="btn btn-secondary">Code postal du client</a>
                                            </div>
                                            <input type="text" name="_billing_postcode" value="" class="form-control">

                                        </div>

                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <a class="btn btn-secondary">Ville du client</a>
                                            </div>
                                            <input type="text" name="_billing_city" value="" class="form-control">
                                        </div>


                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <a class="btn btn-secondary">Opération de contrôle</a>
                                            </div>
                                            @if (Auth::user()->client_id == 0)
                                                <select class="form-control select2" id="choose_client" name="operation_id"
                                                    style="max-width:100%;min-width:100%">
                                                    <option value="">Choisir une opération existant</option>
                                                    @foreach ($operations as $operation)
                                                        <option value="{{ $operation->operation_id }}">
                                                            {{ $operation->operation_title }}</option>
                                                    @endforeach

                                                </select>
                                            @endif
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Lieu d'inspection</h5>
                                    <div>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <a class="btn btn-secondary">Propriétaire</a>
                                            </div>
                                            <input type="text" name="proprietaire_name" value="" class="form-control">

                                        </div>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <a class="btn btn-secondary">Adresse de l'inspection</a>
                                            </div>
                                            <input type="text" name="proprietaire_adresse" value="" class="form-control">

                                        </div>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <a class="btn btn-secondary">Code postal de l'inspection</a>
                                            </div>
                                            <input type="text" name="proprietaire_cp" value="" class="form-control">

                                        </div>

                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <a class="btn btn-secondary">Ville de l'inspection</a>
                                            </div>
                                            <input type="text" name="proprietaire_ville" value="" class="form-control">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Bénéficiaire</h5>
                                    <div>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <a class="btn btn-secondary">Nom du bénéficiaire</a>
                                            </div>
                                            <input type="text" name="beneficiaire_name" value="" class="form-control">

                                        </div>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <a class="btn btn-secondary">Adresse du bénéficiare</a>
                                            </div>
                                            <input type="text" name="beneficiaire_adresse" value="" class="form-control">

                                        </div>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <a class="btn btn-secondary">Code postal du bénéficiare</a>
                                            </div>
                                            <input type="text" name="beneficiaire_cp" value="" class="form-control">

                                        </div>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <a class="btn btn-secondary">Ville du bénéficiaire</a>
                                            </div>
                                            <input type="text" name="beneficiaire_ville" value="" class="form-control">
                                        </div>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <a class="btn btn-secondary">Téléphone du bénéficiaire</a>
                                            </div>
                                            <input type="text" name="beneficiaire_telephone" value=""
                                                class="form-control">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Observations</h5>
                                    <div>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <a class="btn btn-secondary">Notes</a>
                                            </div>

                                            <textarea style="width: 70%;
    min-height: 200px;" name="rdv_observations"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>
        <input type="submit" class="btn btn-primary" id="validation_button" value="Valider">
    </form>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/fr.js"></script>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            $('#type_rdv_select').change(function() {
                if ($(this).val() === 0) {
                    $("input").each(function() {
                        $(this).attr("required", false);
                    });
                }

            });

            $('#choose_client').change(function() {
                if ($(this).val() !== '') {
                    $('#card-body-client').show();
                } else {
                    $("input[name*='_billing_last_name']").val('');
                    $("input[name*='_billing_address_1']").val('');
                    $("input[name*='_billing_postcode']").val('');
                    $("input[name*='_billing_city']").val('');
                    $("input[name*='client_id']").val('');
                    $('#card-body-client').hide();
                }
                axios.get('/api/clients/' + $(this).val(), {
                    headers: {
                        'Authorization': `Bearer ${token}`,
                    },
                }).then((response) => {
                    $("input[name*='_billing_last_name']").val(response.data._billing_last_name);
                    $("input[name*='_billing_address_1']").val(response.data._billing_address_1);
                    $("input[name*='_billing_postcode']").val(response.data._billing_postcode);
                    $("input[name*='_billing_city']").val(response.data._billing_city);
                    $("input[name*='client_id']").val(response.data.client_id);
                })

            });

            const date_picker = $(".date_picker");

            date_picker.datepicker({
                closeText: 'Fermer',
                prevText: 'Précédent',
                nextText: 'Suivant',
                currentText: 'Aujourd\'hui',
                monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août',
                    'Septembre', 'Octobre', 'Novembre', 'Décembre'
                ],
                monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août',
                    'Sept.', 'Oct.', 'Nov.', 'Déc.'
                ],
                dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
                dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
                dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
                weekHeader: 'Sem.',
                dateFormat: 'dd/mm/yy'
            });
        });
    </script>

@endsection