@extends('voyager::master')

@section('page_title', __('voyager::generic.'.(isset($dataTypeContent->id) ? 'edit' : 'add')).' '.$dataType->getTranslatedAttribute('display_name_singular'))

@section('css')
    <link rel="stylesheet" href="{{asset('css/selectize.css')}}">

    <meta name="csrf-token" content="{{ csrf_token() }}">
    <style>
        .error {
            color: red;
            font-size: 1rem;
            display: block;
            margin-top: 5px;
        }
    </style>
    <style>
        .panel .mce-panel {
            border-left-color: #fff;
            border-right-color: #fff;
        }

        .panel .mce-toolbar,
        .panel .mce-statusbar {
            padding-left: 20px;
        }

        .panel .mce-edit-area,
        .panel .mce-edit-area iframe,
        .panel .mce-edit-area iframe html {
            padding: 0 10px;
            min-height: 350px;
        }

        .mce-content-body {
            color: #555;
            font-size: 14px;
        }

        .panel.is-fullscreen .mce-statusbar {
            position: absolute;
            bottom: 0;
            width: 100%;
            z-index: 200000;
        }

        .panel.is-fullscreen .mce-tinymce {
            height: 100%;
        }

        .panel.is-fullscreen .mce-edit-area,
        .panel.is-fullscreen .mce-edit-area iframe,
        .panel.is-fullscreen .mce-edit-area iframe html {
            height: 100%;
            position: absolute;
            width: 99%;
            overflow-y: scroll;
            overflow-x: hidden;
            min-height: 100%;
        }

        .error {
            color: red;
            font-size: 1rem;
            display: block;
            margin-top: 5px;
        }

        .img-wrap {
            position: relative;
        }

        .image-div {
            position: relative;
        }
        .img-wrap .remove {
            position: absolute;
            top: 2px;
            left: 20px;
            z-index: 100;
        }
    </style>
@stop

@section('page_header')
    <h1 class="page-title">
        <i class="{{ $dataType->icon }}"></i>
        {{ __('voyager::generic.'.(isset($dataTypeContent->id) ? 'edit' : 'add')).' '.$dataType->getTranslatedAttribute('display_name_singular') }}
    </h1>
    @include('voyager::multilingual.language-selector')
@stop

@section('content')
    <div class="page-content container-fluid">
        <form class="form-edit-add" role="form"
              action="@if(!is_null($dataTypeContent->getKey())){{ route('voyager.'.$dataType->slug.'.update', $dataTypeContent->getKey()) }}@else{{ route('voyager.'.$dataType->slug.'.store') }}@endif"
              method="POST" enctype="multipart/form-data" autocomplete="off">
            <!-- PUT Method if we are editing -->
            @if(isset($dataTypeContent->id))
                {{ method_field("PUT") }}
            @endif
            {{ csrf_field() }}

            <div class="row">
                <div class="col-md-8">
                    <div class="panel panel-bordered">
                    {{-- <div class="panel"> --}}
                        @if (count($errors) > 0)
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $key => $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <div class="panel-heading">
                            <h3 class="panel-title">
                                {{ __('voyager::generic.basic_info') }}
                            </h3>
                            <div class="panel-actions">
                                <a class="panel-action voyager-angle-down" data-toggle="panel-collapse" aria-hidden="true"></a>
                            </div>
                        </div>

                        <div class="panel-body">

                            <div class="form-group">
                                <label for="available_from">{{ __('voyager::seeders.data_rows.available_from') }}</label>
                                {{ old('available_from',$dataTypeContent->available_from ?? '') }}
                                <input type="date" class="form-control" name="available_from" id="available_from" value="{{ old('available_from',$dataTypeContent->available_from ?? '') }}">

                                @error('available_from')
                                <div class="text-danger error-massage">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label for="available_to">{{ __('voyager::seeders.data_rows.available_to') }}</label>

                                <input type="date" class="form-control" name="available_to" id="available_to" value="{{ old('available_to',$dataTypeContent->available_to ?? '') }}">

                                @error('available_to')
                                <div class="text-danger error-massage">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label for="notes">{{ __('voyager::seeders.data_rows.notes') }}</label>

                                <textarea class="form-control" name="notes" id="notes">{{ old('notes',$dataTypeContent->notes ?? '') }}</textarea>

                                @error('notes')
                                <div class="text-danger error-massage">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label for="applied_by">{{ __('voyager::seeders.data_rows.applied_by') }}</label>

                                <select class="form-control select2" name="applied_by" required>
                                    <option disabled value="" selected>---</option>
                                    <option value="freelancer" @if(old('applied_by', $dataTypeContent->applied_by) == 'freelancer') selected="selected" @endif>{{ __('voyager::generic.freelancer') }}</option>
                                    <option value="company" @if(old('applied_by', $dataTypeContent->applied_by) == 'company') selected="selected" @endif>{{ __('voyager::generic.company') }}</option>
                                </select>

                                @error('applied_by')
                                <div class="text-danger error-massage">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label for="freelancer_id">{{ __('voyager::seeders.data_rows.freelancer_id') }}</label>

                                <select class="form-control select2" name="freelancer_id" required>
                                    <option disabled value="" selected>---</option>
                                    @foreach(\App\Models\Freelancer::get() as $freelancer)
                                        <option value="{{ $freelancer->id }}" @if(old('freelancer_id', $dataTypeContent->freelancer_id) == $freelancer->id) selected="selected" @endif>{{ $freelancer->user->name }}</option>
                                    @endforeach
                                </select>

                                @error('freelancer_id')
                                <div class="text-danger error-massage">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label for="completed_by">{{ __('voyager::seeders.data_rows.completed_by') }}</label>

                                <select class="form-control select2" name="completed_by">
                                    <option disabled value="" selected>---</option>
                                    @foreach(\App\Models\User::get() as $user)
                                        <option value="{{ $user->id }}" @if(old('completed_by', $dataTypeContent->completed_by) == $user->id) selected="selected" @endif>{{ $user->name }}</option>
                                    @endforeach
                                </select>

                                @error('completed_by')
                                <div class="text-danger error-massage">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label for="event_id">{{ __('voyager::seeders.data_rows.event_id') }}</label>

                                <select class="form-control select2" id="event_id" name="event_id" required>
                                    <option disabled value="" selected>---</option>
                                    @foreach(\App\Models\Event::get() as $event)
                                        <option value="{{ $event->id }}" @if(old('event_id', $dataTypeContent->eventJobRole?->event_id) == $event->id) selected="selected" @endif>{{ $event->event_name }}</option>
                                    @endforeach
                                </select>

                                @error('event_id')
                                <div class="text-danger error-massage">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label for="event_job_role_id">{{ __('voyager::seeders.data_rows.event_job_role_id') }}</label>

                                <select class="form-control select2" id="event_job_role_id" name="event_job_role_id" required>
                                    <option disabled value="" selected>---</option>

                                </select>

                                @error('event_job_role_id')
                                <div class="text-danger error-massage">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label for="hired_at">{{ __('voyager::seeders.data_rows.hired_at') }}</label>

                                <input type="datetime-local" step="1" class="form-control" name="hired_at" id="hired_at" value="{{ old('hired_at',$dataTypeContent->hired_at ?? '') }}">

                                @error('hired_at')
                                <div class="text-danger error-massage">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label for="marked_completed_at">{{ __('voyager::seeders.data_rows.marked_completed_at') }}</label>

                                <input type="datetime-local" step="1" class="form-control" name="marked_completed_at" id="marked_completed_at" value="{{ old('marked_completed_at',$dataTypeContent->marked_completed_at ?? '') }}">

                                @error('marked_completed_at')
                                <div class="text-danger error-massage">{{ $message }}</div>
                                @enderror
                            </div>

                        </div>

                    </div>

                </div>

                <div class="col-md-4">
                    <div class="panel panel-bordered">
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                {{ __('voyager::generic.status') }}
                            </h3>
                            <div class="panel-actions">
                                <a class="panel-action voyager-angle-down" data-toggle="panel-collapse" aria-hidden="true"></a>
                            </div>
                        </div>

                        <div class="panel-body">
                            <div class="form-group">
                                <label for="invitation_status">{{ __('voyager::seeders.data_rows.invitation_status') }}</label>

                                <select class="form-control select2 @error('invitation_status') is-invalid @enderror" name="invitation_status">
                                    <option selected disabled>{{ __('voyager::generic.choose_status') }}</option>
                                    <option value="pending" {{ (old('invitation_status') == 'pending' || $dataTypeContent->invitation_status == 'pending') ? "selected" : "" }}>{{ __('voyager::generic.pending') }}</option>
                                    <option value="accepted" {{ (old('invitation_status') == 'accepted' || $dataTypeContent->invitation_status == 'accepted') ? "selected" : "" }}>{{ __('voyager::generic.accepted') }}</option>
                                    <option value="rejected" {{ (old('invitation_status') == 'rejected' || $dataTypeContent->invitation_status == 'rejected') ? "selected" : "" }}>{{ __('voyager::generic.rejected') }}</option>
                                </select>

                                @error('invitation_status')
                                <div class="text-danger error-massage">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label for="application_status">{{ __('voyager::seeders.data_rows.application_status') }}</label>

                                <select class="form-control select2 @error('invitation_status') is-invalid @enderror" name="application_status">
                                    <option selected disabled>{{ __('voyager::generic.choose_status') }}</option>
                                    <option value="pending" {{ (old('application_status') == 'pending' || $dataTypeContent->application_status == 'pending') ? "selected" : "" }}>{{ __('voyager::generic.pending') }}</option>
                                    <option value="hired" {{ (old('application_status') == 'hired' || $dataTypeContent->application_status == 'hired') ? "selected" : "" }}>{{ __('voyager::generic.hired') }}</option>
                                    <option value="rejected" {{ (old('application_status') == 'rejected' || $dataTypeContent->application_status == 'rejected') ? "selected" : "" }}>{{ __('voyager::generic.rejected') }}</option>
                                    <option value="cancelled" {{ (old('application_status') == 'cancelled' || $dataTypeContent->application_status == 'cancelled') ? "selected" : "" }}>{{ __('voyager::generic.cancelled') }}</option>
                                </select>

                                @error('application_status')
                                <div class="text-danger error-massage">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label for="completion_status">{{ __('voyager::seeders.data_rows.completion_status') }}</label>

                                <select class="form-control select2 @error('completion_status') is-invalid @enderror" name="completion_status">
                                    <option selected disabled>{{ __('voyager::generic.choose_status') }}</option>
                                    <option value="pending" {{ (old('completion_status') == 'pending' || $dataTypeContent->completion_status == 'pending') ? "selected" : "" }}>{{ __('voyager::generic.pending') }}</option>
                                    <option value="waiting_approval" {{ (old('completion_status') == 'waiting_approval' || $dataTypeContent->completion_status == 'waiting_approval') ? "selected" : "" }}>{{ __('voyager::generic.waiting_approval') }}</option>
                                    <option value="approved" {{ (old('completion_status') == 'approved' || $dataTypeContent->completion_status == 'approved') ? "selected" : "" }}>{{ __('voyager::generic.approved') }}</option>
                                    <option value="under_review" {{ (old('completion_status') == 'under_review' || $dataTypeContent->completion_status == 'under_review') ? "selected" : "" }}>{{ __('voyager::generic.under_review') }}</option>
                                    <option value="rejected" {{ (old('completion_status') == 'rejected' || $dataTypeContent->completion_status == 'rejected') ? "selected" : "" }}>{{ __('voyager::generic.rejected') }}</option>
                                </select>

                                @error('completion_status')
                                <div class="text-danger error-massage">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <button type="submit" class="btn btn-primary pull-right save">
                {{ __('voyager::generic.save') }}
            </button>
        </form>
        <div style="display:none">
            <input type="hidden" id="upload_url" value="{{ route('voyager.upload') }}">
            <input type="hidden" id="upload_type_slug" value="{{ $dataType->slug }}">
        </div>
    </div>
@stop

@section('javascript')
    <script>
        $('document').ready(function () {
            get_event_roles();

            $('#event_id').on('change', function(){
                get_event_roles();
            });
        });

        function get_event_roles(){
            arr = {
                'event_id': $('#event_id').val(),
            };

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type: "get",
                url: "{{route('voyager.event_applications.get_event_roles.ajax')}}",
                data: arr,
                success: function (data) {

                    var data = data;
                    var event_job_role_id = "{{ old('event_job_role_id', $dataTypeContent->event_job_role_id) }}";

                    $('#event_job_role_id').html(` <option selected="" disabled="" value="">choose Role Name</option>`);

                    $.each(data, function( index, value )
                    {
                        $('#event_job_role_id').append(`<option value="`+ value.id +`" `+ ((event_job_role_id == value.id ) ? 'selected' : '' )+`>`+ value.job_role.name +` </option>`);
                    });

                },
                error: function (e) {
                }
            });
        }
    </script>
@stop