@extends('admin.layouts.master')
@section('content')
{{-- <center><h1 style="color: green">{{session('add_msg')}}</h1></center>
<center><h1 id="update_success" style="color: green">{{session('update_success')}}</h1></center>
<center><h1 style="color: red">{{session('delete_msg')}}</h1></center> --}}
    <section class="section">
        <ul class="breadcrumb breadcrumb-style ">
            <li class="breadcrumb-item">
                <h4 class="page-title m-b-0">Dashboard</h4>
            </li>
            <li class="breadcrumb-item">Music Genres</li>
        </ul>
        @if(session('success'))
          <div class="alert alert-success">{{session('success')}}</div>
        @endif
        <div class="card">
            <div class="card-body">
                <button type="button" class="btn  btn-icon icon-left  btn-primary float-right mb-3" data-toggle="modal"
                    data-target="#AddEvent"><i class="far fa-edit"></i>Add Music Genres</button>
                <div class="table-responsive">
                    <table class="table table-striped table-md">
                        <tbody>
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Action</th>
                            </tr>
                            @foreach ($music as $musics)
                              <tr id="musicid{{$musics->id}}">
                                <td>{{$musics->id}}</td>
                                <td>{{$musics->name}}</td>
                                
                                <td>
                                  <button  class="btn btn-md btn-icon btn-success edit" data-id="{{$musics->id}}"><i
                                    class="far fa-edit"></i>
                                  </button>
                                  
                                  <button class="btn btn-md btn-icon btn-danger delete" data-id="{{$musics->id}}" ><i
                                    class="fas fa-trash-alt"></i>
                                  </button>
                                </td>            
                              </tr>
                            @endforeach

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
    
    
   <div class="modal" id="AddEvent">
      <div class="modal-dialog">
        <div class="modal-content">
    
          <!-- Modal Header -->
          <div class="modal-header">
            <h4 class="modal-title">Add Music Genres</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>
    
          <!-- Modal body -->
          <div class="modal-body">
            
              <div class="form-group">
                <label>Name</label>
                <form action="{{route('admin.music.process')}}" method="post">
                  <div class="input-group">
                    <div class="input-group-prepend">
                      @csrf
                    </div>
                    <input type="text"  class="form-control" placeholder="Name" name="music_name" required>
                  </div>
                <span class="text-danger">{{$errors->first('music_name')}}</span>
              </div>
              <input type="submit" class="btn  btn-icon icon-left  btn-primary float-right  m-t-15 waves-effect" value="Add Music">
            </form>
          </div>
    
          <!-- Modal footer -->
         
    
        </div>
      </div>
    </div>
    <div class="modal" id="EditEvent">
      <div class="modal-dialog">
        <div class="modal-content">
    
          <!-- Modal Header -->
          <div class="modal-header">
            <h4 class="modal-title">Edit Music Genres</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>
    
          <!-- Modal body -->
          <div class="modal-body">
            <form action="{{route('admin.music.update')}}" method="POST">
              @csrf

              <div class="form-group">
                <label>Name</label>
                <div class="input-group">
                  <div class="input-group-prepend">
                    
                  </div>
                  <input type="hidden" name="id" class="id" value="">
                  <input type="text" class="form-control music_name" placeholder="Music Name" name="edit_music_name" required>
                </div>
                <span class="text-danger">{{$errors->first('edit_music_name')}}</span>

              </div>
              
              
              <input type="submit" value="Update Music" class="btn  btn-icon icon-left  btn-primary float-right  m-t-15 waves-effect">
            </form>
          </div>
    
          <!-- Modal footer -->
          
    
        </div>
      </div>
    </div>

   
@endsection

@section('scripts')

<script>

  $(document).ready(function(){ 
    check="{{old('music_name')}}";
    check_id="{{old('id')}}";
    if (check!="" && check_id=='') {
        $("#AddEvent").modal("show");
      }

      if (check_id!="") {
        $(".id").val(check_id);
        $("#EditEvent").modal("show");
      }
    $(document).on("click",".delete",function(){
      if(confirm('Do You Real Want To Delete This Music !'))
      {
        id=$(this).data("id");
          $.ajax({
              url:'music-delete/'+id, 
              type:'GET',
              data:{
                  _token:$('input[name=_token]').val()
  
              },
              success:function(response)
              {
                  $('#musicid'+id).remove();
              }
  
          })
      }
    })
    $(document).on("click",".edit",function(){
      id=$(this).data("id");
      $.get('music-edit/'+id,function(music){
      $(".message").html("");
      $('.id').val(music.id);
      $('.music_name').val(music.name);
      $(".message").html("");
      $('#EditEvent').modal('show');
      
      });
    })
    
    
  });
  
</script>

@endsection