@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/create') }}">
        {{__('memberships.texts.create')}}
    </a>
</h3>

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

    <div class="box-body">
        <form method="POST" id="form_create" enctype="multipart/form-data">
            @include('memberships.form')
            @include('layouts.button_add')
        </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>
    $(document).ready(function() {
        $('#form_create').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();
                var form = $('#form_create')[0];
                var formData = new FormData(form);
                $.ajax({
                    url: '/memberships/store',
                    type: "POST",
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                        "Accept": "application/json"
                    },
                    dataType: "json",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        Swal.fire({
                            title: Lang.get('memberships.messages.create_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,
            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,
            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 create = () => true;
    });
</script>
@endsection