@extends('layouts.app')

@section('content')
<div class="row">
    <div class="col-md-8 col-md-offset-2">
        <div class="panel panel-default panel-bg">
            <div class="panel-heading">Edit Layout Setting</div>
            <div class="panel-body">
                <form id="update-form" enctype="multipart/form-data">
                    @csrf
                    @method('POST')

                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" class="form-control" id="name" name="name" value="{{ $layout->name }}" required>
                    </div>

                    <div class="form-group">
                        <label for="menuType">Menu Type</label>
                        <select class="form-control" id="menuType" name="menuType" required>
                            <option value="0" @if ($layout->menuType == 0) selected @endif>Top</option>
                            <option value="1" @if ($layout->menuType == 1) selected @endif>Side</option>
                            <option value="2" @if ($layout->menuType == 2) selected @endif>Both</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="menu_backgroundcolor">Menu Background Color</label>
                        <input type="color" class="form-control" id="menu_backgroundcolor" name="menu_backgroundcolor" value="{{ $layout->menu_backgroundcolor }}" required>
                    </div>

                    <div class="form-group">
                        <label for="menu_color">Menu Color</label>
                        <input type="color" class="form-control" id="menu_color" name="menu_color" value="{{ $layout->menu_color }}" required>
                    </div>

                    <div class="form-group">
                        <label for="color">Color (except menu)</label>
                        <input type="color" class="form-control" id="color" name="color" value="{{ $layout->color }}" required>
                    </div>

                    <div class="form-group">
                        <label for="font_family">Font Family</label>
                        <select class="form-control" id="font_family" name="font_family" required>
                            <option value="Arial, sans-serif" @if ($layout->font_family == 'Arial, sans-serif') selected @endif>Arial</option>
                            <option value="Arial Black, sans-serif" @if ($layout->font_family == 'Arial Black, sans-serif') selected @endif>Arial Black</option>
                            <option value="Comic Sans MS, sans-serif" @if ($layout->font_family == 'Comic Sans MS, sans-serif') selected @endif>Comic Sans MS</option>
                            <option value="Courier New, monospace" @if ($layout->font_family == 'Courier New, monospace') selected @endif>Courier New</option>
                            <option value="Georgia, serif" @if ($layout->font_family == 'Georgia, serif') selected @endif>Georgia</option>
                            <option value="Helvetica, sans-serif" @if ($layout->font_family == 'Helvetica, sans-serif') selected @endif>Helvetica</option>
                            <option value="Impact, sans-serif" @if ($layout->font_family == 'Impact, sans-serif') selected @endif>Impact</option>
                            <option value="Lucida Console, monospace" @if ($layout->font_family == 'Lucida Console, monospace') selected @endif>Lucida Console</option>                            <option value="Lucida Sans Unicode, sans-serif" @if ($layout->font_family == 'Lucida Sans Unicode, sans-serif') selected @endif>Lucida Sans Unicode</option>
                            <option value="Palatino Linotype, serif" @if ($layout->font_family == 'Palatino Linotype, serif') selected @endif>Palatino Linotype</option>
                            <option value="Tahoma, sans-serif" @if ($layout->font_family == 'Tahoma, sans-serif') selected @endif>Tahoma</option>
                            <option value="Times New Roman, serif" @if ($layout->font_family == 'Times New Roman, serif') selected @endif>Times New Roman</option>
                            <option value="Trebuchet MS, sans-serif" @if ($layout->font_family == 'Trebuchet MS, sans-serif') selected @endif>Trebuchet MS</option>
                            <option value="Verdana, sans-serif" @if ($layout->font_family == 'Verdana, sans-serif') selected @endif>Verdana</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="image">Hintergrundbild:</label>
                        <input type="file" class="form-control-file" id="image" name="image" accept="image/*">
                        <small class="form-text text-muted">Hintergrundbild festlegen (Mindestaufösung 1920x1080 Pixel).</small>
                        <p class="error-message"></p>
                        @if ($layout ->icon)
                        <div  class="image-container">
                        <img src="{{ asset('public/assets/img/' . $layout->backgroundImage) }}" id="previewBackgroundImage" alt="Background Image" style="max-width: 400px; max-height: 200px;"></div>
                        @endif
                    </div>
                    <div class="form-group">
                        <label for="logo">Logo:</label>
                        <input type="file" class="form-control-file" id="logo" name="logo" accept="image/*">
                        <small class="form-text text-muted">Logo festlegen.</small>
                        <p class="error-message"></p>
                        @if ($layout ->logo)
                        <div  class="image-container">
                        <img src="{{ asset('public/assets/img/' . $layout->logo) }}" id="previewLogo" alt="Logo" style="max-width: 400px; max-height: 200px;"></div>
                        @endif
                    </div>

                    <div class="form-group">
                        <label for="icon">Icon:</label>
                        <input type="file" class="form-control-file" id="icon" name="icon" accept="image/*">
                        <small class="form-text text-muted">Webseiten Icon festlegen.</small>
                        <p class="error-message"></p>
                        @if ($layout ->backgroundImage)
                        <div  class="image-container">
                        <img src="{{ asset('public/assets/img/' . $layout->icon) }}" id="previewIcon" alt="Icon" style="max-width: 400px; max-height: 200px;"></div>
                        @endif
                    </div>

                    <div class="form-group">
                        <label for="active">Active</label>
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="active" name="active" value="1" @if ($layout->active) checked @endif>
                            <label class="form-check-label" for="active">Set as active layout</label>
                        </div>
                    </div>

                    <div class="form-group">
                        <input type="hidden" name="id" value="{{ $layout->id }}">
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        $('#update-form').submit(function (event) {
            event.preventDefault();
            const formData = new FormData(this);
            let imagesToCheck = [];

            // Check if any image has been selected and prepare image objects
            if ($('#image')[0].files[0]) {
                imagesToCheck.push({
                    id: 'image',
                    minWidth: 1920,
                    minHeight: 1080
                });
            }
            if ($('#logo')[0].files[0]) {
                imagesToCheck.push({
                    id: 'logo',
                    minWidth: 200,
                    minHeight: 200
                });
            }
            if ($('#icon')[0].files[0]) {
                imagesToCheck.push({
                    id: 'icon',
                    minWidth: 50,
                    minHeight: 50
                });
            }

            // Check if all selected images have high resolution
            if (imagesToCheck.length > 0) {
                let imagesLoaded = 0;
                let error = false;
                imagesToCheck.forEach(function (imageToCheck) {
                    const img = new Image();
                    img.onload = function () {
                        if (this.width < imageToCheck.minWidth || this.height < imageToCheck.minHeight) {
                            alert(`The ${imageToCheck.id} image must have a resolution of at least ${imageToCheck.minWidth}x${imageToCheck.minHeight} pixels.`);
                            error = true;
                            return;
                        }
                        imagesLoaded++;
                        if (imagesLoaded === imagesToCheck.length && !error) {
                            submitForm(formData);
                        }
                    };
                    img.src = URL.createObjectURL($(`#${imageToCheck.id}`)[0].files[0]);
                });
            } else {
                submitForm(formData);
            }
        });


        function submitForm(formData) {
            $.ajax({
                url: '/layout_settings/updater',
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: function (response) {
                    alert(response.message);
                    window.location.href = '/layout_settings';
                },
                error: function (xhr, status, error) {
                    alert(xhr.responseText);
                }
            });
        }


        $('#image').on('change', function() {
            const file = this.files[0];
            if (!file) {
                return;
            }
            const reader = new FileReader();

            // Read the file and set the image source
            reader.onload = function(e) {
                $("#previewBackgroundImage").attr("src", e.target.result);
            };
            reader.readAsDataURL(file);
            const img = new Image();
            img.src = window.URL.createObjectURL(file);
            img.onload = function() {
                const width = img.naturalWidth;
                const height = img.naturalHeight;
                if (width < 1920 || height < 1080) {
                    $('#image').val('');
                    errorMessage.textContent = 'Mindestauflösung für das Bild beträgt 1920x1080 Pixel.';
                }
            };
        });
        $('#logo').on('change', function() {
            const file = this.files[0];
            if (!file) {
                return;
            }
            const img = new Image();

            const reader = new FileReader();

            // Read the file and set the image source
            reader.onload = function(e) {
                $("#previewLogo").attr("src", e.target.result);
            };
            reader.readAsDataURL(file);
            img.src = window.URL.createObjectURL(file);
            img.onload = function() {
                const width = img.naturalWidth;
                const height = img.naturalHeight;
            };
        });

        $('#icon').on('change', function() {
            const file = this.files[0];
            if (!file) {
                return;
            }
            const img = new Image();

            const reader = new FileReader();

            // Read the file and set the image source
            reader.onload = function(e) {
                $("#previewIcon").attr("src", e.target.result);
            };
            reader.readAsDataURL(file);
            img.src = window.URL.createObjectURL(file);
            img.onload = function() {
                const width = img.naturalWidth;
                const height = img.naturalHeight;
            };
        });
    });
</script>


@endsection