@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 editor = new Quill( '.editor' );--}}
{{--        var quill = new Quill( '.editor', {--}}
{{--            modules: {--}}
{{--                toolbar: [--}}
{{--                    [ 'bold', 'italic' ],--}}
{{--                    [ 'link', 'blockquote', 'code-block', 'image' ],--}}
{{--                    [ { list: 'ordered' }, { list: 'bullet' } ]--}}
{{--                ]--}}
{{--            },--}}
{{--            placeholder: 'Write a bit about the job...',--}}
{{--            theme: 'snow'--}}
{{--        } );--}}
{{--    </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>Edit Job "{{ $job->title }}"</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.update', $job->ID ) }}" class="row">--}}
{{--                                    @csrf--}}
{{--                                    {{ method_field( 'PUT' )  }}--}}

{{--                                    <div class="col-xl-6">--}}
{{--                                        <div class="submit-field">--}}
{{--                                            <h5>Job Title</h5>--}}
{{--                                            <input value="{{ $job->title }}" placeholder="e.g. Web Developer" name="title" type="text" class="with-border">--}}
{{--                                        </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', $job->meta->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', $job->meta->start_time ) == $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', $job->meta->candidates_to_hire ) }}" 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 )--}}
{{--                                                    @if ( $term = $job->getTypeAttribute(true) )--}}
{{--                                                        <option {!! $type->term_taxonomy_id === $term->term_taxonomy_id ? 'selected' : '' !!} value="{{ $type->term_taxonomy_id }}">{{ html_entity_decode( $type->term->name ) }}</option>--}}
{{--                                                    @else--}}
{{--                                                        <option value="{{ $type->term_taxonomy_id }}">{{ html_entity_decode( $type->term->name ) }}</option>--}}
{{--                                                    @endif--}}
{{--                                                @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 {!! $job->post_parent === $company->ID ? '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 {!! $category->term_taxonomy_id === $job->categories_id ? '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', $job->meta->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', number_format( $job->meta->hourly_rate, 2 ) ) }}" 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', number_format( $job->meta->daily_rate, 2 ) ) }}" 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>Location</h5>--}}
{{--                                            <div class="input-with-icon">--}}
{{--                                                <div id="autocomplete-container">--}}
{{--                                                    <input class="with-border" id="autocomplete-input" name="location[address]" type="text" data-lat="{{ $job->address ? $job->address['lat'] : request()->input( 'location.latitude' ) }}" data-lng="{{ $job->address ? $job->address['lng'] : request()->input( 'location.longitude' ) }}" data-value="{{ $job->address ? $job->address['address'] : request()->input( 'location.address' ) }}">--}}
{{--                                                    --}}{{--<input id="autocomplete-input" class="with-border" type="text" placeholder="Type Address">--}}
{{--                                                    <input type="hidden" id="lat" name="location[latitude]" value="{{ $job->address ? $job->address['lat'] : request()->input( 'location.latitude' ) }}">--}}
{{--                                                    <input type="hidden" id="lng" name="location[longitude]" value="{{ $job->address ? $job->address['lng'] : 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>Skills <span>(optional)</span>--}}
{{--                                                <i class="help-icon" data-tippy-placement="right" title="Maximum of 10 tags"></i>--}}
{{--                                            </h5>--}}
{{--                                            <div class="keywords-container">--}}
{{--                                                <input value="{{ $job->skills_str }}" class="tags" type="hidden" id="bog" name="skills">--}}

{{--                                                <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">--}}
{{--                                            <div class="submit-field">--}}
{{--                                                <h5>Job Description</h5>--}}
{{--                                                <input type="hidden" value="{{ $job->post_content }}" name="description">--}}
{{--                                                <div id="description" class="editor">{!! clean( $job->post_content ) !!}</div>--}}
{{--                                                --}}{{--                                            <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>--}}

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


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

            <job-form
                    :form-data="{{ (new \App\Http\Resources\API\PublicJobResource($job))->toJson( request() ) }}"
                    form-url="{{ route( 'jobs.update', $job->ID ) }}"
                    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