@extends($layout)

@section('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" />
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.min.css"
        integrity="sha512-rBi1cGvEdd3NmSAQhPWId5Nd6QxE8To4ADjM2a6n0BrqQdisZ/RPUlm0YycDzvNL1HHAh1nKZqI0kSbif+5upQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        div.dataTables_wrapper div.dataTables_length select {
            width: 50%;
        }

        #videosTable_paginate>ul>li.paginate_button.page-item.active>a {
            color: white !important;
        }

        .dataTables_wrapper {
            overflow-x: auto;
        }

        .truncate {
            max-width: 150px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .truncate:hover {
            overflow: visible;
            white-space: normal;
            word-wrap: break-word;
            background-color: #f8f9fa;
        }
    </style>
@endsection

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header pb-0 d-flex justify-content-between align-items-center">
                        <div>
                            {{ __('Download Report') }} <br>
                            <hr>
                            <div class="card card-frame">
                                <div class="card-body">
                                    <div class="mx-4">
                                        <p class="h5">Name: <b>{{ $user->name }}</b></p>
                                        <p class="h5">Email: <b>{{ $user->email }}</b></p>
                                        <p class="h5">Phone: <b>{{ $user->phone }}</b></p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div>
                            <button onclick="window.history.back();" class="btn bg-gradient-dark mb-0 me-4">
                                <i class="fas fa-table"></i> &nbsp;&nbsp;View All
                            </button>
                        </div>
                    </div>

                    <div class="card-body">
                        <button id="exportCSV" class="btn btn-success mb-3">Export to CSV</button>
                        <button id="exportPDF" class="btn btn-primary mb-3">Export PDF</button>


                        <table id="videosTable" class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Title</th>
                                    <th>Description</th>
                                    <th>Date</th>
                                    <th>Tags</th>
                                    <th>Participants</th>
                                    <th>Category</th>
                                    <th>Downloads</th>


                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>

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

@section('script')
    <script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/v/dt/jqc-1.12.4/dt-1.13.6/b-2.4.1/sl-1.7.0/datatables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#videosTable').DataTable({
                processing: true,
                serverSide: true,
                language: {
                    paginate: {
                        next: '&#8594;',
                        previous: '&#8592;'
                    }
                },
                columnDefs: [{
                    "className": "dt-left",
                    "targets": "_all"
                }],
                ajax: {
                    url: "{{ route('reports.downloads.show', ['user_id' => $user_id]) }}",
                    type: 'GET',
                    data: function(d) {
                        d.start_date = '{{ $startDate ? $startDate->toDateString() : '' }}';
                        d.end_date = '{{ $endDate ? $endDate->toDateString() : '' }}';
                    }
                },
                columns: [{
                        data: 'title',
                        name: 'title',
                        render: function(data, type, row) {
                            return '<div class="truncate" title="' + data + '">' + data + '</div>';
                        }
                    },
                    {
                        data: 'description',
                        name: 'description',
                        render: function(data, type, row) {
                            return '<div class="truncate" title="' + data + '">' + data + '</div>';
                        }
                    },
                    {
                        data: 'capture_datetime',
                        name: 'capture_datetime'
                    },
                    {
                        data: 'tags',
                        name: 'tags',
                        render: function(data, type, row) {
                            return '<div class="truncate" title="' + data + '">' + data + '</div>';
                        }
                    },
                    {
                        data: 'participants',
                        name: 'participants',
                        render: function(data, type, row) {
                            return '<div class="truncate" title="' + data + '">' + data + '</div>';
                        }
                    },
                    {
                        data: 'category',
                        name: 'category'
                    },

                    {
                        data: 'download_count',
                        name: 'download_count'
                    }
                ]
            });
            $('#exportCSV').on('click', function() {
                let startDate = '{{ $startDate ? $startDate->toDateString() : '' }}';
                let endDate = '{{ $endDate ? $endDate->toDateString() : '' }}';

                let exportUrl =
                    `{{ route('reports.downloads.show.exportCSV', ['user_id' => $user_id]) }}?start_date=${startDate}&end_date=${endDate}`;

                window.location.href = exportUrl;
            });

            $('#exportPDF').on('click', function() {
                let startDate = '{{ $startDate ? $startDate->toDateString() : '' }}';
                let endDate = '{{ $endDate ? $endDate->toDateString() : '' }}';

                let exportUrl =
                    `{{ route('reports.downloads.show.exportPDF', ['user_id' => $user_id]) }}?start_date=${startDate}&end_date=${endDate}`;

                window.location.href = exportUrl;
            });

        });
    </script>
@endsection