@extends($layout)

@section('styles')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />

    <style>
        tbody tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        
    </style>
@endsection
@section('content')
    <div class="row" style="max-width: 100%;
overflow-x: hidden;">
        <div class="col-12">
            <div class="card mb-4">
                <div class="card-header pb-0">
                    <div class="row">
                        <div class="col-6 d-flex align-items-center">
                            <h6 class="mb-2">
                            </h6>
                        </div>

                    </div>
                </div>

                <div class="px-12 fw-bold">

                    @if (session('success'))
                        <div id="successMessage"
                            class="toast align-items-center text-white bg-success border-0 position-fixed top-0 end-0 m-3"
                            role="alert" aria-live="assertive" aria-atomic="true">
                            <div class="d-flex">
                                <div class="toast-body text-dark">
                                    Successfully updated the metadata.
                                </div>
                                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
                                    aria-label="Close"></button>
                            </div>
                        </div>
                    @endif


                    {{--   @if (session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {{ session('success') }}
                            <button type="button" class="btn-close text-black" data-bs-dismiss="alert"
                                aria-label="Close">X</button>
                        </div>
                    @endif --}}
                </div>

                <div class="px-12 fw-bold ">
                    @if (session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            {{ session('error') }}
                            <button type="button" class="btn-close text-black" data-bs-dismiss="alert"
                                aria-label="Close">X</button>

                        </div>
                    @endif
                </div>

                <form action="{{ route('files.updateMetaData') }}" method="POST">
                    @csrf


                    <div class="table-responsive m-4 pt-2">
                        <div class="mb-3">

                        </div>
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Name</th>

                                    <th>Edit</th>
                                </tr>
                            </thead>
                            <tbody>


                                @if ($video)
                                    <tr>
                                        <td>{{ $video->title }}</br> Video</td>

                                        <td>

                                            <div id="copyMessage" style="display: none;" class="alert alert-success">Copied
                                            </div>
                                            <input type="hidden" value="{{ $video->id }}" name="videoId">
                                            <label for="videoName" class="col-md-4 col-form-label text-md-right">Video
                                                Name</label>
                                            <div style="position: relative;">

                                                <input type="text" class="form-control videoName" id="videoName"
                                                    value="{{ $video->title }}" name="videoName" required>

                                            </div>
                                            <div id="titleError" class="text-danger" style="display: none;"></div>



                                            <label for="videoDescription"
                                                class="col-md-4 col-form-label text-md-right">Video
                                                Description</label>
                                            <div style="position: relative;">

                                                <input type="text" class="form-control videoDescription"
                                                    id="videoDescription" value="{{ $video->description }}"
                                                    name="videoDescription" required>
                                                <div id="descriptionError" class="text-danger" style="display: none;"></div>


                                            </div>

                                            <label for="videoTags[]" class="col-md-4 col-form-label text-md-right"
                                                style="display:block;">Video
                                                Tags</label>
                                            <div style="position: relative;">

                                                <select class="form-control select2-tags" id="videoTags[]"
                                                    name="videoTags[]" multiple="multiple" style="width:100%;"
                                                    data-select2-id="select2-tags">
                                                    @foreach ($video->tags as $tag)
                                                        <option value="{{ $tag->id }}" selected>
                                                            {{ $tag->name }}
                                                        </option>
                                                    @endforeach
                                                </select>

                                            </div>

                                            <label for="videoDateTime" style="display:block;"
                                                class="col-md-4 col-form-label text-md-right">Date
                                            </label>
                                            <div style="position: relative;">

                                                <input type="date" class="form-control videoDateTime" id="videoDateTime"
                                                    value="{{ \Carbon\Carbon::parse($video->capture_datetime)->format('Y-m-d') }}"
                                                    name="videoDateTime" required>

                                            </div>

                                        </td>
                                    </tr>


                            </tbody>
                        </table>
                    </div>
                    <div class="d-flex justify-content-center">
                        <button id="update-button" type="submit" class="btn btn-primary">Update</button>
                    </div>
                </form>
            @else
                <div class="table-responsive m-4 pt-2">
                    <div class="mb-3">

                    </div>
                    <table class="table">
                        <p>No sub folders or files found.</p>
                    </table>
                </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="copyModal" tabindex="-1" aria-labelledby="copyModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="copyModalLabel">Copy Tags</h5>

                </div>
                <form action="{{ route('foldersAndFiles.copyTags') }}" method="POST" id="copyForm">
                    @csrf
                    <div class="modal-body">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="includeSubfolders"
                                name="includeSubfolders">
                            <label class="form-check-label" for="includeSubfolders">
                                Include all subfolders?
                            </label>
                        </div>
                        <input type="hidden" name="folder_id" value="">
                        <input type="hidden" name="selected_options" id="modalSelectedOptions">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary" id="confirmCopy">Yes</button>
                    </div>
                </form>

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


@endsection

@section('script')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

    <script>
        $(document).ready(function() {
            $('.select2-tags').select2({
                tags: true,
                tokenSeparators: [','],
                createTag: function(params) {
                    return {
                        id: 'new:' + params.term,
                        text: params.term,
                        newOption: true
                    }
                },
                width: '200px'
            });



        });

        $(document).ready(function() {
            var successMessage = document.getElementById('successMessage');

            if (successMessage) {
                var toast = new bootstrap.Toast(successMessage);
                toast.show();
            }
        });
    </script>
@endsection