@extends('layout.app')

@section('content')
    <div class="wrapper pt-5">
        <div class="container" style="max-width:50%;">
            @if(session('success'))
            <div class="row text-center">
                <div class="shap_content">
                    <div class="title">
                        <h1>{{ __('messages.thank_participation') }}!</h1>
                    </div>
                </div>
            </div>
            @else
            <form class="multisteps_form position-relative" method="POST" action="{{ route('home.store',\App::getLocale()) }}">
                @csrf
                    <div class="multisteps_form_panel">
                        <!-- Form-content -->
                        <h1 class="question_title text-center">{{ __('messages.personal_information') }}</h1>
                        <!-- Form-items -->
                        <div class="form_items">
                            <div class="px-5 py-5 bg-white text-start animate__animated animate__fadeInRight animate_50ms">
                                <div class="mb-3">
                                    <label class="form-label">{{ __('messages.fullname') }}</label>
                                    <input type="text" class="form-control @error('fullname') is-invalid @enderror" name="fullname">
                                    @error('fullname')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ __('messages.your_email') }}</label>
                                    <input type="email" class="form-control @error('email') is-invalid @enderror" name="email">
                                    @error('email')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ __('messages.your_phone_number') }}</label>
                                    <input type="tel" class="form-control @error('phone') is-invalid @enderror" name="phone">
                                    @error('phone')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ __('messages.sex') }}</label>
                                    <select class="form-control @error('sex') is-invalid @enderror" required name="sex">
                                        @foreach($sexes as $key => $sex)
                                        <option value="{{$key}}">{{$sex}}</option>
                                        @endforeach
                                    </select>
                                    @error('sex')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ __('messages.state') }}</label>
                                    <select class="form-control @error('state') is-invalid @enderror" required name="state">
                                        <option hidden>{{ __('messages.state') }}</option>
                                        @foreach($states as $state)
                                        <option value="{{ $state['name']}}">{{ \App::getLocale() == 'fr' ? $state['name'] : $state['ar_name']}}</option>
                                        @endforeach
                                    </select>
                                    @error('state')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ __('messages.city') }}</label>
                                    <select class="form-control @error('city') is-invalid @enderror" required name="city">
                                    </select>
                                    @error('city')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" required>{{ __('messages.age') }}</label>
                                    <input type="number" name="age" class="form-control @error('age') is-invalid @enderror">
                                    @error('age')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ __('messages.education_level') }} ?</label>
                                    <select class="form-control @error('instruction') is-invalid @enderror" required name="instruction">
                                        <option value="Sans instruction, analphabète">Sans instruction, analphabète</option>
                                        <option value="Sans instruction mais sait lire et écrire">Sans instruction mais sait lire et écrire</option>
                                        <option value="Niveau primaire">Niveau primaire</option>
                                        <option value="Niveau moyen">Niveau moyen</option>
                                        <option value="Niveau secondaire">Niveau secondaire</option>
                                        <option value="Universitaire">Universitaire</option>
                                    </select>
                                    @error('instruction')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ __('messages.profession') }} ?</label>
                                    <select class="form-control @error('occupation') is-invalid @enderror" required name="occupation">
                                        <option value="Haut fonctionnaire, cadre supérieur de l'état">Haut fonctionnaire, cadre supérieur de l'état</option>
                                        <option value="Profession libérale, prof intellectuelle">Profession libérale, prof intellectuelle</option>
                                        <option value="Cadre">Cadre</option>
                                        <option value="Cadre moyen / Cadre de maitrise">Cadre moyen / Cadre de maitrise</option>
                                        <option value="Employé">Employé</option>
                                        <option value="Petit patron, commerçant, autre indépendant">Petit patron, commerçant, autre indépendant</option>
                                        <option value="Chômeur">Chômeur</option>
                                        <option value="Femme au foyer">Femme au foyer</option>
                                        <option value="Etudiant / Ecolier">Etudiant / Ecolier</option>
                                        <option value="Retraité">Retraité</option>
                                        <option value="Pensionné">Pensionné</option>
                                        <option value="Autre inactif">Autre inactif</option>
                                    </select>
                                    @error('occupation')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">{{ __('messages.total_household_income') }}</label>
                                    <select class="form-control @error('income') is-invalid @enderror" required name="income">
                                        <option value="Moins de 18 000 da">Moins de 18 000 da</option>
                                        <option value="De 18 000 à 29 999 da">De 18 000 à 29 999 da</option>
                                        <option value="De 29 000 à 34 999 da">De 29 000 à 34 999 da</option>
                                        <option value="De 35 000 à 49 999 da">De 35 000 à 49 999 da</option>
                                        <option value="De 45 000 à 74 999 da">De 45 000 à 74 999 da</option>
                                        <option value="De 75 000 à 89 999 da">De 75 000 à 89 999 da</option>
                                        <option value="De 90 000 à 120 000 da">De 90 000 à 120 000 da</option>
                                        <option value="De 120 000 à 150 000 da">De 120 000 à 150 000 da</option>
                                        <option value="Plus de 150 000 da">Plus de 150 000 da</option>
                                        <option value="Non déterminé">Non déterminé</option>
                                    </select>
                                    @error('income')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                    @enderror
                                </div>
     
                            </div>
                        </div>
                    </div>
                <!---------- Form Button ---------->
                <div class="form_btn text-center ms-5 mt-5">
                    <button type="submit" class="f_btn text-uppercase rounded-pill border-0">{{ __('messages.submit') }}</button>
                </div>
            </form>
            @endif
        </div>
    </div>
@endsection

@section('scripts')
<script>
    let lang = "{{ \App::getLocale() }}";
    var states = @json($states); 
    var cities = @json($cities); 
    $('select[name=state]').change(function(){
        var wilayaName = $(this).val();
        var wilayaId =  states.find(item => item.name ==  wilayaName)['id'];
        var c = cities.filter(function(item){
            return item.wilaya_id == wilayaId
        });
        let html = '';
        c.forEach(item => {
            html = html + '<option value="'+item.name+'">'+(lang == 'fr' ? item.name : item.ar_name) +'</option>'
        });
        $('select[name=city]').html(html);
    })

</script>

@endsection