@extends('layouts.app')

@section('title')
{{ __('New Work Diary') }}
@endsection

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

        <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') ? old('date') : now()->format('Y-m-d') }}" />
                </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="{{ old('tool_id') }}" required >
                        <option disabled selected value="">{{ __('Select tool ...') }}</option>
                        @foreach ($tools as $tool)
                            <option value="{{ $tool->id }}" @if ($tool->id == old('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') }}" 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') }}" 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') }}" 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') }}" 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">
                    <label for="panel" class="form-label">{{ __('Photo of operator panel') }}</label>
                    <input type="file" accept="image/jpeg, image/png" name="panel" id="panel"
                        class="form-control filepond" required />
                </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') }}</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