@php
    $essentialMusicTitle = $_essentialMusicTitle ?? '¿Qué canciones no pueden faltar?';
    $essentialMusicBody = $_essentialMusicBody ?? '¡Ayúdame sugiriendo las canciones que pensás que no pueden faltar en mi fiesta';
    $headerBackgroundUrl = isset($_backgroundImage) ? Storage::url($_backgroundImage) : asset("/img/templates_v2/{$templateName}/cover.jpg");
    $icon = "/img/templates_v2/{$templateName}/icon-playlist.svg";
@endphp
<section class="containerBg" id="playlist">
    @if (in_array(strtolower($invitation->template->name), ['graduation classic', 'classic']))
            <div class="decorative-slot decorative-slot-1"><img alt="" loading="lazy"></div>
            <div class="decorative-slot decorative-slot-2"><img alt="" loading="lazy"></div>
            <div class="decorative-slot decorative-slot-3"><img alt="" loading="lazy"></div>
            <div class="decorative-slot decorative-slot-4"><img alt="" loading="lazy"></div>
            <div class="decorative-slot decorative-slot-5"><img alt="" loading="lazy"></div>
            <div class="decorative-slot decorative-slot-6"><img alt="" loading="lazy"></div>
            <div class="decorative-slot decorative-slot-7"><img alt="" loading="lazy"></div>
            <div class="decorative-slot decorative-slot-8"><img alt="" loading="lazy"></div>
        @endif
    <section class="bg-img" style="background-image: url('{{$headerBackgroundUrl}}')"></section>
    <div class="container">
        <div class="icon">
            <img src="{{ asset($icon) }}" alt="" />
        </div>
        <h3 class="title">
            {{ $essentialMusicTitle }}
        </h3>
        <p class="text">
            {{ $essentialMusicBody }}
        </p>
        <form id="musicForm">
            @csrf
            <div class="row">
                <div class="col-sm-12">
                    <input type="text" class="form-control" name="name" placeholder="Nombre de la canción*" required>
                </div>
                <div class="col-sm-12">
                    <input type="text" class="form-control" name="author" placeholder="Autor*" required>
                </div>
                <div class="col-sm-12">
                    <input type="text" class="form-control" name="link" placeholder="Link youtube, spotify..">
                </div>
                <div class="col-sm-12 text-center">
                    <button class="btn" id="sendMusicFrm">Enviar</button>
                    <p id="musicFormMessage" class= "mb-4 mb-sm-0 text-danger mt-4"></p>
                </div>
            </div>
        </form>
    </div>
</section>
@push('scripts')
    <script>
        $(document).ready(function () {
            $('#sendMusicFrm').on('click', function (event) {
                event.preventDefault();

                var formData = $('#musicForm').serializeArray();

                var requiredFields = true;
                formData.forEach(function (campo) {
                    if ($('[name="' + campo.name + '"]').prop('required') && campo.value.trim() === '') {
                        requiredFields = false;
                        return false;
                    }
                });
                if(!requiredFields){
                    $('#musicFormMessage').show().text('Ingrese los campos requeridos');
                    return;
                }
                $.ajax({
                    url: '{{ route("send.music", ["invitationType" => $invitation->type->code,"slug" => $invitation->slug ]) }}',
                    method: 'POST',
                    data: formData,
                    success: function (response) {
                        $('#musicFormMessage').show().text(response.message);
                        $('#musicForm')[0].reset()
                    },
                    error: function (error) {
                        console.error(error);
                    }
                });
            });
        });
    </script>
@endpush