@extends('front/layouts/main')

@section('title')
{{ @trans('movement.mover_profile') }}
@endsection

@section('content')
    <main class="mover-profile-page">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8 col-md-10">
                    <div class="main-content">
                        <form id="storeMover" action="{{ route('front.mover.store') }}" method="post">@csrf
                            <div class="box white">
                                <div class="title-wrapper">
                                    <h2 class="box-title">{{ @trans('movement.create_your_mover_profile') }}</h2>
                                </div>
                                <div class="form-group d-flex align-items-center flex-wrap">
                                    <label class="mr-auto">{{ @trans('movement.creating_a_mover_profile_for') }}&nbsp;&nbsp;&nbsp;</label>
                                    <div class="radio-btn-wrapper d-flex">
                                        <div class="custom-control custom-radio radio-as-btn m-0 p-0">
                                            <input type="radio" class="custom-control-input" id="person" name="mover_type" value="person" checked="checked" />
                                            <label class="custom-control-label" for="person">{{ @trans('movement.a_person') }}</label>
                                        </div>
                                        <div class="custom-control custom-radio radio-as-btn p-0">
                                            <input type="radio" class="custom-control-input" id="company" name="mover_type" value="company" />
                                            <label class="custom-control-label" for="company">{{ @trans('movement.a_company') }}</label>
                                        </div>
                                    </div>
                                </div>
                                <p class="gray small-font-size company_fields">{{ @trans('movement.mover_profile_notes') }}</p>
                                <div class="form-group">
                                    <div class="media align-items-center">
                                        <div class="custom-file upload-pro-pic mr-2 rounded-circle">
                                            <input type="hidden" name="profile_image3" id="profile_image3" value="{{$userProfiles->profile_image}}" />
                                            <input type="hidden" name="profile_image2" id="profile_image2" value="" />
                                            <input type="file" class="custom-file-input rounded-circle" id="profile_image" name="profile_image" accept=".png,.jpeg,.jpg" style="display: none;">
                                            <label class="custom-file-label rounded-circle p-0" for="profile_image">
                                                <span class="material-icons">edit</span>
                                                @if(!empty($userProfiles->profile_image))
                                                <img id="output" style="width:100%; height:100%;" class="fit-img rounded-circle" src="{{auth()->user()->profile_image_formatted}}" alt="{{ @trans('movement.upload') }}">
                                                @else
                                                <img id="output" style="width:100%; height:100%;" class="fit-img rounded-circle" src="{{asset('/img/user.png')}}" alt="{{ @trans('movement.upload') }}">
                                                @endif   
                                            </label>
                                            
                                        </div>
                                        <div class="media-body">
                                            <p class="gray small-font-size mb-1">{{ @trans('movement.upload_you_profile_picture') }}</p>
                                            <p class="gray xxs-font-size m-0">{{ @trans('movement.upload_a_proffessional') }}</p>
                                        </div>
                                    </div>                                      
                                </div>
                                <div class="row">
                                    <div class="col-sm">
                                        <div class="form-group">
                                            <label class="control-label">{{ @trans('movement.first_name') }}</label>
                                            <input type="text" id="first_name" name="first_name" value="{{$userProfiles->first_name}}" class="form-control" placeholder="{{ @trans('movement.first_name') }}" />
                                        </div>
                                    </div>
                                    <div class="col-sm">
                                        <div class="form-group">
                                            <label class="control-label">{{ @trans('movement.last_name') }}</label>
                                            <input type="text" id="last_name" name="last_name" value="{{$userProfiles->last_name}}" class="form-control" placeholder="{{ @trans('movement.last_name') }}" />
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label class="control-label d-flex">{{ @trans('movement.mover_profile') }}<span class="ml-auto gray xs-font-size">(<span id="mdcount">0</span>/300 {{ @trans('movement.characters') }})</span></label>
                                            <textarea id="bio_description" name="bio_description" onkeyup="countChar(this, 'mdcount', 301)" class="form-control" rows="3" maxlength="300" placeholder="{{ @trans('movement.provide_a_brief_desc') }}"></textarea>
                                            <label style="display: none;"></label>
                                        </div>
                                    </div>
                                </div>                               
                                <div class="row company_fields">
                                    <div class="col-sm">
                                        <div class="form-group">
                                            <label class="control-label">{{ @trans('movement.company_name') }}</label>
                                            <input type="text" id="company_name" name="company_name" class="form-control" placeholder="{{ @trans('movement.company_name') }}" value="{{old('company_name')}}" />
                                        </div>
                                    </div>
                                    <div class="col-sm">
                                        <div class="form-group">
                                            <label class="control-label">{{ @trans('movement.company_website') }}</label>
                                            <input type="url" id="company_website" name="company_website" class="form-control" placeholder="{{ @trans('movement.company_website') }}" value="{{old('company_website')}}" />
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label class="control-label d-flex">{{ @trans('movement.company_description') }}<span class="ml-auto gray xs-font-size">(<span id="mccount">0</span>/300 {{ @trans('movement.characters') }})</span></label>
                                            <textarea id="company_description" name="company_description" onkeyup="countChar(this, 'mccount', 301)" maxlength="300" class="form-control" rows="3" placeholder="{{ @trans('movement.company_description') }}">{{old('company_description')}}</textarea>
                                            <label style="display: none;"></label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group d-flex align-items-center flex-wrap">
                                    <label class="mr-auto">{{ @trans('movement.speaker_inquieres') }}&nbsp;&nbsp;&nbsp;</label>
                                    <div class="radio-btn-wrapper d-flex">
                                        <div class="custom-control custom-radio radio-as-btn m-0 p-0">
                                            <input type="radio" class="custom-control-input" id="yes" name="is_speaker" value="1" checked="checked" />
                                            <label class="custom-control-label" for="yes">{{ @trans('movement.yes') }}</label>
                                        </div>
                                        <div class="custom-control custom-radio radio-as-btn p-0">
                                            <input type="radio" class="custom-control-input" id="no" name="is_speaker" value="0" />
                                            <label class="custom-control-label" for="no">{{ @trans('movement.no') }}</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="is_speaker">
                                    <p class="gray small-font-size">{{ @trans('movement.speaker_inquieres_desc') }}</p>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group select btm-arrow">
                                                <label class="control-label">{{ @trans('movement.hourly_rate_range') }}</label>
                                                <select class="form-control select-two" id="hourly_rate_range" name="hourly_rate_range">
                                                    <option value="">{{ @trans('movement.select_range') }}</option>
                                                    <option value="TZS 5,000 – 10,000">TZS 5,000 – 10,000</option>
                                                    <option value="TZS 10,000 – 20,000">TZS 10,000 – 20,000</option>
                                                    <option value="TZS 20,000 – 30,000">TZS 20,000 – 30,000</option>
                                                    <option value="TZS 30,000 – 45,000">TZS 30,000 – 45,000</option>
                                                    <option value="TZS 50,000 – 75,000">TZS 50,000 – 75,000</option>
                                                    <option value="TZS 75,000 – 100,000">TZS 75,000 – 100,000</option>
                                                    <option value="TZS 100,000 – 150,000">TZS 100,000 – 150,000</option>
                                                    <option value="TZS 150,000 +">TZS 150,000 +</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label class="control-label">Daily Rate (Hourly Ratee X 8 Hours a
                                                     day)</label>
                                                 <input type="text" class="form-control" name="daily_rate"
                                                     id="daily_rate" disabled="disabled" />
                                                </div>
                                         </div>
                                    </div>
                                </div>
                            </div>
                            <div class="text-center">
                                <input type="submit" name="submit" id="submit" class="btn btn-em submitBtn" value="{{ @trans('movement.lets_get_started') }}">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <div id="uploadimageModal" class="modal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="title-wrapper">
                        <h2 class="box-title">{{ @trans('movement.crop_profile_image') }}</h2>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="row">
                        <div class="col-md-8 text-center">
                            <div id="image" style="width:350px; margin-top:30px"></div>
                        </div>
                        <!-- <div class="col-md-4" style="padding-top:30px;">
                            <br />
                            <br />
                            <br />
                        </div> -->
                    </div>
                </div>
                <div class="modal-footer d-flex justify-content-between">
                    <button type="button" class="btn btn-bordered w-50" data-dismiss="modal">{{ @trans('movement.cancel') }}</button>
                    <button class="btn btn-transparent w-50 crop_image">{{ @trans('movement.crop_upload') }}</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('pageJs')
<script type="text/javascript" src="{{ asset('js/vendor/jsvalidation.min.js') }}"></script>
{!! JsValidator::formRequest('App\Http\Requests\Movement\StoreFrontMover', '#storeMover') !!}
<script src="{{ asset('js/front/movement/front_mover.js') }}"></script>
@endpush

@push('pageJs')

<script>
    @if(Session::has('message'))
    Snackbar.show({
        pos: 'bottom-right',
        text: "{!! session('message') !!}",
        actionText: "{{ @trans('movement.okay') }}"
    });
    @endif
    $(document).ready(function() {
        $('#hourly_rate_range').on('change', function() {
            var hourlyRate = $('#hourly_rate_range').val();
            if (hourlyRate == 'TZS 5,000 – 10,000') {
                $('#daily_rate').val('TZS 40,000 - 80,000');
            } else if (hourlyRate == 'TZS 10,000 – 20,000') {
                $('#daily_rate').val('TZS 80,000 - 160,000');
            } else if (hourlyRate == 'TZS 20,000 – 30,000') {
                $('#daily_rate').val('TZS 160,000 - 240,000');
            } else if (hourlyRate == 'TZS 30,000 – 45,000') {
                $('#daily_rate').val('TZS 240,000 - 360,000');
            } else if (hourlyRate == 'TZS 50,000 – 75,000') {
                $('#daily_rate').val('TZS 400,000 - 600,000');
            } else if (hourlyRate == 'TZS 75,000 – 100,000') {
                $('#daily_rate').val('TZS 600,000 - 800,000');
            } else if (hourlyRate == 'TZS 100,000 – 150,000') {
                $('#daily_rate').val('TZS 800,000 - 1,200,000');
            } else if (hourlyRate == 'TZS 150,000 +') {
                $('#daily_rate').val('TZS 1,200,000 +');
            }  else{
                $('#daily_rate').val('');
            }

        });

        $('#submit').click(function()
        {
            if($('#storeMover').valid())
            {
                $(".submitBtn").val("Please Wait...");            
            }
        });

        $image_crop = $('#image').croppie({
            enableExif: true,
            viewport: {
                width: 375,
                height: 375,
                type: 'square' //square circle
            },
            boundary: {
                width: 467,
                height: 467
            }
        });

        $(document).on('change', '#profile_image', function() {
            var reader = new FileReader();
            reader.onload = function(event) {
                $image_crop.croppie('bind', {
                    url: event.target.result
                }).then(function() {
                    console.log('jQuery bind complete');
                });
            }
            reader.readAsDataURL(this.files[0]);
            $('#uploadimageModal').modal('show');
        });

        $(document).on('click', '.crop_image', function(event) {
            $image_crop.croppie('result', {
                type: 'canvas',
                size: 'viewport'
            }).then(function(response) {
                $("#output").attr('src', response);
                $('#uploadimageModal').modal('hide');
                $("#profile_image2").val(response)                
                //showLoader();
                /*$.ajax({
                    url: "{{route('front.profile.uploadprofile')}}",
                    type: "POST",
                    data: {
                        "_token": "{{csrf_token()}}",
                        "image": response
                    },
                    success: function(data) {
                        hideLoder();
                        $("#output").attr('src', data.image);
                        $('#uploadimageModal').modal('hide');
                        $("#progressBarVal").attr("value", data.score);
                        $("#progressBarText").html(data.score);
                    }
                });*/
            })
        });
    });

    /* $(document).on('click','.submitBtn', function() {
        if($('#storeMover').valid())
        {
            $(".submitBtn").attr("disabled", true).val("Please Wait...");
        }
    });*/
</script>
@endpush