@extends('layouts.main_dashboard.app')
@php($routePrefix = auth()->user()?->usesStaffPortal() ? 'teacher' : 'admin')

@section('styles')
<style>
    /* Styling for upload control buttons */
    #pause-upload-btn, #resume-upload-btn {
        min-width: 150px;
    }
    #pause-upload-btn.disabled, #resume-upload-btn.disabled {
        pointer-events: none;
        opacity: 0.6;
    }

    /* Pulse effect for recording state */
    .recording-active {
        animation: pulse 1.5s infinite;
        background-color: #dc3545 !important;
        border-color: #dc3545 !important;
        color: white !important;
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }

    @keyframes pulse {
        0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
        70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }
        100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
    }

    /* Media preview container styling */
    .media-preview-container video, .media-preview-container audio {
        width: 100%;
        margin-top: 10px;
        border-radius: 8px;
        border: 1px solid #e4e6ef;
        background: #000;
    }

    /* Custom tab styling */
    .nav-pills .nav-link.active {
        background-color: #009ef7;
        color: #fff !important;
    }
    .nav-pills .nav-link.active .nav-text {
        color: #fff !important;
    }
    .nav-pills .nav-link.active .nav-icon i {
        color: #fff !important;
    }
</style>
@endsection

@section('title',  __('dashboard.Edit Material')
@section('page_heading',  __('dashboard.Edit Material'))

@section('breadcrumb')
    <li class="breadcrumb-item text-muted">
        <a href="{{ route($routePrefix . '.home') }}" class="text-muted text-hover-primary">{{ __('dashboard.Home') }}</a>
    </li>
    <li class="breadcrumb-item"><span class="bullet bg-gray-500 w-5px h-2px"></span></li>
    <li class="breadcrumb-item text-muted">
        <a href="{{ $routePrefix === 'staff' ? route('teacher.courses.my-courses') : route('admin.courses.index') }}" class="text-muted text-hover-primary">{{ __('dashboard.Courses') }}</a>
    </li>
    <li class="breadcrumb-item"><span class="bullet bg-gray-500 w-5px h-2px"></span></li>
    <li class="breadcrumb-item text-muted">
        <a href="{{ route($routePrefix . '.courses.show', $course->id) }}" class="text-muted text-hover-primary">{{ $course->name }}</a>
    </li>
    <li class="breadcrumb-item"><span class="bullet bg-gray-500 w-5px h-2px"></span></li>
    <li class="breadcrumb-item text-muted">
        <a href="{{ route($routePrefix . '.courses.materials.index', $course->id) }}" class="text-muted text-hover-primary">{{ __('dashboard.All Materials') }}</a>
    </li>
    <li class="breadcrumb-item"><span class="bullet bg-gray-500 w-5px h-2px"></span></li>
    <li class="breadcrumb-item text-muted">
        <a href="{{ route($routePrefix . '.courses.materials.edit', ['courseId' => $course->id, 'id' => $material->id]) }}" class="text-muted text-hover-primary">{{ __('dashboard.Edit Material') }}</a>
    </li>
@endsection

@section('actions')
    <a href="{{ route($routePrefix . '.courses.materials.index', $course->id) }}" class="btn btn-flex btn-outline btn-color-gray-700 btn-active-color-primary bg-body h-40px fs-7 fw-bold">{{ __('dashboard.View All Materials') }}</a>
@endsection

@section('content')
    <div id="kt_app_content" class="app-content flex-column-fluid">
        <div id="kt_app_content_container" class="app-container container-fluid">
            <div class="row g-7">
                <div class="col-xl-12">
                    <div class="card card-flush h-lg-100" id="kt_contacts_main">
                        <div class="card-header pt-7" id="kt_chat_contacts_header">
                            <div class="text-lg font-black text-zinc-900 dark:text-white">
                                <i class="ki-outline ki-element-6 fs-1 me-2"></i>
                                <h2>{{ __('dashboard.Edit Material') }}</h2>
                            </div>
                        </div>
                        <div class="card-body pt-5">

                            <form id="materialForm" class="form">
                                @csrf
                                @method('PUT')

                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-semibold form-label mt-3">
                                        <span class="required">{{ __('dashboard.Lesson') }}</span>
                                    </label>
                                    <select id="lesson_select" class="form-select form-select-solid" name="lesson_id" data-control="select2" required>
                                        @foreach($lessons as $lesson)
                                            <option value="{{ $lesson->id }}" {{ $material->lesson_id == $lesson->id ? 'selected' : '' }}>{{ $lesson->title }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-semibold form-label mt-3">
                                        <span class="required">{{ __('dashboard.Title') }}</span>
                                    </label>
                                    <input type="text" class="form-control form-control-solid" name="title" value="{{ old('title', $material->title) }}" required />
                                </div>

                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-semibold form-label mt-3">
                                        <span>{{ __('dashboard.Description') }}</span>
                                    </label>
                                    <textarea class="form-control form-control-solid" name="description">{{ old('description', $material->description) }}</textarea>
                                </div>

                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-semibold form-label mt-3">
                                        <span class="required">{{ __('dashboard.Is Published') }}</span>
                                    </label>
                                    <select class="form-select form-select-solid" name="is_published" data-control="select2" data-hide-search="true" required>
                                        <option value="1" {{ old('is_published', $material->is_published) == '1' ? 'selected' : '' }}>{{ __('dashboard.Yes') }}</option>
                                        <option value="0" {{ old('is_published', $material->is_published) == '0' ? 'selected' : '' }}>{{ __('dashboard.No') }}</option>
                                    </select>
                                </div>

                                <div class="alert alert-dismissible bg-light-primary border border-primary p-5 mb-7">
                                    <div class="d-flex flex-column pe-0 pe-sm-10">
                                        <h5 class="mb-1">
                                            <i class="ki-outline ki-file fs-2 me-2 text-primary"></i>
                                            {{ __('dashboard.Current File') }}
                                        </h5>
                                        <span class="text-gray-700 fw-bold">{{ basename($material->material) }}</span>
                                        <span class="text-muted fs-7 mt-1">{{ __('dashboard.Uploading a new file or recording will replace the current one.') }}</span>
                                    </div>
                                </div>

                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-semibold form-label mt-3">{{ __('dashboard.Replace File') }} / {{ __('dashboard.Live Recording') }}</label>

                                    <ul class="nav nav-pills nav-pills-custom mb-5 border-bottom pb-3" role="tablist">
                                        <li class="nav-item mb-3 me-3 me-lg-6" role="presentation">
                                            <a class="nav-link btn btn-outline btn-flex btn-color-muted btn-active-color-primary flex-column overflow-hidden w-150px h-85px pt-5 pb-2 active" data-bs-toggle="pill" href="#kt_tab_upload" aria-selected="true" role="tab">
                                                <div class="nav-icon mb-3">
                                                    <i class="ki-outline ki-file-up fs-1"></i>
                                                </div>
                                                <span class="nav-text text-gray-800 fw-bold fs-6 lh-1">{{ __('dashboard.Upload Files') }}</span>
                                            </a>
                                        </li>
                                        <li class="nav-item mb-3 me-3 me-lg-6" role="presentation">
                                            <a class="nav-link btn btn-outline btn-flex btn-color-muted btn-active-color-primary flex-column overflow-hidden w-150px h-85px pt-5 pb-2" data-bs-toggle="pill" href="#kt_tab_record" aria-selected="false" role="tab">
                                                <div class="nav-icon mb-3">
                                                    <i class="ki-outline ki-mic fs-1"></i>
                                                </div>
                                                <span class="nav-text text-gray-800 fw-bold fs-6 lh-1">{{ __('dashboard.Live Recording') }}</span>
                                            </a>
                                        </li>
                                    </ul>

                                    <div class="tab-content" id="myTabContent">
                                        <div class="tab-pane fade show active" id="kt_tab_upload" role="tabpanel">
                                            <div id="resumable-drop" class="p-5 border border-dashed rounded text-center cursor-pointer">
                                                <i class="ki-outline ki-cloud-upload fs-3x text-primary mb-5"></i>
                                                <p>{{ __('dashboard.Drag and drop files here or click to select files') }}</p>
                                            </div>
                                            <input type="file" class="d-none" id="files_input" name="files[]" />
                                        </div>

                                        <div class="tab-pane fade" id="kt_tab_record" role="tabpanel">
                                            <div class="row text-center justify-content-center">
                                                <div class="col-md-8">
                                                    <div class="alert alert-dismissible bg-light-info border border-info p-5 mb-5">
                                                        <i class="ki-outline ki-information-2 fs-2tx text-info me-4"></i>
                                                        <div class="d-flex flex-column pe-0 pe-sm-10">
                                                            <h5 class="mb-1">{{ __('dashboard.Note:') }}</h5>
                                                            <span>{{ __('dashboard.Select either Audio or Video recording. The recorded file will replace the current file upon saving.') }}</span>
                                                        </div>
                                                    </div>

                                                    <div class="d-flex justify-content-center gap-3 mb-5">
                                                        <button type="button" id="btn-record-audio" class="btn btn-outline btn-outline-dashed btn-outline-primary btn-active-light-primary">
                                                            <i class="ki-outline ki-mic fs-2 me-1"></i> {{ __('dashboard.Record Audio') }}
                                                        </button>

                                                        <button type="button" id="btn-record-video" class="btn btn-outline btn-outline-dashed btn-outline-info btn-active-light-info">
                                                            <i class="ki-outline ki-video fs-2 me-1"></i> {{ __('dashboard.Record Video') }}
                                                        </button>
                                                    </div>

                                                    <div id="media-preview" class="media-preview-container d-none mb-4 p-3 border rounded">
                                                        <h5 class="fw-bold mb-3">{{ __('dashboard.Preview:') }}</h5>
                                                        <div id="video-placeholder"></div>
                                                        <div id="audio-placeholder"></div>
                                                    </div>

                                                    <div id="recording-controls" class="d-none">
                                                        <div class="d-flex align-items-center justify-content-center gap-3">
                                                            <span class="badge badge-danger fs-3" id="recording-timer">00:00</span>
                                                            <button type="button" id="btn-stop-recording" class="inline-flex items-center gap-2 rounded-xl bg-red-600 px-4 py-2 text-sm font-bold text-white hover:bg-red-700">
                                                                <i class="ki-outline ki-abstract-5 fs-2"></i> {{ __('dashboard.Stop Recording') }}
                                                            </button>
                                                        </div>
                                                        <p class="text-danger fw-bold mt-2 fs-7">{{ __('dashboard.Recording in progress...') }}</p>
                                                    </div>

                                                    <div id="recording-status" class="mt-3 text-success fw-bold d-none">
                                                        <i class="ki-outline ki-check-circle fs-2 text-success"></i> {{ __('dashboard.Recording ready! Click Save below to update.') }}
                                                        <button type="button" id="btn-reset-recording" class="btn btn-sm btn-light-danger ms-2">{{ __('dashboard.Reset') }}</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div id="upload-info" class="mt-3" style="display: none;">
                                         <div class="d-flex align-items-center">
                                            <div class="progress flex-grow-1 me-3" style="height: 25px;">
                                                <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 0%;">0%</div>
                                            </div>
                                            <button id="pause-upload-btn" type="button" class="btn btn-icon btn-sm btn-light-warning me-2" style="display: none;"><i class="ki-outline ki-pause fs-2"></i></button>
                                            <button id="resume-upload-btn" type="button" class="btn btn-icon btn-sm btn-light-primary" style="display: none;"><i class="ki-outline ki-play fs-2"></i></button>
                                        </div>
                                        <div class="d-flex justify-content-between w-100 mt-2 fs-7 text-muted">
                                            <span><i class="ki-outline ki-speedometer fs-6"></i> <span id="upload-speed">0</span> KB/s</span>
                                            <span><i class="ki-outline ki-check-circle fs-6"></i> <span id="uploaded-bytes">0</span> / <span id="total-bytes">0</span> KB</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="d-flex justify-content-end">
                                    <a href="{{ route($routePrefix . '.courses.materials.index', $course->id) }}" class="btn btn-light me-3">{{ __('dashboard.Cancel') }}</a>
                                    <button type="submit" class="inline-flex items-center gap-2 rounded-xl bg-brand-600 px-4 py-2 text-sm font-bold text-white hover:bg-brand-700" id="save-button">
                                        <span class="indicator-label">{{ __('dashboard.Save') }}</span>
                                        <span class="indicator-progress">{{ __('dashboard.Please wait...') }}
                                            <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                    </button>
                                </div>
                            </form>
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/resumable.js/1.0.3/resumable.min.js"></script>
<script>
    $(document).ready(function() {
        // --- 1. Resumable.js Setup ---
        let resumable = new Resumable({
            target: '{{ route($routePrefix . '.courses.materials.upload', $course->id) }}',
            query: {_token: '{{ csrf_token() }}'},
            chunkSize: 1 * 1024 * 1024,
            headers: {'Accept': 'application/json'},
            testChunks: false
        });

        resumable.assignBrowse(document.getElementById('resumable-drop'));
        resumable.assignDrop(document.getElementById('resumable-drop'));

        let newFileAdded = false; // Track if user wants to replace file

        // --- 2. Recording Logic ---
        let mediaRecorder;
        let audioChunks = [];
        let stream;
        let recordingTimerInterval;
        let recordingSeconds = 0;

        const btnRecordAudio = document.getElementById('btn-record-audio');
        const btnRecordVideo = document.getElementById('btn-record-video');
        const btnStopRecording = document.getElementById('btn-stop-recording');
        const btnResetRecording = document.getElementById('btn-reset-recording');
        const recordingControls = document.getElementById('recording-controls');
        const mediaPreview = document.getElementById('media-preview');
        const videoPlaceholder = document.getElementById('video-placeholder');
        const audioPlaceholder = document.getElementById('audio-placeholder');
        const recordingTimer = document.getElementById('recording-timer');
        const recordingStatus = document.getElementById('recording-status');

        function formatTime(totalSeconds) {
            const minutes = Math.floor(totalSeconds / 60).toString().padStart(2, '0');
            const seconds = (totalSeconds % 60).toString().padStart(2, '0');
            return `${minutes}:${seconds}`;
        }

        async function startRecording(type) {
            audioChunks = [];
            recordingSeconds = 0;
            recordingTimer.textContent = "00:00";

            const constraints = type === 'video' ? { audio: true, video: true } : { audio: true, video: false };

            try {
                stream = await navigator.mediaDevices.getUserMedia(constraints);
                mediaRecorder = new MediaRecorder(stream);

                btnRecordAudio.disabled = true;
                btnRecordVideo.disabled = true;
                recordingControls.classList.remove('d-none');

                if (type === 'video') {
                    mediaPreview.classList.remove('d-none');
                    videoPlaceholder.innerHTML = '<video autoplay muted playsinline class="w-100"></video>';
                    videoPlaceholder.querySelector('video').srcObject = stream;
                    audioPlaceholder.innerHTML = '';
                } else {
                    btnRecordAudio.classList.add('recording-active');
                }

                mediaRecorder.start();

                recordingTimerInterval = setInterval(() => {
                    recordingSeconds++;
                    recordingTimer.textContent = formatTime(recordingSeconds);
                }, 1000);

                mediaRecorder.addEventListener("dataavailable", event => {
                    audioChunks.push(event.data);
                });

                mediaRecorder.addEventListener("stop", () => {
                    clearInterval(recordingTimerInterval);

                    const mimeType = type === 'video' ? 'video/webm' : 'audio/webm';
                    const blob = new Blob(audioChunks, { type: mimeType });
                    const fileExtension = type === 'video' ? 'webm' : 'weba';

                    const fileName = `live_recording_${Date.now()}.${fileExtension}`;
                    const file = new File([blob], fileName, { type: mimeType });

                    // Add recorded file to Resumable
                    resumable.files = []; // Clear previous
                    resumable.addFile(file);

                    const mediaUrl = URL.createObjectURL(blob);

                    if (type === 'video') {
                        videoPlaceholder.innerHTML = `<video controls src="${mediaUrl}" class="w-100"></video>`;
                    } else {
                        mediaPreview.classList.remove('d-none');
                        audioPlaceholder.innerHTML = `<audio controls src="${mediaUrl}" class="w-100"></audio>`;
                        btnRecordAudio.classList.remove('recording-active');
                    }

                    stream.getTracks().forEach(track => track.stop());

                    recordingControls.classList.add('d-none');
                    recordingStatus.classList.remove('d-none');

                    newFileAdded = true;
                });

            } catch (error) {
                console.error("Error accessing media devices.", error);
                Swal.fire({
                    text: "{{ __('dashboard.Could not access camera/microphone. Please check permissions.') }}",
                    icon: "error",
                    buttonsStyling: false,
                    confirmButtonText: "Ok",
                    customClass: { confirmButton: "btn btn-primary" }
                });
            }
        }

        btnRecordAudio.addEventListener('click', () => startRecording('audio'));
        btnRecordVideo.addEventListener('click', () => startRecording('video'));

        btnStopRecording.addEventListener('click', () => {
            if (mediaRecorder && mediaRecorder.state !== 'inactive') mediaRecorder.stop();
        });

        btnResetRecording.addEventListener('click', () => {
            mediaPreview.classList.add('d-none');
            videoPlaceholder.innerHTML = '';
            audioPlaceholder.innerHTML = '';
            recordingStatus.classList.add('d-none');
            btnRecordAudio.disabled = false;
            btnRecordVideo.disabled = false;
            resumable.cancel();
            newFileAdded = false;
        });

        // --- 3. Resumable Events ---
        resumable.on('fileAdded', function(file) {
            newFileAdded = true;
            // Unlike "Add" page, we don't auto upload. We wait for Save button.
            // But we can show UI feedback
            const message = document.querySelector('.dz-message h3');
            if(message) message.textContent = "1 File Selected: " + file.fileName;
        });

        resumable.on('fileProgress', function(file) {
            $('#upload-info').show();
            let progress = Math.floor(file.progress() * 100);
            $('#progressBar').css('width', `${progress}%`).text(`${progress}%`);
            $('#uploaded-bytes').text(Math.floor(file.size * file.progress() / 1024));
            $('#total-bytes').text(Math.floor(file.size / 1024));
        });

        resumable.on('fileSuccess', function(file, response) {
            response = JSON.parse(response);
            $('#materialForm').append(`<input type="hidden" name="uploaded_file" value="${response.file_path}">`);
            submitFormNormal(); // Continue to submit the form data after file upload
        });

        resumable.on('fileError', (file, message) => {
            Swal.fire({ text: '{{ __("dashboard.An error occurred during file upload.") }}', icon: 'danger' });
            $('#save-button').prop('disabled', false); // Re-enable save button
        });

        // --- 4. Submit Logic ---
        function submitFormNormal() {
            let formData = $('#materialForm').serialize();
            $.ajax({
                url: '{{ route($routePrefix . '.courses.materials.update', ['courseId' => $course->id, 'id' => $material->id]) }}',
                type: 'POST', // Method spoofing is handled by @method('PUT') inside form but serialize needs it
                data: formData,
                success: () => window.location.href = '{{ route($routePrefix . '.courses.materials.index', $course->id) }}',
                error: (xhr) => {
                    let err = JSON.parse(xhr.responseText);
                    Swal.fire({ text: err.message || '{{ __("dashboard.An error occurred while saving the material.") }}', icon: 'error' });
                    $('#save-button').prop('disabled', false);
                }
            });
        }

        $('#materialForm').on('submit', function(e) {
            e.preventDefault();
            $('#save-button').prop('disabled', true); // Prevent double click

            // Check if there is a NEW file in resumable to upload
            if (newFileAdded && resumable.files.length > 0) {
                // Start upload first
                $('#upload-info, #pause-upload-btn').show();
                resumable.upload();
            } else {
                // No new file, just update text fields
                submitFormNormal();
            }
        });
    });
</script>
@endsection