@extends('layouts.app')

@section('content')
    <div id="page-container" class="fade page-sidebar-fixed page-header-fixed page-with-wide-sidebar">
        <!-- begin #header -->
        @include('partials.header')
        <!-- end #header -->

        <!-- begin #sidebar -->
        @include('partials.sidebar')
        <!-- end #sidebar -->

        <!-- begin #content -->
        <div id="content" class="content">
            <!-- begin breadcrumb -->
            <ol class="breadcrumb float-xl-right">
                <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
                <li class="breadcrumb-item"><a href="javascript:;">Information Display</a></li>
                <li class="breadcrumb-item"><a href="{{ route('resto_infos.index') }}">Restaurant Info</a></li>
                <li class="breadcrumb-item active">Create</li>
            </ol>
            <!-- end breadcrumb -->

            <!-- begin page-header -->
            <h1 class="page-header">Create Restaurant Info</h1>
            <!-- end page-header -->

            <!-- begin panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">Add New Restaurant Info</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('resto_infos.store') }}" method="POST">
                        @csrf

                        <!-- Restaurant Information Content -->
                        <div class="form-group">
                            <label for="content_textarea">Resto Info Content <span class="text-danger">*</span></label>
                            <textarea class="form-control" id="content_textarea" name="content" rows="3" maxlength="500"
                                placeholder="Enter restaurant information here (e.g., special offers, contact info, announcements)..." required>{{ old('content') }}</textarea>
                            <small class="form-text text-muted">
                                Maximum 500 characters. Current: <span id="charCount">0</span>
                            </small>
                        </div>

                        <!-- Operational Hours Section -->
                        <div class="form-group">
                            <label>Operational Hours</label>
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="mb-0">
                                        <i class="fa fa-clock"></i> Restaurant Operating Hours
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="open_time">Opening Time <span
                                                        class="text-danger">*</span></label>
                                                <input type="time" class="form-control" id="open_time" name="open_time"
                                                    value="{{ old('open_time', '08:00') }}" required>
                                                <small class="form-text text-muted">
                                                    What time does the restaurant open?
                                                </small>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="close_time">Closing Time <span
                                                        class="text-danger">*</span></label>
                                                <input type="time" class="form-control" id="close_time" name="close_time"
                                                    value="{{ old('close_time', '22:00') }}" required>
                                                <small class="form-text text-muted">
                                                    What time does the restaurant close?
                                                </small>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Quick Time Presets -->
                                    <div class="mt-3">
                                        <label class="form-label">Quick Presets:</label>
                                        <div class="btn-group btn-group-sm" role="group">
                                            <button type="button" class="btn btn-outline-secondary"
                                                onclick="setHours('08:00', '22:00')">
                                                8 AM - 10 PM
                                            </button>
                                            <button type="button" class="btn btn-outline-secondary"
                                                onclick="setHours('09:00', '21:00')">
                                                9 AM - 9 PM
                                            </button>
                                            <button type="button" class="btn btn-outline-secondary"
                                                onclick="setHours('10:00', '23:00')">
                                                10 AM - 11 PM
                                            </button>
                                            <button type="button" class="btn btn-outline-warning"
                                                onclick="setHours('00:00', '23:59')">
                                                24 Hours
                                            </button>
                                        </div>
                                    </div>

                                    <!-- Hours Preview -->
                                    <div class="mt-3">
                                        <div class="alert alert-info">
                                            <i class="fa fa-info-circle"></i>
                                            <strong>Hours Preview:</strong>
                                            <span id="hoursPreview">08:00 - 22:00</span>
                                            <small class="d-block mt-1">
                                                <span id="hoursPreview12">8:00 AM - 10:00 PM</span>
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="alert alert-info">
                                <i class="fa fa-info-circle"></i>
                                <strong>Note:</strong> This resto info will be automatically set as active and will replace
                                any currently active resto info. The hours will apply to all days - change them as needed
                                when operating hours change.
                            </div>
                        </div>

                        <div class="form-group">
                            <button type="submit" class="btn btn-custom">
                                <i class="fa fa-save"></i> Create Resto Info
                            </button>
                            <a href="{{ route('resto_infos.index') }}" class="btn btn-custom">
                                <i class="fa fa-arrow-left"></i> Back to List
                            </a>
                        </div>
                    </form>
                </div>
            </div>
            <!-- end panel -->
        </div>
        <!-- end #content -->

        <!-- begin scroll to top btn -->
        <a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade" data-click="scroll-top">
            <i class="fa fa-angle-up"></i>
        </a>
        <!-- end scroll to top btn -->
    </div>

    <style>
        .card {
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
        }

        .card-header {
            background-color: #f8f9fa;
            border-bottom: 1px solid #dee2e6;
            padding: 0.75rem 1.25rem;
        }

        .btn-group-sm .btn {
            font-size: 0.875rem;
            padding: 0.25rem 0.5rem;
        }

        #hoursPreview {
            font-weight: bold;
            color: #28a745;
        }

        #hoursPreview12 {
            color: #6c757d;
            font-style: italic;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const textarea = document.getElementById('content_textarea');
            const charCount = document.getElementById('charCount');
            const openTimeInput = document.getElementById('open_time');
            const closeTimeInput = document.getElementById('close_time');

            function updateCharCount() {
                const currentLength = textarea.value.length;
                charCount.textContent = currentLength;

                if (currentLength > 450) {
                    charCount.style.color = 'red';
                } else if (currentLength > 400) {
                    charCount.style.color = 'orange';
                } else {
                    charCount.style.color = 'green';
                }
            }

            function updateHoursPreview() {
                const openTime = openTimeInput.value;
                const closeTime = closeTimeInput.value;

                if (openTime && closeTime) {
                    // 24-hour format
                    document.getElementById('hoursPreview').textContent = `${openTime} - ${closeTime}`;

                    // 12-hour format
                    const open12 = formatTo12Hour(openTime);
                    const close12 = formatTo12Hour(closeTime);
                    document.getElementById('hoursPreview12').textContent = `${open12} - ${close12}`;
                }
            }

            function formatTo12Hour(time24) {
                const [hours, minutes] = time24.split(':');
                const hour = parseInt(hours);
                const ampm = hour >= 12 ? 'PM' : 'AM';
                const hour12 = hour % 12 || 12;
                return `${hour12}:${minutes} ${ampm}`;
            }

            textarea.addEventListener('input', updateCharCount);
            openTimeInput.addEventListener('change', updateHoursPreview);
            closeTimeInput.addEventListener('change', updateHoursPreview);

            updateCharCount(); // Initial count
            updateHoursPreview(); // Initial preview
        });

        function setHours(openTime, closeTime) {
            document.getElementById('open_time').value = openTime;
            document.getElementById('close_time').value = closeTime;

            // Trigger change event to update preview
            document.getElementById('open_time').dispatchEvent(new Event('change'));
            document.getElementById('close_time').dispatchEvent(new Event('change'));
        }
    </script>
@endsection