@extends('layouts.app')

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

        <div class="card mb-5">
            <div class="card-header bg-secondary text-white">
                {{ __('Tool') }}
            </div>
            <div class="card-body">
                <div class="form-group mb-3">
                    <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">
                {{ __('Excavator details') }}
            </div>
            <div class="card-body">
                <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="model_text" class="form-control" placeholder="{{ __('Excavator model') }}"
                        value="{{ old('excavator_model') }}" />
                    @error('excavator_model')
                        <div class="text-danger m-1">{{ $message }}</div>
                    @enderror
                </div>
                <div class="form-group mb-3">
                    <label for="excavator_label" class="form-label">{{ __('Excavator label photo') }}</label>
                    <input type="file" accept="image/jpeg, image/png" name="excavator_label"
                        class="form-control filepond" />
                </div>
            </div>
            @error('excavator_details')
                <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">
                {{ __('Excavator Flow / Speed / Tool Setting') }}
            </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="excavator_panel"
                        class="form-control filepond" required />
                </div>
            </div>
            @error('excavator_details')
                <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">
                {{ __('Photos of Excavator and Tool') }}
            </div>
            <div class="card-body">
                <div class="form-group mb-3">
                    <label for="excavator_photo" class="form-label">{{ __('3 photos') }}</label>
                    <input type="file" accept="image/jpeg, image/png" name="excavator_photo1"
                        class="form-control filepond" required />
                    <input type="file" accept="image/jpeg, image/png" name="excavator_photo2"
                        class="form-control filepond" required />
                    <input type="file" accept="image/jpeg, image/png" name="excavator_photo3"
                        class="form-control filepond" required />
                </div>
            </div>
            @error('excavator_photo')
                <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">
                {{ __('Video of Excavator and Tool') }}
            </div>
            <div class="card-body">
                <div class="form-group mb-3">
                    <label for="excavator_video" class="form-label">{{ __('close and open empty tool 3 times') }}</label>
                    <input type="file" accept="video/mp4, video/quicktime, video/mpeg" name="excavator_video"
                    data-max-file-size="500MB" class="form-control filepond" required />
                </div>
            </div>
            @error('excavator_video')
                <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">
                {{ __('Optional data') }}
            </div>
            <div class="card-body">
                <div class="form-group mb-3">
                    <label for="max_pressure" class="form-label">{{ __('Max. Pressure of Excavator @EmptyTool (measured) [bars]') }}</label>
                    <input type="number" name="max_pressure" class="form-control" placeholder="{{ __('Max pressure') }}"
                        value="{{ old('max_pressure') }}" />
                    @error('max_pressure')
                        <div class="text-danger m-1">{{ $message }}</div>
                    @enderror
                </div>
                <div class="form-group mb-3">
                    <label for="max_flow" class="form-label">{{ __('Max. Flow of Excavator @EmptyTool (measured) [l/min]') }}</label>
                    <input type="number" name="max_flow" class="form-control" placeholder="{{ __('Max flow') }}"
                        value="{{ old('max_flow') }}" />
                    @error('max_flow')
                        <div class="text-danger m-1">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            @error('excavator_details')
                <div class="card-footer">
                    <div class="text-danger m-1">{{ $message }}</div>
                </div>
            @enderror
        </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_label = document.querySelector('input[name="excavator_label"]');
        const excavator_panel = document.querySelector('input[name="excavator_panel"]');
        const excavator_photo1 = document.querySelector('input[name="excavator_photo1"]');
        const excavator_photo2 = document.querySelector('input[name="excavator_photo2"]');
        const excavator_photo3 = document.querySelector('input[name="excavator_photo3"]');
        const excavator_video = document.querySelector('input[name="excavator_video"]');

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

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

        const photo1_pond = FilePond.create(excavator_photo1, {
            fileValidateTypeDetectType: ['image/jpeg, image/png']
        });
        const photo2_pond = FilePond.create(excavator_photo2, {
            fileValidateTypeDetectType: ['image/jpeg, image/png']
        });
        const photo3_pond = FilePond.create(excavator_photo3, {
            fileValidateTypeDetectType: ['image/jpeg, image/png']
        });

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

        const form = document.getElementById('form_startup');
                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)
            {
                form.submit();
            } else {
                error_summary.innerHTML = error_text;
                event.preventDefault();
            }
        }

    </script>
@endsection