@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">View</li>
            </ol>
            <!-- end breadcrumb -->

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

            <!-- Display success/error messages -->
            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <i class="fa fa-check-circle"></i> {{ session('success') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            @if (session('error') || $errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="fa fa-exclamation-triangle"></i>
                    @if (session('error'))
                        {{ session('error') }}
                    @endif
                    @foreach ($errors->all() as $error)
                        <div>{{ $error }}</div>
                    @endforeach
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            <!-- Dynamic alert container for AJAX responses -->
            <div id="alert-container"></div>

            <!-- begin panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">Restaurant Info Details</h4>
                </div>
                <div class="panel-body">
                    <!-- Restaurant Information -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        Restaurant Information
                                        <span class="badge badge-{{ $restoInfo->is_active ? 'success' : 'secondary' }} ml-2"
                                            id="status-badge">
                                            {{ $restoInfo->is_active ? 'Active' : 'Inactive' }}
                                        </span>
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="content-display" style="font-size: 16px; line-height: 1.6;">
                                        {{ $restoInfo->content }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Operational Hours -->
                    <div class="row mt-4">
                        <div class="col-md-8">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="fa fa-clock"></i> Operating Hours
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="hours-display-large">
                                        <div class="main-hours">
                                            <i class="fa fa-clock fa-2x text-primary"></i>
                                            <div class="hours-text">
                                                <h3 class="mb-0">{{ $restoInfo->getFormattedHours() }}</h3>
                                                <p class="text-muted mb-0">{{ $restoInfo->getFormattedHours12() }}</p>
                                            </div>
                                        </div>

                                        <div class="hours-breakdown mt-4">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="time-info">
                                                        <h6 class="text-success">
                                                            <i class="fa fa-sun-o"></i> Opening Time
                                                        </h6>
                                                        <p class="h5">
                                                            {{ $restoInfo->open_time ? $restoInfo->open_time->format('H:i') : 'Not set' }}
                                                            <small class="text-muted d-block">
                                                                {{ $restoInfo->open_time ? $restoInfo->open_time->format('g:i A') : 'Not set' }}
                                                            </small>
                                                        </p>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="time-info">
                                                        <h6 class="text-warning">
                                                            <i class="fa fa-moon-o"></i> Closing Time
                                                        </h6>
                                                        <p class="h5">
                                                            {{ $restoInfo->close_time ? $restoInfo->close_time->format('H:i') : 'Not set' }}
                                                            <small class="text-muted d-block">
                                                                {{ $restoInfo->close_time ? $restoInfo->close_time->format('g:i A') : 'Not set' }}
                                                            </small>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <!-- Action Buttons -->
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="fa fa-cogs"></i> Actions
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="d-grid gap-2">
                                        <!-- Toggle Status Button -->
                                        <button type="button" class="btn btn-custom btn-block" id="toggle-status-btn"
                                            data-resto-info-id="{{ $restoInfo->id }}"
                                            data-current-status="{{ $restoInfo->is_active ? 1 : 0 }}">
                                            <i class="fa fa-{{ $restoInfo->is_active ? 'pause' : 'play' }}"
                                                id="toggle-icon"></i>
                                            <span
                                                id="toggle-text">{{ $restoInfo->is_active ? 'Deactivate' : 'Activate' }}</span>
                                        </button>

                                        <!-- Edit Button -->
                                        <a href="{{ route('resto_infos.edit', $restoInfo->id) }}"
                                            class="btn btn-custom btn-block">
                                            <i class="fa fa-edit"></i> Edit Resto Info
                                        </a>


                                        <!-- Back Button -->
                                        <a href="{{ route('resto_infos.index') }}" class="btn btn-custom btn-block">
                                            <i class="fa fa-arrow-left"></i> Back To List
                                        </a>

                                        <!-- Delete Button -->
                                        <form action="{{ route('resto_infos.destroy', $restoInfo->id) }}" method="POST"
                                            class="w-100" onsubmit="return confirmDelete()">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-custom btn-block">
                                                <i class="fa fa-trash"></i> Delete
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Information Section - Horizontal Layout -->
                    <div class="row mt-4">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="fa fa-info-circle"></i> Information
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="row info-horizontal">
                                        <div class="col-md-3">
                                            <div class="info-item-horizontal">
                                                <i class="fa fa-calendar text-primary"></i>
                                                <div class="info-content">
                                                    <strong>Created</strong>
                                                    <div class="info-value">
                                                        {{ $restoInfo->created_at->format('M d, Y \a\t H:i') }}</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="info-item-horizontal">
                                                <i class="fa fa-edit text-info"></i>
                                                <div class="info-content">
                                                    <strong>Last Updated</strong>
                                                    <div class="info-value">
                                                        {{ $restoInfo->updated_at->format('M d, Y \a\t H:i') }}</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="info-item-horizontal">
                                                <i
                                                    class="fa fa-{{ $restoInfo->is_active ? 'check' : 'pause' }} text-{{ $restoInfo->is_active ? 'success' : 'warning' }}"></i>
                                                <div class="info-content">
                                                    <strong>Status</strong>
                                                    <div class="info-value">
                                                        <span
                                                            class="badge badge-{{ $restoInfo->is_active ? 'success' : 'secondary' }}">
                                                            {{ $restoInfo->is_active ? 'Active' : 'Inactive' }}
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="info-item-horizontal">
                                                <i class="fa fa-clock text-primary"></i>
                                                <div class="info-content">
                                                    <strong>Hours Format</strong>
                                                    <div class="info-value">
                                                        <div>24h: {{ $restoInfo->getFormattedHours() }}</div>
                                                        <div>12h: {{ $restoInfo->getFormattedHours12() }}</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </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;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        }

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

        .card-body {
            padding: 1.25rem;
        }

        .content-display {
            background-color: #f8f9fa;
            padding: 1.5rem;
            border-radius: 0.375rem;
            border: 1px solid #dee2e6;
        }

        .hours-display-large .main-hours {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem;
            background-color: #f8f9fa;
            border-radius: 0.5rem;
            border: 1px solid #dee2e6;
        }

        .hours-display-large .hours-text h3 {
            color: #28a745;
            font-weight: 600;
        }

        .time-info {
            text-align: center;
            padding: 1rem;
            background-color: #f8f9fa;
            border-radius: 0.375rem;
            border: 1px solid #dee2e6;
        }

        .time-info h6 {
            margin-bottom: 0.5rem;
            font-weight: 600;
        }

        .info-item {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .info-item i {
            margin-right: 0.5rem;
        }

        .info-value {
            margin-left: 1.25rem;
            font-size: 0.9rem;
        }

        /* Horizontal Information Layout */
        .info-horizontal {
            padding: 0.5rem 0;
        }

        .info-item-horizontal {
            display: flex;
            align-items: flex-start;
            padding: 1rem;
            background-color: #f8f9fa;
            border-radius: 0.375rem;
            border: 1px solid #e9ecef;
            height: 100%;
            margin-bottom: 0.5rem;
        }

        .info-item-horizontal i {
            font-size: 1.5rem;
            margin-right: 1rem;
            margin-top: 0.25rem;
            min-width: 2rem;
        }

        .info-content {
            flex: 1;
        }

        .info-content strong {
            display: block;
            color: #495057;
            font-size: 0.9rem;
            margin-bottom: 0.25rem;
        }

        .info-content .info-value {
            margin-left: 0;
            font-size: 0.85rem;
            color: #6c757d;
        }

        .info-content .info-value div {
            line-height: 1.3;
        }

        .panel-title {
            color: #000000 !important;
        }

        .card-title {
            color: #000000 !important;
        }

        .d-grid {
            display: grid;
        }

        .gap-2 {
            gap: 0.5rem;
        }

        .btn-block {
            display: block;
            width: 100%;
        }

        .btn-block+.btn-block {
            margin-top: 0.5rem;
        }

        .btn-loading {
            opacity: 0.6;
            pointer-events: none;
        }

        .alert {
            animation: slideInDown 0.3s ease-out;
        }

        @keyframes slideInDown {
            from {
                transform: translateY(-100%);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        @media (max-width: 768px) {
            .d-grid {
                width: 100%;
            }

            .d-grid .btn {
                width: 100%;
                margin-bottom: 0.5rem;
            }
        }
    </style>

    <script>
        // CSRF token for AJAX requests
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ||
            '{{ csrf_token() }}';

        document.addEventListener('DOMContentLoaded', function() {
            // Handle toggle status button click (AJAX approach)
            const toggleBtn = document.getElementById('toggle-status-btn');

            if (toggleBtn) {
                toggleBtn.addEventListener('click', function() {
                    const restoInfoId = this.dataset.restoInfoId;
                    const currentStatus = parseInt(this.dataset.currentStatus);
                    const newStatus = currentStatus ? 0 : 1; // Toggle status

                    // Prevent double clicks
                    if (this.classList.contains('btn-loading')) {
                        return;
                    }

                    // Add loading state
                    this.classList.add('btn-loading');
                    const originalIcon = this.querySelector('#toggle-icon').className;
                    const originalText = this.querySelector('#toggle-text').textContent;
                    this.querySelector('#toggle-icon').className = 'fa fa-spinner fa-spin';
                    this.querySelector('#toggle-text').textContent = 'Processing...';

                    // Make AJAX request
                    fetch(`{{ url('resto_infos') }}/${restoInfoId}/toggle-active`, {
                            method: 'PATCH',
                            headers: {
                                'Content-Type': 'application/json',
                                'Accept': 'application/json',
                                'X-CSRF-TOKEN': csrfToken,
                                'X-Requested-With': 'XMLHttpRequest'
                            },
                            body: JSON.stringify({
                                is_active: newStatus
                            })
                        })
                        .then(response => {
                            if (!response.ok) {
                                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                            }
                            return response.json();
                        })
                        .then(data => {
                            if (data.success) {
                                // Update button appearance and data
                                updateToggleButton(toggleBtn, newStatus);
                                updateStatusBadge(newStatus);

                                // Show success message
                                showAlert('success', data.message);

                                // Update data attribute for next toggle
                                toggleBtn.dataset.currentStatus = newStatus;
                            } else {
                                throw new Error(data.message || 'Failed to update status');
                            }
                        })
                        .catch(error => {
                            console.error('Toggle error:', error);
                            showAlert('danger', error.message ||
                                'Failed to update resto info status');

                            // Restore original button state
                            this.querySelector('#toggle-icon').className = originalIcon;
                            this.querySelector('#toggle-text').textContent = originalText;
                        })
                        .finally(() => {
                            // Remove loading state
                            toggleBtn.classList.remove('btn-loading');
                        });
                });
            }

            // Auto-dismiss alerts after 5 seconds
            setTimeout(function() {
                document.querySelectorAll('.alert').forEach(alert => {
                    if (alert.parentNode) {
                        alert.remove();
                    }
                });
            }, 5000);
        });

        // Function to update toggle button appearance
        function updateToggleButton(button, isActive) {
            const icon = button.querySelector('#toggle-icon');
            const text = button.querySelector('#toggle-text');

            // Remove existing button classes
            button.classList.remove('btn-success', 'btn-warning');

            if (isActive) {
                // Active state - show deactivate button
                button.classList.add('btn-warning');
                if (icon) icon.className = 'fa fa-pause';
                if (text) text.textContent = 'Deactivate';
            } else {
                // Inactive state - show activate button
                button.classList.add('btn-success');
                if (icon) icon.className = 'fa fa-play';
                if (text) text.textContent = 'Activate';
            }
        }

        // Function to update status badge
        function updateStatusBadge(isActive) {
            const badge = document.getElementById('status-badge');
            if (badge) {
                badge.classList.remove('badge-success', 'badge-secondary');

                if (isActive) {
                    badge.classList.add('badge-success');
                    badge.textContent = 'Active';
                } else {
                    badge.classList.add('badge-secondary');
                    badge.textContent = 'Inactive';
                }
            }
        }

        // Function to show alert messages
        function showAlert(type, message) {
            // Remove existing alerts
            document.querySelectorAll('#alert-container .alert').forEach(alert => alert.remove());

            const alertHtml = `
                <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                    <i class="fa fa-${type === 'success' ? 'check-circle' : 'exclamation-triangle'}"></i> 
                    <strong>${type === 'success' ? 'Success!' : 'Error!'}</strong> ${escapeHtml(message)}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            `;

            document.getElementById('alert-container').insertAdjacentHTML('beforeend', alertHtml);

            // Auto-dismiss after 5 seconds
            setTimeout(() => {
                document.querySelectorAll('#alert-container .alert').forEach(alert => {
                    if (alert.parentNode) {
                        alert.remove();
                    }
                });
            }, 5000);
        }

        // Function to escape HTML to prevent XSS
        function escapeHtml(unsafe) {
            return unsafe
                .replace(/&/g, "&amp;")
                .replace(/</g, "&lt;")
                .replace(/>/g, "&gt;")
                .replace(/"/g, "&quot;")
                .replace(/'/g, "&#039;");
        }

        // Function to confirm delete action
        function confirmDelete() {
            return confirm('Are you sure you want to delete this resto info?\n\nThis action cannot be undone.');
        }
    </script>
@endsection