@extends('layout.agency')

@section('meta_tags')
@stop

@section('pagename')
    Dashboard
@stop

@section('top_import_file')
@stop
{{-- env('APP_URL')."agency_users/{$userId}/sts/"; --}}
@section('bottom-scripts')
    <script src="{{ asset('assets/plugins/apexcharts-bundle/js/apexcharts.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/easyPieChart/jquery.easypiechart.js') }}"></script>
    <script src="{{ asset('assets/plugins/chartjs/chart.min.js') }}"></script>
    <script src="{{ asset('assets/js/index.js') }}"></script>
    <script>
        $(function() {
            function togglePlayPause(vid) {
                let video = $(vid);
                let siblings = video.siblings('.playPauseIcon');

                $('video').not(vid).each(function() {
                    this.pause();
                    $(this).siblings('.playPauseIcon').removeClass('bi-pause-fill').addClass(
                        'bi-play-fill');
                });

                if (video[0].paused) {
                    video[0].play();
                    siblings.removeClass('bi-play-fill').addClass('bi-pause-fill');
                } else {
                    video[0].pause();
                    siblings.removeClass('bi-pause-fill').addClass('bi-play-fill');
                }
            }

            $(".playPauseIcon").click(function() {
                const vid = $(this).siblings('video');
                togglePlayPause(vid);
            });

            $('#exampleModal').on('show.bs.modal', function() {
                const vid = $('#modal-vid');
                vid[0].play();
            });

            $('#exampleModal').on('hide.bs.modal', function() {
                const vid = $('#modal-vid');
                vid[0].pause();
            });

            $(".modal-fscreen").click(function() {
                const newSrc = $(this).data("src");
                const modalVideo = $('#modal-vid');
                const vid = $(this).siblings('video');
                vid[0].pause();
                let siblings = vid.siblings('.playPauseIcon');
                siblings.removeClass('bi-pause-fill').addClass('bi-play-fill');

                modalVideo[0].pause();
                modalVideo.attr('src', newSrc);
                modalVideo[0].load();

                modalVideo.on('loadeddata', function() {
                    modalVideo[0].play();
                });
            });
        });
    </script>
@stop

@section('content')

<div class=" justify-content-between align-items-center mb-3">
    <h2>{{$projectdetails->project}}</h2>
    <p>{{$projectdetails->project_desc}}</p>
</div>
    <div class="row row-cols-1 row-cols-lg-2 row-cols-xxl-4">

        <div class="col">
            <div class="card radius-10">
                <div class="card-body">
                    <div class="d-flex align-items-start gap-2">
                        <div>
                            <p class="mb-0 fs-6">Total Videos</p>
                        </div>
                        <div class="ms-auto widget-icon-small text-white bg-gradient-info">
                            <ion-icon name="play-outline"></ion-icon>
                        </div>
                    </div>
                    <div class="d-flex align-items-center mt-3">
                        <div>
                            <h4 class="mb-0">{{ count($lipsync) }}</h4>
                        </div>
                        {{-- <div class="ms-auto">+12.45%</div> --}}
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card radius-10">
                <div class="card-body">
                    <div class="d-flex align-items-start gap-2">
                        <div>
                            <p class="mb-0 fs-6">Total Voice Change</p>
                        </div>
                        <div class="ms-auto widget-icon-small text-white bg-gradient-danger">
                            <ion-icon name="mic-outline"></ion-icon>
                        </div>
                    </div>
                    <div class="d-flex align-items-center mt-3">
                        <div>
                            <h4 class="mb-0">{{ count($sts) }}</h4>
                        </div>
                        {{-- <div class="ms-auto">+8.52%</div> --}}
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card radius-10">
                <div class="card-body">
                    <div class="d-flex align-items-start gap-2">
                        <div>
                            <p class="mb-0 fs-6">Total Speech Synthesis</p>
                        </div>
                        <div class="ms-auto widget-icon-small text-white bg-gradient-purple">
                            <ion-icon name="book-outline"></ion-icon>
                        </div>
                    </div>
                    <div class="d-flex align-items-center mt-3">
                        <div>
                            <h4 class="mb-0">{{ count($tts) }}</h4>
                        </div>
                        {{-- <div class="ms-auto">+8.52%</div> --}}
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card radius-10">
                <div class="card-body">
                    <div class="d-flex align-items-start gap-2">
                        <div>
                            <p class="mb-0 fs-6">Total Scripts</p>
                        </div>
                        <div class="ms-auto widget-icon-small text-white bg-gradient-success">
                            <ion-icon name="pencil-outline"></ion-icon>
                        </div>
                    </div>
                    <div class="d-flex align-items-center mt-3">
                        <div>
                            <h4 class="mb-0">{{ count($scripts) }}</h4>
                        </div>
                        {{-- <div class="ms-auto">+8.52%</div> --}}
                    </div>
                </div>
            </div>
        </div>
       

       
    </div>



    <div class="card">
        <div class="card-body">
            <ul class="nav nav-tabs nav-success" role="tablist">
                <li class="nav-item" role="presentation">
                    <a class="nav-link active" data-bs-toggle="tab" href="#successhome" role="tab" aria-selected="true">
                        <div class="d-flex align-items-center">
                            <div class="font-20"> <i class="fadeIn animated lni lni-play"></i>
                            </div>
                            <div class="tab-title">&nbsp;&nbsp;Videos</div>
                        </div>
                    </a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" data-bs-toggle="tab" href="#successprofile" role="tab" aria-selected="false">
                        <div class="d-flex align-items-center">
                            <div class="font-20"> <i class="fadeIn animated lni lni-mic"></i>
                            </div>
                            <div class="tab-title">&nbsp;&nbsp; Voice Changes</div>
                        </div>
                    </a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" data-bs-toggle="tab" href="#successcontact" role="tab" aria-selected="false">
                        <div class="d-flex align-items-center">
                            <div class="font-20"> <i class="fadeIn animated lni lni-comments-alt"></i>
                            </div>
                            <div class="tab-title">&nbsp;&nbsp; Speech Synthesis</div>
                        </div>
                    </a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" data-bs-toggle="tab" href="#scripttab" role="tab" aria-selected="false">
                        <div class="d-flex align-items-center">
                            <div class="font-20"> <i class="fadeIn animated lni lni-pencil-alt"></i>
                            </div>
                            <div class="tab-title">&nbsp;&nbsp; Scripts</div>
                        </div>
                    </a>
                </li>
                
            </ul>
            <div class="tab-content py-3">
                <div class="tab-pane fade show active" id="successhome" role="tabpanel">
                    <div class="row">
                        @if (count($lipsync) > 0)
                            @foreach ($lipsync as $vid)
                                <div class="col-3">
                                    <div class="card video-card shadow-sm" style="border-radius: 10px; overflow: hidden;">
                                        <div class="card-body p-3">
                                            <div class="video-div">
                                                <div class="dropdown Card-menu">
                                                    <i class="bi bi-three-dots" type="button" id="dropdownMenuButton1"
                                                        data-bs-toggle="dropdown" aria-expanded="false"></i>
                                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                        <li><a class="dropdown-item"
                                                                href="{{ $vid->lipsynced_video_status == 'COMPLETED' ? $vid->lipsynced_video : $vid->original_video }}"
                                                                download="{{ basename($vid->lipsynced_video_status == 'COMPLETED' ? $vid->lipsynced_video : $vid->original_video) }}">
                                                                <i class="bi bi-download"></i>
                                                                Download</a></li>
                                                    </ul>
                                                </div>

                                                <video class="myVideo rounded"
                                                    src="{{ $vid->lipsynced_video_status == 'COMPLETED' ? $vid->lipsynced_video : $vid->original_video }}"
                                                    width="100%"></video>
                                                <i class="bi playPauseIcon bi-play-fill customPlayIcon">
                                                </i>
                                                <button
                                                    data-src="{{ $vid->lipsynced_video_status == 'COMPLETED' ? $vid->lipsynced_video : $vid->original_video }}"
                                                    type="button" class="video-btn modal-fscreen" data-bs-toggle="modal"
                                                    data-bs-target="#exampleModal">
                                                    <i class="lni lni-frame-expand">
                                                    </i>
                                                </button>
                                            </div>


                                            <h5 class="card-title font-weight-bold">{{ $vid->vtitle }}</h5>
                                            <hr>
                                            <span
                                                class="badge {{ $vid->lipsynced_video_status == 'PROCESSING' ? 'bg-warning' : ($vid->lipsynced_video_status == 'FAILED' ? 'bg-danger' : 'bg-success') }} p-2 mb-2 mt-2">{{ $vid->lipsynced_video_status }}</span>

                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @else
                            <div class="col-12">
                                <div class="card p-3" style="border-radius: 10px; overflow: hidden;">
                                    <h6>No Videos Generated </h6>
                                </div>
                            </div>
                        @endif
                    </div>
                  
                </div>
                <div class="tab-pane fade" id="successprofile" role="tabpanel">
                    <div class="row">

                        <div class="table-responsive mt-2">
                            <table class="table align-middle mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th>#ID</th>
                                        <th>Script</th>
                                        <th>Result</th>
                                        <th>Stability</th>
                                        <th>Similarity</th>
                                        <th>Exaggeration</th>
                                        <th>Created at</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($sts as $script)
                                        <tr>
                                            <td>{{ $script->id }}</td>
                                            <td style="width: 25%">
                                                <audio controls>
                                                    <source src="{{ $script->script_url }}" type="audio/mp3">
                                                </audio>
                                            </td>
                                            <td style="width: 25%">
                                                <audio controls>
                                                    <source src="{{ $script->result_url }}" type="audio/mp3">
                                                </audio>
                                            </td>
                                            <td>{{ $script->stability }}</td>
                                            <td>{{ $script->similarity }}</td>
                                            <td>{{ $script->exaggeration }}</td>
                                            <td>{{ $script->created_at }}</td>
                                            <td>
                                                <a href="{{ route('agency.lipsync') }}?rid={{ $script->id }}"
                                                    class="btn btn-sm btn-primary ">Use in Video</a>
                                            </td>

                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="successcontact" role="tabpanel">
                    <div class="row">
                        <div class="table-responsive mt-2">
                            <table class="table align-middle mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th>#ID</th>
                                        <th>Script</th>
                                        <th>Result</th>
                                        <th>Stability</th>
                                        <th>Similarity</th>
                                        <th>Exaggeration</th>
                                        <th>Created at</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($tts as $script)
                                        <tr>
                                            <td>{{ $script->id }}</td>
                                            <td class="text-wrap">{{ $script->script }}</td>
                                            <td style="width: 25%">
                                                <audio controls>
                                                    <source
                                                        src="{{ env('APP_URL') . '/storage/agency_users/' . auth()->guard('agency')->user()->id . '/tts/' . $script->result }}"
                                                        type="audio/mp3">
                                                </audio>
                                            </td>
                                            <td>{{ $script->stability }}</td>
                                            <td>{{ $script->similarity }}</td>
                                            <td>{{ $script->exaggeration }}</td>
                                            <td>{{ $script->created_at }}</td>
                                            <td>
                                                <a href="{{ route('agency.lipsync') }}?sid={{ $script->id }}"
                                                    class="btn btn-sm btn-primary ">Use in Video</a>
                                            </td>

                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div  class="tab-pane fade" id="scripttab" role="tabpanel">
                    <div class="row">
                        <div class="table-responsive mt-2">
                            <table class="table align-middle mb-0 dataTable" id="example">
                                <thead class="table-light">
                                    <tr>
                                        <th>Date</th>
                                        <th>Name</th>
                                        <th>Script</th>
                                        <th>Created By</th>
                                        <th>Status</th>
                                        <th>Actions</th>
                                    </tr>
                            </thead>
                                <tbody id="tablebd">
                                    @foreach ($scripts as $script)
                                        <tr>
                                            <td>{{ $script->created_at->format('d-M-y g:i A') }}</td>
                                            <td>{{ $script->name }}</td>
                                            <td style="width: 30%" class="text-wrap">{{ $script->script }}</td>
                                            <td>{{ $script->created_by_name }}</td>
                                            <td>{{ $script->status ? 'Active' : 'Inactive' }}</td>
                                            <td>
                                                <a href="{{ route('agency.tts') }}?scriptid={{ $script->id }}"
                                                    class="btn btn-sm btn-primary ">Use in Speech Synthesis</a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>



    <!--end row-->
    {{-- Modal --}}
    <div class="modal fade custom-modal modal-lg" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content text-end ">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="modal-body">
                    <video id="modal-vid" class="myVideo rounded mb-3" src="" width="100%"></video>
                </div>

            </div>
        </div>
    </div>
    {{-- Modal --}}

@stop

{{-- Video Play And Modal Scripts --}}

{{-- Video Play And Modal Scripts --}}