@extends('frontend.layouts.app')

@section('content')
<div class="row mt-4 mb-3">
    <div class="col">
        <h6 class="title">View & Download Video</h6>
    </div>
    <div class="col-auto">
        <a href="{{ route('doctors.index') }}" 
                           class="btn btn-44 btn-outline-dark active text-normalcase">
                            <i class="bi bi-arrow-left"></i>
                        </a>
    </div>
</div>

<div class="row mb-1 justify-content-center">
    <div class="col-12">
        <div class="card bg-opac-50 mb-3">
            <div class="card-body">
                <!-- Doctor Info -->
                <div class="row mb-3">
                    <div class="col-auto">
                        <div class="avatar avatar-44 shadow-sm rounded-10">
                            <img src="{{ $doctor->photo ? asset('uploads/doctor_photos/'.$doctor->photo) : asset('frontend/assets/img/user1.jpg') }}" 
                                 alt="Doctor Photo">
                        </div>
                    </div>
                    <div class="col align-self-center ps-0">
                        <p class="mb-0 text-color-theme">{{ $doctor->doctorname }}</p>
                        <p class="text-muted small">{{ $doctor->designation ?? '' }}</p>
                    </div>
                    <div class="col-auto">
                       <a href="javascript:void(0);" 
   class="btn btn-default text-white" 
   onclick="copyToClipboard('{{ asset('uploads/generated_video/'.$doctor->generated_video) }}')">
   <i class="bi bi-clipboard"></i> Copy
</a>
                    </div>
                </div>

                <!-- Doctor Video -->
                @if($doctor->generated_video)
                <div class="row mt-2 mb-3 text-center">
                    <div class="col-12">
					<div class="d-flex justify-content-center">
  <video width="200" height="auto" controls>
    <source src="{{ asset('uploads/generated_video/'.$doctor->generated_video) }}" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>
                    </div>
                    <div class="col-12 mt-2">
                        <a href="{{ asset('uploads/generated_video/'.$doctor->generated_video) }}" 
                           download 
                           class="btn btn-default active">
                            Download Video
                        </a>
                    </div>
                </div>
                @else
                <div class="row mb-3 text-center">
                    <div class="col-12">
                        <p>The video has not been generated.</p>
                    </div>
                </div>

                @endif


            </div>
        </div>
    </div>
</div>
@endsection

@section('footer')
<script>
function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(function() {
        alert('Copied to clipboard!');
    }).catch(function(err) {
        console.error('Could not copy text: ', err);
    });
}
</script>
@include('frontend.layouts.partials.footer_posm')
@endsection