@extends('layouts.admin')
@section('content')

    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark">Edit Track</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
              <li class="breadcrumb-item active">Edit Track</li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
         <!-- Info boxes -->
         <div class="row">
            <div class="col-md-12">
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">Edit Bulk Track</h3>
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                  <div class="row">
                      <div class="col-lg-12 col-md-12">
                          @if (count($errors) > 0)
                          <div class="alert alert-danger">
                              <ul>
                              @foreach ($errors->all() as $error)
                                  <li>{{ $error }}</li>
                              @endforeach
                              </ul>
                          </div>
                          @endif
                         
                      </div>
                  </div>
                  <form id="albumForm">
                  <div class="row">
                   
                        <label>Select Album:</label> &nbsp;
                   
                      <div class ="col-md-4">
                        <select class="form-control select2" placeholder="select album" name="album_id" id="album_id">
                                                </select>
                      </div>
                      <input type="hidden" name="type" id="select_type" value="AL">
                        <input type="submit" class="btn btn-success album-submit" value="submit">
                   
                  </div>
                  </form>
                  <div class="text-center col-6">
                    <br />
                    ------------------------------ or ------------------------------
                  <br />
                  <br />
                    </div>
                  <form id="artistForm">
                  <div class="row">
                   
                        <label>Select Artist:</label> &nbsp;
                   
                      <div class ="col-md-4">
                        <select class="form-control select2" placeholder="select Artist" name="artist_id" id="artist_id">
                                                </select>
                      </div>
                      <input type="hidden" name="type" id="select_type" value="AR">
                        <input type="submit" class="btn btn-success artist-submit" value="submit">
                   
                  </div>
                  </form>
               <br />
               <br />
                <div class="col-md-12">
                      <div class="alert alert-danger col-md-6" style="display:none;"></div>
                      <div class="alert alert-success col-md-6" style="display:none;"></div>
                    </div>
                  <div id="tracksList" ></div>
                  </div>
              </div>
            </div>
            </div>
        </div>
        <!-- /.row -->

           <!-- /.row (main row) -->
      </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->
    <script>
      $(function () {

        $('form#albumForm').on('submit', function (e) {

          e.preventDefault();

          $.ajax({
                type: "GET",
                url: "{{ route('admin.get-tracks') }}",
                data: $('#albumForm').serialize(),
                success: function(response) {
                  $('#tracksList').html(response.html);
                  $('.select2').select2();
                }
          });

        });

        $('form#artistForm').on('submit', function (e) {

          e.preventDefault();

          $.ajax({
                type: "GET",
                url: "{{ route('admin.get-tracks') }}",
                data: $('#artistForm').serialize(),
                success: function(response) {
                  $('#tracksList').html(response.html);
                  $('.select2').select2();
                }
          });

        });

        $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                    }
                });

        // $(document).on('change','.select2',function(){
        //     alert($(this).attr('id'));
        // });
        $(document).on('click','.form-submit', function (e) {
           $x= $(this).attr('id');
          e.preventDefault();

          $.ajax({
                type: "POST",
                url: "{{ route('admin.save-track') }}",
                data: $('#trackForm_'+$x).serialize(),
                success: function(response) {
                  if(response.status=='success'){
                    $('.alert-success').html(response.msg);
                      $('.alert-success').show();
                      $('html, body').animate({scrollTop:$('#tracksList').position().top}, 'slow');
                    setTimeout(() => {
                      $('.alert-success').hide();
                    }, 4000);
                  }
                }
          });

          });
      });

    </script>
@endsection