@extends('layout')

@section('content')
    <script>
        $(document).ready(function() {
            function updateTotal() {
                var total = 0;
                var total2 = 0;
                var total3 = 0;

                $('.tipo_pago').each(function() {
                    var selectedText = $(this).find('option:selected').text();
                    var saldo = parseFloat($(this).data('saldo')) || 0;

                    if (selectedText === "Blue points")
                    {
                        total += saldo;
                    }
                    else if (selectedText === "Efectivo")
                    {
                        total2 += saldo;
                    }
                });

                $('#total_blue').text('$' + total.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));
                $('#total_efectivo').text('$' + total2.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));

                total3 = total + total2;
                $('#total').text('$' + total3.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));
            }

            $('.tipo_pago').change(updateTotal);
            updateTotal();

            $('body').on('click', '.btn_eliminar', function(){
                var $this = $(this);

                Swal.fire({
                    title: "¿Quiere eliminar?",
                    text: "¿Quiere quitar este lugar",
                    icon: "warning",
                    showCancelButton: !0,
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "Si, quitalo!",
                    cancelButtonText: "Cancelar",
                    confirmButtonClass: "btn btn-primary",
                    cancelButtonClass: "btn btn-danger ml-1",
                    buttonsStyling: !1,
                }).then(function (t) {
                    t.value
                        ? $.ajax({
                            url: $this.attr("data-route"),
                            type: 'get',
                        }).done(function (response) {
                            Swal.fire({
                                icon: response.icon,
                                title: response.title,
                                text: response.text
                            });

                            $('#fila'+response.fila).remove();
                            updateTotal();
                        }).fail(function (response) {
                            console.log("fallo");
                            console.log(response);  
                            
                            toastr.error("Error al enviar los datos", "Error", {
                                closeButton: !0,
                                tapToDismiss: !1,
                                progressBar: !0,
                            })
                        })
                    : t.dismiss === Swal.DismissReason.cancel;
                });
            })

            $('body').on('submit','.form_guardar', function(e){
                e.preventDefault();

                formData = new FormData(document.getElementById($(this).attr('id')));
                var url = $(`#${$(this).attr('id')}`).attr('action');

                $.ajax({
                    type:'POST',
                    url:url,
                    contentType: false,
                    processData: false,
                    datatype: "JSON",
                    data: formData,
                    beforeSend: function(){
                        $("#btn_guardar").val("Enviando..");
                        $("#btn_guardar").attr("disabled","disabled");
                    }
                }).done(function (response) {
                    Swal.fire({
                        icon: response.icon,
                        title: response.title,
                        text: response.text,
                    });

                    $(location).attr('href',response.ruta);
                    console.log(response);
                }).fail(function (response) {
                    console.log("fallo");
                    console.log(response);

                    $(".error").remove();

                    $.each(response.responseJSON.errors, function (index, value) {
                        $("#" + index).after('<span class="error form-text text-danger"><b>'+value+'</b></span>');
                    });
                });

                $("#btn_guardar").val("Guardar");
                $("#btn_guardar").attr("disabled",false);
            })
        });
    </script>
    <div class="card card-custom">
        <div class="card-header card-header-tabs-line nav-tabs-line-3x">
            <div class="card-toolbar">
                <ul class="nav nav-tabs nav-bold nav-tabs-line nav-tabs-line-3x">
                    <li class="nav-item mr-3">
                        <a class="nav-link active" data-toggle="tab" href="#kt_user_edit_tab_1">
                            <span class="nav-icon">
                                <span class="svg-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <polygon points="0 0 24 0 24 24 0 24" />
                                            <path d="M12.9336061,16.072447 L19.36,10.9564761 L19.5181585,10.8312381 C20.1676248,10.3169571 20.2772143,9.3735535 19.7629333,8.72408713 C19.6917232,8.63415859 19.6104327,8.55269514 19.5206557,8.48129411 L12.9336854,3.24257445 C12.3871201,2.80788259 11.6128799,2.80788259 11.0663146,3.24257445 L4.47482784,8.48488609 C3.82645598,9.00054628 3.71887192,9.94418071 4.23453211,10.5925526 C4.30500305,10.6811601 4.38527899,10.7615046 4.47382636,10.8320511 L4.63,10.9564761 L11.0659024,16.0730648 C11.6126744,16.5077525 12.3871218,16.5074963 12.9336061,16.072447 Z" fill="#000000" fill-rule="nonzero" />
                                            <path d="M11.0563554,18.6706981 L5.33593024,14.122919 C4.94553994,13.8125559 4.37746707,13.8774308 4.06710397,14.2678211 C4.06471678,14.2708238 4.06234874,14.2738418 4.06,14.2768747 L4.06,14.2768747 C3.75257288,14.6738539 3.82516916,15.244888 4.22214834,15.5523151 C4.22358765,15.5534297 4.2250303,15.55454 4.22647627,15.555646 L11.0872776,20.8031356 C11.6250734,21.2144692 12.371757,21.2145375 12.909628,20.8033023 L19.7677785,15.559828 C20.1693192,15.2528257 20.2459576,14.6784381 19.9389553,14.2768974 C19.9376429,14.2751809 19.9363245,14.2734691 19.935,14.2717619 L19.935,14.2717619 C19.6266937,13.8743807 19.0546209,13.8021712 18.6572397,14.1104775 C18.654352,14.112718 18.6514778,14.1149757 18.6486172,14.1172508 L12.9235044,18.6705218 C12.377022,19.1051477 11.6029199,19.1052208 11.0563554,18.6706981 Z" fill="#000000" opacity="0.3" />
                                        </g>
                                    </svg>
                                </span>
                            </span>
                            <span class="nav-text font-size-lg">Reservaciones y ventas</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="card-body">
            <div class="tab-content">
                <div class="tab-pane show active px-7" id="kt_user_edit_tab_1" role="tabpanel">
                    <form method="POST" action="{{ route('actualizar_reservacion', $reservacion['id']) }}" class="form_guardar" id="form_guardar_reservacion" enctype="multipart/form-data">
                        @csrf
                        <div class="row text-center">
                            <div class="col-xl-12 mb-4">
                                <div class="form-row">
                                    <div class="form-group row col-12">
                                        <label class="col-form-label col-3 text-lg-right text-left">Nombre</label>
                                        <div class="col-9">
                                            <input name="nombre" id="nombre" class="form-control form-control-lg form-control-solid" type="text" value="{{ $reservacion['nombre'] }}" disabled/>
                                        </div>
                                    </div>
                                    <div class="form-group row col-12">
                                        <label class="col-form-label col-3 text-lg-right text-left">Teléfono</label>
                                        <div class="col-9">
                                            <input name="telefono" id="telefono" class="form-control form-control-lg form-control-solid" type="text" value="{{ $reservacion['telefono'] }}" disabled/>
                                        </div>
                                    </div>
                                    <div class="form-group row col-12">
                                        <label class="col-form-label"><b>Lugares seleccionados</b></label>
                                    </div>
                                    <div class="form-group row col-12">
                                        <div class="table-responsive">
                                            <table class="table">
                                                <tbody>
                                                    <thead>
                                                        <tr>
                                                            <th scope="col">#</th>
                                                            <th scope="col">Codigo</th>
                                                            <th scope="col">Opción</th>
                                                            <th scope="col">Costo</th>
                                                            <th scope="col">Forma de pago</th>
                                                        </tr>
                                                    </thead>
                                                    @foreach ($lugares as $key => $item)
                                                        <tr id="fila{{ $item->id }}">
                                                            <th scope="row">{{ $key+1 }}</th>
                                                            <th>
                                                                {{ $item->lugares }}
                                                                <input type="hidden" name="id_lugar[]" value="{{ $item->id }}">
                                                            </th>
                                                            <td>
                                                                <a type="button" class="btn btn-danger btn_eliminar" data-route="{{ route('borrar_lugar', $item->id) }}" >
                                                                    <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                                                        <g fill="none" stroke="white" stroke-width="2">
                                                                            <line x1="3" y1="3" x2="21" y2="21" />
                                                                            <line x1="21" y1="3" x2="3" y2="21" />
                                                                        </g>
                                                                    </svg>
                                                                </a>
                                                            </td>
                                                            <td>${{ number_format($reservacion['costo'], 2) }}</td>
                                                            <td>
                                                                <select name="tipo_pago[]" class="form-control form-control-solid tipo_pago" data-saldo="{{ $reservacion['costo'] }}">
                                                                    <option disabled>Seleccione una opción</option>
                                                                    @if ($reservacion['costo_tipo_deduccion'] == "efectivo" )
                                                                        <option value="2" {{ ($item->metodo_pago == 2) ? "selected" : "" }}>Efectivo</option>
                                                                    @elseif ($reservacion['costo_tipo_deduccion'] == "efectivo" ) 
                                                                        <option value="1" {{ ($item->metodo_pago == 1) ? "selected" : "" }}>Blue points</option>
                                                                    @else
                                                                        <option value="2" {{ ($item->metodo_pago == 2) ? "selected" : "" }}>Efectivo</option>
                                                                        <option value="1" {{ ($item->metodo_pago == 1) ? "selected" : "" }}>Blue points</option>
                                                                    @endif
                                                                </select>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                    <tr>
                                                        <th colspan="3"></th>
                                                        <td id="total_blue">$00.00</td>
                                                        <td>Total de Blue points</td>
                                                    </tr>
                                                    <tr>
                                                        <th colspan="3"></th>
                                                        <td id="total_efectivo">$00.00</td>
                                                        <td>Total de Efectivo</td>
                                                    </tr>
                                                    <tr>
                                                        <th colspan="3"></th>
                                                        <td id="total">$00.00</td>
                                                        <td>Total a pagar</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-12 my-2 mt-5">
                                <div class="form-group row mb-3">
                                    <div class="col-12">
                                        <button type="submit" class="btn btn-success" id="btn_guardar">Guardar</button>
                                        <a href="{{route('lista_reservacion')}}" class="btn btn-danger font-weight-bolder">Cancelar</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection