@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="{{ route('welcome_greetings.index') }}">Welcome Greetings</a></li>
                <li class="breadcrumb-item active">Edit</li>
            </ol>

            <h1 class="page-header">Edit Welcome Greeting</h1>

            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">Edit Details Welcome Greeting</h4>
                </div>
                <div class="panel-body">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ route('welcome_greetings.update', $welcomeGreeting->id) }}" method="POST"
                        enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <div class="form-group">
                            <label for="title">Title <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="title" name="title"
                                value="{{ $welcomeGreeting->title }}">
                        </div>

                        <div class="form-group">
                            <label for="image">Replace Image (Optional)</label>
                            <input type="file" class="form-control-file" id="image" name="image">
                        </div>

                        <div class="form-group">
                            <label for="alt_text">Alternative Text</label>
                            <input type="text" class="form-control" id="alt_text" name="alt_text"
                                value="{{ $welcomeGreeting->alt_text }}">
                            <small class="form-text text-muted">For accessibility. If blank, the title will be used.</small>
                        </div>

                        @if ($welcomeGreeting->hasImage())
                            <div class="form-group">
                                <label>Current Image</label>
                                <div>
                                    <img src="{{ $welcomeGreeting->image_url }}" alt="{{ $welcomeGreeting->alt_text }}"
                                        class="img-thumbnail" style="max-width: 200px; max-height: 150px;">
                                </div>
                            </div>
                        @endif

                        <div class="form-group" id="imagePreview" style="display: none;">
                            <label>New Image Preview:</label>
                            <div class="border p-3 text-center bg-light rounded"
                                style="max-height: 400px; overflow: hidden;">
                                <img id="preview" src="" alt="Preview"
                                    style="max-width: 100%; max-height: 350px; object-fit: contain;">
                            </div>
                        </div>

                        <hr>

                        <div class="form-group">
                            <label>Current Assignment Status</label>
                            <div id="assignment-status-container" class="border rounded p-3 bg-light">
                                @if ($summary['general'])
                                    <div class="assignment-item">
                                        <span class="badge badge-primary"><i class="fa fa-globe"></i> General
                                            Assignment</span>
                                        <p class="text-muted mb-0">Applied to all rooms.</p>
                                    </div>
                                @elseif ($summary['personal_rooms']->count() > 0)
                                    <div class="assignment-item">
                                        <span class="badge badge-info"><i class="fa fa-user"></i> Personal Assignment</span>
                                        <p class="text-muted mb-1">Applied to {{ $summary['personal_rooms']->count() }}
                                            specific room(s):</p>
                                        <div class="personal-rooms-list">
                                            @foreach ($summary['personal_rooms'] as $room)
                                                <span class="badge badge-light mr-1 mb-1 border">{{ $room->room }}</span>
                                            @endforeach
                                        </div>
                                    </div>
                                @else
                                    <div class="assignment-item">
                                        <span class="badge badge-secondary"><i class="fa fa-times"></i> No Assignment</span>
                                        <p class="text-muted mb-0">Not assigned to any rooms.</p>
                                    </div>
                                @endif
                            </div>
                        </div>

                        <button type="submit" class="btn btn-custom">Update Welcome Greeting</button>
                        <a href="{{ route('welcome_greetings.index') }}" class="btn btn-custom">Cancel</a>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <style>
        .panel-title {
            color: #000 !important;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Handler untuk image preview
            document.getElementById('image').addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(event) {
                        document.getElementById('preview').src = event.target.result;
                        document.getElementById('imagePreview').style.display = 'block';
                    }
                    reader.readAsDataURL(file);
                }
            });
        });
    </script>
@endsection