@extends('layouts.layout_with_nav')

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/kitchen_view.css') }}">
    <link rel="stylesheet" href="{{ asset('css/labels.css') }}">
    <link rel="stylesheet" href="{{ asset('css/quickpanel.css') }}">
    <style>
        .blinking i {
            animation: blink-animation 1s infinite;
        }

        @keyframes blink-animation {
            0% {
                opacity: 1;
            }

            50% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        .kitchen-card {
            transition: all 0.3s ease-in-out;
            background: white;
            border-radius: 12px;
            border: 1px solid #ddd;
        }

        .kitchen-card:hover {
            transform: scale(1.02);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .waiter-img {
            width: 50px;
            height: 50px;
            object-fit: cover;
            border: 2px solid #f8f9fa;
        }

        .order-number {
            font-weight: bold;
            font-size: 18px;
        }

        .order-items {
            padding: 8px;
            border-radius: 8px;
            margin-top: 10px;
        }

        .order-item {
            padding: 5px 0;
            border-bottom: 1px solid #e0e0e0;
        }

        .blinking {
            animation: blink-animation 1.5s infinite;
        }

        @keyframes blink-animation {
            0% {
                opacity: 1;
            }

            50% {
                opacity: 0.5;
            }

            100% {
                opacity: 1;
            }
        }

        /* Color Coding */
        .order-done {
            background: #d4edda;
            border-left: 5px solid #28a745;
        }

        .order-pending {
            background: #fff3cd;
            border-left: 5px solid #ffc107;
        }

        .custom-checkbox {
            width: 18px;
            height: 18px;
            appearance: none;
            border: 2px solid #007bff;
            /* Primary Blue */
            border-radius: 4px;
            background-color: white;
            cursor: pointer;
            position: relative;
        }

        .custom-checkbox:checked {
            background-color: #007bff;
            /* Primary Blue */
            border-color: #007bff;
        }

        .custom-checkbox:checked::after {
            content: '\2713';
            /* Checkmark */
            color: white;
            font-size: 14px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .product-counts {
            display: flex;
            overflow-x: auto;
            background-color: #222;
            color: #fff;
            padding: 20px;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
            font-size: 24px;
            font-weight: bold;
            border-bottom: 4px solid #444;
        }

        .product-count {
            flex: 0 0 auto;
            background-color: #ff5722;
            color: #fff;
            padding: 20px 30px;
            border-radius: 12px;
            text-align: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transition: transform 0.2s ease;
            font-size: 18px;
            font-weight: 500;
        }


        .badge {
            background-color: #007bff;
            color: white;
            border-radius: 25px;
            font-size: 18px;
            display: inline-block;
        }

        .product-count:hover {
            transform: scale(1.05);
        }

        .orders {
            display: flex;
            flex-wrap: wrap;
            padding: 20px;
            gap: 20px;
            justify-content: flex-start;
        }

        .order-card {
            background-color: #fff;
            border: 2px solid #ddd;
            border-radius: 10px;
            padding: 15px;
            width: 250px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            transition: transform 0.2s;
        }

        .order-card:hover {
            transform: scale(1.03);
        }

        .order-title {
            font-weight: bold;
            margin-bottom: 10px;
        }

        .order-items {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .order-items li {
            padding: 5px 0;
            border-bottom: 1px solid #eee;
        }

        .slide-panel {
            position: fixed;
            top: 0;
            right: -100%;
            width: 400px;
            max-width: 90%;
            height: 100%;
            background-color: #ffffff;
            box-shadow: -2px 0 6px rgba(0, 0, 0, 0.3);
            overflow-y: auto;
            padding: 20px;
            z-index: 1000;
            transition: right 0.3s ease-in-out;
        }

        .slide-panel.active {
            right: 0;
        }

        .close-panel {
            position: absolute;
            top: 15px;
            right: 20px;
            font-size: 24px;
            font-weight: bold;
            cursor: pointer;
        }


        .action-buttons button {
            display: block;
            width: 100%;
            margin-top: 10px;
            padding: 10px;
            background-color: #333;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .action-buttons button:hover {
            background-color: #555;
        }
    </style>
@endpush
@push('scripts')
    <script>
        function openPanel(orderTitle) {
            document.getElementById('panelTitle').textContent = orderTitle;
            document.getElementById('actionPanel').classList.add('active');
        }

        function closePanel() {
            document.getElementById('actionPanel').classList.remove('active');
        }
    </script>
@endpush

@section('content')
    <kitchenviewcomponent :store_slack="{{ json_encode($store_slack) }}"
        :kitchen_display_slack="{{ json_encode($kitchen_display_slack) }}"
        :kitchen_display_data="{{ json_encode($kitchen_display_data) }}" :order_link="{{ json_encode($order_link) }}">
    </kitchenviewcomponent>
@endsection