@extends('template.layouts.template-base')
@section('title', 'Video')

@section('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
    <style>
        .page-content {
            background-color: #F0F4F8 !important;
            padding: 80px 10px;
        }

        .lang-dropdown {
            position: relative;
            width: 160px;

        }

        /* button */
        .lang-btn {
            width: 65%;
            background: #fff;
            margin-left: 40px;
            border: 1px solid #fff;
            box-shadow: 0 2px 20px 0 rgb(0 0 0 / 5%);
            border-radius: 6px;
            padding: 6px 15px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* arrow */
        .lang-btn span {
            font-size: 14px;
        }

        /* dropdown list */
        .lang-menu {
            position: absolute;
            top: 92%;
            left: 40px;
            width: 66%;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, .1);
            list-style: none;
            padding: 8px 0;
            display: none;
        }

        /* open state */
        .lang-dropdown.active .lang-menu {
            display: block;
        }

        .lang-menu li {
            padding: 10px 15px;
            cursor: pointer;
        }

        .lang-menu li:hover {
            background: #f5f5f5;
        }

        .lang-menu li.active {
            color: #2563eb;
            font-weight: 600;
        }
    </style>
@endsection

@section('content')
    <div class="page-header product-main service-list">
        <div class="container-fluid">
            <div class="row align-items-center">
                <div class="col">
                    <div class="page-title">
                        <a href="javascript:void(0);">Video / <span class="breadcrumb-link">List</span></a>
                    </div>
                </div>
                <div class="col-auto cate-top-btns">
                    <div class="action-buttons d-none" id="bulkActions">
                        <button class="btn-delete-category" data-bs-toggle="modal"
                            data-bs-target=".remove-blog-list-screen">
                            Delete List <i class="ri-delete-bin-line fs-5"></i>
                        </button>
                    </div>
                    <a href="{{ route('backend.videos.export') }}" class="btn-export-category">
                        Export
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                            fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M12 16V3"></path>
                            <polyline points="7 8 12 3 17 8"></polyline>
                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                        </svg>
                    </a>
                    <a class="btn-add-category" data-bs-toggle="offcanvas" data-bs-target="#addCategoryOffcanvas">
                        Add Video<i class="ri-add-fill fs-5"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid product-table-sec customer-page">
        <div class="content-wrapper blog-category">
            <div class="filter-section">
                <span class="badge-total-cus">Total Videos - {{ str_pad($totalVideos ?? 10, 2, '0', STR_PAD_LEFT) }}</span>
                <span class="badge-active-cus">Active Videos -
                    {{ str_pad($activeVideos ?? 6, 2, '0', STR_PAD_LEFT) }}</span>
                <span class="badge-inacive-cus">Inactive Videos -
                    {{ str_pad($inactiveVideos ?? 6, 2, '0', STR_PAD_LEFT) }}</span>

                <div class="search-box-category">
                    <input type="text" placeholder="Search" id="searchInput">
                    <i class="bx bx-search"></i>
                </div>
            </div>

            <div class="card-body">
                <div class="table-responsive table-card">
                    <form id="bulkDeleteForm" action="{{ route('backend.videos.bulk-delete') }}" method="POST">
                        @csrf
                        <table class="table align-middle mb-0 orders-table-container">
                            <thead class="custom-table-header">
                                <tr class="text-center">
                                    <th scope="col"><input type="checkbox" id="selectAll"></th>
                                    <th scope="col">Video Name</th>
                                    <th scope="col">Category</th>
                                    <th scope="col">Video URL</th>
                                    <th scope="col">Status</th>
                                    <th scope="col">Default</th>
                                    <th scope="col">Action</th>
                                </tr>
                                <tr id="noDataRow" style="display:none;">
                                    <td colspan="6" class="text-center py-4">No data available</td>
                                </tr>
                            </thead>
                           <tbody id="categoryList">
                                @forelse($videos as $video)
                                    <tr>
                                        <td class="text-center">
                                            <input type="checkbox" name="ids[]" value="{{ $video->id }}" class="category-checkbox" />
                                        </td>

                                        <td>
                                            @if ($video->thumbnail)
                                                <a href="javascript:void(0)" class="show_file_modal" data-url="{{ asset($video->thumbnail) }}"
                                                data-title="{{ $video->name_en }}"
                                                data-size="modal-lg">
                                                    <img src="{{ asset($video->thumbnail) }}" alt="{{ $video->name_en }}"  class="serv-img"  style="cursor:pointer;" />
                                                </a>
                                            @else
                                                <img src="{{ asset('assets/template/images/cate-img.png') }}"  alt="{{ $video->name_en }}"  class="serv-img" />
                                            @endif
                                            {{ $video->name_en }}
                                        </td>
                                        <td class="text-center">{{ $video->category }}</td>

                                        <td class="text-center">
                                            <a href="{{ $video->video_url }}" target="_blank" class="video-url">{{ $video->video_url }}</a>
                                        </td>

                                        <td class="text-center">
                                            <span class="status-badge {{ $video->status == 1 ? 'badge-active-cus' : 'badge-inacive-cus' }}">
                                                {{ $video->status == 1 ? 'Active' : 'Inactive' }}
                                            </span>
                                        </td>
                                       <td class="text-center">
                                                <div class="form-check form-switch d-flex justify-content-center">
                                                    <input class="form-check-input default-toggle" type="checkbox" 
                                                        data-id="{{ $video->id }}"
                                                        {{ $video->is_default == 1 ? 'checked' : '' }}>
                                                </div>
                                            </td>
                                            <td>
                                            <div class="action-btn-sec">
                                               <a href="javascript:void(0)" onclick="openViewVideo({{ $video->id }})" class="action-icon">
                                                    <i class="ri-eye-fill fs-5"></i>
                                                </a>

                                                 <a href="javascript:void(0)" onclick="openEditVideo({{ $video->id }})" class="action-icon">
                                                        <i class="ri-edit-fill fs-5"></i>
                                                    </a>

                                                <a href="javascript:void(0);" onclick="confirmDelete({{ $video->id }})" class="action-icon">
                                                    <i class="bx bxs-trash fs-5"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center">No videos found</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                          <div class="mt-3 d-flex justify-content-end">
                            {{ $videos->links() }}
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Video Offcanvas -->
    <div class="offcanvas offcanvas-end" tabindex="-1" id="addCategoryOffcanvas" style="width: 500px;">
        <button type="button" class="offcanvas-left-close" data-bs-dismiss="offcanvas" aria-label="Close">✕</button>
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">Add Video</h5>
        </div>
        <div class="offcanvas-body">
            <form id="addVideoForm" method="POST" action="{{ route('backend.videos.store') }}"
                enctype="multipart/form-data">
                @csrf
                <div id="formErrors" class="alert alert-danger d-none"></div>

                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="form-label">Video Name English<span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('name_en') is-invalid @enderror" name="name_en"
                            id="name_en" placeholder="Enter video name in English" value="{{ old('name_en') }}"
                            required>
                        @error('name_en')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Video Name Tamil</label>
                        <input type="text" class="form-control @error('name_ta') is-invalid @enderror" name="name_ta"
                            id="name_ta" placeholder="Enter video name in Tamil" value="{{ old('name_ta') }}">
                        @error('name_ta')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-12 my-3">
                        <label class="form-label">Video URL<span class="text-danger">*</span></label>
                        <input type="url" class="form-control @error('video_url') is-invalid @enderror"
                            name="video_url" id="video_url" placeholder="Enter Video URL Here"
                            value="{{ old('video_url') }}" required>
                        @error('video_url')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6 my-3">
                        <label class="form-label">Category<span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('category') is-invalid @enderror"
                            name="category" id="category" placeholder="Enter category" value="{{ old('category') }}"
                            required>
                        @error('category')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6 my-3">
                        <label class="form-label">Status <span class="text-danger">*</span></label>
                        <div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="status" id="addStatusActive"
                                    value="active" {{ old('status', 'active') == 'active' ? 'checked' : '' }}>
                                <label class="form-check-label" for="addStatusActive">Active</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="status" id="addStatusInactive"
                                    value="inactive" {{ old('status') == 'inactive' ? 'checked' : '' }}>
                                <label class="form-check-label" for="addStatusInactive">Inactive</label>
                            </div>
                        </div>
                        @error('status')
                            <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                     <div class="form-check mt-2">
                            <input type="hidden" name="is_default" value="0">
                            <input class="form-check-input" type="checkbox" name="is_default" id="bankIsDefault"
                                value="1" {{ (string) old('is_default', (int) ($bank->is_default ?? 0)) === '1' ? 'checked' : '' }}>
                            <label class="form-check-label" for="bankIsDefault">Set as Default Video</label>
                        </div>
                </div>

              <!-- Thumbnail Upload with Preview -->
                <div class="mb-3">
                    <label class="form-label">Thumbnail Image <span class="text-danger">*</span> <small
                            class="text-muted">(370px*150px)</small></label>
                    <div class="mt-2">
                        <div class="image-upload-box-2 position-relative">
                            <!-- File Input (hidden) -->
                            <input type="file" name="thumbnail" id="categoryImage"
                                accept="image/jpeg,image/png,image/jpg" hidden required>

                            <!-- Label acts as clickable box -->
                            <label for="categoryImage" class="upload-label d-block">
                                <div class="upload-content text-center" id="uploadContent">
                                    <img src="{{ asset('assets/template/images/svg/gallery-add.png') }}" class="add-img mb-2"
                                        alt="Upload" id="placeholderImage">
                                    <div class="upload-text">Choose a file or drag and drop it here</div>
                                    <div class="file-info">JPG, PNG or JPEG (Max 1 MB)</div>
                                </div>
                            </label>
                        </div>

                        <!-- Preview container -->
                        <div id="imagePreview" class="mt-2"></div>
                    </div>
                </div>
                <label id="categoryImage-error" class="text-danger" for="categoryImage"></label>
                <div class="d-flex justify-content-end gap-4 offcan-btn">
                    <button type="button" class="btn cancel-btn" data-bs-dismiss="offcanvas">Cancel</button>
                    <button type="submit" class="btn delete-btn">Save</button>
                </div>
            </form>
        </div>
    </div>
    <!-- Edit Video Offcanvas -->
    <div class="offcanvas offcanvas-end" tabindex="-1" id="editVideoOffcanvas" style="width:500px;">
        <button type="button" class="offcanvas-left-close" data-bs-dismiss="offcanvas">✕</button>

        <div class="offcanvas-header">
            <h5 class="offcanvas-title">Edit Video</h5>
        </div>

        <div class="offcanvas-body">
            <form id="editVideoForm" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <input type="hidden" id="edit_id">

                <div class="row mb-3">
                    <div class="col-md-6">
                    <label>Video Name English <span class="error">*</span></label>
                    <input type="text" class="form-control" id="edit_name_en" name="name_en">
                </div>

                <div class="col-md-6">
                    <label>Video Name Tamil</label>
                    <input type="text" class="form-control" id="edit_name_ta" name="name_ta">
                </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-12">
                    <label>Video URL <span class="error">*</span></label>
                    <input type="url" class="form-control" id="edit_video_url" name="video_url">
                </div>
                </div>

               <div class="row mb-3">
                <div class="col-md-6">
                    <label>Category <span class="error">*</span></label>
                    <input type="text" class="form-control" id="edit_category" name="category">
                </div>

                <div class="col-md-6">
                    <label>Status <span class="error">*</span></label><br>
                    <input type="radio" name="status" value="active" id="edit_active"> Active
                    <input type="radio" name="status" value="inactive" id="edit_inactive"> Inactive
                </div>
                <div class="form-check mt-2">
                    <input type="hidden" name="is_default" value="0">
                    <input class="form-check-input" type="checkbox" name="is_default" 
                        id="editIsDefault" value="1">
                    <label class="form-check-label" for="editIsDefault">Set as Default Video</label>
                </div>
               </div>
              <!-- Thumbnail Upload (EDIT) -->
                <div class="mb-3">
                    <label class="form-label">Thumbnail Image <small>(370px*150px)</small><span class="error">*</span></label>

                    <div class="image-upload-box-2 position-relative">
                        <!-- Hidden File -->
                        <input type="file" name="thumbnail" id="edit_categoryImage"
                            accept="image/jpeg,image/png,image/jpg" hidden>

                        <!-- Upload box -->
                        <label for="edit_categoryImage" class="upload-label d-block">
                            <div class="upload-content text-center" id="edit_uploadContent">
                                <img src="{{ asset('assets/template/images/svg/gallery-add.png') }}"
                                    class="add-img mb-2">
                                <div class="upload-text">Choose a file or drag and drop it here</div>
                                <div class="file-info">JPG, PNG or JPEG (Max 1 MB)</div>
                            </div>
                        </label>
                    </div>

                    <!-- OLD IMAGE -->
                    <div id="oldImageBox" class="mt-2">
                        <img id="edit_old_preview" style="width:100%;max-height:250px;object-fit:cover" class="img-thumbnail">
                    </div>

                    <!-- NEW IMAGE PREVIEW -->
                    <div id="edit_imagePreview" class="mt-2"></div>
                </div>

                <!-- Buttons -->
                <div class="d-flex justify-content-end gap-3 mt-4">
                    <button type="button" class="btn cancel-btn" data-bs-dismiss="offcanvas">Cancel</button>
                    <button type="submit" class="btn delete-btn">Update</button>
                </div>

            </form>
        </div>
    </div>
    <!-- View Video Offcanvas -->
    <div class="offcanvas offcanvas-end" tabindex="-1" id="viewVideoOffcanvas" style="width:500px;">
        <button type="button" class="offcanvas-left-close" data-bs-dismiss="offcanvas">✕</button>

        <div class="offcanvas-header">
            <h5 class="offcanvas-title">View Video</h5>
        </div>

        <div class="offcanvas-body">

            <!-- Video Names -->
            <div class="row mb-3">
                <div class="col-md-6">
                    <label>Video Name English</label>
                    <input type="text" class="form-control bg-light" id="view_name_en" readonly>
                </div>

                <div class="col-md-6">
                    <label>Video Name Tamil</label>
                    <input type="text" class="form-control bg-light" id="view_name_ta" readonly>
                </div>
            </div>

            <!-- Video URL -->
            <div class="row mb-3">
                <div class="col-md-12">
                    <label>Video URL</label>
                    <iframe width="560" height="315"  id='view_video_url'
                        src="" 
                        title="YouTube video" 
                        frameborder="0" 
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                        allowfullscreen>
                    </iframe>
                </div>
            </div>

            <!-- Category + Status -->
            <div class="row mb-3">
                <div class="col-md-6">
                    <label>Category</label>
                    <input type="text" class="form-control bg-light" id="view_category" readonly>
                </div>

                <div class="col-md-6">
                    <label>Status</label>
                    <input type="text" class="form-control bg-light" id="view_status" readonly>
                </div>
            </div>

            <!-- Thumbnail Preview -->
            <div class="mb-3">
                <label class="form-label">Thumbnail Image</label>
                <div class="mt-2">
                    <img id="view_thumbnail" 
                        style="width:100%;max-height:250px;object-fit:cover" 
                        class="img-thumbnail">
                </div>
            </div>
        </div>
    </div>
    <!-- Delete Single Video Modal -->
    <div class="modal fade remove-blog-cate-screen forgot-popup-screen" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content rounded-4">
                <div class="modal-header">
                    <div class="modal-icon-box">
                        <i class="bx bxs-trash"></i>
                    </div>
                    <h5>Delete Video?</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body inquiry-preview-modal p-4">
                    <div class="row form-row edit-category">
                        <div class="col-lg-12 col-md-12">
                            <p>Are you sure you want to delete this video? This video will be permanently removed from the
                                video list. This action cannot be undone.</p>
                        </div>
                    </div>
                    <div class="hstack gap-2 w-100 mt-4 justify-content-end">
                        <button type="button" data-bs-dismiss="modal" class="btn cancel-btn">Cancel</button>
                        <form id="deleteForm" method="POST" style="display:inline;">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn delete-btn">Delete</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Delete Multiple Videos Modal -->
    <div class="modal fade remove-blog-list-screen forgot-popup-screen" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content rounded-4">
                <div class="modal-header">
                    <div class="modal-icon-box">
                        <i class="bx bxs-trash"></i>
                    </div>
                    <h5>Delete Videos List?</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body inquiry-preview-modal p-4">
                    <div class="row form-row edit-category">
                        <div class="col-lg-12 col-md-12">
                            <p>Are you sure you want to delete videos? These videos will be permanently removed from the
                                videos list. This action cannot be undone.</p>
                        </div>
                    </div>
                    <div class="hstack gap-2 w-100 mt-4 justify-content-end">
                        <button type="button" data-bs-dismiss="modal" class="btn cancel-btn">Cancel</button>
                        <button type="button" class="btn delete-btn" onclick="submitBulkDelete()">Delete</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Toast Notifications -->
    <div class="position-fixed top-0 start-50 translate-middle-x p-4" style="z-index: 1090">
        <div id="deleteVideoListToast" class="toast login-success-toast" role="alert" aria-live="assertive"
            aria-atomic="true">
            <div class="toast-body d-flex align-items-center gap-3">
                <div class="toast-left">
                    <div class="check-circle">✓</div>
                </div>
                <div class="toast-right">
                    <h6>Deleted Successful</h6>
                    <p>These videos has been deleted successfully.</p>
                </div>
            </div>
        </div>

        <div id="addVideoActiveToast" class="toast login-success-toast" role="alert" aria-live="assertive"
            aria-atomic="true">
            <div class="toast-body d-flex align-items-center gap-3">
                <div class="toast-left">
                    <div class="check-circle">✓</div>
                </div>
                <div class="toast-right">
                    <h6>Video Added Successful</h6>
                    <p>The video has been added successfully and is now available in the category list.</p>
                </div>
            </div>
        </div>

        <div id="addVideoInActiveToast" class="toast login-success-toast" role="alert" aria-live="assertive"
            aria-atomic="true">
            <div class="toast-body d-flex align-items-center gap-3">
                <div class="toast-left">
                    <div class="check-circle">✓</div>
                </div>
                <div class="toast-right">
                    <h6>Video Added Successful</h6>
                    <p>The video has been added successfully and is currently inactive. You can activate it anytime from the
                        category list.</p>
                </div>
            </div>
        </div>

        <div id="deleteVideoToast" class="toast login-success-toast" role="alert" aria-live="assertive"
            aria-atomic="true">
            <div class="toast-body d-flex align-items-center gap-3">
                <div class="toast-left">
                    <div class="check-circle">✓</div>
                </div>
                <div class="toast-right">
                    <h6>Delete Successful</h6>
                    <p>The video has been deleted successfully.</p>
                </div>
            </div>
        </div>
        <div id="multideleteVideoToast" class="toast login-success-toast" role="alert" aria-live="assertive"
            aria-atomic="true">
            <div class="toast-body d-flex align-items-center gap-3">
                <div class="toast-left">
                    <div class="check-circle">✓</div>
                </div>
                <div class="toast-right">
                    <h6>Delete Successful</h6>
                    <p>The Multi video has been deleted successfully.</p>
                </div>
            </div>
        </div>
         <div id="updateVideoActiveToast" class="toast login-success-toast" role="alert" aria-live="assertive"
            aria-atomic="true">
            <div class="toast-body d-flex align-items-center gap-3">
                <div class="toast-left">
                    <div class="check-circle">✓</div>
                </div>
                <div class="toast-right">
                    <h6>Video Updated Successful</h6>
                    <p>The video has been updated successfully and is now available in the category list.</p>
                </div>
            </div>
        </div>

        <div id="updateVideoInActiveToast" class="toast login-success-toast" role="alert" aria-live="assertive"
            aria-atomic="true">
            <div class="toast-body d-flex align-items-center gap-3">
                <div class="toast-left">
                    <div class="check-circle">✓</div>
                </div>
                <div class="toast-right">
                    <h6>Video Updated Successful</h6>
                    <p>The video has been updated successfully and is currently inactive. You can activate it anytime from the
                        category list.</p>
                </div>
            </div>
        </div>
        
    </div>
@endsection

 @section('scripts')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>

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

    /* Select All + Bulk Actions */
    function toggleBulkActions() {
        const anyChecked = $('.category-checkbox:checked').length > 0;
        $('#bulkActions').toggleClass('d-none', !anyChecked);
    }

    $('#selectAll').on('change', function() {
        $('.category-checkbox').prop('checked', this.checked);
        toggleBulkActions();
    });

    $('.category-checkbox').on('change', function() {
        $('#selectAll').prop('checked', $('.category-checkbox').length === $('.category-checkbox:checked').length);
        toggleBulkActions();
    });

    /* Table Search */
    $('#searchInput').on('keyup', function() {
        let query = $(this).val();
        fetchVideos(query);
    });


    // AJAX fetch function
    function fetchVideos(query = '', url = null) {
        url = url || "{{ route('backend.videos.index') }}";
        $.ajax({
            url: url,
            type: 'GET',
            data: { search: query },
            success: function(response) {
                $('#categoryList').html(response.html);
            }
        });
    }


    /* Thumbnail Preview */
    const fileInput = document.getElementById('categoryImage');
    const preview = document.getElementById('imagePreview');
    const uploadContent = document.getElementById('uploadContent');

    fileInput.addEventListener('change', function() {
        preview.innerHTML = '';
        const file = this.files[0];

        if (file) {
            // Validate file size (max 1 MB)
            if (file.size > 1048576) {
                alert("File size must be less than 1 MB");
                fileInput.value = '';
                uploadContent.style.display = 'block';
                return;
            }

            // Validate file type
            const allowedTypes = ['image/jpeg','image/png','image/jpg'];
            if (!allowedTypes.includes(file.type)) {
                alert("Only JPG, PNG or JPEG files are allowed");
                fileInput.value = '';
                uploadContent.style.display = 'block';
                return;
            }

            uploadContent.style.display = 'none';

            const reader = new FileReader();
            reader.onload = function(event) {
                const img = document.createElement('img');
                img.src = event.target.result;
                img.style.width = '100%';
                img.style.maxHeight = '250px';
                img.style.objectFit = 'cover';
                img.classList.add('img-thumbnail');
                preview.appendChild(img);

                img.addEventListener('click', function() {
                    fileInput.click();
                });
            }
            reader.readAsDataURL(file);
        } else {
            uploadContent.style.display = 'block';
        }
    });
    // OPEN EDIT OFFCANVAS + FILL DATA
    window.openEditVideo = function(id) {

            $.get("{{ route('backend.videos.edit', ':id') }}".replace(':id', id), function(video){

                $('#edit_id').val(video.id);
                $('#edit_name_en').val(video.name_en);
                $('#edit_name_ta').val(video.name_ta);
                $('#edit_video_url').val(video.video_url);
                $('#edit_category').val(video.category);
                $('#editIsDefault').prop('checked', video.is_default == 1);
                if(video.status == 1){
                    $('#edit_active').prop('checked', true);
                }else{
                    $('#edit_inactive').prop('checked', true);
                }

                // preview old image
                $('#oldImageBox').show();
                $('#edit_old_preview').attr('src', '/' + video.thumbnail);

                // reset new preview
                $('#edit_imagePreview').html('');
                $('#edit_uploadContent').show();
                $('#edit_categoryImage').val('');


                // set form action dynamically
                $('#editVideoForm').attr(
                    'action',
                    "{{ route('backend.videos.update', ':id') }}".replace(':id', video.id)
                );

                new bootstrap.Offcanvas('#editVideoOffcanvas').show();
            });
    }
    /* Video Form Validation */
    $('#addVideoForm').validate({
        ignore: [],
        rules: {
            name_en: { required: true, minlength: 2 },
            video_url: { required: true, url: true },
            category: { required: true, minlength: 2 },
            status: { required: true },
            thumbnail: { required: true, extension: "jpg|jpeg|png", filesize: 1048576 }
        },
        messages: {
        },
        errorClass: 'text-danger',
        submitHandler: function(form) {
            form.submit();
        }
    });
    $('#editVideoForm').validate({
        ignore: [],
        rules: {
            name_en: { required: true, minlength: 2 },
            video_url: { required: true, url: true },
            category: { required: true, minlength: 2 },
            status: { required: true },
        },
        messages: {
        },
        errorClass: 'text-danger',
        submitHandler: function(form) {
            form.submit();
        }
    });

    /* Custom validator for file size */
    $.validator.addMethod('filesize', function(value, element, param) {
        if (element.files.length === 0) return true;
        return element.files[0].size <= param;
    }, 'File size must be less than {0} bytes');

    /* Delete Modal */
    window.confirmDelete = function(id) {
        const form = $('#deleteForm');
        form.attr('action', "{{ route('backend.videos.delete', ':id') }}".replace(':id', id));
        new bootstrap.Modal($('.remove-blog-cate-screen')[0]).show();
    }

    /* Bulk Delete */
    window.submitBulkDelete = function() {
        $('#bulkDeleteForm').submit();
    }

    /* Toast Notifications */
    @php $videoAdded = session()->pull('video_added'); @endphp
    @if($videoAdded)
            if("{{ $videoAdded }}" === 'active'){
                new bootstrap.Toast($('#addVideoActiveToast')[0]).show();
            } else {
                new bootstrap.Toast($('#addVideoInActiveToast')[0]).show();
            }
    @endif

    @php $videoUpdate = session()->pull('video_update'); @endphp
    @if($videoUpdate)
            if("{{ $videoUpdate }}" === 'active'){
                new bootstrap.Toast($('#updateVideoActiveToast')[0]).show();
            } else {
                new bootstrap.Toast($('#updateVideoInActiveToast')[0]).show();
            }
    @endif

    @if(session('video_deleted'))
        new bootstrap.Toast($('#deleteVideoToast')[0]).show();
    @endif
    @if(session('video_bulkdeleted'))
        new bootstrap.Toast($('#multideleteVideoToast')[0]).show();
    @endif

     /*EDIT IMAGE PREVIEW (ADD ONLY)*/
    const editFileInput = document.getElementById('edit_categoryImage');
    const editPreview = document.getElementById('edit_imagePreview');
    const editUploadContent = document.getElementById('edit_uploadContent');

    if (editFileInput) {
        editFileInput.addEventListener('change', function () {

            editPreview.innerHTML = '';
            const file = this.files[0];

            if (file) {

                // size validation (1MB)
                if (file.size > 1048576) {
                    alert("File size must be less than 1 MB");
                    editFileInput.value = '';
                    return;
                }

                // type validation
                const allowedTypes = ['image/jpeg','image/png','image/jpg'];
                if (!allowedTypes.includes(file.type)) {
                    alert("Only JPG, PNG or JPEG files allowed");
                    editFileInput.value = '';
                    return;
                }

                // hide OLD image when new selected
                $('#oldImageBox').hide();
                editUploadContent.style.display = 'none';

                const reader = new FileReader();
                reader.onload = function (e) {

                    const img = document.createElement('img');
                    img.src = e.target.result;
                    img.style.width = '100%';
                    img.style.maxHeight = '250px';
                    img.style.objectFit = 'cover';
                    img.classList.add('img-thumbnail');

                    editPreview.appendChild(img);

                    // click preview to re-upload again
                    img.addEventListener('click', function () {
                        editFileInput.click();
                    });
                };

                reader.readAsDataURL(file);
            }
        });
    }
    /* OPEN VIEW OFFCANVAS */
    window.openViewVideo = function(id) {

        $.get("{{ route('backend.videos.edit', ':id') }}".replace(':id', id), function(video){

            $('#view_name_en').val(video.name_en);
            $('#view_name_ta').val(video.name_ta);
            $('#view_video_url').attr('src','https://www.youtube.com/embed/'+video.video_url);
            $('#view_category').val(video.category);
            $('#view_status').val(video.status == 1 ? 'Active' : 'Inactive');
            $('#view_thumbnail').attr('src', '/' + video.thumbnail);

            $('#viewEditBtn').data('id', video.id);

            new bootstrap.Offcanvas('#viewVideoOffcanvas').show();
        });
    }
    $(document).on('change', '.default-toggle', function () {
    const id        = $(this).data('id');
    const isDefault = $(this).is(':checked') ? 1 : 0;
    const toggle    = $(this);

    $.ajax({
        url: "{{ route('backend.videos.toggle-default') }}",
        type: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            id: id,
            is_default: isDefault
        },
        beforeSend: function () {
            $('#loading-image').removeClass('d-none').attr('aria-hidden', 'false');
        },
        success: function (res) {
            if (!res.success) {
                toggle.prop('checked', !toggle.is(':checked'));
            }
        },
        error: function () {
            toggle.prop('checked', !toggle.is(':checked'));
        },
        complete: function () {
            $('#loading-image').addClass('d-none').attr('aria-hidden', 'true');
        }
    });
});
});

</script>
@endsection