@extends('admin.layouts.master-new')
@section('content')
<div class="pagetitle d-flex align-items-center justify-content-between">
    <div>
        <h1>Video</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                {{-- <li class="breadcrumb-item">Tables</li> --}}
                <li class="breadcrumb-item active">Vidoe</li>
            </ol>
        </nav>
    </div>
    <div>
        <a class="btn btn-primary" href="{{ route('video.create') }}"> Create Video</a>
    </div>
</div><!-- End Page Title -->

<section class="section">
    <div class="row">
        <div class="col-lg-12">

            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Video</h5>
                    {{-- <p>Add lightweight datatables to your project with using the <a href="https://github.com/fiduswriter/Simple-DataTables" target="_blank">Simple DataTables</a> library. Just add <code>.datatable</code> class name to any table you wish to conver to a datatable</p> --}}

                    <!-- Table with stripped rows -->
                    <table class="table datatable table-striped table-bordered mb-0">
                        <thead>
                            <tr>
                                <th scope="col">S.No</th>
                                <th scope="col">Title</th>
                                <th scope="col">Description</th>
                                <th scope="col">Order Position</th>
                                <th scope="col">Status</th>
                                <th scope="col">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($videos as $video)
                                <tr>
                                    <th scope="row">{{ $loop->iteration }}</th>
                                    <td>{{ $video->title }}</td>
                                    <td>{!! $video->description !!}</td>
                                    <td>
                                        <select class="form-select changePosition" name="position" data-id="{{$video->id}}">
                                          <option value="">Options</option>
                                            @for($i = 1; $i <= 20; $i++)
                                                <option value="{{ $i }}" @if($video->position == $i) selected @endif>{{ $i }}</option>
                                            @endfor
                                        </select>
                                    </td>
                                    <td>   
                                        <span class="btn btn-sm btn-rounded {{ $video->status == 1 ? 'btn-success' : 'btn-danger' }}">{{ $video->status == 1 ? 'Active' : 'Suspended' }}</span>
                                    </td>
                                    <td>
                                        <form action="{{ route('video.destroy', $video->id) }}"
                                            method="Post">
                                            <a class="btn btn-sm btn-primary"
                                                href="{{ route('video.edit', $video->id) }}">Edit</a>
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-danger"
                                                onclick="return confirm('Are You Sure? You want to delete this item?')">Delete</button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <!-- End Table with stripped rows -->

                </div>
            </div>

        </div>
    </div>
</section>
@push('scripts')
<script>
    $(document).ready(function(){
        $('.changePosition').on('change',function(){
            var videoId = $(this).data('id');
            var position = $(this).val();
            $.ajax({
                url: "{{ route('video.changePosition') }}",
                type: 'POST',
                data: {
                    id: videoId, 
                    position: position, 
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.status == 200) {
                        setTimeout(function() {
                            location.reload();
                        }, 1000); 
                    } else {
                        alert(response.message);
                    }
                },
                error: function(xhr, status, error) {
                    console.error('AJAX call error:', status, error);
                    alert('An error occurred while processing the AJAX call.');
                }
            });
        })
    });
</script>
@endpush
@endsection