@extends('layouts.app')

@section('title', __('stage_academy.courses.items.videos.title'))

@push('styles')
<link href="{{ asset('css/stage-academy.css') }}" rel="stylesheet">
@endpush

@section('content')
@php
    $courseName = app()->getLocale() === 'ar' ? $course->name_ar : $course->name_en;
    $oldVideo = [
        'id' => old('id'),
        'name_ar' => old('name_ar'),
        'name_en' => old('name_en'),
        'short_description_ar' => old('short_description_ar'),
        'short_description_en' => old('short_description_en'),
        'vimeo_url' => old('vimeo_url'),
    ];
@endphp

<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="h4 fw-bold text-dark mb-0">{{ __('stage_academy.courses.items.videos.title') }}</h2>
            <div class="text-muted small mt-1">{{ $courseName }}</div>
        </div>
        <div class="d-flex align-items-center gap-2 flex-shrink-0">
            <button type="button" class="btn btn-primary bg-gradient border-0" onclick="openAddVideoModal()">
                <i class="bi bi-plus-lg"></i>
                {{ __('stage_academy.courses.items.videos.add_button') }}
            </button>
            <a href="{{ route('stage-academy.courses.items') }}" class="btn btn-outline-secondary">
                <i class="bi {{ app()->getLocale() == 'ar' ? 'bi-arrow-right' : 'bi-arrow-left' }}"></i> {{ __('common.back') }}
            </a>
        </div>
    </div>

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show shadow-sm border-0" role="alert">
            <ul class="mb-0 ps-3">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="sa-smart-list">
        @forelse($videos as $video)
            @php
                $localizedName = app()->getLocale() === 'ar' ? $video->name_ar : $video->name_en;
                $localizedShortDescription = app()->getLocale() === 'ar' ? $video->short_description_ar : $video->short_description_en;
            @endphp

            <div class="sa-smart-row">
                <div class="d-flex align-items-start gap-3 flex-grow-1">
                    <div class="sa-thumb">
                        <i class="bi bi-play-btn text-primary"></i>
                    </div>

                    <div class="flex-grow-1">
                        <div class="fw-bold text-dark">{{ $localizedName }}</div>
                        @if($localizedShortDescription)
                            <div class="text-muted small mt-1">{{ $localizedShortDescription }}</div>
                        @endif

                        <div class="small text-muted mt-2">
                            <a href="{{ $video->vimeo_url }}" target="_blank" rel="noopener" class="text-decoration-none" title="{{ __('stage_academy.courses.items.videos.vimeo_link') }}">
                                <i class="bi bi-link-45deg"></i>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="d-flex align-items-center gap-2 flex-shrink-0">
                    <button
                        type="button"
                        class="btn btn-light btn-sm sa-action-btn text-primary"
                        data-id="{{ $video->id }}"
                        data-name-ar="{{ $video->name_ar }}"
                        data-name-en="{{ $video->name_en }}"
                        data-short-description-ar="{{ $video->short_description_ar }}"
                        data-short-description-en="{{ $video->short_description_en }}"
                        data-vimeo-url="{{ $video->vimeo_url }}"
                        onclick="openEditVideoModal(this)"
                        title="{{ __('common.edit') }}"
                    >
                        <i class="bi bi-pencil"></i>
                    </button>
                    <button
                        type="button"
                        class="btn btn-light btn-sm sa-action-btn text-danger"
                        data-video-id="{{ $video->id }}"
                        onclick="openDeleteModal(this)"
                        title="{{ __('common.delete') }}"
                    >
                        <i class="bi bi-trash"></i>
                    </button>
                </div>
            </div>
        @empty
            <div class="text-center py-5 text-muted">
                <i class="bi bi-inbox fs-1 d-block mb-3 opacity-50"></i>
                <p class="mb-0">{{ __('stage_academy.courses.items.videos.empty') }}</p>
            </div>
        @endforelse
    </div>
</div>

<div
    id="courseVideosConfig"
    data-course-id="{{ $course->id }}"
    data-store-route="{{ route('stage-academy.courses.items.videos.store', $course->id) }}"
    data-update-route-template="{{ route('stage-academy.courses.items.videos.update', [$course->id, 0]) }}"
    data-destroy-route-template="{{ route('stage-academy.courses.items.videos.destroy', [$course->id, 0]) }}"
    data-add-title="{{ __('stage_academy.courses.items.videos.add_button') }}"
    data-edit-title="{{ __('common.edit') }}"
    data-has-errors="{{ $errors->any() ? '1' : '0' }}"
    data-old='@json($oldVideo)'
></div>

<div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <form id="videoForm" method="POST">
                @csrf
                <input type="hidden" name="_method" id="videoMethodField" value="POST">
                <input type="hidden" name="id" id="videoId" value="{{ old('id') }}">

                <div class="modal-header">
                    <h5 class="modal-title" id="videoModalLabel">{{ __('stage_academy.courses.items.videos.add_button') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-12 col-md-6">
                            <label for="name_ar" class="form-label">{{ __('stage_academy.courses.items.videos.form.name_ar') }}</label>
                            <input type="text" class="form-control" id="name_ar" name="name_ar" required maxlength="255" value="{{ old('name_ar') }}">
                        </div>
                        <div class="col-12 col-md-6">
                            <label for="name_en" class="form-label">{{ __('stage_academy.courses.items.videos.form.name_en') }}</label>
                            <input type="text" class="form-control" id="name_en" name="name_en" required maxlength="255" value="{{ old('name_en') }}">
                        </div>

                        <div class="col-12 col-md-6">
                            <label for="short_description_ar" class="form-label">{{ __('stage_academy.courses.items.videos.form.short_description_ar') }}</label>
                            <textarea class="form-control" id="short_description_ar" name="short_description_ar" rows="2">{{ old('short_description_ar') }}</textarea>
                        </div>
                        <div class="col-12 col-md-6">
                            <label for="short_description_en" class="form-label">{{ __('stage_academy.courses.items.videos.form.short_description_en') }}</label>
                            <textarea class="form-control" id="short_description_en" name="short_description_en" rows="2">{{ old('short_description_en') }}</textarea>
                        </div>

                        <div class="col-12">
                            <label for="vimeo_url" class="form-label">{{ __('stage_academy.courses.items.videos.form.vimeo_url') }}</label>
                            <input type="url" class="form-control" id="vimeo_url" name="vimeo_url" required value="{{ old('vimeo_url') }}">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('common.cancel') }}</button>
                    <button type="submit" class="btn btn-primary bg-gradient border-0">{{ __('common.save') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form id="deleteForm" method="POST">
                @csrf
                @method('DELETE')

                <div class="modal-header border-bottom-0 pb-0">
                    <h5 class="modal-title text-danger" id="deleteModalLabel">{{ __('common.confirm_delete_title') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body py-4">
                    <p class="mb-0 fs-5 text-center">{{ __('common.confirm_delete_message') }}</p>
                </div>
                <div class="modal-footer border-top-0 pt-0 justify-content-center">
                    <button type="button" class="btn btn-light px-4" data-bs-dismiss="modal">{{ __('common.cancel') }}</button>
                    <button type="submit" class="btn btn-danger px-4">{{ __('common.confirm_delete_action') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    const config = document.getElementById('courseVideosConfig');
    const storeRoute = config.dataset.storeRoute;
    const updateRouteTemplate = config.dataset.updateRouteTemplate;
    const destroyRouteTemplate = config.dataset.destroyRouteTemplate;
    const addTitle = config.dataset.addTitle;
    const editTitle = config.dataset.editTitle;

    function openAddVideoModal(clear = true) {
        const form = document.getElementById('videoForm');
        form.action = storeRoute;
        document.getElementById('videoMethodField').value = "POST";
        document.getElementById('videoModalLabel').innerText = addTitle;

        if (clear) {
            document.getElementById('videoId').value = "";
            document.getElementById('name_ar').value = "";
            document.getElementById('name_en').value = "";
            document.getElementById('short_description_ar').value = "";
            document.getElementById('short_description_en').value = "";
            document.getElementById('vimeo_url').value = "";
        }

        const modal = new bootstrap.Modal(document.getElementById('videoModal'));
        modal.show();
    }

    function openEditVideoModal(button) {
        const id = button.dataset.id;
        const form = document.getElementById('videoForm');
        form.action = updateRouteTemplate.replace('/0', '/' + id);

        document.getElementById('videoMethodField').value = "PUT";
        document.getElementById('videoId').value = id;
        document.getElementById('videoModalLabel').innerText = editTitle;
        document.getElementById('name_ar').value = button.dataset.nameAr ?? "";
        document.getElementById('name_en').value = button.dataset.nameEn ?? "";
        document.getElementById('short_description_ar').value = button.dataset.shortDescriptionAr ?? "";
        document.getElementById('short_description_en').value = button.dataset.shortDescriptionEn ?? "";
        document.getElementById('vimeo_url').value = button.dataset.vimeoUrl ?? "";

        const modal = new bootstrap.Modal(document.getElementById('videoModal'));
        modal.show();
    }

    function openDeleteModal(button) {
        const id = button.dataset.videoId;
        const form = document.getElementById('deleteForm');
        form.action = destroyRouteTemplate.replace('/0', '/' + id);

        const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
        modal.show();
    }

    document.addEventListener('DOMContentLoaded', function () {
        const hasErrors = config.dataset.hasErrors === '1';
        if (hasErrors) {
            const oldData = JSON.parse(config.dataset.old || '{}');
            if (oldData.id) {
                const fakeButton = document.createElement('button');
                fakeButton.dataset.id = oldData.id;
                fakeButton.dataset.nameAr = oldData.name_ar;
                fakeButton.dataset.nameEn = oldData.name_en;
                fakeButton.dataset.shortDescriptionAr = oldData.short_description_ar;
                fakeButton.dataset.shortDescriptionEn = oldData.short_description_en;
                fakeButton.dataset.vimeoUrl = oldData.vimeo_url;
                openEditVideoModal(fakeButton);
            } else {
                openAddVideoModal(false);
            }
        }
    });
</script>
@endsection