@extends('layouts.app')

@section('content')
    <div id="page-container" class="fade page-sidebar-fixed page-header-fixed page-with-wide-sidebar">
        @include('partials.header')
        @include('partials.sidebar')
        <div id="content" class="content">
            <ol class="breadcrumb float-xl-right">
                <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
                <li class="breadcrumb-item"><a href="javascript:;">Page Options</a></li>
                <li class="breadcrumb-item active">Create GM Greeting</li>
            </ol>
            <h1 class="page-header">Create GM Greeting</small></h1>
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">Create GM Greeting</h4>
                </div>
                <div class="panel-body">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    <form action="{{ route('gmgreetings.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group">
                            <label for="head_title">Head Title</label>
                            <input type="text" name="head_title" class="form-control" id="head_title"
                                value="{{ old('head_title') }}" required>
                        </div>
                        <div class="form-group">
                            <label for="description">Description</label>
                            <textarea name="description" class="form-control" id="description" required>{{ old('description') }}</textarea>
                        </div>
                        <div class="form-group">
                            <label for="mode">Mode</label>
                            <select name="mode" class="form-control" id="mode" required>
                                {{-- <option value="video">Video</option> --}}
                                {{-- <option value="text">Text</option> --}}
                                <option value="image">Image</option>
                            </select>
                        </div>
                        <div class="form-group" id="fileInput">
                            <label for="image" id="fileInputLabel">Upload Image</label>
                            <input type="file" name="image" class="form-control-file" id="image"
                                accept="image/jpeg,image/jpg,image/png,image/gif">
                            <small class="form-text text-muted">
                                Accepted formats: jpg, jpeg, png, gif (max size: 20MB)
                            </small>
                        </div>
                        <div class="form-group" id="textInput" style="display: none;">
                            <label for="text_content">Text Content</label>
                            <textarea name="text_content" class="form-control" id="text_content" style="height: 200px"></textarea>
                        </div>
                        <button type="submit" class="btn btn-custom"><i class="fas fa-save"></i> Create</button>
                        <a href="{{ route('gmgreetings.index') }}" class="btn btn-custom"><i class="fas fa-arrow-left"></i>
                            Back</a>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var mode = document.getElementById('mode');
            var fileInput = document.getElementById('fileInput');
            var textInput = document.getElementById('textInput');
            var imageInput = document.getElementById('image');
            var fileInputLabel = document.getElementById('fileInputLabel');

            function updateInputs() {
                if (mode.value === 'image') {
                    fileInput.style.display = 'block';
                    textInput.style.display = 'none';
                    imageInput.required = true;
                    fileInputLabel.textContent = 'Upload Image';
                } else { // mode is 'text'
                    fileInput.style.display = 'block';
                    textInput.style.display = 'block';
                    imageInput.required = false;
                    fileInputLabel.textContent = 'Upload GM Photo';
                }
            }

            mode.addEventListener('change', updateInputs);

            // Initial update
            updateInputs();

            $('#text_content').summernote({
                height: 300,
            });
        });
    </script>
@endsection