@extends('layouts.app')
@section('style')
    <link href="{{asset('autocomplete/jquery-ui.css')}}" rel="stylesheet" type="text/css"/>
    <link href="{{asset('assets/libs/sweetalert2/sweetalert2.min.css')}}" rel="stylesheet" type="text/css"/>
@endsection
@section('content')
    <div class="row mt-5">
        <div class="col-12">
            <div class="card-box">
                <div class="text-center">
                    <h4 class="header-title text-6xl">Add Products</h4>
                </div>
                <div class="col-12">
                    <div class="float-right text-3xl">
                        <a href="{{route('sales_list.index')}}"><i class="dripicons-arrow-left"></i></a>
                    </div>
                    <div class="clear-both"></div>
                    <div class="p-2">
                        {{--Customer info--}}
                        <div class="form-inline text-xl">
                            <p class="mr-2">Name: </p>
                            <p class="mr-lg-5">{{ $sale->name }}</p>
                            <p class="mr-2">Phone: </p>
                            <p class="mr-lg-5">{{ preg_replace('~.*(\d{3})[^\d]{0,7}(\d{3})[^\d]{0,7}(\d{4}).*~', '($1) $2-$3',$sale->phone) }}</p>
                            <p class="mr-2">Cellphone: </p>
                            <p class="mr-lg-5">{{ preg_replace('~.*(\d{3})[^\d]{0,7}(\d{3})[^\d]{0,7}(\d{4}).*~', '($1) $2-$3',$sale->cellphone) }}</p>
                            <p class="mr-2">Adress: </p>
                            <p class="mr-lg-5">{{ $sale->address }}</p>
                            <p class="mr-2">Email: </p>
                            <p class="mr-lg-5">{{ $sale->email }}</p>
                        </div>
                        {{--End Customer info--}}

                        <div class="row flex flex-grow">
                            <div class="col-sm-3 bg-gray-600 mt-3 pt-1 pb-1">
                                <div class="card card-head bg-gray-600 text-lg pt-2">
                                    <h4 id="buttom_menu_head_id" class="card-title flex flex-grow justify-center"></h4>
                                </div>

                                <div class="card card-body bg-gray-700">
                                {{--Routes for ajax functions --}}
                                    <input type="hidden" id="route_category_button"
                                           value="{{ route('sale_order_category_button') }}">
                                    <input type="hidden" id="route_product_button"
                                           value="{{ route('sale_order_product_button') }}">
                                    <input type="hidden" id="route_product_add_button"
                                           value="{{ route('sale_order_product_add_button') }}">
                                    <input type="hidden" id="route_product_weight_button"
                                           value="{{ route('sale_order_product_weight_button') }}">
                                    <input type="hidden" id="route_product_filling_button"
                                           value="{{ route('sale_order_product_filling_button') }}">
                                    {{--End Routes for ajax functions --}}

                                    {{--Id of the sale--}}
                                    <input type="hidden" id="sale_id"
                                           value="{{ $sale->id }}">
                                    {{--End Id of the sale--}}

                                    {{--Go back button menu--}}
                                    <input type="hidden" id="value_back_function">
                                    <div id="go_back_button_menu" class="text-2xl flex flex-grow justify-center">

                                    </div>
                                    {{--End Go back button menu--}}

                                    {{--Buttons for menu of products --}}
                                    @if($sale->status != 'cancel')
                                    <div id="buttom_menu_body_id"></div>
                                    @endif
                                    {{--End Buttons for menu of products --}}

                                </div>

                                {{--Show Total price of the sale --}}
                                <div id="total_sale_price">
                                    <div class="form-group row">
                                        <label class="col-md-3 col-form-label text-2xl" for="total_sale_price_input">Total:</label>
                                        <div class="col-md-5">
                                            <input type="text" id="total_sale_price_input" name="total_sale_price_input" class="form-control" value="{{ preg_replace('/\B(?=(\d{3})+(?!\d))/',',',$total_sale) }}" readonly>
                                        </div>
                                    </div>
                                </div>
                                {{--End Show Total price of the sale --}}

                                {{--Return money--}}
                                <div id="return_sale_price">
                                    <div class="form-group row">
                                        <label class="col-md-3 col-form-label text-2xl" for="return_sale_price_input">Return:</label>
                                        <div class="col-md-5">
                                            <input type="text" id="return_sale_price_input" name="return_sale_price_input" class="form-control" value="0" readonly>
                                        </div>
                                    </div>
                                </div>
                                {{--End Return money--}}

                                {{--Show payment option--}}
                                @if($dispatch != 'saved')

                                    <div>
                                        <form id="form_payment_order" method="post" action="{{route('pay_order', ['sale_id' => $sale->id])}}">
                                            @csrf
                                            <input type="hidden" name="total" value="{{$total_sale}}">
                                            @if(empty($payment_sale_info))
                                            {{-- Para identificar si ya se pago o no. No esta pago permite agregar pago--}}
                                                <input type="hidden" id="paidOrNot" value="no">
                                            {{--End Para identificar si ya se pago o no. No esta pago permite agregar pago--}}
                                            <div class="form-row">
                                                <div class="form-group col-md-6">
                                                    <label for="pay_id" class="col-form-label">Pay:</label>
                                                    <input type="text" class="form-control pay_amount_control" name="pay[]" id="pay_id" onkeyup="calculateReturnOfPayment();">
                                                </div>

                                                <div class="form-group col-md-4">
                                                    <label for="methodPayment" class="col-form-label">Method:</label>
                                                    <select id="methodPayment" name="method[]" class="form-control">
                                                        <option value="cash">Cash</option>
                                                        <option value="card">Card</option>
                                                    </select>
                                                </div>

                                                <div class="form-group col-md-2 ">
                                                    <label class="col-form-label"></label>
                                                    <div class="pt-3 pl-2">
                                                        <button type="button" onclick="addPaymentInput();">
                                                            <i class="mdi mdi-plus-circle"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                            @else
                                                {{-- Para identificar si ya se pago o no. Esta pago no permite agregar pago--}}
                                                <input type="hidden" id="paidOrNot" value="paid">
                                                {{--End Para identificar si ya se pago o no. Esta pago no permite agregar pago--}}
                                                @php($c = 0)
                                                @foreach($payment_sale_info as $payment)
                                                    <div class="form-row">
                                                        <div class="form-group col-md-6">
                                                            <label for="pay_id_{{$c}}" class="col-form-label">Pay:</label>
                                                            <input type="text" class="form-control pay_amount_control" name="pay[]" id="pay_id_{{$c}}" value="{{$payment->paid}}" disabled>
                                                        </div>

                                                        <div class="form-group col-md-4">
                                                            <label for="methodPayment_{{$c}}" class="col-form-label">Method:</label>
                                                            <input id="methodPayment_{{$c}}" name="method[]" class="form-control" value="{{ucfirst($payment->type_of_payment)}}" disabled>
                                                        </div>

                                                    </div>
                                                    @php($c++)
                                                @endforeach
                                            @endif

                                            {{--Add more input to simulate split payment--}}
                                            <input type="hidden" id="control" name="control" value="0">
                                            <div id="add_more_payment_method"></div>
                                            {{--End Add more input to simulate split payment--}}
                                        </form>
                                    </div>
                                @endif
                                {{--End Show payment option--}}

                                {{--Pay Button--}}
                                <div>
                                    <button id="button_to_pay_id" class="btn btn-info btn-rounded width-lg btn-block waves-effect waves-light mb-2 paidOrNotAttr" onclick="savePayOrder();" disabled>Pay</button>
                                </div>
                                {{--End Pay Button--}}

                                {{--Show Buttons dispatch, Sale and Cancel --}}
                                @if($sale->status != 'cancel' && $sale->status != 'close')
                                <div>
                                    <button class="btn btn-danger btn-rounded width-md waves-effect waves-light float-left" onclick="cancelSale();">Cancelar Orden</button>
                                    <input type="hidden" id="cancel_order_form" value="{{ route('cancel_sale', ['sale' => $sale->id]) }}">

                                    @if($products)
                                        @if($dispatch == 'saved')
                                            <a href="{{ route('start_prepare_order', ['sale_id' => $sale->id]) }}" class="btn btn-purple btn-rounded width-md waves-effect waves-light float-right">Despachar Orden</a>
                                        @elseif($dispatch == 'preparing' || $dispatch == 'dispatched')
                                            <a href="{{ route('complete_order', ['sale' => $sale->id]) }}" class="btn btn-success btn-rounded width-md waves-effect waves-light float-right">Completar Orden</a>
                                        @endif
                                    @endif
                                </div>
                                @endif
                                {{--End Show Buttons dispatch, Sale and Cancel --}}

                            </div>

                            <div class="col-sm-8 float-right bg-gray-600 mt-3 pt-1 pb-1 ml-2">
                                <div class="table-responsive">
                                    <input type="hidden" id="url_comment_id" value="{{ route('url_comment_item') }}">
                                    <input type="hidden" id="print_receive_id" value="{{ route('print_receive_id', ["sale" => $sale->id]) }}">
                                    <table id="id_datatable" class="table table-dark mb-0">
                                        <thead>
                                        <tr>
                                            <th>Product</th>
                                            <th>Price</th>
                                            <th>Amount</th>
                                            <th>Comment</th>
                                            <th>Dispatch</th>
                                            <th>Delete</th>
                                            <th class="hidden">Delete</th>
                                        </tr>
                                        </thead>

                                        <tbody id="form_sales_products_list">
                                            @forelse($products as $product)
                                                <tr>
                                                    <td>
                                                        {{ $product['category'] }} {{ $product['product'] }}
                                                        @if($product->has('fillings'))
                                                            <br/>F(
                                                            @foreach($product['fillings'] as $pf)
                                                                {{ $pf['filling_name'] }}
                                                            @endforeach
                                                            <p class="row-end-1 inline">)</p>
                                                        @endif

                                                    </td>
                                                    <td>{{ preg_replace('/\B(?=(\d{3})+(?!\d))/',',',$product['sale_price']) }}</td>
                                                    <td>{{ $product['amount'] }}</td>
                                                    <td>
                                                        @if($product->has('comment_id'))
                                                            <button class="btn btn-link" onclick="showComment({{ $product['comment_item_id'] }}, {{ $product['comment_id'] }}, '{{ $product['comment'] }}')">Comment*</button>
                                                        @else
                                                            <button class="btn btn-link" onclick="showComment({{ $product['comment_item_id'] }})">Comment</button>
                                                        @endif
                                                    </td>
                                                    <td>{{ $product['dispatch'] }}</td>
                                                    <td>
                                                        @if($sale->status != 'cancel' && $sale->status != 'close')
                                                            <button onclick="deleteItem({{$product['item_ventas_id']}})" class="text-2xl"><i class="mdi mdi-delete-circle-outline"></i></button>
                                                        @endif
                                                    </td>
                                                    <td class="hidden"><input type="hidden" id="click_delelte_item_{{ $product['item_ventas_id'] }}" value="{{ route('delete_item_from_sale', ['item_id' => $product['item_ventas_id']]) }}"></td>
                                                </tr>
                                            @empty
                                                <p>There is no product</p>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end row -->
            </div><!-- end col -->
        </div>
        <!-- end row -->

    @endsection

    @push('scripts')
        <!-- third party js -->
            <script src="{{ asset('assets/libs/datatables/jquery.dataTables.min.js') }}"></script>
            <script src="{{ asset('assets/libs/datatables/dataTables.bootstrap4.js') }}"></script>
            <script src="{{ asset('assets/libs/datatables/dataTables.responsive.min.js') }}"></script>
            <script src="{{ asset('assets/libs/datatables/responsive.bootstrap4.min.js') }}"></script>
            <script src="{{ asset('assets/libs/datatables/dataTables.buttons.min.js') }}"></script>
            <script src="{{ asset('assets/libs/datatables/buttons.bootstrap4.min.js') }}"></script>
            <script src="{{ asset('assets/libs/datatables/buttons.html5.min.js') }}"></script>
            <script src="{{ asset('assets/libs/datatables/buttons.flash.min.js') }}"></script>
            <script src="{{ asset('assets/libs/datatables/buttons.print.min.js') }}"></script>
            <script src="{{ asset('assets/libs/datatables/dataTables.keyTable.min.js') }}"></script>
            <script src="{{ asset('assets/libs/datatables/dataTables.select.min.js') }}"></script>
            <script src="{{ asset('assets/libs/pdfmake/pdfmake.min.js') }}"></script>
            <script src="{{ asset('assets/libs/pdfmake/vfs_fonts.js') }}"></script>
            <script src="{{ asset('assets/libs/sweetalert2/sweetalert2.min.js') }}"></script>
            <!-- third party js ends -->

            <!-- Datatables init -->
            <script src="{{ asset('assets/js/pages/datatables.init.js') }}"></script>
            <script src="{{ asset('js/sales_order.js') }}"></script>
            <script src="{{ asset('js/general.js') }}"></script>
            <script>
                $(function () {
                    $('#id_datatable').dataTable({
                        searching: false,
                        ordering: false,
                        info: true,
                        lengthChange: false,
                        bPaginate: false,
                        paging: false,
                        columnDefs:[
                            {
                                // targets:6,
                                // visible: false,
                            }
                        ]
                    });

                    buttonCategorySale();

                    <!-- Mensaje de exito o fracaso control -->
                    if($('#menssage_success_id').val() != undefined)
                    {
                        Swal.fire({
                            position: 'top-center',
                            type: 'success',
                            title: $('#menssage_success_id').val(),
                            showConfirmButton: false,
                            timer: 3000
                        });
                        printReceive($("#sale_id").val());
                    }

                    if($('#menssage_fail_id').val() != undefined)
                    {
                        Swal.fire({
                            position: 'top-end',
                            type: 'error',
                            title: $('#menssage_fail_id').val(),
                            showConfirmButton: false,
                            timer: 3000
                        });
                    }

                    <!--End Mensaje de exito o fracaso control -->


                //    Valido si esta paga la orden o no y asi deshabilito o no los input
                    if($("#paidOrNot").val() == 'paid')
                    {
                        $("#button_to_pay_id").html('Paid')
                    }
                });

            </script>
    @endpush