@extends('Admin.Layouts.app')
@section('title')
Post-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">
      <!-- <a href="http://localhost/goomooz-app-backend/public/comment-list/192" data-toggle="modal" data-target="#exampleModalCenter" class="edit btn btn-info btn-sm m-1" style="pointer-events: none;">View comment</a> -->
      <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" accept="audio/*">
          <span class="text-danger" id="audio_error"></span>
          <input type="hidden" id="id">
          <input type="hidden" id="musichidden">
        </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('post.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('post.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 name = $("#name").val();
    var audio = $("#audio")[0].files[0] ?? null;
    var id = $("#id").val();
    var musichidden = $("#musichidden").val();
    // Validate artist name
    name === "" ? $("#name_error").html('Please enter artist name') : $("#name_error").html('');
    // Check if id is empty, null, or undefined
    if (id === "" || id === null || id === undefined) {
      audio === null ? $("#audio_error").html('Please select a music file') : $("#audio_error").html('');
      if (name === "" || audio === null) {
        return false;
      }
    } else {
      if (name === "") {
        return false;
      }
    }


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

    $.ajax({
      url: "{{ route('post.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('');
      }
    });
  });


  function PostEdit(id) {
    // $('#exampleModalCenter').modal('show');
    $("#audio").val('');
    $("#name").val('');
    $("#musichidden").val('');
    $("#id").val('');
    $("#name_error").html('');
    $("#audio_error").html('');
    $.ajax({
      method: 'get',
      url: "{{route('post.music.edit')}}",
      data: {
        id: id
      },
      success: function(data) {
        $("#name").val(data.artist_name);
        $("#musichidden").val(data.music);
        $("#id").val(id);
        $('#exampleModalCenter').modal('show');

      }
    })

  }



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