@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Add New QR Code') }}</div>

                <div class="card-body">
                    <form method="POST" action="{{ route('qrs.store') }}" enctype="multipart/form-data">
                        @csrf

                        <div class="row mb-3">
                            <label for="code" class="col-md-4 col-form-label text-md-end">{{ __('Unique Code') }}</label>

                            <div class="col-md-6">
                                <input id="code" type="text" class="form-control @error('code') is-invalid @enderror" name="code" value="{{ old('code') }}" required autofocus>

                                @error('code')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <!-- Stage 1 Image Drag & Drop -->
                        <div class="row mb-3">
                            <label for="stage1_image" class="col-md-4 col-form-label text-md-end">{{ __('Stage 1 QR Image') }}</label>

                            <div class="col-md-6">
                                <div id="drop-zone-stage1" class="border-2 border-dashed border-secondary rounded p-4 text-center cursor-pointer">
                                    <p class="mb-2">{{ __('Drop image here or click to select') }}</p>
                                    <input id="stage1_image" type="file" class="form-control d-none @error('stage1_image') is-invalid @enderror" name="stage1_image" required accept="image/*">
                                    <img id="preview-stage1" class="img-thumbnail mt-2 d-none" style="max-width: 200px;">
                                </div>

                                @error('stage1_image')
                                    <span class="invalid-feedback d-block" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <!-- Stage 2 Image Drag & Drop -->
                        <div class="row mb-3">
                            <label for="stage2_image" class="col-md-4 col-form-label text-md-end">{{ __('Stage 2 QR Image') }}</label>

                            <div class="col-md-6">
                                <div id="drop-zone-stage2" class="border-2 border-dashed border-secondary rounded p-4 text-center cursor-pointer">
                                    <p class="mb-2">{{ __('Drop image here or click to select') }}</p>
                                    <input id="stage2_image" type="file" class="form-control d-none @error('stage2_image') is-invalid @enderror" name="stage2_image" required accept="image/*">
                                    <img id="preview-stage2" class="img-thumbnail mt-2 d-none" style="max-width: 200px;">
                                </div>

                                @error('stage2_image')
                                    <span class="invalid-feedback d-block" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <!-- QR App Image Drag & Drop -->
                        <div class="row mb-3">
                            <label for="qr_app" class="col-md-4 col-form-label text-md-end">{{ __('QR App Image') }}</label>

                            <div class="col-md-6">
                                <div id="drop-zone-qr-app" class="border-2 border-dashed border-secondary rounded p-4 text-center cursor-pointer">
                                    <p class="mb-2">{{ __('Drop image here or click to select (optional)') }}</p>
                                    <input id="qr_app" type="file" class="form-control d-none @error('qr_app') is-invalid @enderror" name="qr_app" accept="image/*">
                                    <img id="preview-qr-app" class="img-thumbnail mt-2 d-none" style="max-width: 200px;">
                                </div>

                                @error('qr_app')
                                    <span class="invalid-feedback d-block" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-0">
                            <div class="col-md-8 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    {{ __('Save') }}
                                </button>
                                <a href="{{ route('qrs.index') }}" class="btn btn-secondary">
                                    {{ __('Cancel') }}
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function setupDropZone(dropZoneId, inputId, previewId) {
    const dropZone = document.getElementById(dropZoneId);
    const input = document.getElementById(inputId);
    const preview = document.getElementById(previewId);

    dropZone.addEventListener('click', () => input.click());

    dropZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropZone.classList.add('border-primary', 'bg-light');
    });

    dropZone.addEventListener('dragleave', () => {
        dropZone.classList.remove('border-primary', 'bg-light');
    });

    dropZone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropZone.classList.remove('border-primary', 'bg-light');
        
        if (e.dataTransfer.files.length) {
            input.files = e.dataTransfer.files;
            updatePreview();
        }
    });

    input.addEventListener('change', updatePreview);

    function updatePreview() {
        const file = input.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = (e) => {
                preview.src = e.target.result;
                preview.classList.remove('d-none');
            };
            reader.readAsDataURL(file);
        }
    }
}

// Setup all drop zones
setupDropZone('drop-zone-stage1', 'stage1_image', 'preview-stage1');
setupDropZone('drop-zone-stage2', 'stage2_image', 'preview-stage2');
setupDropZone('drop-zone-qr-app', 'qr_app', 'preview-qr-app');
</script>
@endsection