@extends('layouts.dash_map')

@section('content')
    <!-- ======= Featured Section ======= -->
    <section id="featured" class="featured2">
        <div class="container" style="">

            <div class="row" style="padding:10px">
                <div class="row col-md-12">
                    <div class="row">
                        <div class="col-lg-12" align="right">
                            <small>{!! count($formations) !!} Lycées</small>
                        </div>
                    </div>
                    <div style="padding:20px;background:#e9ecef;border-radius: 10px;">
                        <div class="row col-md-12">
                            <h4 style="font-weight:bold;text-align:center">Je recherche des stagiaires</h4>
                            <div align="center">Choisissez une région et un niveau pour accéder à la liste des formations</div>
                        </div>

                        <div class="row col-md-12">
                            <div class="col-md-8">
                                <h4>Domaine<small style='font-size:.6em;color:red'>&nbsp;obligatoire</small></h4>
                                <select id='sel_domaine' class="form-control" style="margin-bottom:10px">
                                    <option id='id_opt_domaine_0' value='0'></option>
                                    @foreach($domaines as $domaine)
                                        <option {!! ($id_domaine==$domaine->id)?'selected':'' !!} id='id_opt_domaine_{!! $domaine->id !!}' value='{!! $domaine->id !!}'>{!! $domaine->nom !!}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4">
                                <h4>Niveau<small style='font-size:.6em;color:red'>&nbsp;obligatoire</small></h4>
                                <select id='sel_niveau' class="form-control" style="margin-bottom:10px">
                                    <option id='id_opt_niveau_0' value='0'></option>
                                    @foreach($niveaux as $niveau)
                                        <option {!! ($id_niveau==$niveau->id)?'selected':'' !!} title="{!! $niveau->nom !!}" id='id_opt_niveau_{!! $niveau->id !!}' value='{!! $niveau->id !!}'>{!! $niveau->nom !!}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        @if($id_niveau && $id_domaine)
                            <div class="row col-md-12">
                                <h4 style="font-weight:bold;text-align:center">&nbsp;</h4>
                            </div>
                            <div class="row col-md-12" >
                                <div class="middle">
                                  <label>
                                    <input class="bt_radio" type="radio" name="radio" id="bt_town" {{ ($mode!='a')?'checked':'' }} />
                                    <div class="town box">
                                      <span>Ville où région</span>
                                    </div>
                                  </label>

                                  <label>
                                    <input class="bt_radio" type="radio" name="radio"  id="bt_around" {{ ($mode=='a')?'checked':'' }} />
                                    <div class="around box">
                                      <span>Autour de ma position</span>
                                    </div>
                                  </label>
                                </div>
                            </div>
                            <div class="row col-md-12 middle" >
                                <small style="font-size:0.7em" id="position_info"></small>
                                <input type="hidden" id="lat_around" value="{{ $lat }}"/>
                                <input type="hidden" id="lon_around" value="{{ $lon }}"/>
                                <input type="hidden" id="mode" value="{{ $mode }}"/>
                                <input type="hidden" id="distance" value="{{ $distance }}"/>
                            </div>
                            <div class="row col-md-12">
                                <h4 style="font-weight:bold;text-align:center">&nbsp;</h4>
                            </div>
                            @if($mode=='a')
                                <div class="col-md-12 mb-4" id="div_cursor" >
                                    <div class="row">
                                        <div class="col-md-12">
                                            <h4  style="text-align:center">Autour de ma position :</h4>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12" align="center">
                                            <h4 id="distance_lib" name="distance_lib">{{ $distance }}km</h4>
                                        </div>
                                    </div>
                                    <div class="row ">
                                        <div class="col-md-1"></div>
                                        <div class="col-md-10">
                                            <input style='width: 100%;' id="cursor" type="range" min="5" max="500" step="5" value="{{ $distance }}" class="">
                                        </div>
                                    </div>
                                </div>
                            @endif

                            @if($mode!='a')
                                <div class="row" style="border-radius: 0px;" id="div_region">
                                    <div class="col-lg-4">
                                        <h4>Région</h4>
                                        <!-- <small style='font-size:.6em;color:red'>&nbsp;obligatoire</small> -->
                                        <select id='sel_region' class="form-control" style="margin-bottom:30px">
                                            <option id='id_opt_region_0' value='0'></option>
                                            @foreach($regions as $reg)
                                                <option {!! ($id_region==$reg->id)?'selected':'' !!} id='id_opt_region_{!! $reg->id !!}' value='{!! $reg->id !!}'>{!! $reg->nom !!}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    @if($departements)
                                        <div class="col-lg-4">
                                            <h4 >Département</h4>
                                            <select id='sel_departement' class="form-control" style="margin-bottom:30px">
                                                <option id='id_opt_departement_0' value='0'></option>
                                                @foreach($departements as $dep)
                                                    <option {!! ($id_departement==$dep->id)?'selected':'' !!} id='id_opt_departement_{!! $dep->id !!}' value='{!! $dep->id !!}'>{!! $dep->nom !!}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    @endif

                                    <div class="col-lg-{{ ($departements)?'4':'8' }}">
                                        <h4>Commune/Code Postal</h4>
                                        <div class="input-group">
                                            <input type="hidden" name="cp_ville" id="cp_ville" value="{{ $cp_ville?$cp_ville:'' }}"/>
                                            <input type="text" name="code_postal" id="code_postal"  value="{{ $code_postal?$code_postal:$ville }}" class="form-control" style="margin-bottom:30px" placeholder="Code Postal ou Commune" />
                                        </div>
                                    </div>
                                </div>
                            @endif
                        @endif
                    </div>
                </div>
            </div>


            <div class="agenda-box" style="padding:0px;" id='div_agenda'>
                <div class="row col-md-12">
                    @if( $id_niveau && $id_domaine && ( ($mode=="a") || (($mode=="p") && ($id_region || $cp_ville)) ))
                        <div class="col-md-8">
                            @include("agendas.calendar")
                        </div>
                    @endif
                    <div class="col-md-4">
                        <div class="card"  id='div_map'>
                            <div class="card-header ui-sortable-handle" style="cursor: move;">
                                <h3 class="card-title" style='display:inline-block'>Carte</h3>
                              </div>
                            <div class="card-body">
                                <div id="map" style="width: 600px; height: 400px;"></div>
                            </div>
                            <p id="status"></p>
                            <p><a id="map-link" target="_blank"></a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section><!-- End Featured Section -->
@endsection

@section('style')
    <link media="all" type="text/css" rel="stylesheet" href="{{ url('css/checkbox.css') }}">
    <!-- FancyBox -->
    <link href="{{ url('css/jquery.fancybox.css') }}" rel="stylesheet">
    <link href="{{ url('css/jquery.fancybox-buttons.css') }}" rel="stylesheet">
@endsection


<!-- ======= SCRIPTS SECTION ======= -->

@section('scripts')
    <script src="{{ url('js/jquery.fancybox.js') }}"></script> 
    @include("agendas.scripts_map")
    @include("agendas.scripts_fancy")
    @include("agendas.datatable")
@endsection