@extends('web.layouts.container')

@section('css')
    <link rel="stylesheet" href="{{ asset('assets/web/css/lib/toastr.css') }}" />
    <style>
        .custom-file-input:lang(ar)~.custom-file-label::after,
        .custom-file-input:lang(en) ~ .custom-file-label::after{
            content: "{{__('applicationForms.choose_file')}}";
        }

        .card{
            border: 2px solid rgba(0,0,0,.125) !important;
        }
    </style>
@endsection


@section('content')
    <div class="container">
        <div class="card col-md-12 mt-5">
            <div class="card-header d-flex justify-content-between instagram button w-100 border-0">
                <span class="gradient"></span>
                <h4 class="text-uppercase">{{__('applicationForms.head')}}</h4>
                <p class="text-uppercase"><i style="font-size: 16px" class="fa fa-lightbulb text-white"></i> <b class="text-danger">{{__('applicationForms.asterisk_input')}}</b></p>
            </div>
            <div class="card-body">
                <form method="post" action="{{route('applications.store')}}" enctype="multipart/form-data" class="application_form">
                    @csrf()
                    <div class="card p-2">
                        <div class="card-header instagram button w-100 border-0 mt-3">
                            <span class="gradient"></span>
                            <b>{{__('applicationForms.transformer_info')}}</b>
                        </div>
                        <div class="card-body mt-3">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="text-primary" for="code"><h4>{{__('applicationForms.code')}}</h4></label>
                                        <input type="tel" name="code" id="code" class="form-control" placeholder="{{__('applicationForms.code')}}">
                                        <span class="text-danger d-none code_hint">{{__('applicationForms.code_hint')}}</span>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group text-center">
                                        <input checked type="radio" name="residence_type" id="citizen" value="1">
                                        <label for="citizen"><h6>{{__('applicationForms.citizen')}}</h6></label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group text-center">
                                        <input type="radio" name="residence_type" id="resident" value="2">
                                        <label for="resident"><h6>{{__('applicationForms.resident')}}</h6></label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="text-primary" for="name"><b>{{__('applicationForms.name')}}</b> <i style="font-size: 10px" class="fa fa-asterisk text-danger"></i></label>
                                        <input type="text" name="name" id="name" class="form-control" placeholder="{{__('applicationForms.name')}}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="text-primary" for="name"><b>{{__('applicationForms.id_number')}}</b> <i style="font-size: 10px" class="fa fa-asterisk text-danger"></i></label>
                                        <input type="tel" name="id_number" id="id_number" class="form-control" placeholder="{{__('applicationForms.id_number')}}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="text-primary" for="phone"><b>{{__('applicationForms.absher_phone')}}</b> <i style="font-size: 10px" class="fa fa-asterisk text-danger"></i></label>
                                        <input type="tel" name="phone" id="phone" class="form-control" placeholder="{{__('applicationForms.absher_phone')}}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="text-primary" for="phone"><b>{{__('applicationForms.work_phone') . ' ' . __('applicationForms.optional')}}</b> </label>
                                        <input type="tel" name="work_phone" id="work_phone" class="form-control" placeholder="{{__('applicationForms.work_phone')}}">
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="text-primary" for="address"><b>{{__('applicationForms.address')}}</b> </label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="text-primary" for="region_id"><b>{{__('applicationForms.region')}}</b> <i style="font-size: 10px" class="fa fa-asterisk text-danger"></i></label>
                                        <select name="region_id" id="region_id" class="form-control">
                                            <option value="">{{__('applicationForms.region')}}</option>
                                            @foreach($regions as $region)
                                                <option value="{{$region->id}}">{{$region->{'name_'.getCurrentLocale()} }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="text-primary" for="region_id"><b>{{__('applicationForms.governorates')}}</b> <i style="font-size: 10px" class="fa fa-asterisk text-danger"></i></label>
                                        <select name="governorate_id" id="governorate_id" class="form-control">
                                            <option value="">{{__('applicationForms.governorates')}}</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card mt-3 p-2 guarantor_info d-none">
                        <div class="card-header instagram button w-100 border-0 mt-3">
                            <span class="gradient"></span>
                            <b>{{__('applicationForms.guarantor_info')}}</b>
                        </div>
                        <div class="card-body mt-3">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="text-primary" for="guarantor_name"><b>{{__('applicationForms.guarantor_name')}}</b> <i style="font-size: 10px" class="fa fa-asterisk text-danger"></i></label>
                                        <input type="text" name="guarantor_name" id="guarantor_name" class="form-control" placeholder="{{__('applicationForms.guarantor_name')}}">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="text-primary" for="guarantor_phone"><b>{{__('applicationForms.absher_phone')}}</b> <i style="font-size: 10px" class="fa fa-asterisk text-danger"></i></label>
                                        <input type="tel" name="guarantor_phone" id="guarantor_phone" class="form-control" placeholder="{{__('applicationForms.absher_phone')}}">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="text-primary" for="guarantor_phone"><b>{{__('applicationForms.guarantor_work_phone') . ' ' . __('applicationForms.optional')}}</b></label>
                                        <input type="tel" name="guarantor_work_phone" id="guarantor_work_phone" class="form-control" placeholder="{{__('applicationForms.guarantor_work_phone')}}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card mt-3 p-2">
                        <div class="card-header instagram button w-100 border-0 mt-3">
                            <span class="gradient"></span>
                            <b>{{__('applicationForms.car_info')}}</b>
                        </div>
                        <div class="card-body row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="text-primary" for="car_type"><b>{{__('applicationForms.car_type')}}</b> <i style="font-size: 10px" class="fa fa-asterisk text-danger"></i></label>
                                    <select name="car_type" id="car_type" class="form-control">
                                        <option value="">{{__('applicationForms.car_type')}}</option>
                                        @foreach($carTypes as $type)
                                            <option value="{{$type->id}}">{{$type->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="text-primary" for="car_model"><b>{{__('applicationForms.car_model')}}</b> <i style="font-size: 10px" class="fa fa-asterisk text-danger"></i></label>
                                    <select name="car_model" id="car_model" class="form-control">
                                        <option value="">{{__('applicationForms.car_model')}}</option>
                                        @foreach($carModels as $carModel)
                                            <option value="{{$carModel->id}}">{{$carModel->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="text-primary" for="car_load"><b>{{__('applicationForms.car_load') . ' ' . __('applicationForms.optional')}}</b></label>
                                    <select name="car_load" id="car_load" class="form-control">
                                        <option value="">{{__('applicationForms.car_load')}}</option>
                                        {{--                                        @foreach($carLoads as $load)--}}
                                        {{--                                            <option value="{{$load->id}}">{{$load->name}}</option>--}}
                                        {{--                                        @endforeach--}}
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="text-primary" for="box_type"><b>{{__('applicationForms.box_type') . ' ' . __('applicationForms.optional')}}</b></label>
                                    <select name="box_type" id="box_type" class="form-control">
                                        <option value="">{{__('applicationForms.box_type')}}</option>
                                        {{--                                        @foreach($boxTypes as $box)--}}
                                        {{--                                            <option value="{{$box->id}}">{{$box->name}}</option>--}}
                                        {{--                                        @endforeach--}}
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card mt-3 p-2">
                        <div class="card-header instagram button w-100 border-0 mt-3">
                            <span class="gradient"></span>
                            <b>{{__('applicationForms.attachment')}}</b>
                        </div>
                        <div class="card-body mt-4">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div class="label mb-2">
                                            <h6 class="text-primary">{{__('applicationForms.id_photo')}} <i style="font-size: 10px" class="fa fa-asterisk text-danger"></i></h6>
                                        </div>
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" id="id_photo" name="id_photo">
                                            <label class="custom-file-label" for="id_photo">{{__('applicationForms.id_photo')}}</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div class="label mb-2">
                                            <h6 class="text-primary">{{__('applicationForms.driving_licence')}} <i style="font-size: 10px" class="fa fa-asterisk text-danger"></i></h6>
                                        </div>
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" id="driving_licence" name="driving_licence">
                                            <label class="custom-file-label" for="driving_licence">{{__('applicationForms.driving_licence')}}</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div class="label mb-2">
                                            <h6 class="text-primary">{{__('applicationForms.car_form')}} <i style="font-size: 10px" class="fa fa-asterisk text-danger"></i></h6>
                                        </div>
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" id="car_form" name="car_form">
                                            <label class="custom-file-label" for="car_form">{{__('applicationForms.car_form')}}</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div class="label mb-2">
                                            <h6 class="text-primary">{{__('applicationForms.trans_permission') . ' ' . __('applicationForms.optional')}}</h6>
                                        </div>
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" id="trans_permission" name="trans_permission">
                                            <label class="custom-file-label" for="trans_permission">{{__('applicationForms.trans_permission')}}</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div class="label mb-2">
                                            <h6 class="text-primary">{{__('applicationForms.car_front')}} <i style="font-size: 10px" class="fa fa-asterisk text-danger"></i></h6>
                                        </div>
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" id="car_front" name="car_front">
                                            <label class="custom-file-label" for="car_front">{{__('applicationForms.car_front')}}</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div class="label mb-2">
                                            <h6 class="text-primary">{{__('applicationForms.car_back')}} <i style="font-size: 10px" class="fa fa-asterisk text-danger"></i></h6>
                                        </div>
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" id="car_back" name="car_back">
                                            <label class="custom-file-label" for="driving_licence">{{__('applicationForms.car_back')}}</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div class="label mb-2">
                                            <h6 class="text-primary">{{__('applicationForms.car_side')}} <i style="font-size: 10px" class="fa fa-asterisk text-danger"></i></h6>
                                        </div>
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" id="car_side" name="car_side">
                                            <label class="custom-file-label" for="car_side">{{__('applicationForms.car_side')}}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card mt-3 p-2">
                        <div class="card-header instagram button w-100 border-0 mt-3">
                            <span class="gradient"></span>
                            <b>{{__('applicationForms.job_description') . ' ' .  __('applicationForms.optional')}}</b>
                        </div>
                        <div class="card-body row justify-content-between">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <input type="radio" name="job_description" id="owner" value="{{__('applicationForms.owner')}}">
                                    <label for="owner"><h6>{{__('applicationForms.owner')}}</h6></label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <input type="radio" name="job_description" id="driver" value="{{__('applicationForms.driver')}}">
                                    <label for="driver"><h6>{{__('applicationForms.driver')}}</h6></label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <input type="radio" name="job_description" id="tenant" value="{{__('applicationForms.tenant')}}">
                                    <label for="tenant"><h6>{{__('applicationForms.tenant')}}</h6></label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <input type="radio" name="job_description" id="tenant_self" value="{{__('applicationForms.tenant_self')}}">
                                    <label for="tenant_self"><h6>{{__('applicationForms.tenant_self')}}</h6></label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12 mt-3">
                            <div class="form-group">
                                <input type="submit" class="btn btn-sm btn-block send_application button instagram" value="{{__('applicationForms.send')}}">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@section('inner_js')
    <script src="{{ asset('assets/web/js/lib/toastr.min.js') }}"></script>

    <script>
        $('.send_application').click(async function (e) {
            e.preventDefault();

            let loading = $('.loading');
            loading.removeClass('d-none');

            let form = $('.application_form'),
                data = new FormData(form[0]),
                url = form.attr('action'),
                method = form.attr('method');

            const response=await ajax({
                url,
                data,
                dataType: 'json',
                method,
                contentType: false,
                processData: false,
            });

            if (response.errors) {
                toastr.options.closeButton = true;
                toastr.options.showMethod = 'slideDown';
                toastr.options.hideMethod = 'slideUp';
                toastr.options.closeMethod = 'slideUp';
                toastr.options.closeDuration = 200;
                toastr.error(response.errors);
            }
            if (response.message) {
                toastr.options.closeButton = true;
                toastr.options.showMethod = 'slideDown';
                toastr.options.hideMethod = 'slideUp';
                toastr.options.closeMethod = 'slideUp';
                toastr.options.closeDuration = 200;
                toastr.success(response.message);
                setTimeout(function(){
                    window.location.href = "{{route('registerSuccess')}}";
                }, 2000)
            }
        });

        $('select[name="region_id"]').change(async function (e) {
            e.preventDefault();

            let data = {id: $(this).val()},
                url = "{{route('getGovernorates')}}",
                method = 'get';

            if (data.id !== ''){

                let loading = $('.loading');
                loading.removeClass('d-none');

                const response=await ajax({
                    url,
                    data,
                    dataType: 'html',
                    method,
                    contentType: false,
                    processData: false,
                });

                if (response) {
                    $('select[name="governorate_id"]').html(response);
                }
            }
        });

        $('select[name="car_type"]').change(async function (e) {
            e.preventDefault();

            let data = {id: $(this).val()},
                url = "{{route('getCarLoadAndBox')}}",
                method = 'get';

            if (data.id !== ''){

                let loading = $('.loading');
                loading.removeClass('d-none');

                const response=await ajax({
                    url,
                    data,
                    dataType: 'json',
                    method,
                    contentType: false,
                    processData: false,
                });

                if (response.loads !== null) {
                    let carLoad = $('select[name="car_load"]');
                    carLoad.html(`<option value="">{{__('applicationForms.car_load')}}</option>`);
                    for(let i = 0; i < response.loads.length; i++){
                        carLoad.append(`
                            <option value="`+response.loads[i].id+`">`+response.loads[i].name+`</option>
                        `);
                    }

                }
                if (response.boxes !== null) {
                    let boxType = $('select[name="box_type"]');
                    boxType.html(`<option value="">{{__('applicationForms.box_type')}}</option>`);
                    for(let i = 0; i < response.boxes.length; i++){
                        boxType.append(`
                            <option value="`+response.boxes[i].id+`">`+response.boxes[i].name+`</option>
                        `);
                    }
                }
            }
        });

        $('input[name="code"]').on('cut copy paste keypress keyup keydown click change', function () {
            if ($(this).val().length > 3){
                $('.code_hint').removeClass('d-none');
                setTimeout(function () {
                    $('.code_hint').addClass('d-none');
                }, 5000);
                $(this).val('');
            }
        });

        $('input[name="residence_type"]').click(function(){
            if($(this).val() === '1'){
                $('.guarantor_info').addClass('d-none');
                $('input[name="guarantor_name"]').val('');
                $('input[name="guarantor_phone"]').val('');
                $('input[name="guarantor_work_phone"]').val('');
            } else {
                $('.guarantor_info').removeClass('d-none');
            }
        });
        // Add the following code if you want the name of the file appear on select
        $(".custom-file-input").on("change", function() {
            var fileName = $(this).val().split("\\").pop();
            $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
        });
    </script>
@endsection