@include('admin.layouts.header')
<div class="container-fluid pt-4 px-4">
    @if ($message = Session::get('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fa fa-exclamation-circle me-2"></i> {{ $message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif
    @if ($message = Session::get('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fa fa-exclamation-circle me-2"></i>{{ $message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif
    <div class="row g-4">
        <div class="col-sm-12 col-xl-6">
            <div class="bg-light rounded h-100 p-4">
                <h6 class="mb-4">Add New Audio Visual</h6>
                <form action="{{ route('admin.save-audio-visual') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="form-floating mb-3">
                        <input type="text" name="title" class="form-control" id="title">
                        <label for="title">Title <span class="text-danger">* </span>
                        </label>
                        @if ($errors->has('link'))
                            <span class="text-danger">{{ $errors->first('link') }}</span>
                        @endif
                    </div>
                    <div class="mb-3">
                        <label for="link" class="form-label">Embed Link <span class="text-danger">* </span>
                        </label>
                        <input type="text" name="link" class="form-control" id="link" aria-describedby="link">
                        @if ($errors->has('link'))
                            <span class="text-danger">{{ $errors->first('link') }}</span>
                        @endif
                    </div>
                    <div class="mb-3">
                        <label for="link" class="form-label">Description <span class="text-danger">* </span>
                        </label>

                        <textarea class="form-control" style="height: 100px;" id="description" name="description"></textarea>
                        @if ($errors->has('description'))
                            <span class="text-danger">{{ $errors->first('link') }}</span>
                        @endif
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid pt-4 px-4">
    <div class="row g-4">
        <div class="col-12">
            <div class=" bg-light text-center rounded p-4">
                <div class="row g-3 mb-3">
                    <div class="col-sm-6 col-md-3 d-flex align-items-center mb-0">
                        <h6 class="text-start">Annual Reports</h6>
                    </div>
                </div>
                <style>
                    th {
                        white-space: nowrap
                    }

                </style>
                <div class="table-responsive">
                    <table class="table text-start align-middle table-bordered table-hover mb-0">
                        <thead>
                            <tr class="text-dark">
                                <th scope="col">Visual</th>
                                <th scope="col">Title</th>
                                <th scope="col">Description</th>
                                <th scope="col">Update</th>
                                <th scope="col">Delete</th>

                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($audio_visuals as $audio_visual)
                                <tr>
                                    <td>
                                        <iframe src="{{ $audio_visual->link }}" title="YouTube video player"
                                            frameborder="0"
                                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                            allowfullscreen></iframe>
                                    </td>
                                    <td>{{ $audio_visual->title }}</td>
                                    <td>{{ $audio_visual->description }}</td>
                                    <td>
                                        <button class="btn btn-sm btn-primary me-2" data-bs-toggle="modal"
                                            data-bs-target="#audioVisualUpdateModal"
                                            onclick="updateAudioVisual()">Update</button>
                                    </td>
                                    <td>
                                        <button class="btn btn-sm btn-primary" data-bs-toggle="modal"
                                            data-bs-target="#audioVisualDeleteModal"
                                            onclick="getAudioVisualId()">Delete</button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="modal fade" id="audioVisualDeleteModal" tabindex="-1" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <p class="modal-title" id="exampleModalLabel">Are You sure ?</p>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <form action="{{ route('admin.delete-audio-visual') }}" method="post"
                            enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" id="audioVisualId" name="audioVisualId">
                            <button type="submit" class="btn btn-primary">Confirm Delete</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="audioVisualUpdateModal" tabindex="-1" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <p class="modal-title" id="exampleModalLabel">Are You sure ?</p>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    <form action="{{ route('admin.update-audio-visual') }}" method="post"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="modal-body">
                            <div class="form-floating mb-3">
                                <input type="text" name="update_title" class="form-control"
                                    placeholder="name@example.com" id="update_title">
                                <label for="update_title">Title</label>
                            </div>
                            <div class="mb-3">
                                <label for="update_link" class="form-label">Embed Link </label>
                                <input type="text" name="update_link" class="form-control" id="update_link"
                                    aria-describedby="update_link">
                            </div>
                            <div class="mb-3">
                                <label for="update_description" class="form-label">Description </label>
                                <textarea class="form-control" style="height: 100px;" id="update_description" name="update_description"></textarea>
                            </div>
                            <div class="mb-3">
                                <input type="hidden" id="update_audio_visual_id" name="update_audio_visual_id">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary">Confirm Update</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <script>
            function getAudioVisualId(id) {
                document.querySelector('#audioVisualId').value = id;
            }

            function updateAudioVisual(id) {

                $.ajax({
                    type: 'GET',
                    url: '' + '/admin/get-single-audio-visual/' + id,
                    dataType: 'json',
                    success: function(data) {
                        document.querySelector('#update_title').value = data.title;
                        document.querySelector('#update_description').value = data.description;
                        document.querySelector('#update_link').value = data.link;
                        document.querySelector('#update_audio_visual_id').value = data.id;
                    }
                });

            }
        </script>
    </div>


</div>
@include('admin.layouts.footer')