function saveImage(id) {
    var fImage = document.getElementById("logo");
    fImage = fImage.files[0];
    if (fImage) {
        var formData = new FormData();
        formData.append("id", id);
        formData.append("logo", fImage);

        $.ajax({
            type: "POST",
            dataType: "json",
            processData: false,
            contentType: false,
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
            },
            data: formData,
            url: "/zones/saveImage",
            success: function (r) {
                if (r.r) {
                    swal(r.m, {
                        icon: "success",
                        buttons: {
                            Ok: true,
                        },
                    }).then((val) => {
                        if (val == "Ok") {
                            $(location).attr("href", "/zones");
                        }
                    });
                } else {
                    swal("Error", "¡Error al cargar imagen del torneo!", "error");
                    $("#btn-create-category").prop("disabled", false);
                }
            },
            error: function (e) {
                swal("Error", "¡Error al cargar imagen del torneo!", "error");
                $("#btn-create-category").prop("disabled", false);
            },
        });
    }
}

function create() {
    $("#form_create").validator("update");
    $("#form_create")
        .validator("update")
        .on("submit", function (e) {
            if (e.isDefaultPrevented()) {
            } else {
                e.preventDefault();

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

                var zone_id = $("#form_create input[name='parent_id']").val();
                var parent_zone_id = $("#form_create input[name='is_parent']").val();
                var origin = $("#form_create input[name='origin']").val();
                var is_saleable_parent = parseInt($("#form_create input[name='is_saleable_parent']").val());
                var is_parent = $("#form_create input[name='is_parent']").val();
                var door_id = $("#form_create select[name='door_id']").val();

                var info = {
                    name: $("#form_create input[name='name']").val(),
                    alias: $("#form_create input[name='alias']").val(),
                    total_capacity: $("#form_create input[name='total_capacity']").val(),
                    salable_capacity: $("#form_create input[name='salable_capacity']").val(),
                    is_saleable: $("#form_create select[name='is_saleable']").val(),
                    coors: $("#form_create input[name='coors']").val(),
                    zone_id: zone_id != "" ? zone_id : null,
                    door_id: door_id == "0" ? null : door_id,
                    active: $("#form_create select[name='active']").val(),
                    address: $("#form_create input[name='address']").val(),
                };

                let img = document.getElementById("img").files[0];
                if (img) {
                    var reader = new FileReader();

                    reader.onload = function (e) {
                        var svgString = e.target.result;
                        var htmlCode = convertSvgToHtml(svgString);
                        info.img = htmlCode;
                    };

                    reader.readAsText(img);
                }

                if (origin == "add") {
                    swal(Lang.get("messagesClient.zones.tag_1"), {
                        buttons: {
                            cancel: "No",
                            Ok: true,
                        },
                    }).then((val) => {
                        if (val == "Ok") {
                            $.ajax({
                                url: "/zones",
                                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) {
                                        var id = r.data;
                                        var img = document.getElementById(
                                            "logo"
                                        );
                                        if (img != null) {
                                            saveImage(id);
                                        } else {
                                            swal(r.m, {
                                                icon: "success",
                                                buttons: {
                                                    Ok: true,
                                                },
                                            }).then((val) => {
                                                if (val == "Ok") {
                                                    if (is_parent != "") {
                                                        $("#modal_add_stadium").modal("toggle");
                                                        let current_zone_id =
                                                            zone_id != ""
                                                                ? zone_id
                                                                : r.data;
                                                        getZonesChilds(current_zone_id, is_saleable_parent);
                                                    } else {
                                                        $(location).attr("href", "/zones");
                                                    }
                                                }
                                            });
                                        }
                                    } else {
                                        swal("Error", r.m, "error");
                                    }
                                },
                                error: function (e) {
                                    swal("Error", "¡Hubo un Error al crear!", "error");
                                    $("#btn-create").removeClass("displayNone");
                                    $("#spinnerButton").addClass("displayNone");
                                },
                            });
                        } else {
                            $("#btn-create").removeClass("displayNone");
                            $("#spinnerButton").addClass("displayNone");
                        }
                    });
                } else {
                    swal(Lang.get("messagesClient.zones.tag_2"), {
                        buttons: {
                            cancel: "No",
                            Ok: true,
                        },
                    }).then((val) => {
                        info.zone_id = parent_zone_id;
                        if (val == "Ok") {
                            $.ajax({
                                url: "/zones/" + zone_id,
                                type: "PUT",
                                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) {
                                        var img = document.getElementById(
                                            "logo"
                                        );
                                        if (img != null) {
                                            saveImage(id);
                                        } else {
                                            swal(r.m, {
                                                icon: "success",
                                                buttons: {
                                                    Ok: true,
                                                },
                                            }).then((val) => {
                                                if (val == "Ok") {
                                                    if (is_parent != "") {
                                                        $(
                                                            "#modal_add_stadium"
                                                        ).modal("toggle");
                                                        let current_zone_id =
                                                            zone_id != ""
                                                                ? zone_id
                                                                : r.data;
                                                        getZonesChilds(
                                                            current_zone_id,
                                                            is_saleable_parent
                                                        );
                                                    } else {
                                                        $(location).attr(
                                                            "href",
                                                            "/zones"
                                                        );
                                                    }
                                                }
                                            });
                                        }
                                    } else {
                                        swal("Error", r.m, "error");
                                    }
                                },
                                error: function (e) {
                                    swal("Error", "¡Hubo un Error al actualizar!", "error");
                                    $("#btn-create").removeClass("displayNone");
                                    $("#spinnerButton").addClass("displayNone");
                                },
                            });
                        } else {
                            $("#btn-create").removeClass("displayNone");
                            $("#spinnerButton").addClass("displayNone");
                        }
                    });
                }
            }
        });
}

function createSeat() {
    $("#form_create_seat").validator("update");
    $("#form_create_seat")
        .validator("update")
        .on("submit", function (e) {
            if (e.isDefaultPrevented()) {
            } else {
                e.preventDefault();

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

                var seat_id = $("#form_create_seat input[name='seat_id']").val();
                var zone_id = $("#form_create_seat input[name='zone_id']").val();
                var origin = $("#form_create_seat input[name='origin_seat']").val();
                var letter_id = $("#form_create_seat select[name='letter_id']").val();

                var info = {
                    zone_id,
                    code: $("#form_create_seat input[name='code']").val(),
                    active: $("#form_create_seat select[name='active_seat']").val(),
                    locked: $("#form_create_seat select[name='locked_seat']").val(),
                    letter_id,
                };

                if (origin == "add") {
                    swal(Lang.get("messagesClient.seats.tag_1"), {
                        buttons: {
                            cancel: "No",
                            Ok: true,
                        },
                    }).then((val) => {
                        if (val == "Ok") {
                            $.ajax({
                                url: "/zones/seat/create",
                                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-seat").removeClass(
                                        "displayNone"
                                    );
                                    $("#spinnerButtonSeat").addClass(
                                        "displayNone"
                                    );
                                    if (r.r) {
                                        swal(r.m, {
                                            icon: "success",
                                            buttons: {
                                                Ok: true,
                                            },
                                        }).then((val) => {
                                            if (val == "Ok") {
                                                $("#modal_add_seat").modal("toggle");
                                                getZonesChilds(zone_id, true);
                                            }
                                        });
                                    } else {
                                        swal("Error", r.m, "error");
                                    }
                                },
                                error: function (e) {
                                    swal("Error", "¡Hubo un Error al crear!", "error");
                                    $("#btn-create-seat").removeClass(
                                        "displayNone"
                                    );
                                    $("#spinnerButtonSeat").addClass(
                                        "displayNone"
                                    );
                                },
                            });
                        } else {
                            $("#btn-create-seat").removeClass("displayNone");
                            $("#spinnerButtonSeat").addClass("displayNone");
                        }
                    });
                } else {
                    swal(Lang.get("messagesClient.seats.tag_2"), {
                        buttons: {
                            cancel: "No",
                            Ok: true,
                        },
                    }).then((val) => {
                        if (val == "Ok") {
                            $.ajax({
                                url: "/zones/seat/edit/" + seat_id,
                                type: "PUT",
                                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-seat").removeClass(
                                        "displayNone"
                                    );
                                    $("#spinnerButtonSeat").addClass(
                                        "displayNone"
                                    );
                                    if (r.r) {
                                        swal(r.m, {
                                            icon: "success",
                                            buttons: {
                                                Ok: true,
                                            },
                                        }).then((val) => {
                                            if (val == "Ok") {
                                                $("#modal_add_seat").modal("toggle");
                                                getZonesChilds(zone_id, true);
                                            }
                                        });
                                    } else {
                                        swal("Error", r.m, "error");
                                    }
                                },
                                error: function (e) {
                                    swal("Error", "¡Hubo un Error al actualizar!", "error");
                                    $("#btn-create-seat").removeClass(
                                        "displayNone"
                                    );
                                    $("#spinnerButtonSeat").addClass(
                                        "displayNone"
                                    );
                                },
                            });
                        } else {
                            $("#btn-create-seat").removeClass("displayNone");
                            $("#spinnerButtonSeat").addClass("displayNone");
                        }
                    });
                }
            }
        });
}

function clickDelete(value) {
    swal(Lang.get("messagesClient.zones.tag_6"), {
        buttons: {
            cancel: "No",
            Ok: true,
        },
    }).then((val) => {
        if (val == "Ok") {
            var info = {
                _method: "DELETE",
            };

            $.ajax({
                url: "/zones/" + value,
                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) {
                    if (r.r) {
                        swal(r.m, {
                            icon: "success",
                            buttons: {
                                Ok: true,
                            },
                        }).then((val) => {
                            if (val == "Ok") {
                                $(location).attr("href", "/zones");
                            }
                        });
                    } else {
                        swal("Error", r.m, { icon: "error" });
                    }
                },
                error: function (e) {
                    swal("Error", Lang.get("messagesClient.zones.error_delete"), "error");
                },
            });
        }
    });
}

/**Método para eliminar silla*/
function deleteSeat() {
    swal(Lang.get("messagesClient.delete_seat"), {
        buttons: {
            cancel: "No",
            Ok: true,
        },
    }).then((val) => {
        if (val == "Ok") {
            var seat_id = $("#form_create_seat input[name='seat_id']").val();
            var zone_id = $("#form_create_seat input[name='zone_id']").val();

            $("#btn-create-seat").addClass("displayNone");
            $("#btn-delete-seat").addClass("displayNone");
            $("#spinnerButtonSeat").removeClass("displayNone");
            var info = {
                _method: "DELETE",
            };

            $.ajax({
                url: "/zones/delete_seat/" + seat_id,
                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-seat").removeClass("displayNone");
                    $("#btn-delete-seat").removeClass("displayNone");
                    $("#spinnerButtonSeat").addClass("displayNone");
                    if (r.r) {
                        swal(r.m, {
                            icon: "success",
                            buttons: {
                                Ok: true,
                            },
                        }).then((val) => {
                            if (val == "Ok") {
                                $("#modal_add_seat").modal("toggle");
                                getZonesChilds(zone_id, true);
                            }
                        });
                    } else {
                        swal("Error", r.m, "error");
                    }
                },
                error: function (e) {
                    $("#btn-create-seat").removeClass("displayNone");
                    $("#btn-delete-seat").removeClass("displayNone");
                    $("#spinnerButtonSeat").addClass("displayNone");
                    swal("Error", Lang.get("messagesClient.error_delete"), "error");
                },
            });
        }
    });
}

function getZonesChilds(zone_id, is_saleable) {
    setTimeout(() => {
        var expanded = $("#button_" + zone_id).hasClass("collapsed");
        if (!expanded) {
            if (!is_saleable) {
                $.ajax({
                    url: "/zones/zonesChilds/" + zone_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) {
                            $("#body_" + zone_id).empty();
                            var child = r.data;
                            for (var i = 0; i < child.length; i++) {
                                var accordion = `<div class="accordion" id="accordion_child_${child[i].id
                                    }">\
                                        <div class="card">\
                                        <div class="card-header" id="heading_${child[i].id
                                    }">\
                                            <h2 class="mb-0 bacgroung-gray">\
                                            <button class="btn btn-link btn-block text-left"\
                                                    type="button"\
                                                    data-toggle="collapse"\
                                                    data-target="#collapse_${child[i].id
                                    }"\
                                                    aria-expanded="true"\
                                                    aria-controls="collapse_${child[i].id
                                    }"\
                                                    onclick="getZonesChilds(${child[i].id
                                    },${child[i].is_saleable})"\
                                                    id="button_${child[i].id}">\
                                    ${child[i].name}\
                                            </button>\
                                            </h2>\
                                        </div>\
                                        <div id="collapse_${child[i].id
                                    }" class="collapse" aria-labelledby="heading_${child[i].id
                                    }" data-parent="#accordion_child_${child[i].id
                                    }">\
                                    <div class="container-buttons">\
                                        <button type="button" class="btn btn-default" onclick="modalZone('${window.btoa(
                                        JSON.stringify(child[i])
                                    )}','add')"><i class="fa fa-plus"></i></button>\
                                        <button type="button" class="btn btn-default" onclick="modalZone('${window.btoa(
                                        JSON.stringify(child[i])
                                    )}','edit')"><i class="fa fa-edit"></i></button>\
                                        <button type="button" class="btn btn-default" onclick="clickDelete(${child[i].id
                                    })"><i class="fa fa-trash"></i></button>\
                                    </div>\
                                    <div class="card-body padding-20" id="body_${child[i].id
                                    }">\
                                            </div>\
                                        </div>\
                                    </div>\
                                </div>\
                                `;
                                $("#body_" + zone_id).append(accordion);
                            }
                        }
                    },
                });
            } else {
                // Cargar sillas
                $.ajax({
                    url: "/zones/seats/" + zone_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) {
                            $("#body_" + zone_id).empty();
                            var seats = r.data;
                            var group_seats = orderGroupBy(seats, "letter_id");
                            if (group_seats) {
                                group_seats = group_seats.slice().reverse();
                            }
                            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];
                                    var background = "";
                                    if (!seat.active) {
                                        background = "seat-inactive";
                                    }
                                    list_seats += `<div class="d-i-t text-center ${background}" onclick="modalSeat('${window.btoa(
                                        JSON.stringify(seat)
                                    )}','edit')">${seat.code}</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_" + zone_id).append(row);
                            }
                        }
                    },
                });
            }
        }
    }, 500);
}

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 setFields() {
    document.getElementById("form_create").reset();
    $("#btn-create").html("Crear");
    $(".modal-body #origin").val("add");
    $(".modal-body #is_parent").val(null);
    $("#container_parent").addClass("displayNone");
}

function modalAddEditZone(zone, action) {
    document.getElementById("form_create").reset();
    $(".modal-body #address").val(zone.address);
    if (zone.childs && zone.childs.length > 0) {
        zone = zone.childs[0].zone;
    }
    $(".modal-body #parent_name").val(zone.name);
    $(".modal-body #is_saleable_parent").val(zone.is_saleable);
    $(".modal-body #parent_id").val(zone.id);
    $(".modal-body #is_parent").val(zone.zone_id);
    $(".modal-body #origin").val(action);
    if (action == "edit") {
        $("#btn-create").html("Actualizar");
        $(".modal-body #name").val(zone.name);
        $(".modal-body #alias").val(zone.alias);
        $(".modal-body #total_capacity").val(zone.total_capacity);
        $(".modal-body #is_saleable").val(zone.is_saleable);
        
        if (zone.is_main) {
            $('#container_img').show();
            if (zone.img) {
                $(".modal-body #show_img").show();
                $(".modal-body #preview_img").html(zone.img);
            }
        } else {
            $('#container_img').hide();
        }
        $("#is_saleable").change();
        $(".modal-body #door_id").val(zone.door_id);
        $("#door_id").change();
        $(".modal-body #salable_capacity").val(zone.salable_capacity);
        $(".modal-body #active").val(zone.active);
        $("#active").change();
    } else {
        $("#container_parent").removeClass("displayNone");
    }
    $("#modal_add_stadium").modal("show");
}

function modalZone(zone, action) {
    zone = JSON.parse(window.atob(zone));
    if (!zone.is_saleable) {
        modalAddEditZone(zone, action);
    } else {
        if (action == "add") {
            document.getElementById("form_create_seat").reset();
            $("#btn-delete-seat").addClass("displayNone");
            $("#modal_add_seat").modal("show");
            $(".modal-body-seat #zone_id").val(zone.id);
            $(".modal-body #is_saleable_parent").val(zone.is_saleable);
            $(".modal-body #is_parent").val(zone.zone_id);
            $(".modal-body-seat #origin_seat").val(action);
        } else {
            modalAddEditZone(zone, action);
        }
    }
}

function modalSeat(seat, action) {
    seat = JSON.parse(window.atob(seat));
    $(".modal-body-seat #zone_id").val(seat.zone_id);
    $(".modal-body-seat #origin_seat").val(action);
    if (action == "edit") {
        $("#btn-delete-seat").removeClass("displayNone");
        $("#modal_add_seat").modal("show");
        $("#btn-create-seat").html("Actualizar");
        $(".modal-body-seat #seat_id").val(seat.id);
        $(".modal-body-seat #letter_id").val(seat.letter_id);
        $(".modal-body-seat #code").val(seat.code);
        $(".modal-body-seat #active_seat").val(seat.active);
        $(".modal-body-seat #locked_seat").val(seat.locked);
        $("#active_seat").change();
        $("#locked_seat").change();
        $("#letter_id").change();
    }
}

function importFile() {
    var fExcel = document.getElementById("importSeats");
    fExcel = fExcel.files[0];
    if (fExcel) {
        var formData = new FormData();
        formData.append("importSeats", fExcel);

        $("#button-import").addClass("displayNone");
        $("#spinner-button").removeClass("displayNone");
        $.ajax({
            type: "POST",
            dataType: "json",
            processData: false,
            contentType: false,
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
            },
            data: formData,
            url: "/zones/import",
            success: function (r) {
                if (r.r) {
                    swal(r.m, {
                        icon: "success",
                        buttons: {
                            Ok: true,
                        },
                    }).then((val) => {
                        if (val == "Ok") {
                            $(location).attr("href", "/zones");
                        }
                    });
                } else {
                    swal("Error", r.m, "error");
                    $("#button-import").removeClass("displayNone");
                    $("#spinner-button").addClass("displayNone");
                }
            },
        });
    } else {
        alert("No hay archivo.");
    }
}

function valueChanged() {
    if ($('#valid-zone').is(":checked"))
        $(".zones-selector").show();
    else
        $(".zones-selector").hide();
}

function viewStadium(stadium) {
    $(".modal-body #preview_img").show();
    $(".modal-body #show_img").hide();
}

function convertSvgToHtml(svgString) {
    // Create a new HTML document
    var doc = document.implementation.createHTMLDocument();

    // Set the SVG content as the body innerHTML
    doc.body.innerHTML = svgString;

    // Return the HTML content of the document
    return doc.body.innerHTML;
}