@extends('layouts.main')
@section('title', 'Download Report')
@section('container')
    <style>
        /* General table header and filter styling for consistency */
        .filter-header {
            position: relative;
            cursor: pointer;
            user-select: none; /* Prevent accidental text selection */
        }

        .filter-icon {
            position: absolute;
            right: 8px; /* Adjusted spacing */
            top: 50%;
            transform: translateY(-50%);
            color: #6c757d; /* Standard muted color */
            pointer-events: none; /* Allows click-through to the header for sorting */
        }

        .filter-dropdown {
            position: absolute;
            background: white;
            border: 1px solid #dee2e6; /* Bootstrap border color */
            padding: 10px;
            z-index: 1000;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Soft shadow */
            display: none;
            min-width: 200px;
            left: 0; /* Align left for better visibility */
        }

        .pagination-info {
            margin-top: 8px;
            font-size: 0.875rem; /* Smaller, standard font size */
            color: #6c757d;
        }

        .table-responsive {
            margin-top: 15px; /* Add some spacing above the table */
        }

        .dropdown-item {
            cursor: pointer;
        }

        .column-toggle {
            margin-right: 8px;
        }

        .loading-spinner {
            display: inline-block;
            width: 1rem;
            height: 1rem;
            border: 0.15rem solid rgba(0, 0, 0, .1);
            border-radius: 50%;
            border-top-color: #F8B940;
            animation: spin 1s linear infinite; 
            vertical-align: middle;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        .btn-sm {
            padding: 0.25rem 0.5rem;
            font-size: 0.875rem;
        }

        ul.pagination li {
            margin: 0 2px;
            padding: 0;
        }

        ul.pagination .page-link {
            line-height: 1.25;
            padding: 0px 9px 10px 12px !important; 
            width: auto !important;
            border: none !important;
        }
        
        .form-control-sm {
            height: calc(1.5em + 0.5rem + 2px);
            padding: 0.25rem 0.5rem;
            font-size: 0.875rem;
        }

        .column-filter {
            margin-bottom: 5px;
        }
    </style>

    {{-- ************ table **************** --}}
    <div class="row">
        <div class="col-xl-12 col-lg-12">
            <div class="card shadow-sm" style="height: max-content;">
                {{-- Card Header with Title and Action Buttons --}}
                <div class="card-header d-flex justify-content-between align-items-center p-3"
                    style="background: var(--secondary); border-bottom: 1px solid rgba(0,0,0,.125);">
                    <h4 class="card-title text-white mb-0">Download Report</h4>
                </div>

                <div class="card-body">
                    {{-- General Filter Controls --}}
                    <form id="reportdownload">
                        @csrf
                        <div class="row mb-3 gx-2">
                            <div class="col-md-3 mb-2">
                                <label for="filterCompany" class="form-label visually-hidden">Company</label>
                                <select id="filterCompany" name="filterCompany" class="form-control form-control-sm">
                                    <option value="">-- All Companies --</option>
                                    @foreach($company as $row)
                                    <option value="{{ $row->id }}">{{ $row->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-3 mb-2">
                                <label for="filterZone" class="form-label visually-hidden">Zone</label>
                                <select id="filterZone" name="filterZone" class="form-control form-control-sm">
                                    <option value="">-- All Zones --</option>
                                </select>
                            </div>
                            <div class="col-md-3 mb-2">
                                <label for="filterUnit" class="form-label visually-hidden">Unit</label>
                                <select id="filterUnit" name="filterUnit" class="form-control form-control-sm">
                                    <option value="">-- All Units --</option>
                                </select>
                            </div>
                            <div class="col-md-3 mb-2">
                                <label for="filterProject" class="form-label visually-hidden">Project</label>
                                <select id="filterProject" name="filterProject" class="form-control form-control-sm">
                                    <option value="">-- All Projects --</option>
                                </select>
                            </div>
                            <div class="col-md-3 mb-2">
                                <label for="filterDistributors" class="form-label visually-hidden">Distributors</label>
                                <select id="filterDistributors" name="filterDistributors" class="form-control form-control-sm">
                                    <option value="">-- All Distibutor --</option>
                                </select>
                            </div>
                            <div class="col-md-3 mb-2">
                               <button type="submit" class="btn btn-primary btn-block">Download Report</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    
<div id="s1" class="d-none"></div>
<div id="s2" class="d-none"></div>
@endsection
<script nonce="{{ $cspNonce }}" src="{{ asset('public/js/jquery-3.6.0.min.js') }}"></script>
<script nonce="{{ $cspNonce }}" src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script nonce="{{ $cspNonce }}" src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>
<script nonce="{{ $cspNonce }}" src="{{ asset('js/report.js') }}"></script>