@if (auth()->user()->hasRole('admin'))
    @extends('layouts.admin.app')
@elseif(auth()->user()->hasRole('editor'))
    {{-- @extends('layouts.editor') --}}
@else
    {{-- @extends('layouts.user') --}}
@endif
@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-5">{{ isset($currentFolderMain->name) ? $currentFolderMain->name : '' }}
                            </h6>
                        </div>

                    </div>
                </div>

                <div class="px-12 fw-bold">
                    @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('foldersAndFiles.update') }}" method="POST">
                    @csrf

                    @if ($folders->count() > 0 || $videos->count() > 0)
                        <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 ($videos)
                                        @foreach ($videos as $key => $video)
                                            <tr>
                                                <td>{{ $video->title }}</br> Video</td>

                                                <td>
                                                    <input type="hidden" name="items[{{ $key }}][type]"
                                                        value="video">
                                                    <input type="hidden" name="items[{{ $key }}][id]"
                                                        value="{{ $video->id }}">
                                                    <label for="videoName" class="col-form-label text-md-right">Video
                                                        Name</label>
                                                    <div style="position: relative;">
                                                        <input type="text" class="form-control videoName"
                                                            value={{ $video->title }}
                                                            name="items[{{ $key }}][videoName]" required
                                                            style="padding-right: 30px;">
                                                        <i class="fas fa-clipboard copyIcon" data-input-class="videoName"
                                                            style="position: absolute; right: 5px; top: 50%; transform: translateY(-50%); cursor:pointer;">
                                                            Copy</i>
                                                    </div>

                                                    <div id="copyMessage" style="display: none;"
                                                        class="alert alert-success">Copied</div>

                                                    <label for="videoDescription"
                                                        class="col-md-4 col-form-label text-md-right">Video
                                                        Description</label>
                                                    <input type="text" class="form-control" id="videoDescription"
                                                        value="{{ $video->description }}"
                                                        name="items[{{ $key }}][videoDescription]" required>

                                                    <label for="videoTags[{{ $key }}]"
                                                        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[{{ $key }}]"
                                                            name="items[{{ $key }}][videoTags][]"
                                                            multiple="multiple" style="width:100%;">
                                                            @foreach ($video->tags as $tag)
                                                                <option value="{{ $tag->id }}" selected>
                                                                    {{ $tag->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>

                                                        <i class="fas fa-clipboard copyIconSelect"
                                                            data-input-class="select2-tags"
                                                            data-target-select-id="videoTags[{{ $key }}]"
                                                            style="position: absolute; right: 5px; top: 50%; transform: translateY(-50%); cursor:pointer;">Copy</i>
                                                    </div>

                                                    <div id="copyMessage" style="display: none;"
                                                        class="alert alert-success">Copied</div>

                                                    <label for="videoDateTime" style="display:block;"
                                                        class="col-md-4 col-form-label text-md-right">Date / Time
                                                    </label>
                                                    <input type="datetime-local" class="form-control" id="videoDateTime"
                                                        value="{{ $video->capture_datetime }}"
                                                        name="items[{{ $key }}][videoDateTime]" required>

                                                </td>
                                            </tr>
                                        @endforeach
                                    @endif
                                </tbody>
                            </table>
                        </div>
                        <button type="submit" class="btn btn-primary">Update All</button>
                </form>
            @else
                <p>No folders or videos found.</p>
                @endif
            </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: [',']
            });
        });
    </script>

    <script>
        $(document).ready(function() {


            $('.copyIcon').on('click', function() {
                var inputClass = $(this).data('input-class');
                var valueToCopy = $(this).prev('.' + inputClass)
                    .val();

                $('.' + inputClass).val(valueToCopy);
                $('#copyMessage').fadeIn().delay(1000).fadeOut();
            });


        });

      
    </script>
@endsection