@extends('layouts.admin')
@section('content')
<style>
  .upload-btn {
    border: 1px solid;
    color: #007bff;
  }

  .select-label {
    font-weight: 500 !important;
    margin-top: 30px;
  }

  .alert-info,
  .alert-danger {
    display: none;
  }

  /* .banner-card{
    display: none;
  } */
</style>
<!-- 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">Home Section</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">Add New</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-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 class="col-lg-12 col-md-12">

        <div class="alert alert-info alert-block">
          <button type="button" class="close" data-dismiss="alert">×</button>
          <p class='msg'></p>
        </div>


        <div class="alert alert-danger alert-block">
          <button type="button" class="close" data-dismiss="alert">×</button>
          <p class='msg'></p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <form method="POST" id="myform" action="{{ route('admin.store-home-section') }}" enctype="multipart/form-data">
          @csrf
          <div id="main-div">


            <div class="card" style="display:none">
              <div class="card-header">
                <h3 class="card-title">Row <span class="row_no">1</span></h3>
                <i class="fas fa-times float-right card-remove" data-id="0"></i>
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                <!-- <div class="row">
                  <div class="col-6"> -->
                <div class="row">
                  <div class="col-12">
                    <label>Type:</label> &nbsp;&nbsp;&nbsp; <input type="radio" class="radio_chk" name="card_type0" value="DE" checked>
                    <label>Default</label> &nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="radio" class="radio_chk" name="card_type0" value="BA">
                    <label>Banner</label> &nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="radio" class="radio_chk" name="card_type0" value="MX">
                    <label>Mixture</label>

                    <br>
                  </div>
                </div>
                <div class="form-group row banner-card d-none">

                  @php $a=1; @endphp
                  @foreach($banners as $banner)

                  <div class="col-md-3 mb-2">
                    {{$a}} &nbsp;&nbsp; <input type="radio" class="banner" name="banner0" value="{{$banner->id}}"> &nbsp;&nbsp;
                    <img src="{{ asset(Storage::url('uploads/banners').'/'.$banner->image ) }}" width="150" />
                  </div>
                  @php $a=$a+1; @endphp
                  @endforeach
                </div>

                <div class="form-group">
                  <div class="col-md-12 mb-2">
                    <label>Title</label>
                    <input type="text" name="title0" class="form-control title">
                  </div>
                  <div class="col-md-12 mb-2">
                    <label>Subtitle</label>
                    <input type="text" name="sub_title0" class="form-control sub_title">
                  </div>
                  <div class="col-md-12 mb-2">
                    <label>Layout</label>
                    <select name="layout0" class="form-control layout">
                      <option value="">--- Select ---</option>
                      <option value="R">Rounded</option>
                      <option value="S">Square</option>
                    </select>
                  </div>
                </div>
                <div class="form-group row mixture-card d-none">
                  <div class="col-md-12 mb-2">
                    <label>Mixture</label>
                    <select name="mixture_id0" class="form-control mixture_id">
                      <option value="">--- Select ---</option>
                      @foreach($mixtures as $mixture)
                      <option value="{{$mixture->id}}">{{ $mixture->title }}</option>
                      @endforeach
                    </select>
                  </div>
                </div>
                <div class="form-group row default-card">
                  <div class="col-md-12 mb-2">
                    <label>Type</label>
                    <select name="type0" class="form-control type">
                      <option value="">--- Select ---</option>
                      <option value="PL">Playlist</option>
                      <option value="AL">Album</option>
                      <option value="AR">Artist</option>
                      <option value="TR">Track</option>
                      <option value="CA">Category</option>
                    </select>
                  </div>
                  <div class="col-md-12 mb-2">
                    <label>Filter</label>
                    <select name="filter0" class="form-control filter">
                      <option value="">--- Select ---</option>
                      <option value="L">Latest</option>
                      <option value="T">Top</option>
                      <option value="R">Recent Played</option>
                    </select>
                  </div>


                </div>
                <div class="form-group row">
                  <div class="col-md-12 mb-2">
                    <label>Sort</label>
                    <input type="text" name="sort[]" class="form-control sort" value="">
                  </div>
                </div>
                <!-- </div>
                </div> -->
              </div>
            </div>


            @if($home->count()>0)
            @php $i=1; @endphp
            @foreach($home as $row)
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">Row <span class="row_no">{{$i}}</span></h3>
                <i class="fas fa-times float-right card-remove" data-id="{{ $row->id }}"></i>
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                <!-- <div class="row">
                  <div class="col-6"> -->
                <div class="row">
                  <div class="col-12">
                    <label>Type:</label> &nbsp;&nbsp;&nbsp; <input type="radio" class="radio_chk" name="card_type{{$i}}" value="DE" checked>
                    <label>Default</label> &nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="radio" class="radio_chk" name="card_type{{$i}}" value="BA" >
                    <label>Banner</label> &nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="radio" class="radio_chk" name="card_type{{$i}}" value="MX" >
                    <label>Mixture</label>
                    <br>
                  </div>
                </div>

                <div class="form-group row banner-card d-none">

                  @php $a=1; @endphp
                  @foreach($banners as $banner)
                  <div class="col-md-3 mb-2">
                    {{$a}} &nbsp;&nbsp; <input type="radio" class="banner" name="banner{{$i}}" value="{{$banner->id}}" checked> &nbsp;&nbsp;
                    <img src="{{ asset(Storage::url('uploads/banners').'/'.$banner->image ) }}" width="150" />
                  </div>
                  @php $a=$a+1; @endphp
                  @endforeach
                </div>
                <div class="form-group row">
                  <div class="col-md-12 mb-2">
                    <label>Title</label>
                    <input type="text" name="title{{$i}}" class="form-control title" value="{{ $row->title }}">
                  </div>
                  <div class="col-md-12 mb-2">
                    <label>Subtitle</label>
                    <input type="text" name="sub_title{{$i}}" class="form-control sub_title" value="{{ $row->sub_title }}">
                  </div>
                  <div class="col-md-12 mb-2">
                    <label>Layout</label>
                    <select name="layout{{$i}}" class="form-control layout">
                      <option value="">--- Select ---</option>
                      <option value="R" >Rounded</option>
                      <option value="S" >Square</option>
                    </select>
                  </div>
                </div>
                <div class="form-group row mixture-card  d-none">
                  <div class="col-md-12 mb-2">
                    <label>Mixture</label>
                    <select name="mixture_id{{$i}}" class="form-control mixture_id">
                      <option value="">--- Select ---</option>
                      @foreach($mixtures as $mixture)
                      <option value="{{$mixture->id}}" selected>{{ $mixture->title }}</option>
                      @endforeach
                    </select>
                  </div>

                </div>

                <div class="form-group row default-card ">

                  <!-- <div class="col-md-6 mb-2">
                    <label>Title</label>
                    <input type="text" name="title{{$i}}" class="form-control title" value="{{ $row->title }}">
                  </div>
                  <div class="col-md-6 mb-2">
                    <label>Subtitle</label>
                    <input type="text" name="sub_title{{$i}}" class="form-control sub_title" value="{{ $row->sub_title }}">
                  </div> -->
                  <div class="col-md-12 mb-2">
                    <label>Type</label>
                    <select name="type{{$i}}" class="form-control type">
                      <option value="">--- Select ---</option>
                      <option value="PL" >Playlist</option>
                      <option value="AL" >Album</option>
                      <option value="AR" >Artist</option>
                      <option value="TR" >Track</option>
                      <option value="CA" >Category</option>
                    </select>
                  </div>
                  <div class="col-md-12 mb-2">
                    <label>Filter</label>
                    <select name="filter{{$i}}" class="form-control filter">
                      <option value="">--- Select ---</option>
                      <option value="L" >Latest</option>
                      <option value="T" >Top</option>
                      <option value="R" >Recent Played</option>
                    </select>
                  </div>


                </div>

                <div class="form-group row">
                  <div class="col-md-12 mb-2">
                    <label>Sort</label>
                    <input type="text" name="sort[]" class="form-control sort" value="{{ $row->sort }}">
                  </div>
                </div>
                <!-- </div>
                </div> -->
              </div>
            </div>
            @php $i=$i+1; @endphp
            @endforeach
            @else
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">Row <span class="row_no">1</span></h3>
                <i class="fas fa-times float-right card-remove" data-id="0"></i>
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                <!-- <div class="row">
                  <div class="col-6"> -->
                <div class="row">
                  <div class="col-12">
                    <label>Type:</label> &nbsp;&nbsp;&nbsp; <input type="radio" class="radio_chk" name="card_type1" value="DE" checked>
                    <label>Default</label> &nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="radio" class="radio_chk" name="card_type1" value="BA">
                    <label>Banner</label> &nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="radio" class="radio_chk" name="card_type1" value="MX">
                    <label>Mixture</label>
                    <br>
                  </div>
                </div>
                <div class="form-group row banner-card d-none">

                  @php $a=1; @endphp
                  @foreach($banners as $banner)

                  <div class="col-md-3 mb-2">
                    {{$a}} &nbsp;&nbsp; <input type="radio" class="banner" name="banner1" value="{{$banner->id}}"> &nbsp;&nbsp;
                    <img src="{{ asset(Storage::url('uploads/banners').'/'.$banner->image ) }}" width="150" />
                  </div>
                  @php $a=$a+1; @endphp
                  @endforeach
                </div>

                <div class="form-group row">

                  <div class="col-md-12 mb-2">
                    <label>Title</label>
                    <input type="text" name="title1" class="form-control title">
                  </div>
                  <div class="col-md-12 mb-2">
                    <label>Subtitle</label>
                    <input type="text" name="sub_title1" class="form-control sub_title">
                  </div>
                  <div class="col-md-12 mb-2">
                    <label>Layout</label>
                    <select name="layout1" class="form-control layout">
                      <option value="">--- Select ---</option>
                      <option value="R">Rounded</option>
                      <option value="S">Square</option>
                    </select>
                  </div>
                </div>
                <div class="form-group row mixture-card  d-none">
                  <div class="col-md-12 mb-2">
                    <label>Mixture</label>
                    <select name="mixture_id1" class="form-control mixture_id">
                      <option value="">--- Select ---</option>
                      @foreach($mixtures as $mixture)
                      <option value="{{$mixture->id}}">{{ $mixture->title }}</option>
                      @endforeach
                    </select>
                  </div>
                </div>
                <div class="form-group row default-card">

                  <!-- <div class="col-md-6 mb-2">
                    <label>Title</label>
                    <input type="text" name="title1" class="form-control title">
                  </div>
                  <div class="col-md-6 mb-2">
                    <label>Subtitle</label>
                    <input type="text" name="sub_title1" class="form-control sub_title">
                  </div> -->
                  <div class="col-md-12 mb-2">
                    <label>Type</label>
                    <select name="type1" class="form-control type">
                      <option value="">--- Select ---</option>
                      <option value="PL">Playlist</option>
                      <option value="AL">Album</option>
                      <option value="AR">Artist</option>
                      <option value="TR">Track</option>
                      <option value="CA">Category</option>
                    </select>
                  </div>
                  <div class="col-md-12 mb-2">
                    <label>Filter</label>
                    <select name="filter1" class="form-control filter">
                      <option value="">--- Select ---</option>
                      <option value="L">Latest</option>
                      <option value="T">Top</option>
                      <option value="R">Recent Played</option>
                    </select>
                  </div>


                </div>
                <div class="form-group row">
                  <div class="col-md-12 mb-2">
                    <label>Sort</label>
                    <input type="text" name="sort[]" class="form-control sort" value="">
                  </div>
                </div>
                <!-- </div>
                </div> -->
              </div>
            </div>
            @endif
          </div>

          <div class="form-group row mb-0">
            <div class="col-md-6 ">
              <button type="submit" class="btn btn-primary">
                {{ __('Submit') }}
              </button>
            </div>

            <div class="col-md-6 text-right">
              <button type="button" class="btn btn-primary load-more">
                {{ __('Load More') }}
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
  <!-- /.row -->

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

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

    $(document).on('click', '.load-more', function() {
      // alert(document.getElementById( "#main-div .card" ));
      x = $("#main-div .card").length;

      html = $("#main-div .card:first-child")[0].outerHTML;
      x = x + 1;
      // html2=html.find('.row_no').html(x);

      $('#main-div').append(html);
      $("#main-div .card:nth-child(" + x + ")").show();
      $("#main-div .card:nth-child(" + x + ")").find('.row_no').html(x - 1);
      $("#main-div .card:nth-child(" + x + ")").find('.title').val('');
      $("#main-div .card:nth-child(" + x + ")").find('.sub_title').val('');
      $("#main-div .card:nth-child(" + x + ")").find('.sort').val('');

      $("#main-div .card:nth-child(" + x + ")").find('.type').val("1");
      $("#main-div .card:nth-child(" + x + ")").find('.filter').val("1");
      $("#main-div .card:nth-child(" + x + ")").find('.layout').val("1");
      $("#main-div .card:nth-child(" + x + ")").find('.card-remove').attr("data-id", 0);
      name = 'card_type' + (x - 1);
      banner = 'banner' + (x - 1);
      mixture_id = 'mixture_id' + (x - 1);
      title = 'title' + (x - 1);
      sub_title = 'sub_title' + (x - 1);
      layout = 'layout' + (x - 1);
      filter = 'filter' + (x - 1);
      type = 'type' + (x - 1);
      $("#main-div .card:nth-child(" + x + ")").find('.radio_chk').attr("name", name);
      $("#main-div .card:nth-child(" + x + ")").find('.banner').attr("name", banner);
      $("#main-div .card:nth-child(" + x + ")").find('.mixture_id').attr("name", mixture_id);
      $("#main-div .card:nth-child(" + x + ")").find('.title').attr("name", title);
      $("#main-div .card:nth-child(" + x + ")").find('.sub_title').attr("name", sub_title);
      $("#main-div .card:nth-child(" + x + ")").find('.layout').attr("name", layout);
      $("#main-div .card:nth-child(" + x + ")").find('.filter').attr("name", filter);
      $("#main-div .card:nth-child(" + x + ")").find('.type').attr("name", type);
    });

    $(document).on('click', '.card-remove', function() {
      id = $(this).attr('data-id');

      if (id > 0) {
        if (confirm('Are you sure you want to delete ?')) {
          $.ajax({
            type: "post",
            url: "{{route('admin.delete-row')}}",
            data: {
              "id": id
            },
            error: function(xhr, status, error) {
              alert(status);
              alert(xhr.responseText);
            },
            success: function(data) {
              swal({
                // text: "Product added to Featured Listing ",
                title: data,
                button: "Close",
                icon: "success",
              });

              $(this).parent().parent().remove();
              $('.row_no').each(function(i, obj) {
                $(this).html(i);

                name = 'card_type' + i;
                banner = 'banner' + i;
                mixture_id = 'mixture_id' + i;
                $("#main-div .card:nth-child(" + i + ")").find('.radio_chk').attr("name", name);
                $("#main-div .card:nth-child(" + i + ")").find('.banner').attr("name", banner);
                $("#main-div .card:nth-child(" + i + ")").find('.mixture_id').attr("name", mixture_id);
              });

            },
          });
        }
      } else {
        $(this).parent().parent().remove();
        $('.row_no').each(function(i, obj) {
          $(this).html(i);

          name = 'card_type' + i;
          banner = 'banner' + i;
          mixture_id = 'mixture_id' + i;
          $("#main-div .card:nth-child(" + i + ")").find('.radio_chk').attr("name", name);
          $("#main-div .card:nth-child(" + i + ")").find('.banner').attr("name", banner);
          $("#main-div .card:nth-child(" + i + ")").find('.mixture_id').attr("name", mixture_id);
        });
      }

    });


    $(document).on('change', '.radio_chk', function() {
      val = $(this).val();

      if (val == 'BA') {
        $(this).parent().parent().siblings('.mixture-card').addClass('d-none');
        $(this).parent().parent().siblings('.default-card').addClass('d-none');
        $(this).parent().parent().siblings('.banner-card').removeClass('d-none');
      } else if (val == 'DE') {
        $(this).parent().parent().siblings('.default-card').removeClass('d-none');
        $(this).parent().parent().siblings('.banner-card').addClass('d-none');
        $(this).parent().parent().siblings('.mixture-card').addClass('d-none');
      } else {
        $(this).parent().parent().siblings('.default-card').addClass('d-none');
        $(this).parent().parent().siblings('.banner-card').addClass('d-none');
        $(this).parent().parent().siblings('.mixture-card').removeClass('d-none');
      }
      //
    });


    $("#myform").submit(function(e) {

      //prevent Default functionality
      e.preventDefault();

      //get the action-url of the form
      var actionurl = e.currentTarget.action;

      //do your own request an handle the result
      $.ajax({
        url: actionurl,
        type: 'post',
        dataType: 'JSON',
        data: $("#myform").serialize(),
        success: function(data) {

          if (data.status == true) {
            $('.alert-danger').hide();
            $('.alert-info').find('.msg').html(data.msg);
            $('.alert-info').show();
          } else {
            $('.alert-info').hide();
            $('.alert-danger').find('.msg').html(data.msg);
            $('.alert-danger').show();
          }

          $('html, body').animate({
            scrollTop: $(".content-header").offset().top
          }, 1000);

        }
      });

    });
  });
</script>
@endsection