@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">{{ 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>

                                    @foreach ($folders as $key => $folder)
                                        <tr>
                                            <td style="width: 30%;"><b>{{ $folder->name }}</b> <br />Folder <br/> 
                                        <img class="p-4" style="width: 20%;" src="/folder.png" alt="Folder" />
                                            
                                            </td>

                                            <td style="width: 30%;">
                                                <input type="hidden" name="items[{{ $key }}][type]"
                                                    value="folder">
                                                <input type="hidden" name="items[{{ $key }}][id]"
                                                    value="{{ $folder->id }}">
                                                <label for="folderName" class="col-md-4 col-form-label text-md-right">Folder
                                                    Name</label>
                                                <input type="text" class="form-control" id="folderName"
                                                    value="{{ $folder->name }}"
                                                    name="items[{{ $key }}][folderName]" required
                                                    @if($folder->user_id != $auth_user_id && !$isAdmin) disabled @endif>

                                                <label for="folderDescription"
                                                    class="col-md-4 col-form-label text-md-right">Folder
                                                    Description</label>

                                                <input type="text" class="form-control" id="folderDescription"
                                                    value="{{ $folder->description }}"
                                                    name="items[{{ $key }}][folderDescription]" required
                                                    @if($folder->user_id != $auth_user_id && !$isAdmin) disabled @endif>

                                                {{-- <label for="folderTags" class="col-md-4 col-form-label text-md-right"
                                                style="display:block;">Folder
                                                Tags</label>
                                            <select class="form-control select2-tags" id="folderTags" name="folderTags[]"
                                                multiple="multiple" style="width:100%;">
                                                @foreach ($folder->tags as $tag)
                                                    <option value="{{ $tag->id }}" selected>{{ $tag->name }}
                                                    </option>
                                                @endforeach
                                            </select> --}}
                                                <label for="folderTags[{{ $key }}]"
                                                    class="col-md-4 col-form-label text-md-right"
                                                    style="display:block;">Folder
                                                    Tags</label>
                                                <select class="form-control select2-tags"
                                                    name="items[{{ $key }}][folderTags][]"
                                                    id="folderTags[{{ $key }}]" multiple style="width:100%;"
                                                    @if($folder->user_id != $auth_user_id  && !$isAdmin) disabled @endif>
                                                    @foreach ($folder->tags as $tag)
                                                        <option value="{{ $tag->id }}" selected>{{ $tag->name }}
                                                        </option>
                                                    @endforeach
                                                </select>

                                                <label for="folderDateTime" style="display:block;"
                                                    class="col-md-4 col-form-label text-md-right">Date /
                                                    Time
                                                </label>
                                                <input type="datetime-local" step="any" class="form-control"
                                                    id="folderDateTime" value="{{ $folder->capture_datetime }}"
                                                    name="items[{{ $key }}][folderDateTime]" required
                                                    @if($folder->user_id != $auth_user_id  && !$isAdmin) disabled @endif>

                                            </td>
                                        </tr>
                                    @endforeach
                                    @if ($videos)
                                        @foreach ($videos as $key => $video)
                                            <tr>
                                                <td><b>{{ $video->title }}</b></br>
                                                    @if ($video->file_type == 1)
                                                    Video
                                                    @php
                                                        $baseFilename = str_replace('.mp4', '', $video->url);
                                                        $thumbnailUrls = [];
            
                                                        for ($i = 0; $i < $video->no_of_thumbnails; $i++) {
                                                            $thumbnailUrls[] = Storage::disk('s3_thumbnails')->url("{$baseFilename}" . ($video->no_of_thumbnails > 1 ? "-{$i}" : '') . '.jpg');
                                                        }
                                                    @endphp
                                                    <div class="video-item">
                                                        <div class="form-check">
                                                            <input type="checkbox" class="item-checkbox form-check-input"
                                                                style="display: none;" data-file-id="{{ $video->id }}" />
                                                        </div>
                                                        <a href="javascript:void(0);" class="video-popup"
                                                            data-id="{{ $video->id }}">
                                                            <div class="thumbnail-container" data-id="{{ $video->id }}"
                                                                data-thumbnails="{{ json_encode($thumbnailUrls) }}">
                                                                <img src="{{ Storage::disk('s3_thumbnails')->url($baseFilename . ($video->no_of_thumbnails > 1 ? '-0.jpg' : '.jpg')) }}"
                                                                    onerror="this.onerror=null; this.src='../assets/img/video-thumbnail-placeholder.png';"
                                                                    alt="Video Thumbnail" />
                                                         
                                                            </div>
                                                     
                                                        </a>
                                                    </div>
                                                @endif
                                                @if ($video->file_type == 2)
                                                Document
                                        @php
                                            $thumbnailPath = $video->url;
                                            $thumbnailUrl = Storage::disk('s3_thumbnails')->url($thumbnailPath);
                                            $imageUrl = $video->signedUrl;

                                            $thumbnailPathJpg = pathinfo($thumbnailPath, PATHINFO_DIRNAME) . '/' . pathinfo($thumbnailPath, PATHINFO_FILENAME) . '.jpg';

                                            $thumbnailUrlJpg = Storage::disk('s3_thumbnails')->url($thumbnailPathJpg);
                                        @endphp

                                        <div class="video-item">
                                            <div class="form-check">
                                                <input type="checkbox" class="item-checkbox form-check-input"
                                                    style="display: none;" data-file-id="{{ $video->id }}" />
                                            </div>
                                            <div class="thumbnail-container">
                                                <a href="" target="_blank">
                                                    <img style="max-width: 25%; max-height: 25%;" src="{{ asset('assets/img/document-thumbnail.png') }}" alt="Document Thumbnail"
                                                        onerror="this.onerror=null; this.src='{{ asset('assets/img/document-thumbnail.png') }}" />
                                                  
                                                </a>
                                            </div>
                                            
                                        </div>
                                    @endif
                                    @if ($video->file_type == 3)
                                        @php
                                            $thumbnailPath = $video->url;
                                            $thumbnailUrl = Storage::disk('s3_thumbnails')->url($thumbnailPath);
                                            $imageUrl = $video->signedUrl;
                                        @endphp
                                        <div class="video-item">
                                            <div class="form-check">
                                                <input type="checkbox" class="item-checkbox form-check-input"
                                                    style="display: none;" data-file-id="{{ $video->id }}" />
                                            </div>
                                            <a href="{{ $imageUrl }}" data-lightbox="video-gallery"
                                                data-title="{{ $video->title }}">

                                                <img src="{{ $thumbnailUrl }}"
                                                    onerror="this.onerror=null; this.src='../assets/img/video-thumbnail-placeholder.png';"
                                                    alt="Video Thumbnail" />
                                                <span>{{ $video->title }}</span>
                                            </a>
                                        </div>
                                    @endif

                                                
                                            </td>

                                                <td>
                                                    <input type="hidden" name="items[{{ $key + count($folders) }}][type]"
                                                        value="video">
                                                    <input type="hidden" name="items[{{ $key + count($folders) }}][id]"
                                                        value="{{ $video->id }}">
                                                    <div id="copyMessage" style="display: none;"
                                                        class="alert alert-success">Copied</div>
                                                    <label for="videoName"
                                                        class="col-md-4 col-form-label text-md-right">
                                                        Name</label>
                                                    <div style="position: relative;">

                                                        <input type="text" class="form-control videoName" id="videoName"
                                                            value="{{ $video->title }}"
                                                            name="items[{{ $key + count($folders) }}][videoName]" required
                                                            @if($video->user_id != $auth_user_id  && !$isAdmin) disabled @endif>
                                                            @if($video->user_id == $auth_user_id || $isAdmin)
                                                        <i class="fas fa-clipboard copyIcon" data-input-class="videoName"
                                                            style="position: absolute; right: 5px; top: 50%; transform: translateY(-50%); cursor:pointer;">
                                                            Copy</i>
                                                            @endif
                                                    </div>


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

                                                        <input type="text" class="form-control videoDescription"
                                                            id="videoDescription" value="{{ $video->description }}"
                                                            name="items[{{ $key + count($folders) }}][videoDescription]"
                                                            required @if($video->user_id != $auth_user_id  && !$isAdmin) disabled @endif>
                                                            @if($video->user_id == $auth_user_id || $isAdmin)
                                                        <i class="fas fa-clipboard copyIcon"
                                                            data-input-class="videoDescription"
                                                            style="position: absolute; right: 5px; top: 50%; transform: translateY(-50%); cursor:pointer;">
                                                            Copy</i>
                                                            @endif
                                                    </div>

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

                                                        <select class="form-control select2-tags"
                                                            id="videoTags[{{ $key }}]"
                                                            name="items[{{ $key + count($folders) }}][videoTags][]"
                                                            multiple="multiple" style="width:100%;"
                                                            data-select2-id="select2-{{ $key }}" @if($video->user_id != $auth_user_id  && !$isAdmin) disabled @endif>
                                                            @foreach ($video->tags as $tag)
                                                                <option value="{{ $tag->id }}" selected>
                                                                    {{ $tag->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        @if($video->user_id == $auth_user_id  || $isAdmin)
                                                        <i class="fas fa-clipboard copyIconVideoTags"
                                                            data-input-class="select2-tags" data-bs-toggle="modal"
                                                            data-video-id="{{ $video->id }}"
                                                            data-bs-target="#copyModal"
                                                            data-select2-id="select2-{{ $key }}"
                                                            style="position: absolute; right: 5px; top: 50%; transform: translateY(-50%); cursor:pointer;">
                                                            Copy</i>
                                                            @endif
                                                    </div>

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

                                                        <input type="datetime-local" class="form-control videoDateTime"
                                                            id="videoDateTime" value="{{ $video->capture_datetime }}"
                                                            name="items[{{ $key + count($folders) }}][videoDateTime]"
                                                            required @if($video->user_id != $auth_user_id  && !$isAdmin) disabled @endif>
                                                            @if($video->user_id == $auth_user_id  || $isAdmin)
                                                        <i class="fas fa-clipboard copyIcon"
                                                            data-input-class="videoDateTime"
                                                            style="position: absolute; right: 5%; top: 50%; transform: translateY(-50%); cursor:pointer;">
                                                            Copy</i>
                                                            @endif
                                                    </div>

                                                </td>
                                            </tr>
                                        @endforeach
                                    @endif
                                </tbody>
                            </table>
                        </div>
                        <div class="d-flex justify-content-center">
                            <button type="submit" class="btn btn-primary">Update All</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 files in subfolders ?
                            </label>
                        </div>
                        <input type="hidden" name="folder_id" value="{{ $currentFolderMain->id }}">
                        <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
                    }
                }
            });

            var selectedOptions = null;
            var selectedVideoId = null;

            $('.copyIconVideoTags').click(function() {
                var select2Id = $(this).data('select2-id');
                var videoId = $(this).data('video-id');

                var $select2Input = $('[data-select2-id="' + select2Id + '"]');

                var selectedOptions = $select2Input.val();
                console.log("Video ID:", videoId);
                console.log(selectedOptions);
                /* 
                                $('#confirmCopy').data('video-id', videoId);
                                $('#confirmCopy').data('selected-options', selectedOptions); */

                $('#modalVideoId').val(videoId);
                $('#modalSelectedOptions').val(selectedOptions ? selectedOptions.join(',') : '');

                //$('#copyModal').modal('show');

            });

            $('#confirmCopy').click(function() {
                console.log('Yes button clicked!');
                var videoId = $(this).data('video-id');
                var selectedOptions = $(this).data('selected-options');

                // Assign values to form inputs

            });

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

                $('.' + inputClass).each(function() {
                    if (!$(this).is(':disabled')) {
                        $(this).val(valueToCopy);
                    }
                });
                $('#copyMessage').fadeIn().delay(2000).fadeOut();
            });
        });
    </script>
@endsection