@extends('layout.agency')

@section('meta_tags')
@stop

@section('pagename')
    Dashboard
@stop

@section('top_import_file')
@stop



@section('content')
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 class="h4-color">Dashboard</h2>
    </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 Projects</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">{{ $projects }}</h4>
                        </div>
                        {{-- <div class="ms-auto">+6.32%</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 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 Voices</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">{{ $voices }}</h4>
                        </div>
                        {{-- <div class="ms-auto">+3.12%</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">{{ $scripts }}</h4>
                        </div>
                        {{-- <div class="ms-auto">+8.52%</div> --}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-3">
        <div class="d-inline-block">
            <h4 class="d-inline-block h4-color">Recent Videos</h4>
        </div>

        @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 mt-3">{{ $vid->vtitle }}</h5>
                            <hr class="mt-4">
                            <div class="d-flex justify-content-between align-items-center">
                                <span
                                    class="badge dash-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>
                </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>

    <!--end breadcrumb-->
    <h4 class="mt-3 h4-color">Recent Generated Text to Speech</h4>

    <div class="card radius-10 w-100 mb-3">
        <div class="card-body">
            <div class="d-flex align-items-center">

            </div>
            <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->voice_id }}"
                                        class="btn btn-sm btn-primary ">Use in Video</a>
                                </td>

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

    <h4 class="mt-4 h4-color">Sample Avatar</h4>
    <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-22"> <i class="fadeIn animated bx bx-play-circle"></i>
                            </div>
                            <div class="tab-title">&nbsp;&nbsp;All</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-22"> <i class="fadeIn animated bx bx-star"></i>
                            </div>
                            <div class="tab-title">&nbsp;&nbsp; Professional</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-22"> <i class="fadeIn animated bx bx-cool"></i>
                            </div>
                            <div class="tab-title">&nbsp;&nbsp;Casual</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">

                        @foreach ($videos 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->video_url }}"
                                                            download="{{ basename($vid->video_url) }}"> <i
                                                                class="bi bi-download"></i> Download</a></li>
                                                </ul>
                                            </div>

                                            <video class="myVideo rounded" src="{{ $vid->video_url }}"
                                                width="100%"></video>
                                            <i class="bi playPauseIcon bi-play-fill customPlayIcon">
                                            </i>
                                            <button data-src="{{ $vid->video_url }}" 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>
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span
                                                class="badge {{ $vid->category == '2' ? 'bg-success' : ($vid->category == '1' ? 'bg-warning' : 'bg-success') }} p-2 mb-2 mt-2">{{ $vid->category == 2 ? 'Casual' : 'Professional' }}</span>
                                            <button style="background: transparent; border: none;">
                                                <a href="{{ route('agency.lipsync') }}?vid={{ $vid->id }}"
                                                    class="btn btn-primary btn-sm  float-end">Use Avatar</a>
                                            </button>
                                        </div>


                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="tab-pane fade" id="successprofile" role="tabpanel">
                    <div class="row">

                        @foreach ($videos as $vid)
                            @if ($vid->category != '2')
                                <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->video_url }}"
                                                                download="{{ basename($vid->video_url) }}"> <i
                                                                    class="bi bi-download"></i> Download</a></li>
                                                    </ul>
                                                </div>

                                                <video class="myVideo rounded" src="{{ $vid->video_url }}"
                                                    width="100%"></video>
                                                <i class="bi playPauseIcon bi-play-fill customPlayIcon">
                                                </i>
                                                <button data-src="{{ $vid->video_url }}" 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>

                                            <a href="{{ route('agency.lipsync') }}?vid={{ $vid->id }}"
                                                class="btn btn-primary btn-sm  float-end">Use Avatar</a>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        @endforeach
                    </div>
                </div>
                <div class="tab-pane fade" id="successcontact" role="tabpanel">
                    <div class="row">
                        @foreach ($videos as $vid)
                            @if ($vid->category == '2')
                                <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->video_url }}"
                                                                download="{{ basename($vid->video_url) }}"> <i
                                                                    class="bi bi-download"></i> Download</a></li>
                                                    </ul>
                                                </div>

                                                <video class="myVideo rounded" src="{{ $vid->video_url }}"
                                                    width="100%"></video>
                                                <i class="bi playPauseIcon bi-play-fill customPlayIcon">
                                                </i>
                                                <button data-src="{{ $vid->video_url }}" 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>

                                            <a href="{{ route('agency.lipsync') }}?vid={{ $vid->id }}"
                                                class="btn btn-primary btn-sm  float-end">Use Avatar</a>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        @endforeach
                    </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
@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

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

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