@extends('Admin.Layouts.app')
@section('title')
Background-music
@endsection
@section('content')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="col-lg-12 grid-margin stretch-card">

    <div class="card">
        <div class="text-right">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter" id="model-form">
                Add music
            </button>
        </div>
        <!-- Button trigger modal -->
        <div class="card-body">
            <div class="drop-container">

                <p class="card-description">
                    Post music list
                </p>

            </div>

            <div class="table-responsive">
                <table class="table table-striped data-table">

                    <thead>
                        <tr>
                            <th>
                                Id
                            </th>
                            <th>
                                Artist name
                            </th>
                            <th>
                                Music
                            </th>
                            <th style="width: 150px; text-align:center;">
                                Action
                            </th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header text-center text-white" style="background-color: #007bff;">
                <h4 class="modal-title w-100 font-weight-bold">Add music</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body mx-3">
                <div class="md-form mb-2">
                    <form form name="contactUsForm" id="contactUsForm" method="post" action="javascript:void(0)" enctype="multipart/form-data">
                        <label data-error="wrong" data-success="right" for="defaultForm-email">Artist name</label>
                        <input type="text" name="name" id="name" class="form-control validate">
                        <span class="text-danger" id="name_error"></span>
                </div>
                <div class="md-form mb-2">
                    <label data-error="wrong" data-success="right" for="defaultForm-pass">Music</label>
                    <input type="file" name="audio" id="audio" class="form-control validate">
                    <span class="text-danger" id="audio_error"></span>
                </div>
                <div class="modal-footer d-flex justify-content-center">
                    <button class="btn btn-primary" id="submit" type="submit">Submit</button>
                </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script type="text/javascript">
    fetch_data();

    function fetch_data(type = '') {

        var table = $('.data-table').DataTable({
            processing: true,
            serverSide: true,
            destroy: true,
            ajax: {
                url: "{{ route('background.music.get') }}",
                data: {
                    type: type,
                }
            },
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'artist_name',
                    name: 'artist_name',
                    searchable: true,
                    render: function(data, type, full, meta) {
                    return '<div style="width:300px; line-height: 1.2; text-wrap: wrap;">' + data + '</div>';
          }

                },
                {
                    data: 'audio',
                    name: 'audio',
                    searchable: true

                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                },
            ]
        });

    };

    $(document).on('change', '.type', function() {
        var type = $('#type').val();
        $('.data-table').DataTable().destroy();
        fetch_data(type);
    })

    function PostDetele(id) {
        Swal.fire({
            title: "Are you sure?",
            text: "Do you want to delete the music?",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "Yes, delete it!"
        }).then((result) => {
            if (result.isConfirmed) {
                // Make an Ajax request to delete the data
                $.ajax({
                    url: `{{ route('Background.music.delete', ':id') }}`.replace(':id', id),
                    type: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(data) {

                        Swal.fire({
                            title: "Deleted!",
                            text: "Your music has been deleted.",
                            icon: "success"
                        });
                        fetch_data();
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr.responseText);
                    }
                });
            }
        });
    }



    // $("#submit").click(function() {
    //     var audio = $("#audio")[0].files[0]; // Get the file object


    //     audio === undefined ? $("#audio_error").html('Please select a music file') : $("#audio_error").html('');

    //     if (audio === undefined) {
    //         return false;
    //     }

    //     var formData = new FormData();
    //     formData.append('audio', audio);
    //     formData.append('_token', '{{ csrf_token() }}');

    //     $.ajax({
    //         url: "{{ route('background.music.store') }}",
    //         type: "POST",
    //         data: formData,
    //         contentType: false,
    //         processData: false,
    //         beforeSend: function() {
    //             // setting a timeout
    //             $(".loader").removeClass('d-none');
    //         },
    //         success: function(data) {
    //             $(".loader").addClass('d-none');
    //             $('.close').click();
    //             $("#audio").val('');
    //             $("#name").val('');
    //             fetch_data();
    //         },
    //         error: function() {

    //             alert('You can only upload mp3 and m4a audio');
    //             $(".loader").addClass('d-none');
    //             $('.close').click();
    //             $("#audio").val('');
    //             $("#name").val('');
    //         }
    //     });
    // });

    $("#submit").click(function() {
        var name = $("#name").val();
        var audio = $("#audio")[0].files[0]; // Get the file object

        name === "" ? $("#name_error").html('Please enter artist name') : $("#name_error").html('');
        audio === undefined ? $("#audio_error").html('Please select a music file') : $("#audio_error").html('');

        if (name === "" || audio === undefined) {
            return false;
        }

        var formData = new FormData();
        formData.append('name', name);
        formData.append('audio', audio);
        formData.append('_token', '{{ csrf_token() }}');

        $.ajax({
            url: "{{ route('background.music.store') }}",
            type: "POST",
            data: formData,
            contentType: false,
            processData: false,
            beforeSend: function() {
                // setting a timeout
                $(".loader").removeClass('d-none');
            },
            success: function(data) {
                $(".loader").addClass('d-none');
                $('.close').click();
                $("#audio").val('');
                $("#name").val('');
                fetch_data();
            },
            error: function() {

                alert('You can only upload mp3 and m4a audio');
                $(".loader").addClass('d-none');
                $('.close').click();
                $("#audio").val('');
                $("#name").val('');
            }
        });
    });

    $(document).on('click', '#model-form', function() {
        $("#audio").val('');
    })
</script>
@endsection