@extends('layouts.app')

@section('content')
    <style>
        .note-editable {
            background-color: #A9A9A9 !important;
        }
    </style>
    <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">Edit GM Greeting</li>
            </ol>
            <h1 class="page-header">Edit GM Greeting</small></h1>
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <div class="panel-heading-btn">
                        <h4 class="panel-title">Edit GM Greeting</h4>
                    </div>
                </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.update', $gmGreeting->id) }}" method="POST"
                        enctype="multipart/form-data" id="greetingForm">
                        @csrf
                        @method('PUT')

                        <div class="form-group">
                            <label for="head_title">Head Title</label>
                            <input type="text" name="head_title" id="head_title" class="form-control"
                                value="{{ $gmGreeting->head_title }}">
                        </div>

                        <div class="form-group">
                            <label for="description">Description</label>
                            <textarea name="description" id="description" class="form-control">{{ $gmGreeting->description }}</textarea>
                        </div>

                        <div class="form-group">
                            <label for="mode">Mode</label>
                            <select name="mode" id="mode" class="form-control">
                                {{-- <option value="video" {{ $gmGreeting->mode == 'video' ? 'selected' : '' }}>Video</option> --}}
                                {{-- <option value="text" {{ $gmGreeting->mode == 'text' ? 'selected' : '' }}>Text</option> --}}
                                <option value="image" {{ $gmGreeting->mode == 'image' ? 'selected' : '' }}>Image</option>
                            </select>
                        </div>

                        <div class="form-group" id="fileInput">
                            <label for="image" id="fileInputLabel">Upload GM Photo</label>
                            <input type="file" name="image" id="image" class="form-control-file"
                                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>

                            @if ($gmGreeting->video_path)
                                <p>Current file:</p>
                                <img src="{{ asset('storage/' . $gmGreeting->video_path) }}" alt="GM Image"
                                    style="max-width: 200px;">

                                <div class="form-group mt-3">
                                    <input type="checkbox" name="delete_image" id="delete_image" value="1">
                                    <label for="delete_image">Delete this image</label>
                                </div>
                            @endif
                        </div>

                        <div class="form-group" id="textInput">
                            <label for="text_content">Text Content</label>
                            <textarea name="text_content" id="text_content" class="form-control" style="height: 200px">{{ $gmGreeting->text_content }}</textarea>
                        </div>

                        <button type="submit" class="btn btn-custom"><i class="fa fa-save"></i> Update</button>
                        <a href="{{ route('gmgreetings.index') }}" class="btn btn-custom"><i class="fa fa-arrow-left"></i>
                            Back</a>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            $('#text_content').summernote({
                height: 300,
            });

            var mode = document.getElementById('mode');
            var fileInput = document.getElementById('fileInput');
            var textInput = document.getElementById('textInput');
            var fileInputLabel = document.getElementById('fileInputLabel');

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

            mode.addEventListener('change', updateInputs);
            updateInputs();

            // Handle delete image button click
            document.getElementById('deleteImageBtn').addEventListener('click', function() {
                if (confirm('Are you sure you want to delete the image?')) {
                    // Append a hidden input to form for delete image
                    var form = document.getElementById('greetingForm');
                    var deleteInput = document.createElement('input');
                    deleteInput.type = 'hidden';
                    deleteInput.name = 'delete_image';
                    deleteInput.value = '1';
                    form.appendChild(deleteInput);

                    // Submit the form
                    form.submit();
                }
            });
        });
    </script>
@endsection