@extends( 'layout.dashboard' )

@push( 'styles' )
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyACthij0mF2Hhs6ETMGkQ5eMiB6wdCBtC8&libraries=places"></script>
    <script>
        window.loadGoogle = true;
    </script>
@endpush

@push( 'scripts' )
    <script>
        var keyDownTimeout = null;
        var rateCalculationTimeout = null;
        var errors = {};

//        jQuery( 'input[name=hours_per_day]' ).on( 'keydown', function () {
//            var input = $( this );
//
//            if ( errors.hasOwnProperty( 'hours_per_day' ) ) {
//                delete errors.hours_per_day;
//            }
//
//            input.closest( '.submit-field' ).removeClass( 'error' ).find( 'label' ).remove();
//
//            if ( keyDownTimeout ) {
//                clearTimeout( keyDownTimeout );
//            }
//
//            keyDownTimeout = setTimeout( function () {
//                var working_hours = parseFloat( $( input ).val() );
//
//                if ( working_hours > 12 ) {
//                    errors.hours_per_day = true;
//
//                    var errorLabel = $( '<label>' ).text( 'Sorry, no work shift can exceed 12 working hours in a single day.' );
//
//                    input.closest( '.submit-field' ).addClass( 'error' ).append( errorLabel );
//                }
//            }, 700 );
//        } );

        jQuery( 'input[data-calculate-rates]' ).on( 'keydown', function ( e ) {
            var target = $( e.target );
            var rateFields = {
                hours_per_day: $( 'input[name="hours_per_day"]' ),
                hourly_rate: $( 'input[name="hourly_rate"]' ),
                day_rate: $( 'input[name="day_rate"]' )
            };

            if ( rateCalculationTimeout ) {
                clearTimeout( rateCalculationTimeout );
            }

            rateCalculationTimeout = setTimeout( function () {
                var working_hours = parseFloat( $( rateFields.hours_per_day ).val() );
                var hourly_rate = parseFloat( $( rateFields.hourly_rate ).val() );
                var day_rate = parseFloat( $( rateFields.day_rate ).val() );

                if ( target.is( rateFields.day_rate ) ) {
                    if ( working_hours && day_rate ) {
                        rateFields.hourly_rate.val( ( day_rate / working_hours ).toFixed(2) );
                    }
                }

                if ( target.is( rateFields.hourly_rate ) ) {
                    if ( working_hours && hourly_rate ) {
                        rateFields.day_rate.val( ( hourly_rate * working_hours ).toFixed(2) );
                    }
                }

                if ( target.is( rateFields.hours_per_day ) ) {
                    if ( working_hours && hourly_rate ) {
                        rateFields.day_rate.val( ( hourly_rate * working_hours ).toFixed(2) );
                    }

                    if ( working_hours && day_rate ) {
                        rateFields.hourly_rate.val( ( day_rate / working_hours ).toFixed(2) );
                    }
                }
            }, 700 );
        } );

//        jQuery( document ).on( 'submit', 'form', function () {
//            if ( errors.length > 0 ) {
//                document.body.scrollTop = document.documentElement.scrollTop = 0;
//
//                return false;
//            }
//
//            var about = document.querySelector( 'input[name=description]' );
//
//            about.value = JSON.stringify( quills[0].getContents() );
//        } );
    </script>
@endpush


@push( 'styles' )
    <!-- Include stylesheet -->
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
@endpush

{{--@push( 'scripts' )--}}
{{--    <script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>--}}
{{--    <script>--}}
{{--        var quills = {};--}}

{{--        //        var editor = new Quill( '.editor' );--}}
{{--        $( '.editor' ).each( function( index, element ) {--}}
{{--            quills[0] = new Quill( element, {--}}
{{--                modules: {--}}
{{--                    toolbar: [--}}
{{--                        [ 'bold', 'italic' ],--}}
{{--                        [ 'link', 'blockquote', 'code-block', 'image' ],--}}
{{--                        [ { list: 'ordered' }, { list: 'bullet' } ]--}}
{{--                    ]--}}
{{--                },--}}
{{--                placeholder: 'Write a bit about the job...',--}}
{{--                theme: 'snow'--}}
{{--            } );--}}

{{--            console.log( $( element ).next().data( 'value' ) );--}}

{{--            if ( $( element ).next().data( 'value' ) ) {--}}
{{--                console.log('attempting to set' );--}}
{{--                quills[0].setContents( $( element ).next().data( 'value' ) );--}}
{{--            }--}}
{{--        });--}}
{{--    </script>--}}
{{--@endpush--}}

@section( 'content' )

    <!-- Dashboard Content
	================================================== -->
    <div class="dashboard-content-container" data-simplebar>
        <div class="dashboard-content-inner">

            <!-- Dashboard Headline -->
            <div class="dashboard-headline">
                <h3>Post a Job</h3>

            </div>

{{--            <!-- Row -->--}}
{{--            <div class="row">--}}

{{--                <!-- Dashboard Box -->--}}
{{--                <div class="col-xl-12">--}}
{{--                    <div class="dashboard-box margin-top-0">--}}

{{--                        <!-- Headline -->--}}
{{--                        <div class="headline">--}}
{{--                            <h3><i class="icon-feather-folder-plus"></i> Job Information</h3>--}}
{{--                        </div>--}}

{{--                        <div class="content with-padding padding-bottom-10">--}}
{{--                            @if ( $user->companies->count() === 0 )--}}
{{--                                <p>You must add a company before you can start posting job listings. To do so,--}}
{{--                                    <a href="{{ route( 'companies.create' ) }}">click here</a>.</p>--}}
{{--                            @else--}}
{{--                                <form method="post" action="{{ route( 'jobs.store' ) }}" class="row">--}}
{{--                                    @csrf--}}

{{--                                    <div class="col-xl-6">--}}
{{--                                        <div class="submit-field character-count">--}}
{{--                                            <h5>Job Title</h5>--}}
{{--                                            <input data-max="30" placeholder="e.g. Web Developer" value="{{ old( 'title' ) }}" name="title" type="text" class="with-border">--}}

{{--                                            <p>Maximum Characters Remaining:--}}
{{--                                                <span class="character-count-label" id="title-character-count">120</span>--}}
{{--                                            </p>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}

{{--                                    <div class="col-xl-3">--}}
{{--                                        <div class="submit-field">--}}
{{--                                            <h5>Start Date</h5>--}}
{{--                                            <input id="datepicker" placeholder="dd/mm/yyyy" value="{{ old( 'start_date' ) }}" name="start_date" type="text" class="datepicker with-border">--}}
{{--                                        </div>--}}
{{--                                    </div>--}}

{{--                                    <div class="col-xl-3">--}}
{{--                                        <div class="submit-field">--}}
{{--                                            <h5>Start Time</h5>--}}
{{--                                            <select name="start_time" class="select2 with-border" data-size="7" title="Select Start Time">--}}
{{--                                                @foreach( [ '6:00AM', '6:30AM', '7:00AM', '7:30AM', '8:00AM', '8:30AM', '9:00AM', '9:30AM', '10:00AM', '10:30AM', '11:00AM', '11:30AM', '12:00PM', '12:30PM', '1:00PM', '1:30PM', '2:00PM', '2:30PM', '3:00PM', '3:30PM', '4:00PM', '4:30PM', '5:00PM', '5:30PM', '6:00PM', '6:30PM', '7:00PM', '7:30PM', '8:00PM', '8:30PM', '9:00PM', '9:30PM', '10:00PM', '10:30PM', '11:00PM', '11:30PM', '12:00AM', '12:30AM', '1:00AM', '1:30AM', '2:00AM', '2:30AM', '3:00AM', '3:30AM', '4:00AM', '4:30AM', '5:00AM', '5:30AM',  ] as $type )--}}
{{--                                                    <option {!! old( 'start_time', '8:30AM' ) == $type ? 'selected="selected"' : '' !!}  value="{{ $type }}">{{ $type }}</option>--}}
{{--                                                @endforeach--}}
{{--                                            </select>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}

{{--                                    <div class="col-xl-4">--}}
{{--                                        <div class="submit-field">--}}
{{--                                            <h5>Candidates To Hire</h5>--}}
{{--                                            <input placeholder="1" value="{{ old( 'candidates_to_hire', 1 ) }}" name="candidates_to_hire" type="number" class="with-border">--}}
{{--                                        </div>--}}
{{--                                    </div>--}}

{{--                                    <div class="col-xl-4 d-none">--}}
{{--                                        <div class="submit-field">--}}
{{--                                            <h5>Job Type</h5>--}}
{{--                                            <select name="job_type" class="select2 with-border" data-size="7" title="Select Job Type">--}}
{{--                                                @foreach( $types as $type )--}}
{{--                                                    <option {!! old( 'job_type', 4 ) == $type->term_taxonomy_id ? 'selected="selected"' : '' !!}  value="{{ $type->term_taxonomy_id }}">{{ html_entity_decode( $type->term->name ) }}</option>--}}
{{--                                                @endforeach--}}
{{--                                            </select>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}

{{--                                    <div class="col-xl-4">--}}
{{--                                        <div class="submit-field">--}}
{{--                                            <h5>Company</h5>--}}
{{--                                            <select name="company" class="select2 with-border" data-size="7" title="Select Job Type">--}}
{{--                                                @if( $user->companies->count() > 0)--}}
{{--                                                    @foreach( $user->companies as $company )--}}
{{--                                                        <option {!! old( 'company' ) == $company->ID ? 'selected="selected"' : '' !!} value="{{ $company->ID }}">{{ $company->name }}</option>--}}
{{--                                                    @endforeach--}}
{{--                                                @else--}}
{{--                                                    <option value="-1">No companies found</option>--}}
{{--                                                @endif--}}
{{--                                            </select>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}

{{--                                    <div class="col-xl-4">--}}
{{--                                        <div class="submit-field">--}}
{{--                                            <h5>Job Category</h5>--}}
{{--                                            <select name="job_category" class="select2 with-border" data-size="7" title="Select Category">--}}
{{--                                                @foreach( $categories as $category )--}}
{{--                                                    <option {!! old( 'job_category' ) == $category->term_taxonomy_id ? 'selected="selected"' : '' !!} value="{{ $category->term_taxonomy_id }}">{{ html_entity_decode( $category->term->name ) }}</option>--}}
{{--                                                @endforeach--}}
{{--                                            </select>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}


{{--                                    <div class="col-xl-4">--}}
{{--                                        <div class="submit-field">--}}
{{--                                            <h5>Hours per day</h5>--}}
{{--                                            <div class="row">--}}
{{--                                                <div class="col-xl-12">--}}
{{--                                                    <div class="input-with-icon ">--}}
{{--                                                        <input step="0.01" name="hours_per_day" data-calculate-rates="true" min="1" value="{{ old( 'hours_per_day' ) }}" class="with-border" type="number" max="12" placeholder="Hours">--}}
{{--                                                        <i class="currency">per day</i>--}}
{{--                                                    </div>--}}
{{--                                                </div>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}

{{--                                    <div class="col-xl-4">--}}
{{--                                        <div class="submit-field">--}}
{{--                                            <h5>Hourly Rate</h5>--}}
{{--                                            <div class="row">--}}
{{--                                                <div class="col-xl-12">--}}
{{--                                                    <div class="input-with-icon">--}}
{{--                                                        <i class="currency" style="left: 15px; right: unset;">$</i>--}}
{{--                                                        <input style="padding-left:35px;" step="0.01" name="hourly_rate" data-calculate-rates="true" value="{{ old( 'hourly_rate' ) }}" class="with-border" type="number" placeholder="Enter hourly rate">--}}
{{--                                                        <i class="currency">CAD</i>--}}
{{--                                                    </div>--}}
{{--                                                </div>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}


{{--                                    <div class="col-xl-4">--}}
{{--                                        <div class="submit-field">--}}
{{--                                            <h5>Day Rate</h5>--}}
{{--                                            <div class="input-with-icon">--}}
{{--                                                <i class="currency" style="left: 15px; right: unset;">$</i>--}}
{{--                                                <input style="padding-left:35px;" name="day_rate" data-calculate-rates="true" value="{{ old( 'day_rate' ) }}" class="with-border" type="text" placeholder="Rate">--}}
{{--                                                <i class="currency">CAD</i>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}

{{--                                    <div class="col-xl-6">--}}
{{--                                        <div class="submit-field">--}}
{{--                                            <h5>Work Location</h5>--}}
{{--                                            <div class="input-with-icon">--}}
{{--                                                <div id="autocomplete-container">--}}
{{--                                                    <input class="with-border" id="autocomplete-input" name="location[address]" type="text" value="{{ old( 'location[address]', request()->input( 'address' ) ) }}">--}}
{{--                                                    --}}{{--<input id="autocomplete-input" class="with-border" type="text" placeholder="Type Address">--}}
{{--                                                    <input type="hidden" id="lat" name="location[latitude]" value="{{ old( 'location[latitude]', request()->input( 'location.latitude' ) ) }}">--}}
{{--                                                    <input type="hidden" id="lng" name="location[longitude]" value="{{ old( 'location[longitude]', request()->input( 'location.longitude' ) ) }}">--}}
{{--                                                </div>--}}
{{--                                                <i class="icon-material-outline-location-on"></i>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}

{{--                                    <div class="col-xl-6">--}}
{{--                                        <div class="submit-field">--}}
{{--                                            <h5>Tags <span>(optional)</span>--}}
{{--                                                <i class="help-icon" data-tippy-placement="right" title="Maximum of 10 tags"></i>--}}
{{--                                            </h5>--}}
{{--                                            <div class="keywords-container">--}}
{{--                                                <input class="tags" value="{{ old( 'tags' ) }}" type="hidden" id="bog" name="tags">--}}

{{--                                                <div class="keyword-input-container">--}}
{{--                                                    <input type="text" class="keyword-input with-border" placeholder="e.g. job title, responsibilites" />--}}
{{--                                                    <button type="button" class="keyword-input-button ripple-effect">--}}
{{--                                                        <i class="icon-material-outline-add"></i></button>--}}
{{--                                                </div>--}}
{{--                                                <div class="keywords-list"><!-- keywordes go here --></div>--}}
{{--                                                <div class="clearfix"></div>--}}
{{--                                            </div>--}}

{{--                                        </div>--}}
{{--                                    </div>--}}

{{--                                    <div class="col-xl-12">--}}
{{--                                        <div class="submit-field">--}}
{{--                                            <h5>Job Description</h5>--}}
{{--                                            <div id="description" class="editor"></div>--}}
{{--                                            <input type="hidden" data-value="{{ old( 'description' ) }}" name="description">--}}
{{--                                            --}}{{--                                            <textarea minlength="120" data-character-count="#description-character-count" data-maximum-character-count="120" name="description" cols="30" rows="5" class="with-border">{{ old( 'description' ) }}</textarea>--}}
{{--                                            <p>Minimum Characters Remaining:--}}
{{--                                                <span id="description-character-count">120</span>--}}
{{--                                            </p>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}

{{--                                    <div class="col-xl-12">--}}
{{--                                        <button type="submit" class="button ripple-effect big margin-top-30">--}}
{{--                                            <i class="icon-feather-plus"></i> Post a Job--}}
{{--                                        </button>--}}
{{--                                    </div>--}}
{{--                                </form>--}}
{{--                            @endif--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}


{{--            </div>--}}
{{--            <!-- Row / End -->--}}

            <job-form
                    :data="{}"
                    form-url="{{ route( 'jobs.store' ) }}"
                    inline-template>
            @include( 'jobs.form-elements' )
            </job-form>

            <!-- Footer -->
            <div class="dashboard-footer-spacer"></div>
            <div class="small-footer margin-top-15">
                <div class="small-footer-copyrights">
                    © {{ date('Y') }} <strong>{{ env( 'APP_NAME' ) }}</strong>. All Rights Reserved.
                </div>
                <ul class="footer-social-links">
                    <li>
                        <a href="#" title="Facebook" data-tippy-placement="top">
                            <i class="icon-brand-facebook-f"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" title="Twitter" data-tippy-placement="top">
                            <i class="icon-brand-twitter"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" title="Google Plus" data-tippy-placement="top">
                            <i class="icon-brand-google-plus-g"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" title="LinkedIn" data-tippy-placement="top">
                            <i class="icon-brand-linkedin-in"></i>
                        </a>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <!-- Footer / End -->

        </div>
    </div>
    <!-- Dashboard Content / End -->

@endsection