@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%;
        }

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

        .dataTables_wrapper {
            overflow-x: auto;
        }

        #stringerTable tbody tr:hover {
            cursor: pointer;
            background-color: #f1f1f1;
        }

        #stringerTable {
            width: 100% !important;
            table-layout: auto;
        }
    </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">{{ __('Upload Report') }}</div>
                    <div class="card-body">
                        <div class="d-flex mb-3 align-items-end">
                            <div class="col-6 col-md-3">
                                <div class="me-2 flex-grow-1">
                                    <label for="daterange" class="form-label">Filter by Date Range:</label>
                                    <input type="text" id="daterange" class="form-control"
                                        placeholder="Select Date Range">
                                </div>
                            </div>
                            <button id="resetDateRange" class="btn btn-secondary mb-0">Reset</button>
                        </div>
                        <button id="exportCSV" class="btn btn-success mb-3">Export CSV</button>
                        <button id="exportPDF" class="btn btn-primary mb-3">Export PDF</button>


                        <div class="table-responsive">
                            <table id="stringerTable" class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>Stringer Name</th>
                                        <th>Email</th>
                                        <th>Total Uploads</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script type="text/javascript" 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 src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.min.js"
        integrity="sha512-mh+AjlD3nxImTUGisMpHXW03gE6F4WdQyvuFRkjecwuWLwD2yCijw4tKA3NsEFpA1C3neiKhGXPSIGSfCYPMlQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        $(document).ready(function() {
            let table = $('#stringerTable').DataTable({
                processing: true,
                serverSide: true,
                pageLength: 10,
                language: {
                    paginate: {
                        next: '&#8594;',
                        previous: '&#8592;'
                    }
                },
                columnDefs: [{
                    "className": "dt-left",
                    "targets": "_all"
                }],
                ajax: {
                    url: '{{ route('reports.uploads.index') }}',
                    data: function(d) {
                        let daterangepicker = $('#daterange').data('daterangepicker');
                        if (daterangepicker && daterangepicker.startDate && daterangepicker.endDate) {
                            let startDate = daterangepicker.startDate.format('YYYY-MM-DD');
                            let endDate = daterangepicker.endDate.format('YYYY-MM-DD');
                            if (startDate && endDate && startDate !== endDate) {
                                d.start_date = startDate;
                                d.end_date = endDate;
                            }
                        }
                    }
                },
                columns: [{
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'email',
                        name: 'email'
                    },
                    {
                        data: 'uploads',
                        name: 'uploads',
                        searchable: false
                    }
                ]
            });

            $('#daterange').daterangepicker({
                opens: 'left',
                autoUpdateInput: false,
                locale: {
                    format: 'MM/DD/YYYY'
                }
            }, function(start, end) {
                $('#daterange').val(start.format('MM/DD/YYYY') + ' - ' + end.format('MM/DD/YYYY'));
                table.draw();
            });

            $('#daterange').on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
                table.draw();
            });

            $('#resetDateRange').on('click', function() {
                /* $('#daterange').val('');
                table.draw(); */
                location.reload();

            });

            $('#stringerTable tbody').on('click', 'tr', function() {
                let data = table.row(this).data();
                let daterangepicker = $('#daterange').data('daterangepicker');
                let startDate = daterangepicker ? daterangepicker.startDate.format('YYYY-MM-DD') : '';
                let endDate = daterangepicker ? daterangepicker.endDate.format('YYYY-MM-DD') : '';
                if (startDate && endDate && startDate !== endDate) {
                    window.location.href =
                        `/reports/uploads/${data.id}?start_date=${startDate}&end_date=${endDate}`;
                } else {
                    window.location.href = `/reports/uploads/${data.id}`;
                }
            });

            $('#exportCSV').on('click', function() {
                let daterangepicker = $('#daterange').data('daterangepicker');
                let startDate = daterangepicker ? daterangepicker.startDate.format('YYYY-MM-DD') : '';
                let endDate = daterangepicker ? daterangepicker.endDate.format('YYYY-MM-DD') : '';

                let exportUrl = `{{ route('reports.uploads.exportCSV') }}?`;

                if (startDate && endDate && startDate !== endDate) {
                    exportUrl += `start_date=${startDate}&end_date=${endDate}`;
                }

                window.location.href = exportUrl;
            });

            $('#exportPDF').on('click', function() {
                let daterangepicker = $('#daterange').data('daterangepicker');
                let startDate = daterangepicker ? daterangepicker.startDate.format('YYYY-MM-DD') : '';
                let endDate = daterangepicker ? daterangepicker.endDate.format('YYYY-MM-DD') : '';

                let exportUrl = `{{ route('reports.uploads.exportPDF') }}?`;

                if (startDate && endDate && startDate !== endDate) {
                    exportUrl += `start_date=${startDate}&end_date=${endDate}`;
                }

                window.location.href = exportUrl;
            });

        });
    </script>
@endsection