@extends('layouts.admin.main')

@section('title')
    <title>{{ adminPageTitle('Series Matches Sequence') }}</title>
@endsection

@section('page-specific-styles')
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
@endsection

@section('content')
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header series-content-header">
            <div class="container-fluid">
                <div class="row mb-2 align-items-center">
                    <div class="col-sm-6">
                        <h1>Series Matches Sequence</h1>
                    </div>
                    <div class="col-sm-6 text-sm-right series-navigation">
                        <div class="icheck-primary">
                            <input type="checkbox" id="showNavigation" {{ navigationStatus() ? 'checked' : '' }}>
                            <label for="showNavigation">
                            Show Navigation
                            </label>
                        </div>

                        
                    </div>
                </div>
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- Main content -->
        <section class="content series-page-wrapper">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-4">
                        <table class="table" id="seriesListTable">
                            <thead class="thead-light">
                              <tr>
                                <th scope="col">Select</th>
                                <th scope="col">Series Name</th>
                              </tr>
                            </thead>
                            <tbody>
                                @foreach($series as $serie)
                                    <tr>
                                        <td>
                                            <div class="icheck-primary m-0">
                                                <input type="checkbox" class="series-checkbox series-checkbox-{{ $serie->seriesId }}" id="seriesCheck{{ $serie->seriesId }}" name="seriesCheck" data-name="{{ $serie->name }}" value="{{ $serie->id }}" data-newid="{{ $serie->seriesId }}" {{ in_array($serie->seriesId,$series_filters_ids) ? 'checked' : '' }}>
                                                <label for="seriesCheck{{ $serie->seriesId }}">
                                                
                                                </label>
                                            </div>

                                            <!-- <input type="checkbox" > -->
                                        </td>
                                        <td>{{ $serie->name }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="col-md-8 table-responsive-sm series-listing">
                        <table class="table">
                            <thead class="thead-light">
                              <tr>
                                <th scope="col">Series Name.</th>
                                <th scope="col" class="text-center">Series Id</th>
                                <th scope="col" class="text-center">Position</th>
                                <th scope="col" width="10%" class="text-center">Action</th>
                              </tr>
                            </thead>
                            <tbody id="seriesSequenceTable">
                                @foreach($series_filters as $series_filter)
                                    <tr id="{{ $series_filter->seriesId }}">
                                        <td>
                                            <span class="drag_icon">
                                                <svg width="264" height="308" viewBox="0 0 264 308" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M0 198H121V265.87L92.51 237.49L77 253L132 308L187 253L171.49 237.49L143 265.87V198H264V176H0V198Z" fill="#D2D2D2"/>
                                                <path d="M77 55L92.51 70.51L121 42.13V110H0V132H264V110H143V42.13L171.49 70.51L187 55L132 0L77 55Z" fill="#D2D2D2"/>
                                                </svg>
                                            </span>
                                            {{ $series_filter->seriesData->name }}</td>
                                        <td class="text-center">{{ $series_filter->seriesId }}</td>
                                        <td class="text-center">{{ $series_filter->sequnce }}</td>
                                        <td class="text-center">
                                            <a href="javascript:void();" id="removeRow" class="btn btn-sm theme_btn danger_btn icon_btn delete-btn-table" data-newid="{{ $series_filter->seriesId }}">
                                                <svg class="svg-inline--fa fa-trash fa-w-14" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="trash" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"></path></svg>
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach    
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
@endsection

@section('page-specific-scripts')
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script>
    $( function() {
        const sortableTable = $( "#seriesSequenceTable" ).sortable({
           update: function(event, ui) {
                let page_id_array = [];
                $('#seriesSequenceTable tr').each(function() {
                    page_id_array.push($(this).attr("id"));
                });
                let url = "{{ url('admin/series/filter/update/all')}}";
                $.ajax({
                        type:'POST',
                        url: url,
                        timeout: 30000,
                        data: {page_id_array: page_id_array},
                        success:function(data) {    
                            if(data.length > 0) {
                                createHtmlDoc(data);
                            }
                        }
                });
           }
       });

      $(document).on('change','.series-checkbox', function() {
          $('#seriesSequenceTable').empty();
          $(`.series-checkbox`).prop("checked",false);
          let thisId = $(this).data("newid");
          let url = "{{ url('admin/series/filter/update')}}";
          $.ajax({
                type:'POST',
                url: url,
                timeout: 30000,
                data: {seriesId: thisId},
                success:function(data) {  
                    $('#seriesSequenceTable').empty();  
                    if(data.length > 0) {
                        createHtml(data);
                    }
                }
          });

      })

      $(document).on('click','#removeRow', function() {
          $('#seriesSequenceTable').empty();
          $(`.series-checkbox`).prop("checked",false);
          let thisId = $(this).data("newid");
          let url = "{{ url('admin/series/filter/update')}}";
          $.ajax({
                type:'POST',
                url: url,
                timeout: 30000,
                data: {seriesId: thisId},
                success:function(data) {  
                    $('#seriesSequenceTable').empty();  
                    if(data.length > 0) {
                        createHtml(data);
                    }
                }
          });
      })

      
      $(document).on('change','#showNavigation',function() {
            let status = $(`#showNavigation`).prop("checked");
            let url = "{{ url('admin/update/nav/status') }}";

            $.ajax({
                    type:'POST',
                    url: url,
                    timeout: 30000,
                    data: {nav_show: status},
                    success:function(data) {  
                        swal({
                            title: "Success",
                            text: "Show navigation status updated successfully",
                            icon: "success",
                        });
                    }
            });
      });
    });

    function createHtml(data) {
        let html = "";
        $(data).each(function(key,value){
            html += `<tr id="${value.seriesId}"><td><span class="drag_icon">
                                                <svg width="264" height="308" viewBox="0 0 264 308" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M0 198H121V265.87L92.51 237.49L77 253L132 308L187 253L171.49 237.49L143 265.87V198H264V176H0V198Z" fill="#D2D2D2"/>
                                                <path d="M77 55L92.51 70.51L121 42.13V110H0V132H264V110H143V42.13L171.49 70.51L187 55L132 0L77 55Z" fill="#D2D2D2"/>
                                                </svg>
                                            </span>${value.series_data.name}</td><td>${value.seriesId}</td><td>${value.sequnce}</td><td><a href="javascript:void();" id="removeRow" class="btn btn-sm theme_btn danger_btn icon_btn delete-btn-table btn btn-danger btn-sm" data-newid="${value.seriesId}"><svg class="svg-inline--fa fa-trash fa-w-14" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="trash" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"></path></svg></a></td></tr>`;
            $(`.series-checkbox-${value.seriesId}`).prop("checked",true);
        });
        $('#seriesSequenceTable').html(html);
    }

    function createHtmlDoc(data) {
        let html = "";
        $(data).each(function(key,value){
            html += `<tr id="${value.seriesId}"><td><span class="drag_icon">
                                                <svg width="264" height="308" viewBox="0 0 264 308" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M0 198H121V265.87L92.51 237.49L77 253L132 308L187 253L171.49 237.49L143 265.87V198H264V176H0V198Z" fill="#D2D2D2"/>
                                                <path d="M77 55L92.51 70.51L121 42.13V110H0V132H264V110H143V42.13L171.49 70.51L187 55L132 0L77 55Z" fill="#D2D2D2"/>
                                                </svg>
                                            </span>${value.series_data.name}</td><td>${value.seriesId}</td><td>${value.sequnce}</td><td><a href="javascript:void();" id="removeRow" class="btn btn-sm theme_btn danger_btn icon_btn delete-btn-table btn btn-danger btn-sm"><svg class="svg-inline--fa fa-trash fa-w-14" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="trash" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"></path></svg></a></td> </tr>`;
        });
        $('#seriesSequenceTable').html(html);
    }
</script>
@endsection