$(document).ready(function () {
    var input = document.getElementById("document_search");
    input.addEventListener("keyup", function (event) {
        if (event.keyCode === 13) {
            event.preventDefault();
            searchUser();
        }
    });

    $("#event_id").on("change", function () {
        var selectedText = "";
        if (this.value != "0") {
            selectedText = $("#event_id option:selected").html();
            selectedText = selectedText.trim();
            $("#event_name").html(selectedText);
            $("#container_event").addClass("displayNone");
            $("#container_stadium").removeClass("displayNone");
            $("#breadcrumbs_stadium").removeClass("displayNone");
        }
    });

    $("#ticket_type_id").on("change", function () {
        if (this.value == "1") {
            $("#container_price").removeClass("displayNone");
            $("#container_suscription").addClass("displayNone");
        } else if (this.value == "2") {
            $("#container_price").addClass("displayNone");
            $("#container_suscription").removeClass("displayNone");
        } else {
            $("#container_price").addClass("displayNone");
            $("#container_suscription").addClass("displayNone");
        }
    });

    $("#modal_sell_seat").on("hidden.bs.modal", function (e) {
        var seat = JSON.parse(localStorage.getItem("current_seat"));
        var is_add_seat = buy_tickets.find((item) => item.seat.id == seat.id);
        if (!is_add_seat) {
            $(current_e).removeClass("bg-seat-selected");
        }
    });
});

var formatter = new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
    minimumFractionDigits: 0,
});

function activeEvent() {
    $("#container_image_seat").addClass("displayNone");
    $("#event_name").html("Evento");
    $("#event_id").val(0);
    $("#event_id").change();
    var zone_id = $("#current_zone").val();
    $("#container_event").removeClass("displayNone");
    $("#container_stadium").addClass("displayNone");
    $("#container_" + zone_id).addClass("displayNone");
    $("#body_seat").addClass("displayNone");
    $("#breadcrumbs_stadium").addClass("displayNone");
    $("#breadcrumbs_zone").addClass("displayNone");
    $("#breadcrumbs_subzone").addClass("displayNone");
    $("#div_footer").addClass("displayNone");
    localStorage.clear();
    buy_tickets = [];
}

function openZone(zone_id, name_zone) {
    $("#container_image_seat").addClass("displayNone");
    $("#container_stadium").addClass("displayNone");
    $("#container_" + zone_id).removeClass("displayNone");
    $("#breadcrumbs_zone").removeClass("displayNone");
    $("#current_zone").val(zone_id);
    localStorage.setItem("name_zone", name_zone);
    $("#div_footer").addClass("displayNone");
}

function activeZone() {
    $("#container_image_seat").addClass("displayNone");
    var zone_id = $("#current_zone").val();
    $("#container_stadium").removeClass("displayNone");
    $("#container_" + zone_id).addClass("displayNone");
    $("#body_seat").addClass("displayNone");
    $("#breadcrumbs_zone").addClass("displayNone");
    $("#breadcrumbs_subzone").addClass("displayNone");
    $("#div_footer").addClass("displayNone");
}

function activeSubzone() {
    $("#container_image_seat").addClass("displayNone");
    var zone_id = $("#current_zone").val();
    $("#container_stadium").addClass("displayNone");
    $("#breadcrumbs_subzone").addClass("displayNone");
    $("#body_seat").addClass("displayNone");
    $("#container_" + zone_id).removeClass("displayNone");
    $("#div_footer").addClass("displayNone");
}

function activeSubzone2() {
    var zone_id = $("#current_zone").val();
    $("#container_stadium").addClass("displayNone");
    $("#container_" + zone_id).addClass("displayNone");
    $("#body_seat").removeClass("displayNone");
}

function openSubzone(subzone_id, name_subzone) {
    var zone_id = $("#current_zone").val();
    var event_id = $("#event_id").val();
    $("#current_subzone").val(subzone_id);
    $("#breadcrumbs_subzone").removeClass("displayNone");
    $("#container_image_seat").removeClass("displayNone");
    localStorage.setItem("name_subzone", name_subzone);
    $.ajax({
        url: "/tickets/seats/" + subzone_id + "/" + event_id,
        type: "GET",
        contentType: "application/json",
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
            "Content-Type": "application/json",
        },
        success: function (r) {
            if (r.r) {
                $("#container_stadium").addClass("displayNone");
                $("#container_" + zone_id).addClass("displayNone");
                $("#body_seat").removeClass("displayNone");
                $("#body_seat").empty();
                var seats = r.data;

                var group_seats = orderGroupBy(seats, "letter_id");
                if (group_seats) {
                    group_seats = group_seats.slice().reverse();
                    $("#div_footer").removeClass("displayNone");
                }
                for (let j = 0; j < group_seats.length; j++) {
                    var item = group_seats[j];
                    item.value = item.value.sort(function (a, b) {
                        return parseFloat(a.code) - parseFloat(b.code);
                    });
                    var list_seats = "";
                    for (let m = 0; m < item.value.length; m++) {
                        var seat = item.value[m];
                        let seat_image = "";
                        let openmodal = true;

                        if (!seat.ticket && !seat.ticket_user_block) {
                            seat_image = "seat_available.png";
                        }

                        if (
                            seat.ticket_user_block &&
                            !seat.ticket_user_block.is_social_distancing
                        ) {
                            openmodal = false;
                            seat_image = "seat_not_available.png";
                        }

                        if (
                            seat.ticket_user_block &&
                            seat.ticket_user_block.is_social_distancing
                        ) {
                            openmodal = false;
                            seat_image = "seat_distancing.png";
                        }

                        if (
                            seat.ticket_user_block &&
                            !seat.ticket_user_block.is_social_distancing
                        ) {
                            openmodal = false;
                            seat_image = "seat_block.png";
                        }

                        if (seat.ticket && seat.ticket.ticket_type_id == 1) {
                            openmodal = false;
                            seat_image = "seat_not_available.png";
                        }

                        if (seat.ticket && seat.ticket.ticket_type_id == 2) {
                            openmodal = false;
                            seat_image = "seat_suscription.png";
                        }

                        if (seat.ticket && seat.ticket.ticket_type_id == 3) {
                            openmodal = false;
                            seat_image = "seat_courtesy.png";
                        }

                        list_seats += `<div class="d-i-t text-center cursor" onclick="modalSeat(this,'${window.btoa(
                            JSON.stringify(seat)
                        )}',${openmodal})">\
                            <img class="image_seat" src="img/${seat_image}" alt="">\
                            <span>${seat.code}</span>\
                        </div>`;
                    }
                    var letter = item.value[0].letter.name;
                    var row = `<div class="row container_row"><span class="label_letter">${letter}</span>${list_seats}</div>`;
                    $("#body_seat").append(row);
                }
            }
        },
    });
}

function orderGroupBy(collection, property) {
    const groupedCollection = collection.reduce((previous, current) => {
        if (!previous[current[property]]) {
            previous[current[property]] = [current];
        } else {
            previous[current[property]].push(current);
        }

        return previous;
    }, {});
    return Object.keys(groupedCollection).map((key) => ({
        key,
        value: groupedCollection[key],
    }));
}

function removeSeatListBuy(index) {
    if (buy_tickets && buy_tickets.length) {
        buy_tickets.splice(index, 1);
    }
}

var current_e;
function modalSeat(e, seat, openmodal) {
    localStorage.removeItem("current_seat");
    $(e).removeClass("bg-seat-selected");
    current_e = e;
    seat = JSON.parse(window.atob(seat));
    console.log("seat: ", seat);

    var is_add_seat = buy_tickets.find((item) => item.seat.id == seat.id);
    if (is_add_seat) {
        const current_list = (item) => item.seat.id == seat.id;
        let index = buy_tickets.findIndex(current_list);
        if (index >= 0) {
            $(e).removeClass("bg-seat-selected");
            removeSeatListBuy(index);
        }
    } else {
        if (openmodal) {
            $("#container_data_user").addClass("displayNone");
            $("#container_price").addClass("displayNone");
            $("#container_suscription").addClass("displayNone");
            $("#user_id").val("0");
            document.getElementById("form_sell_seat").reset();
            $("#seat_id").val(seat.id);
            var event_id = $("#event_id").val();
            $.ajax({
                url: "/tickets/price/" + seat.zone_id + "/" + event_id,
                type: "GET",
                contentType: "application/json",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr(
                        "content"
                    ),
                    "Content-Type": "application/json",
                },
                success: function (r) {
                    if (r.r) {
                        var price = r.data;
                        if (price) {
                            localStorage.setItem(
                                "current_seat",
                                JSON.stringify(seat)
                            );
                            localStorage.setItem(
                                "current_price",
                                JSON.stringify(price)
                            );

                            $("#modal_sell_seat").modal("show");
                            $(".modal-body #price").val(
                                formatter.format(price.price)
                            );
                            $(".modal-body #price_suscription").val(
                                formatter.format(price.price_suscription)
                            );
                            $(e).addClass("bg-seat-selected");
                        } else {
                            swal(
                                "Advertencia",
                                "¡La zona seleccionada no tiene precios asignados para el evento!",
                                "warning"
                            );
                        }
                    }
                },
            });
        }
    }
}

function searchUser() {
    var document_search = $("#document_search").val();
    document.getElementById("form_sell_checkout").reset();
    $("#user_id").val("0");
    $("#first_name").val("");
    $("#last_name").val("");
    $("#phone").val("");
    $("#email_user").val("");
    if (document_search && document_search != "") {
        $.ajax({
            url: "/tickets/user/" + document_search,
            type: "GET",
            contentType: "application/json",
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                "Content-Type": "application/json",
            },
            success: function (r) {
                if (r.r) {
                    $("#container_data_user").removeClass("displayNone");
                    $("#document").val(document_search);
                    var current_user = r.data;
                    if (current_user) {
                        $("#user_id").val(current_user.id);
                        $("#first_name").val(current_user.first_name);
                        $("#last_name").val(current_user.last_name);
                        $("#phone").val(current_user.phone);
                        $("#email_user").val(current_user.email);
                    }
                }
            },
        });
    } else {
        swal("Advertencia", "¡Debes ingresar un documento valido!", "warning");
    }
}

var buy_tickets = [];
function addSeat() {
    var ticket_type_id = $(
        " #form_sell_seat select[name='ticket_type_id']"
    ).val();
    var event_id = $("#event_id").val();

    if (!ticket_type_id || ticket_type_id == 0) {
        swal("Advertencia", "¡Debes seleccionar tipo de boleta!", "warning");
        return;
    }

    buy_tickets.push({
        seat: JSON.parse(localStorage.getItem("current_seat")),
        match_event_id: event_id,
        ticket_type_id,
        match_event_price: JSON.parse(localStorage.getItem("current_price")),
        zone_name:
            localStorage.getItem("name_zone") +
            " - " +
            localStorage.getItem("name_subzone"),
    });
    $("#modal_sell_seat").modal("toggle");
}

function create() {
    var user_id = $("#form_sell_checkout input[name='user_id']").val();
    var first_name = $("#form_sell_checkout input[name='first_name']").val();
    var last_name = $("#form_sell_checkout input[name='last_name']").val();
    var document = $("#form_sell_checkout input[name='document']").val();
    var phone = $("#form_sell_checkout input[name='phone']").val();
    var email = $("#form_sell_checkout input[name='email_user']").val();

    if (user_id == "") {
        swal("Advertencia", "¡Debes ingresar un usuario!", "warning");
        return;
    }

    if (first_name == "") {
        swal("Advertencia", "¡Debes ingresar nombres del usuario!", "warning");
        return;
    }

    if (last_name == "") {
        swal(
            "Advertencia",
            "¡Debes ingresar apellidos del usuario!",
            "warning"
        );
        return;
    }

    if (document == "") {
        swal(
            "Advertencia",
            "¡Debes ingresar documento del usuario!",
            "warning"
        );
        return;
    }

    if (phone == "") {
        swal("Advertencia", "¡Debes ingresar telefono del usuario!", "warning");
        return;
    }

    if (email == "") {
        swal(
            "Advertencia",
            "¡Debes ingresar correo electrónico del usuario!",
            "warning"
        );
        return;
    }

    $("#btn-create").addClass("displayNone");
    $("#spinnerButton").removeClass("displayNone");

    var info = {
        user_id,
        first_name,
        last_name,
        document,
        phone,
        email,
        tickets: buy_tickets,
        type_process: "block",
        amount: total,
    };

    swal("¿Desea realizar la venta de esta(s) boleta(s)?", {
        buttons: {
            cancel: "No",
            Ok: true,
        },
    }).then((val) => {
        if (val == "Ok") {
            $.ajax({
                url: "/tickets/createBlock",
                type: "POST",
                contentType: "application/json",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr(
                        "content"
                    ),
                    "Content-Type": "application/json",
                },
                data: JSON.stringify(info),
                success: function (r) {
                    $("#btn-create").removeClass("displayNone");
                    $("#spinnerButton").addClass("displayNone");
                    if (r.r) {
                        swal(r.m, {
                            icon: "success",
                            buttons: {
                                Ok: true,
                            },
                        }).then((val) => {
                            if (val == "Ok") {
                                $("#container_data_user").addClass(
                                    "displayNone"
                                );
                                $("#add-tab").trigger("click");
                                $("#modal_buy_tickets").modal("toggle");
                                openSubzone(buy_tickets[0].seat.zone_id);
                                buy_tickets = [];
                                total = 0;
                            }
                        });
                    } else {
                        swal(r.m);
                    }
                },
                error: function (e) {
                    swal("¡Hubo un Error al crear!", "error");
                    $("#btn-create").removeClass("displayNone");
                    $("#spinnerButton").addClass("displayNone");
                },
            });
        } else {
            $("#btn-create").removeClass("displayNone");
            $("#spinnerButton").addClass("displayNone");
        }
    });
}

var total = 0;
function buyTickets() {
    total = 0;
    if (buy_tickets && buy_tickets.length) {
        $("#modal_buy_tickets").modal("show");
        $("#list_tickets").empty();
        $("#add-tab").trigger("click");
        $("#container_data_user").addClass("displayNone");
        document.getElementById("form_sell_checkout").reset();
        var items = "";
        for (let i = 0; i < buy_tickets.length; i++) {
            var t = buy_tickets[i];
            var price = 0;

            if (t.ticket_type_id == 1) {
                price = t.match_event_price.price;
            }

            if (t.ticket_type_id == 2) {
                price = t.match_event_price.price_suscription;
            }

            total += price;
            items =
                items +
                `<span class="list-group-item list-group-item-action">
                                <div class="d-flex w-100 justify-content-between">
                                    <h5 class="mb-1">${t.zone_name}</h5>
                                    <small class="small_price">${formatter.format(
                                        price
                                    )}</small>
                                </div>
                                <p class="mb-1">Silla: ${t.seat.letter.name}${
                    t.seat.code
                }</p>
                            </span>`;
        }
        $("#list_tickets").append(items);
        $("#total_price").html(`${formatter.format(total)}`);
    } else {
        swal(
            "Advertencia",
            "¡Debes seleccionar al menos una silla!",
            "warning"
        );
    }
}