{{-- Extends layout --}}
@extends('layout.default')

{{-- Content --}}
@section('content')

<div class="card card-custom">
    <div class="card-header">
        <h3 class="card-title">
        {{$event->Name}} | Upload Images
        </h3>
    </div>
    <div class="card-body">
        <!--begin::Form-->
        <form method="POST" action="{{ route('image-upload') }}" enctype="multipart/form-data">
        
            @csrf
            @isset($event->id)
            {{ method_field('PATCH')}}
            @endisset
            @if ($errors->any())
            <div class="alert alert-danger">
                <strong>Error!</strong>
                <ul>
                    @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            @endif
            <input type="hidden" name="id" value="{{$event->id}}" />
            
            <!-- Logo Upload Section -->
            <div class="form-group row">
                <label for="logo1" class="col-md-4 col-form-label">Logo</label>
                <div class="col-md-8">
                    <!-- Current Logo Display -->
                    @if(isset($event) && $event->logo1)
                    <div class="current-image mb-3">
                        <img src="{{ asset('media/logos/' . $event->logo1) }}" alt="Current Logo" class="img-thumbnail" style="max-width: 200px; max-height: 150px;">
                        <p class="text-muted small mt-1">Current Logo</p>
                    </div>
                    @endif

                    <!-- File Input -->
                    <input type="file" class="form-control" id="logo1" name="logo1" accept="image/*" onchange="previewImage(this, 'logo1-preview')">

                    <!-- Preview Container -->
                    <div id="logo1-preview" class="mt-2" style="display: none;">
                        <img id="logo1-preview-img" src="" alt="Logo Preview" class="img-thumbnail" style="max-width: 200px; max-height: 150px;">
                        <p class="text-muted small mt-1">New Logo Preview</p>
                    </div>

                    <small class="form-text text-muted">Supported formats: JPG, PNG, GIF. Max size: 2MB</small>
                </div>
            </div>

            <!-- Results Page Image Upload Section -->
            <div class="form-group row">
                <label for="logo2" class="col-md-4 col-form-label">Results Page</label>
                <div class="col-md-8">
                    <!-- Current Results Page Display -->
                    @if(isset($event) && $event->logo2)
                    <div class="current-image mb-3">
                        <img src="{{ asset($event->logo2) }}" alt="Current Results Page" class="img-thumbnail" style="max-width: 200px; max-height: 150px;">
                        <p class="text-muted small mt-1">Current Results Page</p>
                    </div>
                    @endif

                    <!-- File Input -->
                    <input type="file" class="form-control" id="logo2" name="logo2" accept="image/*" onchange="previewImage(this, 'logo2-preview')">

                    <!-- Preview Container -->
                    <div id="logo2-preview" class="mt-2" style="display: none;">
                        <img id="logo2-preview-img" src="" alt="Results Page Preview" class="img-thumbnail" style="max-width: 200px; max-height: 150px;">
                        <p class="text-muted small mt-1">New Results Page Preview</p>
                    </div>

                    <small class="form-text text-muted">Supported formats: JPG, PNG, GIF. Max size: 2MB</small>
                </div>
            </div>

            <!-- Report Header Image Upload Section -->
            <div class="form-group row">
                <label for="rptheader" class="col-md-4 col-form-label">Report Header</label>
                <div class="col-md-8">
                    <!-- Current Report Header Display -->
                    @if(isset($event) && $event->rptheader)
                    <div class="current-image mb-3">
                        <img src="{{ asset($event->rptheader) }}" alt="Current Report Header" class="img-thumbnail" style="max-width: 200px; max-height: 150px;">
                        <p class="text-muted small mt-1">Current Report Header</p>
                    </div>
                    @endif

                    <!-- File Input -->
                    <input type="file" class="form-control" id="rptheader" name="rptheader" accept="image/*" onchange="previewImage(this, 'rptheader-preview')">

                    <!-- Preview Container -->
                    <div id="rptheader-preview" class="mt-2" style="display: none;">
                        <img id="rptheader-preview-img" src="" alt="Report Header Preview" class="img-thumbnail" style="max-width: 200px; max-height: 150px;">
                        <p class="text-muted small mt-1">New Report Header Preview</p>
                    </div>

                    <small class="form-text text-muted">Supported formats: JPG, PNG, GIF. Max size: 2MB</small>
                </div>
            </div>


            <div class="form-group row mb-0">
                <div class="col-md-8 offset-md-4">
                    <input type="submit" class="btn btn-primary" value="Submit">

                </div>
            </div>
        </form>
        <!--end::Form-->
    </div>
</div>
@endsection
@section('scripts')
<script src="{{ asset('js/app.js') }}" type="text/javascript"></script>
<script>
    function previewImage(input, previewId) {
        const preview = document.getElementById(previewId);
        const previewImg = document.getElementById(previewId + '-img');

        if (input.files && input.files[0]) {
            const reader = new FileReader();

            reader.onload = function(e) {
                previewImg.src = e.target.result;
                preview.style.display = 'block';
            }

            reader.readAsDataURL(input.files[0]);
        } else {
            preview.style.display = 'none';
        }
    }
</script>
@endsection