@extends('admin.admin_master')
@section('admin.admin_content')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css"
        integrity="sha512-1k7mWiTNoyx2XtmI96o+hdjP8nn0f3Z2N4oF/9ZZRgijyV4omsKOXEnqL1gKQNPy2MTSP9rIEWGcH/CInulptA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

    <!-- ✅ load jQuery ✅ -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"
        integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>


    <!-- ✅ load DataTables ✅ -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"
        integrity="sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- Content -->
    <section>

        <div class="container-xxl flex-grow-1 container-p-y">
            <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Dashboard /</span> Index Static Video</h4>

            @php
                $i = 1;
            @endphp
            <!-- Basic Bootstrap Table -->
            <div class="card">
                <div class="row">
                    <div class="col-6 col">
                        <h5 class="card-header">List Video</h5>

                    </div>
                   
                </div>


                <div class="table-responsive text-nowrap pe-3 ps-3 pb-3">
                    <table class="table" id="exampleTable" width="100%">
                        <thead>
                            <tr class="text-nowrap">
                                <th>SN</th>
                                <th>Video</th>
                                <th>Action</th>
                                
                            </tr>
                        </thead>
                        <tbody class="table-border-bottom-0">
                            @foreach ($videos as $video)
                                <tr>
                                    <td>{{ $i++ }}</td>
                                    <td>{{$video->link}}</td>
                                   
                                    <td><a data-bs-toggle="modal" data-bs-target="#basicModal{{ $video->id }}"
                                            class="btn btn-primary text-white">Edit</a> </td>
                                </tr>
                                <!-- Modal -->
                                <div class="modal fade" id="basicModal{{ $video->id }}" tabindex="-1"
                                    aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="exampleModalLabel1">Edit Course</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                    aria-label="Close"></button>
                                            </div>
                                            <form action="{{ route('admin.static_video_store') }}" method="POST">
                                                @csrf
                                                <div class="modal-body">
                                                    <div class="row">
                                                        <div class="col mb-3">
                                                            <label for="nameBasic" class="form-label">Youtube Link</label>
                                                            <input type="text" id="link" class="form-control"
                                                                value="{{ $video->link }}" name="link"
                                                                placeholder="https://www.youtube.com/watch?v=CiKKTUnJTQk" />
                                                            @error('link')
                                                                <p class="text-danger">{{ $message }}</p>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                 
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-outline-secondary"
                                                        data-bs-dismiss="modal">
                                                        Close
                                                    </button>
                                                    <button type="submit" class="btn btn-primary">Update</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            <!--/ Basic Bootstrap Table -->
        </div>
        <!-- / Content -->

     


    </section>
    <script>
        $(document).ready(function() {
            $.noConflict();
            $('#exampleTable').DataTable();
        });
    </script>
@endsection
