@extends('layout.agency')

@section('meta_tags')
@stop

@section('pagename')
    LipSync | Approved
@stop

@section('top_import_file')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
    /* Overall table styling */
    #projects-table {
        border-collapse: separate;
        border-spacing: 2px 15px; /* Adds space between rows */
    }

    /* Header styles */
    #projects-table thead {
        background-color: #f2f2f2;
    }

    #projects-table thead th {
        color: #444;
        padding: 12px;
        padding-right: 30px;
        font-weight: bold;
        border-bottom: 2px solid #ddd;
    }

    /* Row hover effect */
    #projects-table tbody tr:hover {
        background-color: #f9f9f9;
    }

    /* Cell padding and spacing between columns */
    #projects-table tbody td {
        padding: 10px;
        border-bottom: 1px solid #eee;
        vertical-align: middle;
    }

    /* Column colors and alignment */
    #projects-table tbody td:nth-child(1), /* ID column */
    #projects-table tbody td:nth-child(2),
    #projects-table tbody td:nth-child(3),
    #projects-table tbody td:nth-child(4),
    #projects-table tbody td:nth-child(5),
    #projects-table tbody td:nth-child(6),
    #projects-table tbody td:nth-child(7),
    #projects-table tbody td:nth-child(8),
    #projects-table tbody td:nth-child(9),
    #projects-table tbody td:nth-child(10),
    #projects-table tbody td:nth-child(11),
    #projects-table tbody td:nth-child(12) { /* Title column */
        background-color: #f7f7ff; /* Light blue */
    }

    /* Status badges */
    .badge {
        padding: 5px 10px;
        font-size: 0.9rem;
        border-radius: 8px;
    }

    .bg-success {
        background-color: #28a745 !important;
        color: white;
    }

    .bg-danger {
        background-color: #dc3545 !important;
        color: white;
    }

    .bg-warning {
        background-color: #ffc107 !important;
        color: black;
    }

    .bg-info {
        background-color: #17a2b8 !important;
        color: white;
    }

    /* Button styling */
    .btn-sm {
        background-color: #6f42c1;
        border-color: #6f42c1;
        color: white;
        border-radius: 8px;
    }

    .btn-sm:hover {
        background-color: #5d359f;
        border-color: #5d359f;
    }

    /* Add some padding and spacing for buttons */
    .video-container, .audio-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px;
    }

    .video-container video, .audio-container audio {
        margin-bottom: 10px;
    }
</style>
@stop

@section('bottom-scripts')
<script>
    $(document).ready(function(){
        projectsTable = $('#projects-table').DataTable({
            ajax: {
                url: "{{ route('agency.lipsynced.approved') }}", // Replace with your route for fetching data
                dataSrc: ''
            },
            columns: [
                { data: 'id', width: '5%' },
                { data: 'vtitle', width: '15%' },
                {
                    data: 'original_video',
                    width: '25%',
                    render: function (data, type, row) {
                        return `
                            <div class="video-container">
                                <video width="200" height="120" controls>
                                    <source src="${data}" type="video/mp4">
                                    <source src="${data}" type="video/ogg">
                                    Your browser does not support the video tag.
                                </video>
                                <a href="${data}" target="_blank" class="btn btn-sm btn-download" download>
                                    <i class="fa fa-download"></i> Download
                                </a>
                            </div>
                        `;
                    }
                },
                {
                    data: 'original_audio',
                    width: '20%',
                    render: function (data, type, row) {
                        return `
                            <div class="audio-container">
                                <audio controls>
                                    <source src="${data}" type="audio/mp3">
                                    Your browser does not support the audio element.
                                </audio>
                                <a href="${data}" target="_blank" class="btn btn-sm btn-download" download>
                                    <i class="fa fa-download"></i> Download
                                </a>
                            </div>
                        `;
                    }
                },
                {
                    data: 'lipsynced_video',
                    width: '25%',
                    render: function (data, type, row) {
                        if (data === 'N/A' || row.lipsynced_video_status === 'PROCESSING') {
                            return '<span class="badge bg-warning">Processing</span>';
                        } else {
                            return `
                                <div class="video-container">
                                    <video width="200" height="120" controls>
                                        <source src="${data}" type="video/mp4">
                                        <source src="${data}" type="video/ogg">
                                        Your browser does not support the video tag.
                                    </video>
                                    <a href="${data}" target="_blank" class="btn btn-sm btn-download" download>
                                        <i class="fa fa-download"></i> Download
                                    </a>
                                </div>
                            `;
                        }
                    }
                },
                { data: 'lipsynced_video_status', width: '10%' },
                { data: 'comments', defaultContent: '<span class="text-muted">No comments</span>', width: '15%' },
                {
                    data: 'approaved',
                    render: function (data, type, row) {
                        if (data == 1) {
                            return '<span style="color: green;">Approved</span>';
                        } else if (data == 2) {
                            return '<span style="color: red;">Rejected</span>';
                        } else {
                            return '<span style="color: blue;">Pending</span>';
                        }
                    },
                    width: '10%'
                },
                {
                    data: 'agency_user.username', // Access the agency user's name
                    render: function (data, type, row) {
                        return data ? data : '-';
                    },
                    width: '10%'
                },
                {
                    data: 'created_at',
                    render: function (data, type, row) {
                        return moment(data).format('DD-MMM-YYYY h:mm A'); // Format date with moment.js
                    },
                    width: '10%'
                },
                {
                    data: 'approaved',
                    render: function (data, type, row) {
                        return `
                            <select class="form-control actionlip" id="${row.id}">
                                <option value="1" ${data == 1 ? 'selected' : ''}>Approved</option>
                                <option value="2" ${data == 2 ? 'selected' : ''}>Rejected</option>
                                <option value="0" ${data == 0 ? 'selected' : ''}>Pending</option>
                            </select>
                        `;
                    },
                    width: '10%'
                }
            ]
        });

        $('#projects-table').on('change', '.actionlip', function() {
            var selectElement = $(this);
            var formdata = new FormData();
            formdata.append('_token', "{{csrf_token()}}");
            formdata.append('id', selectElement.attr('id'));
            formdata.append('value', selectElement.val());

            $.ajax({
                url: "{{route('agency.lipsync.change.status')}}", // Use Laravel's URL helper to generate the correct URL
                type: "post",
                data: formdata,
                processData: false,
                contentType: false,
                cache: false,
                beforeSend: function() {
                    selectElement.replaceWith('<i class="fas fa-spinner fa-spin" style="display: flex;justify-content: center; font-size:24px;"></i>');
                },
                success: function(res) {
                    projectsTable.ajax.reload();
                },
                error: function(error) {
                    projectsTable.ajax.reload();
                }
            });
        });
    });
</script>
@stop

@section('content')
<!--start breadcrumb-->
<!-- <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
    <div class="breadcrumb-title pe-3">Tables</div>
    <div class="ps-3">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0 p-0 align-items-center">
                <li class="breadcrumb-item">
                    <a href="javascript:;">
                        <ion-icon name="home-outline"></ion-icon>
                    </a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">Data Table</li>
            </ol>
        </nav>
    </div>
    <div class="ms-auto">
        <div class="btn-group">
            <button type="button" class="btn btn-outline-primary">Settings</button>
            <button type="button" class="btn btn-outline-primary split-bg-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
                <span class="visually-hidden">Toggle Dropdown</span>
            </button>
            <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-end">
                <a class="dropdown-item" href="javascript:;">Action</a>
                <a class="dropdown-item" href="javascript:;">Another action</a>
                <a class="dropdown-item" href="javascript:;">Something else here</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="javascript:;">Separated link</a>
            </div>
        </div>
    </div>
</div> -->

<div class="card mt-3">
    <div class="card-header d-flex justify-content-start">
        <h6><i class="fa fa-table" aria-hidden="true"></i> Videos</h6>
    </div>
    <div class="card-body">
        <div class="alert alert-danger d-none" role="alert" id="error"></div>
        <div class="row">
            <div class="col-md-12 table-responsive">
                <table id="projects-table" class="table table-hover">
                    <thead>
                        <tr>
                            <th>id</th>
                            <th>Script</th>
                            <th>Orignal Video</th>
                            <th>Orignal Audio</th>
                            <th>Lipsynced Video</th>
                            <th>Status</th>
                            <th>Comments</th>
                            <th>Approaval</th>
                            <th>Action Performed</th>
                            <th>Created At</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
@stop