@extends('layouts.app')
@push('plugin-styles')
    <link href="{{ asset('assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css') }}" rel="stylesheet"/>
    <link href="{{ asset('assets/plugins/select2/select2.min.css') }}" rel="stylesheet"/>
    <!-- <link href="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" /> -->
@endpush

@section('content')
    <div class="row">
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center flex-wrap grid-margin">
                        <div>
                            <h4 class="mb-3 mb-md-0">Asignación localidades: {{$evento->descripcion}}</h4>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row bg-light">
                        <div id="chart"></div>
                        <div class="row">
                            <div class="col">
                                <button type="button" class="btn btn-success" id="asignar">Asignar</button>
                            </div>
                        </div>
                    </div> <!-- row -->
                </div>
            </div>
        </div>
    </div>



@endsection
@include("tickets._asignar_form")

@push('plugin-scripts')
    <script src="{{ asset('assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/apexcharts/apexcharts.min.js') }}"></script>
    <script src="https://cdn-na.seatsio.net/chart.js"></script>
    <script src="{{ asset('assets/plugins/select2/select2.min.js') }}"></script>
    <script src="{{ asset('assets/js/sweet-alert.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@endpush

@push('custom-scripts')
    <script src="{{ asset('assets/js/dashboard.js') }}"></script>
    <script src="{{ asset('assets/js/datepicker.js') }}"></script>
    <script type="text/javascript">
        $('.modal  .js-example-basic-single').each(function () {
            var $p = $(this).parent();
            $(this).select2({
                dropdownParent: $p,
                width: '100%'
            });
        });
        let modal = $("#modal-asignacion");
        let asientos = $("#asientos-select");
        let invitados = $("#invitados-select");
        let listAsignacion = $("#list-asignacion");

        $(".modal-close").click(function () {
            modal.hide();
        });
        let asignacion = [];
        let dataUser = "{{json_encode($data) }}";
        dataUser = JSON.parse(dataUser.replace(/&quot;/g, '"'));
        console.log(dataUser)
        var selectedSeats = [];
        new seatsio.SeatingChart({
            divId: 'chart',
            workspaceKey: "{{$evento->workspace_key_public}}",
            event: "{{$evento->event}}",
            language: 'es',
            enabled: false,
            multiSelect: true,
            zoomOnSelect: true,
            onObjectSelected: function (object) {
                // add the selected seat id to the array
                selectedSeats.push(object.label);
            },
            onObjectDeselected: function (object) {
                // remove the deselected seat id from the array
                var index = selectedSeats.indexOf(object.label);
                if (index !== -1) selectedSeats.splice(index, 1);
            }
        }).render();

        $("#asignar").click(function () {
            asignacion = [];
            modal.show();
            listAsientos();
            listInvitados()
            listar(asignacion);
        });

        $("#limpiar").click(function (e) {
            e.preventDefault();
            swal.fire({
                title: "¿Está seguro?",
                text: "Al oprimir el botón de aceptar se eliminarán todos los registros del mapa",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Aceptar'
            }).then((result) => {
                if (result.value) {
                    console.log("si entro");
                    var dato = 3;
                    $.ajax({
                        type: 'GET',
                        data: {
                            dato
                        },
                        url: "{{ url('limpiarmapa') }}",
                        success: function (response) {
                            window.location.reload();
                        }, error: function (xhr, status, error) {
                        }
                    });
                }
            });
        });

        $("#add-seat").click(function () {
            if (asientos.val() !== "" && invitados.val() !== "") {
                asignacion.push({
                    "asiento": asientos.val(),
                    "invitado_id": invitados.val(),
                    "nombre_invitado": invitados.find(":selected").text()
                });
                const asiento = selectedSeats.indexOf(asientos.val());
                selectedSeats.splice(asiento, 1);
                const invitado = dataUser.findIndex(item => item.id === invitados.val());
                console.log(invitado)
                dataUser.splice(invitado, 1);

                listAsientos();
                listInvitados()
                listar(asignacion)
            }
        })

        function listar(asignacion) {
            listAsignacion.empty();
            let html = "";
            for (let i = 0; i < asignacion.length; i++) {
                html += "<tr>";
                let num = i + 1;
                html += "<td>" + num + "</td>";
                html += "<td>" + asignacion[i].asiento + "</td>";
                html += "<td>" + asignacion[i].nombre_invitado + "</td>";
                html += "<td><button class='btn btn-sm btn-danger delete-seat' data-id='" + i + "'> <i data-feather='trash'></i></button></td>";
                html += "</tr>";
            }
            listAsignacion.append(html);

            feather.replace();
        }

        function listAsientos() {
            asientos.find("option").remove();
            let html = "<option value=''>Selecciona asiento</option>";
            selectedSeats = selectedSeats.sort();
            for (let i = 0; i < selectedSeats.length; i++) {
                html += '<option value="' + selectedSeats[i] + '">' + selectedSeats[i] + '</option>';
            }
            asientos.append(html);
        }

        function listInvitados() {
            invitados.find("option").remove();
            dataUser = dataUser.sort(function (a, b) {
                return a.nombre.localeCompare(b.nombre)
            });
            let html = "<option value=''>Selecciona invitado</option>";
            for (const [key, value] of Object.entries(dataUser)) {
                html += "<option value='" + value.id + "'>" + value.nombre + "</option>";
            }
            invitados.append(html);
        }

        $(document).on("click", ".delete-seat", function () {
            let index = $(this).data("id")
            selectedSeats.push(asignacion[index].asiento)
            dataUser.push({
                id: asignacion[index].invitado_id,
                nombre: asignacion[index].nombre_invitado,
            })
            asignacion.splice(index, 1);
            listAsientos();
            listInvitados()
            listar(asignacion)
        });
        $("#btn-send-asignacion").click(function () {
            $.ajax({
                method: "PUT",
                action: "{{route("tickets.update", $evento->id)}}",
                data: {
                    "data": asignacion,
                    "_token": "{{ csrf_token() }}",
                },
                success: function (response) {
                    window.location.reload();
                }
            });
        })
    </script>
@endpush