@props(['case', 'positions', 'rateType', 'default_rate'])
<form
    x-data="{ loading: false }"
    x-ref="form"
    @submit.prevent="loading = true; $refs.form.submit()"
    action="{{ route('office.cases.insert.working_time') }}"
    method="post"
> @csrf
    <input type="hidden" name="case_id" value="{{ $case->id }}">
    <input type="hidden" name="rate_type" value="{{ $rateType }}">

    <div class="mt-2 mb-2">
        <a href="{{ route('office.cases.update.details.editor', ['case'=>$case->id, 'action'=>'add_time', 'current_position'=>'hourly_rate']) }}"
           class="btn_lg @if($rateType=='hourly_rate') btn_blue @else btn_default @endif"
        >Stawka godzinowa</a>

        <a href="{{ route('office.cases.update.details.editor', ['case'=>$case->id, 'action'=>'add_time', 'current_position'=>'flat_rate']) }}"
           class="btn_lg @if($rateType=='flat_rate') btn_blue @else btn_default @endif"
        >Stawka stała</a>
    </div>


    @if($rateType=='hourly_rate')

        <div class="mb-2">
            <div x-data="{ option: '{{ old('position_mode', 'select') }}' }">
                <label for="case_position_id">{{ __('office.case_position.position') }}:</label>
                <label class="mx-4">
                    <input type="radio" name="position_mode" value="select" x-model="option"> Wybierz z listy
                </label>
                <label>
                    <input type="radio" name="position_mode" value="input" x-model="option"> Dodaj pozycję naprawy
                </label>

                <div class="mt-2" x-show="option === 'select'" x-cloak>
                    <select name="case_position_id" id="case_position_id" class="mt-1 w-full p-2 block w-ful border border-gray-400 shadow-lg rounded-md">
                        <option value="">&nbsp;</option>
                        @foreach($positions as $position)
                            <option value="{{ $position->id }}" @if(old('case_position_id')==$position->id) selected @endif>{{ $position->description }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mt-2" x-show="option === 'input'" x-cloak>
                    <input type="text" name="new_case_position" value="{{ old('new_case_position') }}" class="border border-slate-400 w-full rounded p-2" placeholder="Opis pozycji">
                </div>
            </div>
        </div>


        <div class="grid grid-cols-12 gap-x-4 mb-2">

            <div class="col-span-12 md:col-span-2">
                <x-forms.input-component
                    inputType="number"
                    inputName="hours"
                    inputId="hours"
                    inputValue="{{ old('hours') ?? '0' }}"
                    inputLabel="{{ __('office.working_time.hour') }}"
                    inputPlaceholder="0"
                    inputRequired=1
                    clearOnFocus="1"
                    min="0"
                    inputClass="input_md"
                />
            </div>
            <div class="col-span-12 md:col-span-2">
                <x-forms.input-component
                    inputType="number"
                    inputName="minutes"
                    inputId="minutes"
                    inputValue="{{ old('minutes') ?? '0' }}"
                    inputLabel="{{ __('office.working_time.minutes') }}"
                    inputPlaceholder="0"
                    inputRequired=1
                    clearOnFocus="1"
                    min="0"
                    max="59"
                    inputClass="input_md"
                />
            </div>
            <div class="col-span-12 md:col-span-8">
                <x-forms.select-alpine-component
                    whichData="rates"
                    optionalParameter="hourly_rate"
                    defaultValue="{{ $default_rate }}"
                    inputName="rate"
                    searchInput="false"
                    label="hourly_rate_desc"
                    :is-position-required="true"
                />
            </div>

        </div>
    @endif

    @if($rateType=='flat_rate')

        <div class="mb-2">
            <label for="case_position_id">{{ __('office.case_position.position') }}:</label>
            <select name="case_position_id" id="case_position_id" class="mt-1 w-full p-2 block w-ful border border-gray-400 shadow-lg rounded-md">
                <option value="">&nbsp;</option>
                @foreach($positions as $position)
                    <option value="{{ $position->id }}" @if(old('case_position_id')==$position->id) selected @endif>{{ $position->description }}</option>
                @endforeach
            </select>
        </div>

        <div class="mb-2">
            <x-forms.select-alpine-component
                whichData="rates"
                optionalParameter="flat_rate"
                defaultValue="{{ old('rate') }}"
                inputName="rate"
                searchInput="false"
                label="flat_rate_desc"
            />
        </div>
    @endif


    <div class="grid grid-cols-12 gap-x-4 mb-2">

        <div class="col-span-12 md:col-span-6">
            <x-forms.select-alpine-component
                whichData="mechanics"
                defaultValue="{{ old('employee_id', auth()->user()->id) }}"
                inputName="employee_id"
                searchInput="true"
                label="mechanic"
            />
        </div>
        <div class="col-span-12 md:col-span-6">

            <x-forms.status-component />

        </div>
    </div>

    <div class="space-y-4">
        <div>
            <label for="description" class="block text-md font-medium text-gray-600">{{ __('office.working_time.comment') }}</label>
            <textarea id="description" name="description" rows="4" class="mt-1 px-2 block w-full border border-gray-400 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 resize-none"></textarea>
        </div>
    </div>


    <div class="flex justify-between pt-4">
        <a href="{{ route('office.cases.update.details', ['case'=>$case->id]) }}" class="btn_lg btn_default">{{ __('main.close') }}</a>
        <button
            type="submit"
            id="working-time-submit-button"
            class="btn_lg btn_red"
            :disabled="loading"
        >
            <template x-if="!loading">
                <span>{{ __('main.add') }}</span>
            </template>
            <template x-if="loading">
                <span>{{ __('main.sending') }}</span>
            </template>
        </button>
    </div>
</form>