@extends('modules.head') @section('contenido')
<h3>
    <a class="ruta" class="" href="{{ url('/memberships') }}">
        {{__('memberships.texts.memberships') }}
    </a>
    <span class="separador-ruta">|</span>
    <a class="ruta" class="" href="{{ url('/memberships/edit' . '/' . $membership->id) }}">
        {{__('memberships.texts.edit')}}
    </a>
</h3>

<div class="box">
    <div class="box-header with-border">
        <h3 class="box-title">{{__('memberships.texts.edit')}}</h3>
    </div>

    <div class="box-body">
        <form method="POST" id="form_edit" enctype="multipart/form-data">
            @include('memberships.form')
            @include('layouts.button_edit')
        </form>
    </div>
</div>
@endsection

@section('inline-js')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.20/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.20/dist/sweetalert2.min.js"></script>
<script>
    let tagsArray = <?php echo json_encode($membership->tags); ?>;
    let listTagsArray = <?php echo json_encode($membership->list_tags); ?>;

    $(document).ready(function() {
        var dataTags = $.map(tagsArray, function(obj) {
            obj.id = obj.id;
            obj.text = obj.name;
            obj.selected = true;
            return obj;
        });
        var dataListTags = $.map(listTagsArray, function(obj) {
            obj.id = obj.id;
            obj.text = obj.name;
            obj.selected = true;
            return obj;
        });

        $('#form_edit').validator().on('submit', function(e) {
            if (e.isDefaultPrevented()) {
                swal("Error", Lang.get('memberships.messages.validation_error'), "error");
                $("#btn-create-category").prop("disabled", false);
                $("#btn-edit").removeClass("displayNone");
                $("#spinnerButton").addClass("displayNone");
            } else {
                e.preventDefault();
                let form = document.getElementById('form_edit');
                let formData = new FormData(form);

                $.ajax({
                    url: '/memberships/update/{{$membership->id}}',
                    type: "POST",
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                        "Accept": "application/json"
                    },
                    processData: false,
                    contentType: false,
                    data: formData,
                    success: function(response) {
                        Swal.fire({
                            title: Lang.get('memberships.messages.edit_success'),
                            icon: 'success',
                            confirmButtonText: 'Ok'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                window.location.href = '/memberships';
                            }
                        });
                    },
                    error: function(a) {
                        let errors = a.responseJSON.errors;
                        if (!errors) {
                            Swal.fire({
                                title: 'Error',
                                text: a.responseJSON.message ?? Lang.get('memberships.messages.generic_error'),
                                icon: 'error'
                            });
                        }
                        let tableHTML = `
                        <table border="1" style="width:100%; border-collapse:collapse;">
                            <thead>
                                <tr>
                                    <th style="padding: 5px;">Campo</th>
                                    <th style="padding: 5px;">Errores</th>
                                </tr>
                            </thead>
                            <tbody>
                        `;

                        for (const [field, messages] of Object.entries(errors)) {
                            tableHTML += `
                                <tr>
                                    <td style="padding: 5px;">${field}</td>
                                    <td style="padding: 5px;">
                                        <ul style="margin: 0; padding-left: 15px;">
                                            ${messages.map(msg => `<li>${msg}</li>`).join('')}
                                        </ul>
                                    </td>
                                </tr>
                            `;
                        }

                        tableHTML += `
                            </tbody>
                        </table>
                        `;
                        Swal.fire({
                            title: "Error",
                            html: tableHTML,
                            icon: "error"
                        });
                    }
                });
            }
        });

        $("#tags").select2({
            multiple: true,
            data: dataTags,
            ajax: {
                url: '/tags/search',
                dataType: 'json',
                processResults: function(response) {
                    var data = $.map(response.data, function(obj) {
                        obj.id = obj.id;
                        obj.text = obj.name;
                        return obj;
                    });
                    return {
                        results: response.data
                    };
                }
            }
        });
        $("#list_tags").select2({
            multiple: true,
            data: dataListTags,
            ajax: {
                url: '/tags/search',
                dataType: 'json',
                processResults: function(response) {
                    var data = $.map(response.data, function(obj) {
                        obj.id = obj.id;
                        obj.text = obj.name;
                        return obj;
                    });
                    return {
                        results: response.data
                    };
                }
            }
        });
    });

    let edit = () => true;
</script>
@endsection