@extends('layouts.' . $template_name)

@section('own-content')

    {{-- se incluye el contenedor sidebar y subheader --}}
    @include('shared.commons.container-sidebar-subheader', ['windows_side' => true, 'page_subheader' => true])

    <section class="section-page-body view-details-products-section">
        <div class="container content">
            <div class="row row-title-btn">
                <div class="col-title-page col-md-8">
                    <h3>@lang('trans.shopping_cart.title')</h3>
                </div>
                <div class="col-btn-page col-md-4">
                    <a class="btn btn-lg btn-outline-primary" href="{{ setRoute('order-online') }}">{{ strtoupper(trans('trans.order')) }}</a>

                    @if (!$cart_order_disabled && !isset($checkout) && (config('resto.is_disabled_login_reorder') == '' || config('resto.is_disabled_login_reorder') == false))
                        <a id="btn-set-checkout" href="{{ setRoute('set-checkout') }}" data-toggle="modal" data-target="{{ !auth()->check() ? '#modalLogin' : '' }}" class="click-open-login-modal btn btn-outline-primary btn-lg" onclick="processCheckout(event, $(this))">
                        @lang('orders.cart_checkout')
                        </a>
                    @endif
                    
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <table id="product_details" class="datatable">
                        <thead>
                            <tr>
                                <th></th>
                                <th>#</th>
                                <th>@lang('trans.description')</th>
                                <th> {{-- @lang('trans.observations') --}} </th>
                                <th>@lang('trans.qty')</th>
                                <th>@lang('trans.price')</th>
                                <th>@lang('trans.total')</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
@stop

@section('extra-head')
    @parent
    {!! Html::style('//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css', [], request()->secure()) !!}
    {{-- Html::style('css/view-details-products.css', [], $isSSL) --}}
    {!! Html::style(app()->environment('production') ? mix('css/view-details-products.css') : asset('css/view-details-products.css'), [], $isSSL) !!}
    <style>
        .show-detail {display:block !important}
    </style>
@show
@section('extra-scripts')
    @parent
    {!! Html::script('//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js', [], request()->secure()) !!}
    {{-- Html::script('//cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js', [], request()->secure()) --}}

    <script>
        $(document).ready(function () {
            var row_detail;
            var details_order = app.__vue__.getContentMetatag('m-app-version') >= 2 ? load_detailsV3() : load_details();
            var table = $('.datatable').DataTable({
                //processing: true,
                //ajax: JSON.stringify(load_details()),
                // responsive: true,
                data: $.map( details_order, function (value, key) {
                    return value;
                } ),
                columnDefs: [
                    { className: "dt-center", "targets": [0] },
                    { className: "dt-left", "targets": [2, 3] },
                    { className: "dt-right", "targets": [1, 4, 5, 6] }//[1, 4, 5, 6]
                ],
                columns: [
                    {className: 'details-control', orderable: false, data: null, defaultContent: ''},
                    {data: "nro", sWidth: "4%"},
                    {title: Lang.get('trans.description'), data: "description", sWidth: "30%"},
                    {title: '', data: "observations", sWidth: "0%"},
                    {title: Lang.get('trans.qty'), data: "quantity", sWidth: "10%"},
                    {title: Lang.get('trans.price'), data: "price", sWidth: "20%"},
                    {title: Lang.get('trans.total'), data: "total", sWidth: "25%"}//responsivePriority: 1,
                ]
            });

            $('#product_details tbody').on('click', 'td.details-control', function () {
                var tr = $(this).closest('tr');
                var row = table.row( tr );

                if ( row.child.isShown() ) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                }
                else {
                    // Open this row
                    row_detail = app.__vue__.getContentMetatag('m-app-version') >= 2 ? row_detailV3(row.data()) : row_detailV2(row.data());
                    row.child(row_detail).show();
                    tr.addClass('shown');
                }
            } );
        });

        /**
         * Load details from shopping cart
         *
         * @author Ing. Roldan Vargas <roldandvg@gmail.com>
         * @return {json} JSON with information about products in shopping cart
         */
        function load_details() {
            var items = JSON.parse(localStorage.shopping_cart);
            var products = {data: []}, number = 1;
            var total_gral = 0;
            var price = 0;
            $.each(items, function() {
                size = (this.size) ? ' (' + this.size + ')':'';
                price = (this.cant > 1) ? (this.price / this.cant) : this.price;
                //product_total = this.cant * this.price;
                product_total = this.price;
                total_gral += product_total;
                //console.log(items)
                products.data.push({
                    nro: number,
                    description: this.name + size,
                    configuration: (typeof(this.configuration)!=="undefined" && this.configuration.length > 0)
                                   ? this.configuration : '',
                    observations: (typeof(this.observations)!=="undefined") ? this.observations : '',
                    prod_included: (typeof(this.prod_included)!=="undefined" && this.prod_included.length > 0)
                                   ? this.prod_included : '',
                    quantity: (typeof(this.cant) !== "undefined") ? this.cant : 1,
                    price: price,
                    total: product_total
                });
                number++;
            });

            $('.total').text(total_gral);
            return products;
        }

        /**
         * Show and hide row details
         *
         * @author  Ing. Roldan Vargas <roldandvg@gmail.com>
         * @param  {object} d Object with detail attributes
         * @return {string}   Return details of the product if exists
         */
        function row_detailV2 ( d ) {
            var detail = '';

            if (d.configuration) {
                detail += `<div class='row row-details-product'>
                               <div class='col-title col-md-3'>
                                   <b>${Lang.get('trans.configuration')}:</b>
                               </div>
                               <div class='col-tables col-md-9'>`;


                $.each(d.configuration, function() {
                    detail += `<div class='title-product display2'><b>${this.name}</b></div>`;
                    var selected = (typeof(this.selected)!=="undefined") ? this.selected : [];
                    var selected_count = 0;
                    var table_selected = '';
                    if (selected) {
                        table_selected +=  `<table cellpadding='5' cellspacing='0' border='0' width='100%'>
                                        <thead>
                                            <tr>
                                                <th>${Lang.get('trans.option')}</th>
                                                <th style="display:block !important">${Lang.get('trans.name')}</th>
                                                <th class='th-right'>${Lang.get('trans.price')}</th>
                                            </tr>
                                        </thead>
                                        <tbody>`;

                        $.each(selected, function() {
                            selected_count++;
                            table_selected +=   `   <tr>
                                                <td>${this.option}</td>
                                                <td style="display:block !important">${this.name}</td>
                                                <td class='val-right'>${this.price}</td>
                                            </tr>`;
                        });
                        table_selected +=  `    </tbody>
                                    </table>`;
                    }
                    detail += (selected_count ? table_selected:'<br style="line-height: 5px;">');
                });
                detail += "    </div>";
                detail += "</div>";
            }

            if (d.prod_included) {
                var withPrice = false;
                $.each(d.prod_included, function() {
                    if (typeof(this.price) !== "undefined" && parseFloat(this.price) > 0 && !withPrice) {
                        withPrice = true;
                    }
                });
                detail +=  `<div class='row row-details-product'>
                                <div class='col-title col-md-3'>
                                    <b>${Lang.get('trans.product_included')}:</b>
                                </div>
                                <div class='col-tables col-md-9'>`;
                var prod_included_count = 0;
                var table_prod_included = `
                                    <table cellpadding='5' cellspacing='0' border='0' width='100%'>
                                        <thead>
                                            <tr>
                                                <th>${Lang.get('trans.option')}</th>
                                                <th style="display:block !important">${Lang.get('trans.name')}</th>
                                                <th class='th-right'>${Lang.get('trans.qty')}</th>`;

                if (withPrice) {
                    table_prod_included += `    <th style="display:block !important" class="th-right">
                                                    ${Lang.get('trans.price')}
                                                </th>`;
                }

                table_prod_included += `    </tr>
                                        </thead>
                                        <tbody>`;

                $.each(d.prod_included, function() {
                    var id = this.id;
                    var show = true;
                    $.each(d.prod_included, function() {
                        if (typeof(this.option_id) !== "undefined" && id === this.option_id) {
                            show = false;
                        }
                    });
                    var quantity = (typeof(this.qty) !== "undefined") ? this.qty : '1';
                    prod_included_count++;
                    table_prod_included += `<tr>
                                                <td>${this.option}</td>
                                                <td style="display:block !important">${(show) ? this.name : ''}</td>
                                                <td class='val-right'>${(show) ? quantity : ''}</td>`;
                    if (withPrice) {
                        table_prod_included += `<td style="display:block !important;text-align: right !important;">
                                                    ${this.price}
                                                </td>`;
                    }
                    table_prod_included += `</tr>`;
                });

                table_prod_included += `</tbody></table>`;
                detail += (prod_included_count ? table_prod_included:'<br style="line-height: 5px;">');

                detail += `</div></div>`;
            }
            var obser = (typeof(d.observations) !=="undefined" && d.observations && d.observations !== '')
                        ?  `<p class='without-info'><b>${Lang.get('trans.observations')}:</b></p>
                            <p class='without-info'>${d.observations}</p>`
                        : " ";

            return ((detail) ? detail : '') + obser;
        }

        /**
         * Load details from shopping cart version 3
         *
         * @return {json} JSON with information about products in shopping cart
         */
        function load_detailsV3() {
            var locale = '{{ $localeSelected }}'; // $localeSelected
            var items = JSON.parse(localStorage.shopping_cart);
            var products = {data: []}, number = 1;
            var total_gral = 0;
            var price = 0;
            $.each(items, function() {
                price = (this.cant > 1) ? (this.price / this.cant) : this.price;
                //product_total = this.cant * this.price;
                product_total = this.price;
                total_gral += product_total;
                //console.log(items)
                products.data.push({
                    nro: number,
                    description: this.name[locale] ,
                    configuration: (typeof(this.configuration)!=="undefined" && this.configuration.length > 0)
                                   ? this.configuration : '',
                    observations: (typeof(this.observations)!=="undefined") ? this.observations : '',
                    prod_included: (typeof(this.prod_included)!=="undefined" && this.prod_included.length > 0)
                                   ? this.prod_included : '',
                    quantity: (typeof(this.cant) !== "undefined") ? this.cant : 1,
                    price: price,
                    total: product_total
                });
                number++;
            });

            $('.total').text(total_gral);
            return products;
        }


        /**
         * Show and hide row details version 3
         *
         * @param  {object} d Object with detail attributes
         * @return {string}   Return details of the product if exists
         */
        function row_detailV3 ( d ) {
            var locale = '{{ $localeSelected }}'; // $localeSelected
            var detail = '';

            if (d.configuration) {
                detail += `<div class='row row-details-product'>
                               <div class='col-title col-md-3'>
                                   <b>${Lang.get('trans.configuration')}:</b>
                               </div>
                               <div class='col-tables col-md-9'>`;


                $.each(d.configuration, function() {
                    detail += `<div class='title-product display2'><b>${this.name[locale]}</b></div>`;
                    var selected = (typeof(this.children)!=="undefined") ? this.children : [];
                    var selected_count = 0;
                    var table_selected = '';
                        table_selected +=  `<table cellpadding='5' cellspacing='0' border='0' width='100%'>
                                        <thead>
                                            <tr>
                                                <th style="display:block !important">${Lang.get('trans.name')}</th>
                                                <th class='th-right'></th>
                                                <th class='th-right'>${Lang.get('trans.price')}</th>
                                            </tr>
                                        </thead>
                                        <tbody>`;

                        $.each(selected, function() {
                            selected_count++;
                            table_selected +=   `   <tr>
                                                <td style="display:block !important">${this.name[locale]} (x${this.quantity})</td>
                                                <td class='val-right'></td>
                                                <td class='val-right'>${this.price}</td>
                                            </tr>`;

                            if (typeof(this.modifiers) !== "undefined" && this.modifiers !== '' && this.modifiers.length > 0) {

                                table_selected +=   `<tr>
                                                        <td style="display:block !important; padding-left:20px;">`;


                                table_selected += `<div class='row row-details-product'>
                                               <div class='col-tables col-md-9'>`;


                                $.each(this.modifiers, function() {
                                    table_selected += `<div class='title-product display2'><b style="color: #8c8c8c !important;">${this.name[locale]}</b></div>`;
                                    var selected_modifiers = (typeof(this.children)!=="undefined") ? this.children : [];
                                    var selected_count_modifiers = 0;
                                    var table_selected_modifiers = '';
                                        table_selected_modifiers +=  `<table cellpadding='5' cellspacing='0' border='0' width='100%'>
                                                        <thead>
                                                            <tr>
                                                                <th style="display:block !important">${Lang.get('trans.name')}</th>
                                                                <th class='th-right'></th>
                                                                <th class='th-right'>${Lang.get('trans.price')}</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>`;

                                        $.each(selected_modifiers, function() {
                                            selected_count_modifiers++;
                                            table_selected_modifiers +=   `   <tr>
                                                                <td style="display:block !important">${this.name[locale]} (x${this.quantity})</td>
                                                                <td class='val-right'></td>
                                                                <td class='val-right'>${this.price}</td>
                                                            </tr>`;
                                        });
                                        table_selected_modifiers +=  `    </tbody>
                                                    </table>`;

                                    table_selected += (selected_count_modifiers ? table_selected_modifiers:'<br style="line-height: 5px;">');
                                });

                                table_selected += "    </div>";
                                table_selected += "</div>";

                                table_selected +=   `</td>
                                                    </tr>`;                             

                            }

                        });
                        table_selected +=  `    </tbody>
                                    </table>`;

                    detail += (selected_count ? table_selected:'<br style="line-height: 5px;">');
                });

                detail += "    </div>";
                detail += "</div>";
            }

            if (d.prod_included) {
                var withPrice = false;

                detail +=  `<div class='row row-details-product'>
                                <div class='col-tables col-md-12'>`;
                var prod_included_count = 0;
                var table_prod_included = `
                                    <table cellpadding='5' cellspacing='0' border='0' width='100%'>
                                        <thead>
                                            <tr>
                                                <th style="display:block !important">${Lang.get('trans.name')}</th>
                                                <th class='th-right'>${Lang.get('trans.qty')}</th>`;


                table_prod_included += `    </tr>
                                        </thead>
                                        <tbody>`;

                $.each(d.prod_included, function() {
                    detail += `<div class='title-product display2'><b>${this.name[locale]}</b></div>`;
                    var selected = (typeof(this.children)!=="undefined") ? this.children : [];
                    var selected_count = 0;
                    var table_prod_included = '';
                        table_prod_included +=  `<table cellpadding='5' cellspacing='0' border='0' width='100%'>
                                        <thead>
                                            <tr>
                                                <th style="display:block !important">${Lang.get('trans.name')}</th>
                                                <th class='th-right'></th>
                                                <th class='th-right'></th>
                                            </tr>
                                        </thead>
                                        <tbody>`;

                        $.each(selected, function() {
                            selected_count++;
                            table_prod_included +=   `   <tr>
                                                <td style="display:block !important">${this.name[locale]} (x${this.quantity})</td>
                                                <td class='val-right'></td>
                                                <td class='val-right'></td>
                                            </tr>`;
                        });
                        table_prod_included +=  `    </tbody>
                                    </table>`;

                    detail += (selected_count ? table_prod_included:'<br style="line-height: 5px;">');
                });

                detail += `</div></div>`;
            }
            var obser = (typeof(d.observations) !=="undefined" && d.observations && d.observations !== '')
                        ?  `<p class='without-info'><b>${Lang.get('trans.observations')}:</b></p>
                            <p class='without-info'>${d.observations}</p>`
                        : " ";

            return ((detail) ? detail : '') + obser;
        }
    </script>
@endsection