@extends('layouts.app')

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

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

        <div class="card mb-5">
            <div class="card-header bg-secondary text-white">
                {{ __('Tool and Excavator') }}
            </div>
            <div class="card-body">
                <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 class="form-group mb-3">
                    <label for="excavator_model" class="form-label">{{ __('Excavator model and Production number') }}</label>
                    <input type="text" name="excavator_model" id="excavator_model" class="form-control" placeholder="{{ __('Excavator model and production number') }}"
                        value="{{ old('excavator_model') }}" required />
                    @error('excavator_model')
                        <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">
                {{ __('Photo and Video') }}
            </div>
            <div class="card-body">
                <div class="card-body">
                    <div class="form-group mb-3">
                        <label for="photo_id" class="form-label">{{ __('Photo of excavator and tool') }}</label>
                        <input type="file" accept="image/jpeg, image/png" name="photo_id" id="photo_id"
                            class="form-control filepond" required />
                    </div>
                </div>
                @error('photo_id')
                    <div class="card-footer">
                        <div class="text-danger m-1">{{ $message }}</div>
                    </div>
                @enderror

                <div class="card-body">
                    <div class="form-group mb-3">
                        <label for="video_id" class="form-label">{{ __('Video of excavator and tool') }} <small>({{ __('crushing work, at least 60s') }})</small></label>
                        <input type="file" accept="video/mp4, video/quicktime" name="video_id" id="video_id"
                            class="form-control filepond" required />
                    </div>
                </div>
                @error('photo_id')
                    <div class="card-footer">
                        <div class="text-danger m-1">{{ $message }}</div>
                    </div>
                @enderror
            </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 Type') }}</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="noise" class="form-label">{{ __('Noise [dB]') }} <small>({{ __('20 m from tool, excavator rear side') }})</small></label>
                    <input type="number" step="0.1" name="noise" id="noise" class="form-control" 
                        value="{{ old('noise') }}" required />
                    @error('noise')
                        <div class="text-danger m-1">{{ $message }}</div>
                    @enderror
                </div>
                
                <div class="form-group mb-3">
                    <label for="consumption" class="form-label">{{ __('Average Excavator Fuel Consumption [l/h]') }} <small>({{ __('from machine computer') }})</small></label>
                    <input type="number" step="0.1" name="consumption" id="consumption" class="form-control" 
                        value="{{ old('consumption') }}" required />
                    @error('consumption')
                        <div class="text-danger m-1">{{ $message }}</div>
                    @enderror
                </div>
                
                <div class="form-group mb-3">
                    <label for="dust" class="form-label">{{ __('Dust Measurement during work') }} [mg/m<sup>3</sup>] <small>({{ __('20 m from tool, excavator rear side') }})</small></label>
                    <input type="number" step="0.1" name="dust" id="dust" class="form-control" 
                        value="{{ old('dust') }}" required />
                    @error('dust')
                        <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 photo = document.querySelector('input[name="photo_id"]');

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

        const video = document.querySelector('input[name="video_id"]');

        const video_pond = FilePond.create(video, {
            fileValidateTypeDetectType: ['video/mp4, video/quicktime']
        });

        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