@extends('layouts.admin')
@section('content')

<div class="col-9 main-dash-left">
    <div class="analytics">
        <div class="name-head">
            <h2>Bundle Management</h2>
            <div class="d-flex comm_head_top_right">
            <div class="sownload-cv-pdf">
                <a href="#" class="download-csv" onclick="exportData('csv')">Download CSV</a>
                <a href="#" class="download-pdf" style="background-color: grey; border-color:grey" disabled>Download PDF</a>
            </div>
           
        </div>
        </div>
       
       
            <form id="exportForm" method="GET" action="{{ route('admin.bundle.download.csv') }}" style="display: none;">
                <input type="hidden" name="search" id="exportSearch">
                <input type="hidden" name="sort_by" id="exportSort">
                <input type="hidden" name="time_filter" id="exportTimeFilter">
            </form>
        
        
        <div class="main-notification-messege">
            <div class="notifi-list d-flex">
                <div class="dropdowns-inner-list d-flex">
                    <div class="dropdowns-inner-list">
                        <div class="icon-search-main">
                            <i class="fa-solid fa-magnifying-glass"></i>
                            <input aria-describedby="passwordHelpBlock" placeholder="Search For Bundle" type="text" id="searchUser" class="form-control" value="{{ request('search') }}">
                        </div>
                    </div>
                  
                    <form id="filterForm" method="GET">
                        <input type="hidden" name="roof_type" id="roofTypeInput" value="{{ request('roof_type') }}">
                    </form>
                </div>
                <div class="sownload-cv-pdf bundle-filter">
                      <div class="filter-main-div">
                        <p class="lable-filt">Filter By:</p>
                        <div class="dropdown">
                            <button class="filter-btn dropdown-toggle" type="button" id="roofTypeFilterDropdown"
                                    data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="fa-solid fa-filter"></i>
                                {{ request('roof_type') ?: 'Filter' }}
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="roofTypeFilterDropdown">
                                <li><a class="dropdown-item roof-type-option" href="#" data-value="">All Roof Types</a></li>
                                @foreach($roofTypes as $type)
                                    <li><a class="dropdown-item roof-type-option {{ request('roof_type') == $type ? 'active' : '' }}" 
                                          href="#" data-value="{{ $type }}">{{ $type }}</a></li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                    <form action="{{  route('admin.bundle.upload.csv')  }}" method="POST" id="updload_csv"
                        enctype="multipart/form-data">
                        @csrf
                        <input type="file" class="add-notification-btn d-none" id="price_csv_upload" accept=".csv">
                
                        <label for="price_csv_upload" class="add-notification-btn">Bundle Upload CSV</label>
                    </form>
                    <form action="{{ route('admin.bundle.download.csv') }}" method="GET" style="display:inline;">
                        <button class="download-pdfs" type="submit">Bundle Download CSV</button>
                    </form>
                </div>
                <form action="{{ route('admin.bundle.upload.csv') }}" method="POST" enctype="multipart/form-data" id="csv-upload-form" style="display: none;">
                    @csrf
                    <input type="file" name="file" required>
                    <button type="submit">Upload</button>
                </form>
            </div>
            <div class="notification-table pt-0">
                <table class="table" id="bundleTable">
                    <thead>
                        <tr class="head-class-td">
                            <th>Bundle ID</th>
                            <th>Bundle Name</th>
                            <th>Product Category</th>
                            <th>Roof Type</th>
                            <th>Carrier SKU</th>
                            <th>Foot SKU</th>
                            <th>FootKit SKU</th>
                            <th>Action</th>
                           
                        </tr>
                    </thead>
                    <tbody id="userResults">
                        @foreach($bundles as $bundle)
                        <tr>
                            <td>#{{$bundle->id}}</td>
                            <td>{{ $bundle->bundle_name}}</td>
                            <td>{{$bundle->product_category}}</td>
                            <td>{{ $bundle->rooftype_eng }}</td>
                            <td>{{$bundle->carrier_length}}</td>
                            <td>{{$bundle->foot_sku}}</td>
                            <td>{{$bundle->footkit_sku}}</td>
                            
                            <td>
                                <div class="upper-delete-btns d-flex">
                                    <a class="view-btn-eye" href="{{route('admin.bundle.show', $bundle)}}">
                                        <i class="fa-solid fa-eye"></i>
                                    </a>
                                    <a class="edit-btn-eye" href="{{route('admin.bundle.edit', $bundle)}}">
                                        <i class="fa-solid fa-pen-to-square"></i>
                                    </a>
                                   
                                </div>
                            </td>
                            
                        </tr>
                        @endforeach
                    </tbody>


                    
                </table>
               
            </div>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


<script>

   
    jQuery(document).ready(function() {

        $('#bundleTable').DataTable({
            paging: true,
            searching: true, 
            info: true,
            lengthChange: true,
            pageLength: 10,
            ordering: false, 
            language: {
                lengthMenu: 'Show _MENU_ entries',
                paginate: {
                    previous: '&laquo;',
                    next: '&raquo;'
                }
            },
            dom: '<"top"lf>rt<"bottom"ip><"clear">'
        });

        // $('#searchUser').on('keyup', function () {
        //     $('#bundleTable').DataTable().search(this.value).draw();
        // });

   $('#price_csv_upload').on('change', function() {
                   var formData = new FormData();
                   var file = $('#price_csv_upload')[0].files[0];
                   formData.append('file', file);
                   formData.append('_token', '{{ csrf_token() }}'); // CSRF token

                   $('#loader').show();
                   $('#price_csv_upload').prop('disabled', true);

                   $.ajax({
                       url: '{{ route('admin.bundle.upload.csv') }}',
                       type: 'POST',
                       data: formData,
                       processData: false,
                       contentType: false,
                       success: function(response) {
                           $('#loader').hide();
                           $('#price_csv_upload').prop('disabled', false);

                           Swal.fire({
                               icon: 'success',
                               title: 'File Uploaded Successfully!',
                               text: 'Your file has been uploaded.',
                           }).then((result) => {
                               if (result.isConfirmed) {
                                   window.location.reload();
                               }
                           });
                           $('#price_csv_upload').val('');
                       },
                       error: function(xhr, status, error) {
                           $('#loader').hide();
                           $('#price_csv_upload').prop('disabled', false);

                           Swal.fire({
                               icon: 'error',
                               title: 'Oops...',
                               text: 'Something went wrong, please try again!',
                           });
                       }
                   });
               });

           });
</script>



<script>
    $(document).ready(function() {
        document.getElementById('timeFilter').addEventListener('change', function() {
            const timeFilter = this.value;
            const url = new URL(window.location.href);
            url.searchParams.set('time_filter', timeFilter);
            window.location.href = url.toString();
        });
    });


    
    let statusSelectEl = null;
    


    $(document).ready(function() {
        $('#searchUser').on('keyup', function() {
            let searchQuery = $(this).val().toLowerCase();  
            $('.download-pdf, .download-csv').each(function() {
                let href = $(this).attr('href').split('?')[0];
                $(this).attr('href', href + '?search=' + encodeURIComponent(searchQuery));
            });
            
            $('#bundleTable').DataTable().search(this.value).draw();
        });
    });
    
    function exportData(type) {
        const searchQuery = $('#searchUser').val();
        const roofType = $('#roofTypeInput').val();
        const timeFilter = $('#timeFilter').val();
        
        let url = type === 'csv' 
            ? "{{ route('admin.bundle.download.reportCSV') }}" 
            : "{{ route('admin.bundle.download.reportPDF') }}";
            
        url += `?search=${encodeURIComponent(searchQuery)}` + 
               `&roof_type=${encodeURIComponent(roofType)}` +
               `&time_filter=${encodeURIComponent(timeFilter)}`;
        
        window.location.href = url;
    }
    $(document).ready(function() {
        $('.roof-type-option').click(function(e) {
            e.preventDefault();
            const roofType = $(this).data('value');
            $('#roofTypeInput').val(roofType);
            $('#filterForm').submit();
        });

        $('#timeFilter').change(function() {
            const timeFilter = $(this).val();
            const url = new URL(window.location.href);
            url.searchParams.set('time_filter', timeFilter);
            window.location.href = url.toString();
        });
    });
</script>
@endsection