@extends('layouts.main_admin')

@section('content')

    <!-- <div class="content-page"> -->
    <div class="page-body">
        <div class="container-fluid">
            <div class="page-title">
                <div class="row">
                    <div class="col-6">
                        <h3>@lang('site.employee')</h3>
                    </div>
                    <div class="col-6">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">@lang('site.dashboard')</li>

                            <li class="breadcrumb-item active">@lang('site.employee') @endlang</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>


        <div class="container-fluid">

            <div class="row">
                <!-- Individual column searching (text inputs) Starts-->
                <div class="col-sm-12">
                    <div class="card mt-30">
                        <form action="{{ route('dashboard.employee.store') }}" method="post"
                              enctype="multipart/form-data"
                              id="" class="form-main">

                            {{ csrf_field() }}
                            {{ method_field('post') }}
                            <div class="bg-secondary-lighten card-header d-flex justify-content-between">
                                <h5>@lang('site.add') </h5>
                                <div class="text-end  group-btn-top">
                                    <div class="form-group d-flex form-group justify-content-between">
                                        <button type="button" class="btn btn-pill btn-outline-primary btn-air-primary"
                                                onclick="history.back();">

                                            @lang('site.back')
                                        </button>
                                        <button type="submit" class="btn btn-air-primary btn-pill btn-primary"><i
                                                class="fa fa-plus p-1"></i>
                                            @lang('site.add')</button>
                                    </div>
                                </div>


                            </div>
                            <div class="card-body">
                                @include('partials._errors')


                                <div class="row">
                                    <!--<div class="col-md-6">-->

                                        <div class="col-md-6 form-group">
                                            <label class="form-label">@lang('site.employee')<span class="text-danger">*</span></label>
                                            <select class="js-example-placeholder-multiple col-sm-12" name="user_id" required>
                                                <option value="">@lang('site.select')</option>
                                                @foreach($users as $user)
    
                                                    <option
                                                        value="{{$user->id}}">{{$user->firstname . $user->lastname ?? ''}}</option>
    
                                                @endforeach
    
                                            </select>
                                        </div>

                                        <div class="col-md-6 form-group">
                                            <label class="form-label">@lang('site.country')<span class="text-danger">*</span></label>
                                            <select class="js-example-placeholder-multiple col-sm-12" name="country_id" id="country_id" required>
                                                <option value="">@lang('site.select')</option>
                                                @foreach($countries as $country)

                                                    <option value="{{$country->id}}">{{$country->name_ar ?? ''}}</option>

                                                @endforeach

                                            </select>
                                            @if($errors->has('country_id'))
                                                <span class="error text-danger">{{ $errors->first('country_id') }}</span>
                                            @endif
                                        </div>
                                            
                                        <div class="col-md-6 form-group">
                                            <span class="text-danger">*</span>
                                            <label class="form-label">@lang('site.city')</label>
                                            <select class="js-example-placeholder-multiple col-sm-12" id="city_id" multiple="multiple" name="city_id[]" required>
                                                <option value="">@lang('site.select')</option>
                                                @foreach($cities as $city)
                                                    <option value="{{ $city->id }}">{{ $city->name_ar ?? '' }}</option>
                                                @endforeach
                                            </select>
                                            @if($errors->has('city_id'))
                                                <span class="error text-danger">{{ $errors->first('city_id') }}</span>
                                            @endif
                                        </div>
                                        
                                        
                                        
                                        
                                                                       
                                        {{-- <div class="col-md-6 form-group">
                                            <label class="form-label">@lang('site.city')<span class="text-danger">*</span></label>
                                            <select class="js-example-placeholder-multiple col-sm-12" name="city_id" id="city_id" required>
                                                <option value="">@lang('site.select')</option>
                                                <!-- @foreach($cities as $city)

                                                    <option value="{{$city->id}}">{{$city->name_ar ?? ''}}</option>

                                                @endforeach -->

                                            </select>
                                            @if($errors->has('city_id'))
                                            <span class="error text-danger">{{ $errors->first('city_id') }}</span>
                                        @endif
                                        </div> --}}

                               

                                


                            </div>
                            </div>


                    </div>
                </div>
            </div>
        </div>

        </form>
        <!--    </div>-->
    </div>
    </div><!--</div>-->

    </div>
    <!-- Container-fluid Ends-->

@endsection
@section('scripts')

    <script>
    $('#country_id').on('change',function(e){
        var country_id = e.target.value;



        $.get("{{url('dashboard/countrycities')}}/"+country_id, function(data){
            console.log(data);
            $('#city_id').empty();
            $('#city_id').append('<option>@lang('site.select')</option>');
            $.each(data, function(key, value){
                $('#city_id').append('<option value="'+value.id+'">'+value.name_ar+'</option>')

            });
        })
    })


    $('#city_id').on('change',function(e){
        var city_id = e.target.value;
        $("#cityarea").show(); 
        $.get("{{url('dashboard/cityareas')}}/"+city_id, function(data){
            console.log(data);
            $('#area_id').empty();
            $.each(data, function(key, value){
                $('#area_id').append('<li class="form-check radio radio-primary" ><input class="form-check-input" id="area_'+value.id+'" type="radio" name="area_id" value="'+value.id+'" required><label class="form-check-label mb-0" for="area_'+value.id+'">'+value.name_ar+'</label></li>')

            });
        })
    })
</script>
@endsection