<link href="{{ asset('css/components/tables/entity-tables.css') }}" rel="stylesheet">
<link href="{{ asset('css/components/custom/toastify.css') }}" rel="stylesheet">

{{-- CSS --}}
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">

@extends('adminlte::page')
@section('plugins.Datatables',true)

@section('title', __('modules')['dashboard']['restaurant']['products'])

@section('content')

    {{-- Body --}}
    <div class="col-xs-12">
        {{-- Title & Button --}}
        <div class="mb-3 row cardtitle">
            <div class="col-lg-8 col-md-7">
                <h3>{{ __('modules')['dashboard']['restaurant']['products'] }}</h3>
            </div>
            <div class="col-lg-4 col-md-5" align="right">
                <button type="button" name="create_record" id="create_record" class="boton btn " style="color:#fff;">
                    ✚ {{ __('common_actions')['add'] }} {{ __('entities')['restaurant']['product'] }}
                </button>
            </div>
        </div>

        {{-- Table Structure --}}
        <div class="mb-5 table-responsive">
            <table class="table text-center cardtable" id="products_table">
                <thead>
                    <tr class="cardtabletr">
                        <th>{{ __('entity_fields')['product']['category'] }}</th>
                        <th>{{ __('entity_fields')['common']['name'] }}</th>
                        <th>{{ __('entity_fields')['common']['price'] }}</th>
                        <th width="15%">{{ __('entity_fields')['common']['created_at'] }}</th>
                        <th width="15%">{{ __('entity_fields')['common']['updated_at'] }}</th>
                        <th width="15%">{{ __('entity_fields')['common']['actions'] }}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    {{-- Form --}}
    @include('restaurant.products.components.product-form')

    {{-- JS Control --}}
    <script type="text/javascript">
        "use strict";
    </script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

    <script>
      // Table Controller
        $(document).ready(function(){
            $('#products_table').DataTable({
                language: getDataTableLanguageConfig(),
                processing: false,
                serverSide: true,
                ajax:{
                    url: "{{ route('products.index') }}",
                },
                columns:[
                    {
                        data: 'category',
                    },
                    {
                        data: 'product_name',
                        name: 'product_name'
                    },
                    {
                        data: 'product_price',
                        name: 'product_price',
                        orderable: false
                    },
                    {
                        data: 'created_at',
                        name: 'created_at',
                        orderable: false
                    },
                    {
                        data: 'updated_at',
                        name: 'updated_at',
                        orderable: false
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false
                    }
                ]
            });
        });

        // Table Data Cycle
        function cargarTabla(){
            $('#products_table').DataTable().ajax.reload(null, false);
        }

        $( document ).ready(function() {
            setInterval(cargarTabla, 120000); //Cada 120 segundos (120 mil milisegundos)
        });
        
      //* Support Functions
        function showToast(text, gradient_from, gradient_to) {
            Toastify({
                text,
                duration: 4000,
                close: false,
                gravity: "bottom",
                position: "center",
                avatar: "{{ asset('images/toast-info-icon.png') }}",
                style: {
                    background: `linear-gradient(to right, ${gradient_from}, ${gradient_to})`,
                },
            }).showToast();
        }

    </script>

@endsection

