@extends('layouts.admin')

@section('title')
    Advertisment Videos
@endsection

@section('page_title')
    Ads Videos
@endsection
@push('page_style')
    @include('include.dataTableStyles')
@endpush

@section('content')
    <!-- Main content -->

    <section class="mainAdds">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">ADS Videos</h1>
                </div>

            </div>
        </div>
        <!-- /.content-header -->

        <div class="row">
            <div class="col-12">
                <div class="card data-table">
                    <div class="filterheader">
                        <div class="headingfilter">
                            <h3 class="card-title">List of all Ads Advertisment Ads</h3>

                            <div class="form-group sellertypeFilter">
                                <label>Ads Videos filter by :</label>
                                <select id='is_approved' class="form-control" style="width: 200px">
                                    <option value="{{ \App\Models\AdvertismentsYoutubeVideo::VIDEO_APPROVED }}">Approved</option>
                                    <option value="{{ \App\Models\AdvertismentsYoutubeVideo::VIDEO_PENDING }}" selected="">New Videos
                                    </option>
                                    <option value="{{ \App\Models\AdvertismentsYoutubeVideo::VIDEO_REJECTED }}">Rejected</option>
                                </select>
                            </div>
                        </div>
        
                    </div>


                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="advertismentVideoTable" class="table table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th>S.No</th>
                                        <th>Unique id</th>
                                        <th>Title</th>
                                        <th>Video</th>
                                        <th>Status</th>
                                        <th data-orderable="false">Action</th>
                                        <th data-orderable="false">Log</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>


                </div>
                <!-- /.card -->
            </div>
        </div>
        <!-- /.container-fluid -->
    </section>

    <div class="modal modalCustom fade" id="rejectVideoModal" aria-hidden="true" aria-labelledby="exampleModalToggleLabel"
        tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <a href="#" class="cancel-model" onclick = "$('#rejectVideoModal').modal('hide')" data-bs-dismiss="modal"
                    aria-label="Close">
                    <img src="{{ asset('frontend/img/Cancel.svg') }}"class="img-fluid"></a>
                <div class="modal-header">
                    <img src="{{ asset('frontend/img/Rejet.svg') }}" class="img-fluid">
                    <h6>Are you sure you want to reject this Video's request?</h6>
                </div>
                <div class="modal-body">

                    <form id="rejectReason-form" method="POST">
                        @csrf
                         <p>Select reason:</p>
                        <div class="reject_form">
                            @foreach ($rejectionReasons as $key => $value)
                          <div class="input_main">
                              <label class="checkbox_" for="{{ $key }}">
                                  <input type="radio" id="{{ $key }}" name="reason_id"
                                      value="{{ $key }}" class="brandReason d-none">
                                  <span class="checkmarks"></span>{{ $value }}
                              </label>
                          </div>
                          @endforeach
                        </div> 
                        <span id="spanErrors" class="text-danger error-text reason_id_err"></span>
                        <textarea type="text" class="form-control col-md-12 otherCancelReason d-none" id="otherReasonTextBox" name="other_reason"
                            placeholder="Reason type here..."></textarea>
                        <span id="spanError" class="text-danger error-text other_reason_err"></span>
      

                        <div class="group_btn">
                            <a class="btn btn_ submitVideo" data-key = "{{\App\Models\AdvertismentsYoutubeVideo::VIDEO_REJECTED}}" data-url="advertisment">Yes, reject Video</a>
                            <a href="javascript:void(0);" class="btn btn_ Rejetform"
                                onClick="$('#rejectVideoModal').modal('hide');">No, Cancel</a>
                        </div>
                    </div>
                    </form>

                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="approveVideoModal" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <a href="#" class="cancel-model" onclick = "$('#approveVideoModal').modal('hide')" data-bs-dismiss="modal"
                    aria-label="Close">
                    <img src="{{ asset('frontend/img/Cancel.svg') }}"class="img-fluid"></a>
                <div class="modal-header">
                    <img src="{{ asset('frontend/img/Rejet.svg') }}" class="img-fluid">
                    <h6>Are you sure you want to approve this Video request?</h6>
                </div>
                <div class="modal-body">

                    <div class="group_btn">
                        <a class="btn btn_ submitVideo" data-key = "{{\App\Models\AdvertismentsYoutubeVideo::VIDEO_APPROVED}}">Yes, approve Video </a>
                        <a href="javascript:void(0);" class="btn btn_ Rejetform"
                            onClick="$('#approveVideoModal').modal('hide');">No, Cancel</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

    <!-- iframe modal -->

    <div class="modal fade" id="videoopen">
            <div class="modal-dialog modal-dialog-centered modal-xl">
                <div class="modal-content">
                    <div class="closeicon_"><i class="fas fa-times"></i></div>
                    <div class="modal-body">
                        <div class="video-wrapper">
                            <iframe width="100%" data-value="sd" id="videoFrame" height="600" src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
            </div>
    </div>

    @push('page_script')
        @include('include.dataTableScripts')

        <script src="{{ asset('js/pages/advertisment/videoIndex.js') }}"></script>
        <script src="{{ asset('js/pages/reject.js') }}"></script>

        <script>
            function autoApproval(id) {
                $.ajax({
                    url: "{{ route('users.enableAutoApprove') }}",
                    type: "POST",
                    data: {
                        is_auto_ads_approve: id,
                        _token: '{{ csrf_token() }}'
                    },
                    dataType: 'json',
                    success: function(result) {
                        window.location.reload();
                    }
                });
            }

            $(document).on('click', '.autoApprove', function() {
                let id = $(this).attr('data-id');
                autoApproval(id);
            });

        </script>

        <script>
        $(document).on('click', '.closeicon_', function() {
            $('#videoFrame').attr('src','');
            $('#videoopen').trigger('click');
        });
        </script>

        <script>
        $('body').click(function() {
            $('#videoFrame').attr('src','');
        })
        </script>
        
    @endpush
@endsection