@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" novalidate>
                        @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>

                        @php
                            $hasSchedule =
                                $isPersonal ||
                                (!empty($welcomeGreeting->start_date) && !empty($welcomeGreeting->expired_date));

                            $status = $welcomeGreeting->schedule_status;
                            $isActiveSchedule = $status === 'active';
                        @endphp

                        <div id="scheduleSection" style="{{ $hasSchedule ? '' : 'display:none;' }}">
                            <hr>

                            <h5 class="mb-3">Schedule Setting</h5>

                            @if($status === 'active')
                                <small class="alert alert-info form-text">
                                    This schedule is currently active and cannot be modified.  
                                    You may update the schedule once it has expired.
                                </small>
                            @endif

                            <div class="form-group">
                                <label for="timezone">Time Zone <span class="text-danger">*</span></label>
                                <select name="timezone_id" id="timezone" class="form-control" 
                                    {{ $hasSchedule ? 'required' : '' }}
                                    {{ $isActiveSchedule ? 'disabled' : '' }}>
                                    <option value="">Please Select</option>
                                    @foreach ($timezone as $tz)
                                        <option value="{{ $tz->id }}"
                                            {{ $welcomeGreeting->timezone_id == $tz->id ? 'selected' : '' }}>
                                            {{ $tz->timezone }}
                                        </option>
                                    @endforeach
                                </select>
                                @if($isActiveSchedule)
                                    <input type="hidden" name="timezone_id" value="{{ $welcomeGreeting->timezone_id }}">
                                @endif
                            </div>

                            <div class="form-group">
                                <label>Schedule <span class="text-danger">*</span></label>

                                @if($status === 'expired')
                                    <small class="alert alert-danger form-text">
                                        This schedule has already passed. Please update it to a future date and time.
                                    </small>
                                @endif
                                <div class="row">
                                    <div class="col-md-6">
                                        <label class="small text-muted">From</label>
                                        <input type="datetime-local"
                                            name="start_date"
                                            id="schedule_from"
                                            class="form-control"
                                            value="{{ optional($welcomeGreeting->start_date)->format('Y-m-d\TH:i') }}"
                                            {{ $hasSchedule ? 'required' : '' }}
                                            {{ $isActiveSchedule ? 'disabled' : '' }}>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="small text-muted">To</label>
                                        <input type="datetime-local"
                                            name="expired_date"
                                            id="schedule_to"
                                            class="form-control"
                                            value="{{ optional($welcomeGreeting->expired_date)->format('Y-m-d\TH:i') }}"
                                            {{ $hasSchedule ? 'required' : '' }}
                                            {{ $isActiveSchedule ? 'disabled' : '' }}>
                                    </div>

                                    @if($isActiveSchedule)
                                        <input type="hidden" name="start_date" value="{{ $welcomeGreeting->start_date }}">
                                        <input type="hidden" name="expired_date" value="{{ $welcomeGreeting->expired_date }}">
                                    @endif
                                </div>
                                <small class="alert alert-warning form-text">
                                    The greeting will be active only within the specified time range.<br>
                                    • <strong>Start Date</strong> must be later than the current date and time. When the schedule popup is opened, it will automatically default to <strong>5 minutes after</strong> the current time (editable if needed).<br>
                                    • <strong>End Date</strong> must be later than the selected Start Date and cannot be in the past. By default, it will automatically be set to <strong>24 hours after</strong> the selected Start Date (editable if needed).
                                </small>
                            </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 () {

            // Image preview
            const imageInput = document.getElementById('image');
            if (imageInput) {
                imageInput.addEventListener('change', function (e) {
                    const file = e.target.files[0];
                    if (!file) return;

                    const reader = new FileReader();
                    reader.onload = function (event) {
                        document.getElementById('preview').src = event.target.result;
                        document.getElementById('imagePreview').style.display = 'block';
                    };
                    reader.readAsDataURL(file);
                });
            }

            const start = document.getElementById("schedule_from");
            const end   = document.getElementById("schedule_to");

            if(!start || !end) return;

            function nowPlus5(){
                const d = new Date();
                d.setMinutes(d.getMinutes() + 5);
                return toLocal(d);
            }

            function plus24(dateStr){
                const d = new Date(dateStr);
                d.setHours(d.getHours() + 24);
                return toLocal(d);
            }

            function toLocal(d){
                const offset = d.getTimezoneOffset();
                const local = new Date(d.getTime() - offset*60000);
                return local.toISOString().slice(0,16);
            }

            function nowLocal(){
                return toLocal(new Date());
            }

            // =====================================
            // FIX 1: reset picker saat dibuka
            // =====================================
            start.addEventListener("mousedown", function(){

                const now = nowPlus5();

                // kalau schedule lama sudah lewat → reset
                if(!this.value || new Date(this.value) < new Date()){
                    this.value = now;
                    end.value  = plus24(now);
                }

                start.min = nowLocal();
                end.min   = this.value;
            });

            // =====================================
            // FIX 2: kalau start diubah manual
            // =====================================
            start.addEventListener("change", function(){
                end.min = this.value;

                if(!end.value || new Date(end.value) <= new Date(this.value)){
                    end.value = plus24(this.value);
                }
            });

            // =====================================
            // FIX 3: saat buka end picker
            // =====================================
            end.addEventListener("mousedown", function(){
                if(!this.value && start.value){
                    this.value = plus24(start.value);
                }
            });

        });
    </script>
@endsection