@php
    $medium_col_1 = 'medium-push-1 medium-4';
    $medium_col_2 = 'medium-7 columns end';
@endphp
<div id="modal" _="on closeModal add .closing then wait for animationend then remove me" class="edit">
    <div class="modal-underlay" _="on click trigger closeModal"></div>

    <div id="modal-content" class="modal-content">

        @if (request()->input('alt') == 1)
            <form hx-put="{{ url('/api/v1/service/update/' . $service->id) }}" hx-target="#modal-content" hx-swap="innerHTML">
        @else
            <form action="/revenue/report/update" method="post">
        @endif
            @csrf

            {!! Form::hidden('service_log_id', $service->id); !!}
            {!! Form::hidden('referral', $referral); !!}
            {!! Form::hidden('modal', 1); !!}

            <h1 title="{{ $service->id }}" style="text-transform: uppercase; font-size: 12px;">
                Editing Service Event
                @if (auth()->id() === 1)
                    #{{ $service->id }}
                @endif
            </h1>

            @component('components.taskDetails', ['service' => $service])@endcomponent

            <div class="row ">
                <div class="small-5 {{ $medium_col_1 }} columns">
                    <label id="select-gate">Gate</label>
                </div>
                <div class="small-7 {{ $medium_col_2 }}">
                    {!! Form::select('gate_id', $gates, old('gate_id', $service->gate_id ?? 0), ['id' => 'select-gate', 'placeholder' => 'Select Gate', 'required' => 'required']); !!}
                </div>
            </div>

            <div class="row ">
                <div class="small-5 {{ $medium_col_1 }} columns">
                    <label for="service_crew_size" class="inline right">Crew Size</label>
                </div>
                <div class="small-7 {{ $medium_col_2 }}">
                    {!! Form::number('service_crew_size', old('service_crew_size', $service->service_crew_size ?? null), ['id' => 'service_crew_size', 'placeholder' => 'Crew Size', 'required' => 'required']); !!}
                </div>
            </div>

            <div class="row">
                <div class="small-5 {{ $medium_col_1 }} columns">
                    <label for="start" class="inline right">Start Date &amp; Time</label>
                </div>
                <div class="small-7 {{ $medium_col_2 }}">
                    {!! Form::text('start', old('start', Carbon\Carbon::parse($service->start)->format('Y-m-d H:i') ?? null), ['id' => 'start', 'class' => 'datetimepicker', 'placeholder' => 'YYYY-MM-DD HH:MM', 'required' => 'required']); !!}
                    {!! Form::hidden('start_seconds', old('start', Carbon\Carbon::parse($service->start)->format('s') ?? '00')); !!}
                </div>
            </div>

            <div class="row">
                <div class="small-5 {{ $medium_col_1 }} columns">
                    <label for="stop" class="inline right">Stop Date &amp; Time</label>
                </div>
                <div class="small-7 {{ $medium_col_2 }}">
                    {!! Form::text('stop', old('stop', Carbon\Carbon::parse($service->stop)->format('Y-m-d H:i') ?? null), ['id' => 'stop', 'class' => 'datetimepicker', 'placeholder' => 'YYYY-MM-DD HH:MM', 'required' => 'required']); !!}
                    {!! Form::hidden('stop_seconds', old('stop', Carbon\Carbon::parse($service->stop)->format('s') ?? '00')); !!}
                </div>
            </div>

            <div class="row">
                <div class="small-5 {{ $medium_col_1 }} columns">
                    <label for="rate" class="inline right">Rate <small>({{ $service->default_rate ?? 'No default' }})</small></label>
                </div>
                <div class="small-7 {{ $medium_col_2 }} columns">
                    <div class="row collapse">
                        <div class="small-1 columns">
                            <span class="prefix">$</span>
                        </div>
                        <div class="small-11 end columns">
                            {!! Form::number('adjusted_rate', old('adjusted_rate', $service->adjusted_rate ?? null), ['id' => 'rate', 'placeholder' => 'Adjusted Rate', 'step' => 'any', 'required' => 'required']); !!}
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="small-12 medium-push-1 medium-10 end columns">
                    <textarea name="note" placeholder="Notes">{!! $service->note !!}</textarea>
                </div>
            </div>

            <div class="row">
                <div class="small-12 medium-push-1 medium-10 end columns">
                    {!! Form::hidden('approved', 'false'); !!}
                    @if ($service->manager_approval)
                        <div class="alert-box alert-info">Approved on {{ $service->manager_approval->created_at }} by {{ $service->manager_approval->user->username }}</div>
                    @elseif (auth()->user()->userMeta->canApprove)
                        <label><input type="checkbox" name="approved" value="true" /> Approve on Update</label>
                    @endif
                </div>
            </div>

            <hr />

            @if (isset($service) && $service->id === $latest->id)
                Adjusting the date will update the next service date (+{{ $service->task->cycle }} days). Currently, scheduled for {{ $schedule->date }}.
                    {!! Form::hidden('schedule_id', $schedule->id); !!}
                    {!! Form::hidden('schedule_cycle', $service->task->cycle); !!}
            @else
                This is not the latest entry for this task and tail. No schedules will be adjusted.
            @endif

            <hr />

            <div class="row">
                <div class="small-6 columns" style="padding-top: 8px;">
                    <a _="on click trigger closeModal" class="button secondary tiny">Close without saving</a>
                </div>
                <div class="small-6 columns text-right">
                    <button class="button primary" name="cmd" value="update" >Update</button>
                </div>
            </div>

        </form>

        @if (auth()->user()->legacy->group_id < 3)
            <hr style="margin: 0 0 8px 0;" />

            <div class="row">
                <div class="small-12 columns">

                    <div class="row">
                        <!--
                        <div class="small-6 columns text-right">
                            <form hx-put="{{ url('/api/v1/service/cancel/' . $service->id) }}" hx-target="this" hx-swap="outerHTML">
                                <button class="button secondary tiny" name="cmd" value="cancel">Cancel</button>
                            </form>
                        </div>
                        -->
                            <div class="small-2 columns text-left">
                                <form hx-delete="{{ url('/api/v1/service/delete/' . $service->id) }}" hx-target="#modal-content" hx-swap="innerHTML">
                                    @if (isset($service) && $service->id === $latest->id)
                                        {!! Form::hidden('schedule_id', $schedule->id); !!}
                                        {!! Form::hidden('schedule_cycle', $service->task->cycle); !!}
                                    @endif
                                    <button class="button alert tiny" name="cmd" value="delete">Delete</button>
                                </form>
                            </div>
                            <div class="small-10 columns text-left">
                                @if (isset($service) && $service->id === $latest->id)
                                    <p>Deleting this entry will restore the previous schedule date of {{ $service->scheduled_date }}.</p>
                                @else
                                    <p>This is not the latest entry. No schedules will be adjusted. Next scheduled service, {{ $schedule->previously_scheduled }}.</p>
                                @endif
                            </div>
                    </div>

                </div>
            </div>
        @endif

    </div>

</div>

<script>
    $('.datetimepicker').datetimepicker({
        maxDate: '+1d',
        dateFormat: 'yy-mm-dd',
        timeFormat: 'HH:mm',
    });
</script>