@extends('layouts.app')

@section('title')
{{ __('Editing Work Diary') }} - {{ $diary->date }}, {{ $diary->tool->name }}
@endsection

@section('content')
    <h1>{{ __('Editing Work Diary') }}</h1>
    <form class="form mt-5" id="form_diary" name="form_diary" action="{{ route('diary.update', $diary->id) }}" method="POST">
        @csrf
        @method('PUT')

        <div class="card mb-5">
            <div class="card-header bg-secondary text-white">
                {{ __('Date and Tool') }}
            </div>
            <div class="card-body">
                <div class="form-group mb-3">
                    <label for="date" class="form-label">{{ __('Date') }}</label>
                    <input type="date" name="date" id="date" class="form-control" placeholder="{{ __('Date') }}" value="{{ old('date', $diary->date)  }}" />
                </div>
                @error('date')
                    <div class="text-danger m-1">{{ $message }}</div>
                @enderror

                <div class="form-group mb-3">
                    <label for="tool_id" class="form-label">{{ __('Tool') }}</label>
                    <select class="form-control" name="tool_id" id="tool_id" value="" required >
                        <option disabled selected value="">{{ __('Select tool ...') }}</option>
                        @foreach ($tools as $tool)
                            <option value="{{ $tool->id }}" @if ($tool->id == old('tool_id', $diary->tool_id)) selected @endif>
                                {{ $tool->name }} - {{ $tool->prod_number }}</option>
                        @endforeach
                    </select>
                    @error('tool_id')
                        <div class="text-danger m-1">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>
        


        <div class="card mb-5">
            <div class="card-header bg-secondary text-white">
                {{ __('Work details') }}
            </div>
            <div class="card-body">
                <div class="form-group mb-3">
                    <label for="material" class="form-label">{{ __('Demolition material') }}</label>
                    <input type="text" name="material" id="material" class="form-control" placeholder="{{ __('Material') }}"
                        value="{{ old('material', $diary->material) }}" required />
                    @error('material')
                        <div class="text-danger m-1">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group mb-3">
                    <label for="volume" class="form-label">{{ __('Volume') }} [m<sup>3</sup>]</label>
                    <input type="number" step="0.1" name="volume" id="volume" class="form-control" placeholder="{{ __('Volume') }}"
                        value="{{ old('volume', $diary->volume) }}" required />
                    @error('volume')
                        <div class="text-danger m-1">{{ $message }}</div>
                    @enderror
                </div>
                
                <div class="form-group mb-3">
                    <label for="duration" class="form-label">{{ __('Duration') }} [h] <small>({{ __('Decimal number 1.5 means 1 hour and 30 minutes') }})</small></label>
                    <input type="number" step="0.1" name="duration" id="duration" class="form-control" placeholder="{{ __('Duration') }}"
                        value="{{ old('duration', $diary->duration) }}" required />
                    @error('volume')
                        <div class="text-danger m-1">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group mb-3">
                    <label for="consumption" class="form-label">{{ __('Fuel consumption') }} [l/h] <small>({{ __('Decimal number') }})</small></label>
                    <input type="number" step="0.1" name="consumption" id="consumption" class="form-control" placeholder="{{ __('Consumption') }}"
                        value="{{ old('consumption', $diary->consumption) }}" required />
                    @error('consumption')
                        <div class="text-danger m-1">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            
        </div>



        <div class="card mb-5">
            <div class="card-header bg-secondary text-white">
                {{ __('Operation record') }}
            </div>
            <div class="card-body">
                <div class="form-group mb-3">
                    <img src="{{ route('image.id', $diary->panel_id) }}" class="img-thumbnail col-md-4 col-sm-12" />
                </div>
            </div>
            @error('panel')
                <div class="card-footer">
                    <div class="text-danger m-1">{{ $message }}</div>
                </div>
            @enderror
        </div>




        <div class="card mb-5">
            <div class="card-header bg-secondary text-white">
                {{ __('Note / Description') }}
            </div>
            <div class="card-body">
                <div class="form-group mb-3">
                    <label for="note" class="form-label">{{ __('Note') }}</label>
                    <textarea name="note" id="note" style=" width: 100%; height: 10em; min-height: 10em; max-height: 20em; overflow: auto" class="form-control"
                    placeholder="...">{{ old('note', $diary->note) }}</textarea>
                    @error('note')
                        <div class="text-danger m-1">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>

        <div class="text-danger mb-4" id="error_summary">
        </div>

        <div class="form-group">
            <button id="btn_submit" type="submit" class="btn btn-primary">{{ __('Save') }}</button>
        </div>
    </form>
    

    <script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script>
    <script src="https://unpkg.com/filepond@^4/dist/filepond.js"></script>
    <script>
        
        let counter = 0;

        FilePond.registerPlugin(FilePondPluginFileValidateType);
        FilePond.setOptions({
            server: {
                url: '/upload',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            }
        });
        const excavator_panel = document.querySelector('input[name="panel"]');

        const panel_pond = FilePond.create(excavator_panel, {
            fileValidateTypeDetectType: ['image/jpeg, image/png']
        });

        const form = document.getElementById('form_diary');
        // form.addEventListener('submit', checkUploads);

        function checkUploads(event)
        {
            const tool = document.getElementById('tool_id');
            const model_text = document.getElementById('model_text');
            const error_summary = document.getElementById('error_summary');

            let error_text = "";

            if(tool.value < 1) error_text += '{{ __("Tool: required") }}<br>';
            if(model_text.value === '' && label_pond.status !== 4) error_text += '{{ __("Excavator model or label photo: required") }}<br>';
            if(video_pond.status !== 4) error_text += '{{ __("Please wait until video file is uploaded") }}'
            
            if(video_pond.status === 4
                && (model_text.value === '' && label_pond.status !== 4)
                && tool.value > 0)
            {
                event.submit();
            } else {
                error_summary.innerHTML = error_text;
                event.preventDefault();
            }
        }

    </script>
@endsection