@extends('layout.app')

@section('content')
    <div class="wrapper pt-5">
        <div class="container">
            @if(session('success'))
            @if(session('success') == 'Done')
            <div class="row text-center">
                <div class="shap_content">
                    <div class="title">
                        <h1>{{ __('messages.thank_participation') }}</h1>
                    </div>
                </div>
                <a class="f_btn text-uppercase rounded-pill border-0" href="{{ route('categories.index',\App::getLocale()) }}">{{ __('messages.vote') }}</a>
                <a class="f_btn text-uppercase rounded-pill border-0" href="{{ route('languages.index') }}">{{ __('messages.quit') }}</a>
            </div>
            @else
            <div class="row text-center">
                <div class="shap_content">
                    <div class="title">
                        <h1>{{ session('success') }}</h1>
                    </div>
                </div>
                <a class="f_btn text-uppercase rounded-pill border-0" href="{{ route('categories.index',\App::getLocale()) }}">{{ __('messages.submit') }}</a>
            </div>
            @endif
            @else
            <form class="multisteps_form position-relative" method="POST" action="{{ route('home.store',['locale' => \App::getLocale(), 'step' => request('step')]) }}">
                @csrf
                    <div class="multisteps_form_panel">
                        <!-- Form-content -->
                        <h1 class="product_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.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.fullname') }}</label>
                                    <small class="form-text text-muted">{{ __('messages.participation_tombola') }}</small>
                                    <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>
                                    <small class="form-text text-muted">{{ __('messages.participation_tombola') }}</small>
                                    <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>
                                    <small class="form-text text-muted">{{ __('messages.participation_tombola') }}</small>
                                    <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.education_level') }} ?</label>
                                    <select class="form-control @error('instruction') is-invalid @enderror" required name="instruction">
                                        @foreach($educationLevels as $key => $educationLevel)
                                        <option value="{{$key}}">{{$educationLevel}}</option>
                                        @endforeach
                                    </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">
                                        @forEach($occupations as $key => $occupation)
                                        <option value="{{$key}}">{{$occupation}}</option>
                                        @endforeach
                                    </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">
                                        @forEach($incomes as $key => $income)
                                        <option value="{{$key}}">{{$income}}</option>
                                        @endforeach
                                    </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