@extends('lay.dnekcab.retsam')

@section('title')
  {{ $page_title }}
@endsection

@section('page-content')

    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body list-heading">
                            <!-- card-header -->
                            <!--cenario 1: only header, 2:header and add button, 3:header and print, other:header , add button and prin. type:both[pdf,excel], type:[pdf], type:[excel] -->
                            <x-card-header 
                                :scenario="'1'"
                                :pageTitle="$page_title"
                            />
                           
                            <div class="card">
                                <div class="card-body">
                                    @csrf
                                    <form id="addApplicationForm" style="display: contents;" action="{{ route('add-application')}}" method="POST" enctype="multipart/form-data">
                                        <div class="modal-content">
                                            <div class="col-12 mb-2">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <label for="date" class="form-label">{{ __('application.date') }} <span class="required">*</span></label>
                                                        <input type="text" class="form-control datepickers" name="r_date" id="date" placeholder="{{ __('application.date') }}" autocomplete="off"/>
                                                        <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                                    </div>
                                
                                                    <div class="col-md-6">
                                                        <label for="number">{{ __('application.number') }} <span class="required">*</span></label>
                                                        <input type="number" class="form-control" name="r_number" id="number" placeholder="{{ __('application.number') }}" />
                                                        <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                                    </div>
                                
                                                </div>
                                            </div>
                    
                                            <div class="col-12 mb-2">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <label for="name" class="form-label">{{ __('application.name') }} <span class="required">*</span></label>
                                                        <input type="text" class="form-control" name="r_name" id="name" placeholder="{{ __('application.name') }}" autocomplete="off"/>
                                                        <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                                    </div>
                                
                                                    <div class="col-md-6">
                                                        <label for="phone" class="form-label">{{ __('application.phone') }}</label>
                                                        <input type="text" class="form-control" name="phone" id="phone" placeholder="{{ __('application.phone') }}" autocomplete="off"/>
                                                        <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                                    </div>
                                                </div>
                                            </div>
                    
                                            <div class="col-12 mb-2">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <label for="province_id" class="form-label">{{ __('application.province') }}</label>
                                                        <select name="province_id" id="province_id" class="form-control select2">
                                                            <option value="">--{{ __('application.province') }}--</option>
                                                            @if($provinces)
                                                                @foreach($provinces as $province)
                                                                    <option value="{{ $province->id }}">{{ $province->name}}</option>
                                                                @endforeach
                                                            @endif
                                                        </select>
                                                        <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                                    </div>
                    
                                                    <div class="col-md-6">
                                                        <label for="district_id" class="form-label">{{ __('application.district') }}</label>
                                                        <select name="district_id" id="district_id" class="form-control select2">
                                                            <option value="">--{{ __('application.district') }}--</option>
                                                            
                                                        </select>
                                                        <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-12 mb-2">
                                                <div class="row">
                                                    
                                                    <div class="col-md-6">
                                                        <label for="village_id" class="form-label">{{ __('application.village') }}</label>
                                                        <select name="village_id" id="village_id" class="form-control select2">
                                                            <option value="">--{{ __('application.village') }}--</option>
                                                            
                                                        </select>
                                                        <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                                    </div>
                    
                                                    <div class="col-md-6">
                                                        <label for="address" class="form-label">{{ __('application.address') }}</label>
                                                        <input type="text" class="form-control" name="address" id="address" placeholder="{{ __('application.address') }}" autocomplete="off"/>
                                                        <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                                    </div>
                                                </div>
                                            </div>
                    
                                            <div class="col-12 mb-2">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <label for="occupation" class="form-label">{{ __('application.occupation') }} </label>
                                                        <input type="text" class="form-control" name="occupation" id="occupation" placeholder="{{ __('application.occupation') }}" autocomplete="off"/>
                                                    </div>
                                
                                                    <div class="col-md-6">
                                                        <label for="application_type" class="form-label">{{ __('application.application_type') }}</label>
                                                        <select class="form-control select2" name="type" id="type">
                                                            <option value="">{{ __('application.select_type') }}</option>
                                                            @foreach(__('application.application_types') as $type)
                                                                <option value="{{ $type }}">{{ $type }}</option>
                                                            @endforeach
                                                        </select>
                                                        <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                                    </div>
                                                </div>
                                            </div>
                    
                                            <div class="col-12 mb-2">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <label for="reference" class="form-label">{{ __('application.reference') }} </label>
                                                        <input type="text" class="form-control" name="reference" id="reference" placeholder="{{ __('application.reference') }}" autocomplete="off"/>
                                                        <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                                    </div>
                                
                                                    <div class="col-md-6">
                                                        <label for="organization" class="form-label">{{ __('application.organization') }} </label>
                                                        <input type="text" class="form-control" name="organization" id="organization" placeholder="{{ __('application.organization') }}" autocomplete="off"/>
                                                        <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                                    </div>
                                                </div>
                                            </div>
                    
                                            <div class="col-12 mb-2">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <label for="description" class="form-label">{{ __('application.description') }}</label>
                                                        <textarea name="description" id="description" cols="5" rows="2" class="form-control"></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-12 mb-3">
                                                <div class="row">
                                                    <div class="col-md-4">
                                                        <label for="attachment" class="form-label">{{ __('application.attachment') }} <span class="editIDCardAttachmentDiv hiddens"><a href="" class="editAttachment" target="_blank"></a></span></label>
                                                        <div class="custom-file">
                                                            <input type="file" class="form-control" name="attachment" onchange="setFileNameToFileInput(event);" id="attachment" accept=".jpg, .jpeg, .png, .pdf" />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary m{{ app()->getLocale() == 'en' ? 'e' : 's' }}-1"class="btn-close" data-bs-dismiss="modal" aria-label="Close">{{ __('global.cancel')}}</button>
                                                <button type="submit" class="btn btn-primary m{{ app()->getLocale() == 'en' ? 's' : 'e' }}-1">{{ __('application.submit_application')}}</button>
                                            </div>
                                        </div><!-- /.modal-content -->
                                    </form>
                                </div>
                            </div>
                        
                        </div>
                    </div>
                </div>
            </div>
            <!-- end page title -->

        </div> <!-- container-fluid -->
    </div>

@endsection

@section('js')
    <!-- jquery step -->
    <script src="{{asset('assets/libs/jquery-steps/build/jquery.steps.min.js')}}"></script>
    <!-- form wizard init -->
    <script src="{{asset('assets/dnekcab/js/pages/form-wizard.init.js')}}"></script>
    
    <script type="text/javascript">

        var flag = 1;
        $(document).ready(function(){
            $(".datepickers").hijriDatePicker({
                hijri:true,
                showSwitcher:false,
                isRTL:true,
                timeZone:'Etc/UTC'
            });
            $('[data-toggle="tooltip"]').tooltip();
        });

        $(document).on('submit', '#addApplicationForm', function(e) {
            e.preventDefault();
            if(!validateForm('addApplicationForm')){
                return false;
            }
      
            var formData = new FormData(this);
            $.ajax({
                url: $(this).attr('action'),
                type: "POST",
                data: formData,
                contentType: false,
                cache: false,
                processData: false,
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                },
                success:function(result){
                    if(result.status == 'success'){
                        toastr.options =
                        {
                            "closeButton" : true,
                            "progressBar" : true
                        }
                        toastr.success(result.message);
                        $("#addApplicationForm")[0].reset();
                        setTimeout(function() {
                                window.location.href = '{{ route("allApplication") }}';
                        }, 2000); // 2 seconds in milliseconds (1000 milliseconds = 1 second
                    } else {
                        toastr.options =
                        {
                            "closeButton" : true,
                            "progressBar" : true
                        }
                        toastr.error(result.message);
                    }
                },
                error: function(xhr, status, error) {
                    // Handle error response
                    toastr.options = {
                        "closeButton" : true,
                        "progressBar" : true
                    }
                    toastr.error(error);
                }
            });
   
        });

        function checkForExist(identity, id, status){
            var access_token = $("#access_token").val();
            var identity = identity;
            var id = id;
            var status = status;

            $.ajax({
                type: "GET",
                url: "{{ route('checkForDupAppID')}}",
                data: { 
                    access_token: access_token,
                    identity: identity,
                    id: id,
                    status: status
                },
                success:function(result){
                    if(result.status == 'exist'){
                        if(status == 'add'){
                            $('.add_application_identity_duplicate_error').show();
                        } else {
                            $('.edit_application_identity_duplicate_error').show();
                        }
                        flag = 0;
                    } else {
                        if(status == 'add'){
                            $('.add_application_identity_duplicate_error').hide();
                        } else {
                            $('.edit_application_identity_duplicate_error').hide();
                        }
                        flag = 1;
                    }
                },
                error:function(result){
                    var errors = result.responseJSON;
                    if(status == 'add'){
                        $('.add_application_identity_duplicate_error').html(errors);
                    } else {
                        $('.edit_application_identity_duplicate_error').html(errors);
                    }
                }
            });
        }

        $(document).on('change', '#province_id', function(e) {
            var access_token = $("#access_token").val();
            var province = $("#province_id option:selected").val();
            
            $.ajax({
                type: "GET",
                url: "{{ route('getDistricts')}}",
                data: { 
                    access_token: access_token,
                    province: province
                },
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                },
                success:function(result){
                    $('#district_id').html(result.content);
                    $('#district_id').trigger('change');
                },
                error:function(result){
                    var errors = result.responseJSON;
                    $('#district_id').html(errors);
                }
            });
        });

        $(document).on('change', '#district_id', function(e) {
            var access_token = $("#access_token").val();
            var district = $("#district_id option:selected").val();

            $.ajax({
                type: "GET",
                url: "{{ route('getVillages')}}",
                data: { 
                    access_token: access_token,
                    district: district,
                },
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                },
                success:function(result){
                    console.log(result.content);
                    
                    $('#village_id').html(result.content);
                    $('#village_id').trigger('change');
                },
                error:function(result){
                    var errors = result.responseJSON;
                    $('#village_id').html(errors);
                }
            });
        });


    </script>
@endsection