@extends('layouts.app')

@section('content')
@if (session('message') && session('redirectdetail'))
    <script>
        window.open('{{ route('order.print', [session('redirectdetail')]) }}', '_blank');
    </script>
@endif
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card mb-3">
                <div class="card-header">
                    Cliente
                    <div id="selectClient" class="d-none">
                        <select id="selectdata" class="form-control"></select>
                    </div>
                </div>
                <div class="card-body">
                    <div class="form-group row" style="margin-bottom: 0.1rem;">
                        <label for="client-name" class="col-md-2 col-form-label">Nombre</label>
                        <div class="col-md-10">
                          <input type="hidden" id="client-id" value=""/>
                          <input type="text" class="form-control" id="client-name" value="" onchange="onChangeDataClient()">
                        </div>
                    </div>
                    <div class="form-group row" style="margin-bottom: 0.1rem;">
                        <div class="col-md-4">
                            <label for="client-phone_number" class="col-md-12 col-form-label py-1">Telefono 1</label>
                            <div class="col-md-12">
                                <input type="text" class="form-control" id="client-phone_number" value="" onchange="onChangeDataClient()">
                            </div>
                        </div>
                        <div class="col-md-4" style="margin-bottom: 0.1rem;">
                            <label for="client-phone_number2" class="col-md-12 col-form-label py-1">Telefono 2</label>
                            <div class="col-md-12">
                                <input type="text" class="form-control" id="client-phone_number2" value="" onchange="onChangeDataClient()">
                            </div>
                        </div>
                        <div class="col-md-4" style="margin-bottom: 0.1rem;">
                            <label for="client-nit" class="col-md-12 col-form-label py-1">NIT</label>
                            <div class="col-md-12">
                                <input type="text" class="form-control" id="client-nit" value="" onchange="onChangeDataClient()">
                            </div>
                        </div>
                    </div>
                    <div class="form-group row" style="margin-bottom: 0.1rem;">
                        <div class="col-md-6">
                            <label for="client-home_address" class="col-md-12 col-form-label py-1">Dirección de casa</label>
                            <div class="col-md-12">
                                <input type="text" class="form-control" id="client-home_address" value="" onchange="onChangeDataClient()">
                            </div>
                        </div>
                        <div class="col-md-6" style="margin-bottom: 0.1rem;">
                            <label for="client-delivery_address" class="col-md-12 col-form-label py-1">Dirección de entrega</label>
                            <div class="col-md-12">
                                <input type="text" class="form-control" id="client-delivery_address" value="" onchange="onChangeDataClient()">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-7 mb-3">
            <div id="accordion" class="categories">
                @foreach ($categories as $item => $value)
                    <div class="card">
                        <div class="card-header text-center {{($item == 0) ? '' : 'collapsed'}}" id="heading{{ $value['category']->id }}" data-toggle="collapse" data-target="#collapse{{ $value['category']->id }}" aria-controls="collapse" aria-expanded="{{($item == 0) ? true : false}}">
                            {{ $value['category']->name }}
                        </div>

                        <div id="collapse{{ $value['category']->id }}" class="collapse {{($item == 0) ? 'show' : ''}}" aria-labelledby="heading{{ $value['category']->id }}" data-parent="#accordion">
                            <div class="card-body">
                                <div class="row">
                                    @foreach ($value['platillos'] as $key => $platillo)
                                        <div class="card option col">
                                            <div class="card-body">
                                                <h5 class="card-title">{{ $platillo->name }}</h5>
                                                <h6 class="card-subtitle mb-2 text-muted"><strong> Q {{ $platillo->price}}</strong>  - {{ $platillo->preparation_time}}</h6>
                                                <p class="card-text">{{ $platillo->description }}</p>
                                                <div class="car-text mb-2">
                                                    @foreach ($platillo['ingredients'] as $i_ingredient => $ingredient)
                                                        <div class="form-check">
                                                            <input class="form-check-input ingredient{{ $platillo->id }}" data-name="{{ $ingredient->name }}" data-id_ingredient="{{ $ingredient->id_ingredient }}" data-id="{{ $ingredient->id }}" type="checkbox" value="" {{ ($ingredient->marcado ? 'checked' : '') }} id="ingredient_{{ $ingredient->id }}">
                                                            <label class="form-check-label" for="ingredient_{{ $ingredient->id }}">
                                                                {{ $ingredient->name }}
                                                            </label>
                                                        </div>
                                                    @endforeach
                                                </div>
                                                <div>

                                                </div>
                                                <button type="button" class="btn-platillo btn btn-success left"
                                                    data-id="{{ $platillo->id }}"
                                                    data-name="{{ $platillo->name }}"
                                                    data-price="{{ $platillo->price }}"
                                                    title="Agregar" onclick="addProduct(this)">+
                                                </button>
                                                <button type="button" class="btn-platillo btn btn-danger right"
                                                    data-id="{{ $platillo->id }}"
                                                    data-name="{{ $platillo->name }}"
                                                    data-price="{{ $platillo->price }}"
                                                    title="Quitar" onclick="removeProduct(this)">-
                                                </button>
                                            </div>
                                        </div>

                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="modal fade" id="commentPlatillo" tabindex="-1" aria-labelledby="commentPlatilloLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="commentPlatilloLabel">Comentario</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form>
                                <div class="form-group">
                                    <label for="comment" class="col-form-label">Comentario:</label>
                                    <textarea class="form-control" id="comment" rows="5"></textarea>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                            <button type="button" id="savecomment" class="btn btn-primary" data-iddetail="-1" onclick="saveComment(this)" data-dismiss="modal">Guardar comentario</button>
                        </div>
                    </div>
                </div>
            </div>
            @if (count($extras) > 0)
                <div class="modal fade" id="extras" tabindex="-1" aria-labelledby="extrasLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="extrasLabel">Extras para</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <table class="table" id="extras_detail">
                                    <thead>
                                        <tr>
                                            <th>Nombre</th>
                                            <th>Precio</th>
                                            <th>Cantidad</th>
                                            <th>+/-</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($extras as $j => $extra)
                                            <tr>
                                                <td style="padding: 5px .75rem;">{{ $extra->name }}</td>
                                                <td style="padding: 5px .75rem;">Q {{ number_format($extra->price, 2, '.', '') }}</td>
                                                <td id="quantity_{{ $extra->id }}" class="extra_quantity" style="padding: 5px .75rem;">0</td>
                                                <td style="padding: 5px .75rem;">
                                                    <button type="button" data-id="{{ $extra->id }}" data-iddetail="-1" data-price="{{ $extra->price }}" data-name="{{ $extra->name }}" class="addExtra btn btn-success" style="font-size: 24px;padding: 0 5px;line-height: 24px;border-radius: 7px;font-weight: bold;" onclick="addExtra(this)">+</button>
                                                    <button type="button" data-id="{{ $extra->id }}" data-iddetail="-1" data-price="{{ $extra->price }}" data-name="{{ $extra->name }}" class="removeExtra btn btn-danger"  style="font-size: 24px;padding: 0 6.5px;line-height: 24px;border-radius: 7px;font-weight: bold;margin-left: 10px;" onclick="removeExtra(this)">-</button>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
        <div class="col-md-5 mb-3">
            <div class="card mb-12">
                <div class="card-header">Orden</div>
                <div class="card-body">
                    @if($sucursales->count() > 1)
                    <div class="form-group row" style="margin-bottom: .3rem;">
                        <label for="id_sucursal" class="col-md-3 col-form-label">Sucursal</label>
                        <div class="col-md-9">
                            <select id="id_sucursal" name="id_sucursal" class="form-control" onchange="onChangeDataClient()">
                                @foreach ($sucursales as $item => $value)
                                    <option value="{{ $value->id }}" {{ ($value->id == $sucursal->id) ? 'selected' : '' }}>{{ $value->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    @endif
                    @if($sucursales->count() == 1)

                        <div class="form-group row" style="margin-bottom: .3rem;">
                            <label for="id_sucursal_text" class="col-md-3 col-form-label">Sucursal</label>
                            <div class="col-md-9">
                                <input value="{{ $sucursal->id }}" id="id_sucursal" name="id_sucursal" class="form-control" type="hidden" disabled>
                                <input value="{{ $sucursal->name }}" id="id_sucursal_text" name="id_sucursal_text" class="form-control" type="text" disabled>
                            </div>
                        </div>
                    @endif
                    <div class="form-group row" style="margin-bottom: .3rem;">
                        <label for="client-name" class="col-md-3 col-form-label">Cliente</label>
                        <div class="col-md-9">
                          <input type="text" class="form-control" id="order-client-name" value="" disabled>
                        </div>
                    </div>
                    <div class="form-group row" style="margin-bottom: .3rem;">
                        <label for="client-name" class="col-md-3 col-form-label">Direccion</label>
                        <div class="col-md-9">
                          <input type="text" class="form-control" id="order-client-address" value="" disabled>
                        </div>
                    </div>
                    <div class="form-group row" style="margin-bottom: .3rem;">
                        <label for="order-type" class="col-md-3 col-form-label">Tipo</label>
                        <div class="col-md-9">
                            <select id="order-type" name="order-type" class="form-control" onchange="onChangeDataClient()">
                                @foreach ($order_category as $item => $value)
                                    <option value="{{ $value->id }}">{{ $value->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="form-group row" style="margin-bottom: .3rem;">
                        <label for="order-delivery_date" class="col-md-3 col-form-label">Entrega</label>
                        <div class="col-md-9">
                          <input type="datetime-local" class="form-control" id="order-delivery_date" onchange="onChangeDataClient()" value="" >
                        </div>
                    </div>
                    <div class="form-group row" style="margin-bottom: .3rem;">
                        <label for="order-discount" class="col-md-3 col-form-label">Descuento</label>
                        <div class="col-md-9">
                          <input type="number" class="form-control" id="order-discount" onchange="onChangeDataClient()" value="" >
                        </div>
                    </div>
                    <table class="table" id="order-detail">
                        <thead>
                            <tr>
                              <th scope="col" width="64%">Producto</th>
                              <th scope="col" width="10%" style="min-width: 75px;">Acción</th>
                              <th scope="col" width="13%">Cantidad</th>
                              <th scope="col" width="13%">Total</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                    <form method="POST" action="{{ route('order.create') }}" autocomplete="off" style="text-align: center;">
                        @csrf
                        <input type="hidden" value="" id="data_submit" name="data_submit"/>
                        <button type="submit" class="btn btn-primary">Crear Orden</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('footer')
<script type="text/javascript" >
    let order = {
        client : {
            id : '',
            name : '',
            phone_number : '',
            phone_number2 : '',
            nit : '',
            home_address : ''
        },
        discount : 0,
        delivery_address : '',
        delivery_date : '',
        type : '',
        sucursal: {{ $sucursal->id }}
    };
    let clients;
    window.onload = function() {
        $('#selectClient').removeClass('d-none');
        $('#selectdata').select2({
            language: {
                noResults: function() { return "No hay resultados"; },
                searching: function() { return "Buscando..."; }
            },
            placeholder: 'Buscar',
            minimumInputLength: 3,
            ajax : {
                url : '{{ route('client.search') }}',
                dataType : 'json',
                delay: 250,
                async: false,
                processResults : function(data) {
                    clients = data;
                    return {
                        results: $.map(data, function (item) {
                            return {
                                text: item.name,
                                id: item.id
                            }
                        })
                    }
                },
                cache: true
            }
        }).on('select2:select', function(e){
            let data = e.params.data;
            clients.forEach(element => {
                if (element.id == data.id)
                    data = element;
            });
            $('#client-id').val(data.id);
            $('#client-name').val(data.name);
            $('#client-phone_number').val(data.phone_number);
            $('#client-phone_number2').val(data.phone_number2);
            $('#client-nit').val(data.nit);
            $('#client-home_address').val(data.home_address);
            $('#client-delivery_address').val(data.home_address);
            order.client = {
                'id' : data.id,
                'name' : data.name,
                'phone_number' : data.phone_number,
                'phone_number2' : data.phone_number2,
                'nit' : data.nit,
                'home_address' : data.home_address,
            };
            order.delivery_address = data.home_address;
            onChangeDataClient();
        })
        .on('select2:opening', function(e) {
            setTimeout(() => {
                var $searchfield = $('.select2-search__field');
                $searchfield.on('input', function() {
                    $('#client-name').val(this.value);
                    onChangeDataClient();
                });
            }, 100);
        });

        //modal comentarios
        $('#commentPlatillo').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var recipient = button.data('name');
            var modal = $(this);
            modal.find('.modal-title').text('Comentario para ' + recipient);
            modal.find('#savecomment').data('iddetail', button.data('iddetail'));
            if (typeof order.detail[button.data('iddetail')] !== 'undefined') {
                if (typeof order.detail[button.data('iddetail')].comment === 'undefined')
                    order.detail[button.data('iddetail')].comment = '';
                modal.find('#comment').val(order.detail[button.data('iddetail')].comment);
            }
        });
        //modal extras
        $('#extras').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var recipient = button.data('name');
            var modal = $(this);
            modal.find('.modal-title').text('Extras para ' + recipient);
            $('.extra_quantity').each(function() {
                $(this).text('0');
            });
            $('.addExtra').each(function() {
                $(this).data('iddetail', button.data('iddetail'));
            });
            $('.removeExtra').each(function() {
                $(this).data('iddetail', button.data('iddetail'));
            });
            if (typeof order.detail[button.data('iddetail')] !== 'undefined') {
                if (typeof order.detail[button.data('iddetail')].extras === 'undefined') {
                    order.detail[button.data('iddetail')].extras = [];
                } else {
                    order.detail[button.data('iddetail')].extras.forEach((i, v) => {
                        $('#quantity_' + i.id).text(i.quantity);
                    });
                }
            }
        });
    }

    function onChangeDataClient() {
        order.client.name = $('#client-name').val();
        order.client.phone_number = $('#client-phone_number').val(),
        order.client.phone_number2 = $('#client-phone_number2').val(),
        order.client.nit = $('#client-nit').val(),
        order.client.home_address = $('#client-home_address').val(),
        order.delivery_address = $('#client-delivery_address').val();
        order.delivery_date = $('#order-delivery_date').val();
        order.type = $('#order-type').val();
        order.sucursal = $('#id_sucursal').val();
        order.discount = $('#order-discount').val();
        $('#order-client-name').val(order.client.name);
        $('#order-client-address').val(order.delivery_address);
        updateOrder();
    }

    function updateOrder() {
        if(typeof order.detail != 'undefined') {
            let table = $('#order-detail tbody');
            table.html('');
            let total = 0;
            order.detail.forEach(function(value, index) {
                total += value.total;
                let htmlIngredients = '<div>';
                value.ingredients.forEach(function(value2, j) {
                    htmlIngredients += '<span class="badge badge-pill badge-dark" style="margin: 0 2px;">' + value2.name + '</span>';
                });
                let totalExtras = 0;
                if (typeof value.extras !== 'undefined') {
                    value.extras.forEach(function(value2, j) {
                        if (value2.quantity > 0) {
                            totalExtras += value2.total;
                            total += value2.total;
                            htmlIngredients += '<span class="badge badge-pill badge-warning">' + value2.quantity + ' - ' + value2.name + '</span>';
                        }
                    });
                }
                htmlIngredients += '</div>';

                table.append('<tr>' +
                    '<td>' +  value.name + htmlIngredients +'</td>' +
                    '<td padding:10px;>'
                    + '<button type="button" class="btn btn-dark" style="border-radius:50%;width: 22px;height: 21px;padding: 0px;" data-toggle="modal" data-target="#commentPlatillo" data-iddetail="' + index + '" data-name="' + value.name + '">'
                    + '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-chat-quote-fill" viewBox="0 0 16 16">'
                    + '<path d="M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM7.194 6.766a1.688 1.688 0 0 0-.227-.272 1.467 1.467 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 5.734 6C4.776 6 4 6.746 4 7.667c0 .92.776 1.666 1.734 1.666.343 0 .662-.095.931-.26-.137.389-.39.804-.81 1.22a.405.405 0 0 0 .011.59c.173.16.447.155.614-.01 1.334-1.329 1.37-2.758.941-3.706a2.461 2.461 0 0 0-.227-.4zM11 9.073c-.136.389-.39.804-.81 1.22a.405.405 0 0 0 .012.59c.172.16.446.155.613-.01 1.334-1.329 1.37-2.758.942-3.706a2.466 2.466 0 0 0-.228-.4 1.686 1.686 0 0 0-.227-.273 1.466 1.466 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 10.07 6c-.957 0-1.734.746-1.734 1.667 0 .92.777 1.666 1.734 1.666.343 0 .662-.095.931-.26z"/>' +
                    + '</svg>'
                    + '</button>'
                    + '<button type="button" class="btn btn-dark" style="margin-left:7px;border-radius:50%;width: 22px;height: 21px;padding: 0px;" data-toggle="modal" data-target="#extras" data-iddetail="' + index + '" data-name="' + value.name + '">'
                    + '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-bookmark-plus-fill" viewBox="0 0 16 16">'
                    + '<path fill-rule="evenodd" d="M8 4a.5.5 0 0 1 .5.5V6H10a.5.5 0 0 1 0 1H8.5v1.5a.5.5 0 0 1-1 0V7H6a.5.5 0 0 1 0-1h1.5V4.5A.5.5 0 0 1 8 4z"/>'
                    + '<path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z"/>'
                    + '</svg>'
                    + '</button>'
                    + '</td>' +
                    '<td style="text-align:center;">' + value.quantity + '</td>' +
                    '<td>' + (value.total + totalExtras) + '</td>' +
                    '</tr>');
            });
            table.append('<tr>' +
                    '<th colspan="3">TOTAL</th>' +
                    '<th>' + ((order.discount < total) ? (total - order.discount) : total) + '</th>' +
                    '</tr>');

            $('#data_submit').val(JSON.stringify(order));
        }
    }

    function removeProduct($this) {
        if(typeof order.detail != 'undefined') {
            $this = $($this);
            let ingredients = [];

            $('.ingredient' + $this.data('id') + ':checked').each(function(i, value) {
                value = $(value);
                ingredients.push({
                    id: value.data('id_ingredient'),
                    name: value.data('name')
                });
            });

            let exist = false;
            for(let i = 0; i < order.detail.length; i++) {
                if (order.detail[i].id == $this.data('id')) {
                    if (order.detail[i].ingredients.length == ingredients.length) {
                        if (JSON.stringify(order.detail[i].ingredients) == JSON.stringify(ingredients)) {
                            if (order.detail[i].quantity == 1) {
                                order.detail.splice(i, 1);
                            } else {
                                order.detail[i].quantity = order.detail[i].quantity - 1;
                                order.detail[i].total = order.detail[i].quantity * order.detail[i].price;
                            }
                            break;
                        }
                    }
                }
            }
            updateOrder();
        }
    }

    function addProduct($this) {
        $this = $($this);
        let ingredients = [];

        $('.ingredient' + $this.data('id') + ':checked').each(function(i, value) {
            value = $(value);
            ingredients.push({
                id: value.data('id_ingredient'),
                name: value.data('name')
            });
        });

        if (typeof order.detail == 'undefined') {
            order.detail = [];

            order.detail.push({
                id : $this.data('id'),
                name : $this.data('name'),
                price : $this.data('price'),
                quantity : 1,
                total: $this.data('price') * 1,
                ingredients : ingredients
            });
        } else {
            let exist = false;
            for(let i = 0; i < order.detail.length; i++) {
                if (order.detail[i].id == $this.data('id')) {
                    if (order.detail[i].ingredients.length == ingredients.length) {
                        if (JSON.stringify(order.detail[i].ingredients) == JSON.stringify(ingredients)) {
                            order.detail[i].quantity = order.detail[i].quantity + 1;
                            order.detail[i].total = order.detail[i].quantity * order.detail[i].price;
                            exist = true;
                            break;
                        }
                    }
                }
            }

            if(!exist) {
                order.detail.push({
                    id : $this.data('id'),
                    name : $this.data('name'),
                    price : $this.data('price'),
                    quantity : 1,
                    total: $this.data('price') * 1,
                    ingredients : ingredients
                });
            }
        }

        updateOrder();
    }

    function saveComment(e) {
        let $this = $(e);
        if (typeof order.detail[$this.data('iddetail')] !== 'undefined')
                order.detail[$this.data('iddetail')].comment = $('#comment').val();
        $('#data_submit').val(JSON.stringify(order));
    }

    function addExtra(e) {
        let $this = $(e);
        if (typeof order.detail[$this.data('iddetail')] !== 'undefined') {
            if (typeof order.detail[$this.data('iddetail')].extras[$this.data('id')] === 'undefined') {
                order.detail[$this.data('iddetail')].extras[$this.data('id')] = {
                    id : $this.data('id'),
                    name : $this.data('name'),
                    quantity : 1,
                    total : (1 * $this.data('price'))
                };
            } else {
                let temp = order.detail[$this.data('iddetail')].extras[$this.data('id')];
                temp.quantity = temp.quantity + 1;
                temp.total = (temp.quantity * $this.data('price'));
            }
            let temp = order.detail[$this.data('iddetail')].extras[$this.data('id')];
            $('#quantity_' + temp.id).text(temp.quantity);
            updateOrder();
        }
    }

    function removeExtra(e) {
        let $this = $(e);
        if (typeof order.detail[$this.data('iddetail')] !== 'undefined') {
            if (typeof order.detail[$this.data('iddetail')].extras[$this.data('id')] !== 'undefined') {
                let temp = order.detail[$this.data('iddetail')].extras[$this.data('id')];
                if (temp.quantity > 0) {
                    temp.quantity = temp.quantity - 1;
                    temp.total = (temp.quantity * $this.data('price'));
                    $('#quantity_' + temp.id).text(temp.quantity);
                    updateOrder();
                }
            }
        }
    }
</script>
@endsection