@extends('layout.mainlayout')
@section('content')
    <div class="page-wrapper">
        <div class="content">
            <style>

.required {
    color: red;
}
            </style>
            @component('components.breadcrumb')
                @slot('title')
                    Users List Report
                @endslot
                @slot('li_1')
                   
                @endslot
                @slot('li_2')
                    Users-event-list
                @endslot
                @slot('li_3')
                    Back to Product
                @endslot
            @endcomponent
            <!-- /add -->
            <ul>
                @foreach ($errors->all() as $error)
                    <li style="color: red">{{ $error }}</li>
                @endforeach
            </ul>

            <form class="product-form" action="{{ route('generate-User-Report') }}" method="post">
                @csrf
                <div class="card">
                    <div class="card-body add-product pb-0">
                        <div class="accordion-card-one accordion" id="accordionExample">
                            <div class="accordion-item">
                                <div class="accordion-header" id="headingOne">
                                    <div class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
                                        aria-controls="collapseOne">
                                        <div class="addproduct-icon">
                                            <h5><i data-feather="info" class="add-info"></i><span>Event report</span></h5>
                                            <a href="javascript:void(0);"><i data-feather="chevron-down"
                                                    class="chevron-down-add"></i></a>
                                        </div>
                                    </div>
                                </div>
                                
                                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
                                    data-bs-parent="#accordionExample">
                                    <div class="accordion-body">
                                        <div class="row"> 
                                            <div class="col-lg-4 col-sm-6 col-12">
                                                <label>Event Name</label>
                                                <select class="select" name="event_id">
                                                    <option value="" {{ request('event_id') === null ? 'selected' : '' }}>---select product---</option>
                                                 
                                                    @foreach($events as $event)
                                                        <option value="{{ $event->id }}">{{ $event->title }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            
                                        
                                      
                                          
                                        
                                            <div class="col-lg-4 col-sm-6 col-12">
                                                <div class="input-blocks add-product">
                                                    <label>From Date</label>
                                                    <input type="date"  name="from_date" placeholder="Choose Date" >
     
                                                </div>
                                              </div>

                                              <div class="col-lg-4 col-sm-6 col-12">
                                                <div class="input-blocks add-product">
                                                    <label>To Date</label>
                                                    <input type="date"  name="to_date" placeholder="Choose Date" >
    
                                                </div>
                                              </div>
            
                                           
            
                                           
                                            
                                        </div>
            
                                        <button type="submit" class="btn btn-primary mt-3">Generate Report</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>  
            </form>
       
              
               
                    <div class="table-responsive">
                        @if(isset($reports) && count($reports) > 0)
                      
                    
                        <table class="table datanew" id="print-table">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Organization</th>
                                    <th>Position</th>
                                    <th>Type</th>
                                    <th>Payment Options</th>
                                    <th>Control Numbr</th>
                                    <th>Registered At</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($reports as $report)
                                    <tr>
                                        <td>{{ $report->fname }} {{ $report->lname }}</td>
                                        <td>{{ $report->email }}</td>
                                        <td>{{ $report->organization }}</td>
                                        <td>{{ $report->position }}</td>
                                        <td>{{ $report->registration_type }}</td>
                                        <td>{{ $report->paymentoptions }}</td>
                                        <td>{{ $report->controlnumber }}</td>
                                        <td>{{ $report->created_at }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

                        <tr>
                            <td>

                                <p><strong>Total Users: {{ $totalUsers }}</strong></p>
                            </td>

                        </tr>
                          
                    @else
                        <p>No user data found.</p>
                    @endif
                    
                    </div>
              
            
                
                  
      <br>
        
            <!-- /add -->
            <div class="section loader-section" style="display:none;">Loading...</div>
<div class="message text-success"></div>

        </div>
    </div>
    {{-- <script type="text/javascript">
        window.print();
    </script>
    <style>
        @media print {
            .loader-section {
                display: none !important;
            }
            .export{
                display: none !important;
            }
        }

    </style> --}}

    <div class="row export">
        <div class="col-md-12 text-center">
            <button id="exportExcel" class="btn btn-success">Export to Excel</button>
            <button id="exportCSV" class="btn btn-primary">Export to CSV</button>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    <script type="text/javascript">
        // Export to Excel
        document.getElementById('exportExcel').addEventListener('click', function () {
            var table = document.getElementById('print-table');
            var wb = XLSX.utils.table_to_book(table, { sheet: "Sheet1" });
            XLSX.writeFile(wb, 'CostToCompanyDepartments.xlsx');
        });

        // Export to CSV
        document.getElementById('exportCSV').addEventListener('click', function () {
            var table = document.getElementById('print-table');
            var rows = Array.from(table.querySelectorAll('tr'));
            var csvContent = rows.map(row => {
                return Array.from(row.querySelectorAll('th, td'))
                    .map(cell => `"${cell.textContent.trim()}"`)
                    .join(',');
            }).join('\n');

            var blob = new Blob([csvContent], { type: 'text/csv' });
            var link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = 'CostToCompanyDepartments.csv';
            link.click();
        });

        // Auto Print
        //window.print();
    </script>
@endsection