@extends('layouts.app')

@section('content')
<div class="container">
    <h2>Add Layout Setting</h2>
    <form method="POST" action="{{ route('layout_settings.store') }}" enctype="multipart/form-data">

        <input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
        @method('POST')
        <div class="form-group">
            <label for="name">Name:</label>
            <input type="text" class="form-control" id="name" name="name" value="{{ old('name') }}" required>
        </div>
        <div class="form-group">
            <label for="menuType">Zeige Menu:</label>
            <select class="form-control" id="menuType" name="menuType" required>
                <option value="0">Oben</option>
                <option value="1">Seitlich</option>
                <option value="2">Beides</option>
            </select>
        </div>
        <div class="form-group">
            <label for="menu_backgroundcolor">Menü Hintergrundfarbe:</label>
            <input type="color" class="form-control" id="menu_backgroundcolor" name="menu_backgroundcolor" value="{{ old('menu_backgroundcolor', '#ec7802') }}" required>
        </div>
        <div class="form-group">
            <label for="menu_color">Menü Schriftfarbe:</label>
            <input type="color" class="form-control" id="menu_color" name="menu_color" value="{{ old('menu_color', '#ffffff') }}" required>
        </div>
        <div class="form-group">
            <label for="color">Schriftfarbe (Alles außer Menü):</label>
            <input type="color" class="form-control" id="color" name="color" value="{{ old('color', '#000000') }}" required>
        </div>
        <div class="form-group">
            <label for="font_family">Schriftart (gesamte Webseite):</label>
            <select class="form-control" id="font_family" name="font_family" required>
                <option value="Arial, sans-serif">Arial</option>
                <option value="Arial Black, sans-serif">Arial Black</option>
                <option value="Comic Sans MS, sans-serif">Comic Sans MS</option>
                <option value="Courier New, monospace">Courier New</option>
                <option value="Georgia, serif">Georgia</option>
                <option value="Helvetica, sans-serif">Helvetica</option>
                <option value="Impact, sans-serif">Impact</option>
                <option value="Lucida Console, monospace">Lucida Console</option>
                <option value="Lucida Sans Unicode, sans-serif">Lucida Sans Unicode</option>
                <option value="Palatino Linotype, serif">Palatino Linotype</option>
                <option value="Tahoma, sans-serif">Tahoma</option>
                <option value="Times New Roman, serif">Times New Roman</option>
                <option value="Trebuchet MS, sans-serif">Trebuchet MS</option>
                <option value="Verdana, sans-serif">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/*" required>
            <small class="form-text text-muted">Hintergrundbild festlegen (Mindestaufösung 1920x1080 Pixel).</small>
            <p class="error-message"></p>
        </div>
        <div class="form-group">
            <label for="logo">Logo:</label>
            <input type="file" class="form-control-file" id="logo" name="logo" accept="image/*" required>
            <small class="form-text text-muted">Logo festlegen.</small>
            <p class="error-message"></p>
        </div>

        <div class="form-group">
            <label for="icon">Icon:</label>
            <input type="file" class="form-control-file" id="icon" name="icon" accept="image/*" required>
            <small class="form-text text-muted">Webseiten Icon festlegen.</small>
            <p class="error-message"></p>
        </div>
        <button type="submit" class="btn btn-primary">Save</button>
    </form>
</div>
<script>
    const form = document.querySelector('form');
    form.addEventListener('submit', (event) => {
        event.preventDefault();
        const name = $('#name').val();
        const menu_color = $('#menu_color').val();
        const menu_backgroundcolor = $('#menu_backgroundcolor').val();
        const menuType = $('#menuType').val();
        const color = $('#color').val();
        const font_family = $('#font_family').val();
        const _token = $('#_token').val();
        const image = $('#image')[0].files[0];
        const logo = $('#logo')[0].files[0];
        const icon = $('#icon')[0].files[0];
        const formData = new FormData();
        formData.append('_token', _token);
        formData.append('name', name);
        formData.append('menu_backgroundcolor', menu_backgroundcolor);
        formData.append('menu_color', menu_color);
        formData.append('menuType', menuType);
        formData.append('color', color);
        formData.append('font_family', font_family);
        formData.append('image', image);
        formData.append('logo', logo);
        formData.append('icon', icon);
        const errorMessage = document.querySelector('.error-message');
        errorMessage.textContent = '';
        $.ajax({
            type: 'POST',
            url: '/layout_settings',
            data: formData,
            contentType: false,
            processData: false,
            success: function(data) {
                window.location.href = '/layout_settings';
            },
            error: function(xhr, status, error) {
                const response = JSON.parse(xhr.responseText);
                errorMessage.textContent = response.message;
            }
        });
    });

    $('#image').on('change', function() {
        const file = this.files[0];
        if (!file) {
            return;
        }
        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 = 'Please upload a high resolution image (at least 1920x1080 pixels).';
            }
        };
    });
    $('#logo').on('change', function() {
        const file = this.files[0];
        if (!file) {
            return;
        }
        const img = new Image();
        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();
        img.src = window.URL.createObjectURL(file);
        img.onload = function() {
            const width = img.naturalWidth;
            const height = img.naturalHeight;
        };
    });
</script>
@endsection