@extends('layouts.app')
@section('title', 'Availability Report')

@section('content')
    <div class="fixed-action-bar d-flex align-items-center justify-content-between">
        <div class="fw-semibold fixed-nav-title">@yield('title')</div>
        <div class="d-flex align-items-center">
            <!-- Additional Actions (Left) -->
            <!-- Excel Export -->
            <a href="{{ route('posm.reports.availability.excel', request()->all()) }}">
                <i class="fa-solid fa-file-excel fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center mx-1 theme-green"
                    data-toggle="tooltip" title="Export to Excel"></i>
            </a>

            <div class="ms-auto d-flex align-items-center">
                <!-- Mandatory Action Set (Right) -->
                <!-- Add -->
                <i class="fa-regular fa-plus fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Add" style="cursor: default;"></i>

                <!-- Save -->
                <i class="fa-regular fa-save fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Save" style="cursor: default;"></i>

                <!-- Edit -->
                <i class="fa-regular fa-edit fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Edit" style="cursor: default;"></i>

                <!-- Delete -->
                <i class="fa-regular fa-trash-can fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Delete" style="cursor: default;"></i>

                <!-- Close -->
                <a href="{{ route('posm.reports.dashboard') }}">
                    <i class="fa-solid fa-xmark fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center mx-1"
                        data-toggle="tooltip" title="Close"></i>
                </a>

                <!-- Column Visibility -->
                <i class="fa-solid fa-columns fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Columns" style="cursor: default;"></i>
            </div>
        </div>
    </div>

    <div class="card mt-3 rounded-border">
        <div class="card-body">
            <form id="filtersForm" action="{{ route('posm.reports.availability') }}" method="GET">
                <div class="row">
                    <div class="col-md-8">
                        <div class="input-group mb-3">
                            <input type="text" class="form-control" placeholder="Type and press enter to search"
                                aria-label="Search Reports" name="search"
                                value="{{ request('search') }}">
                        </div>
                    </div>
                    <div class="col-md-2 d-grid">
                        <button type="button" class="btn btn-de-dark filter-btn"
                            data-toggle="collapse" data-target="#filtersCollapse" aria-expanded="false"
                            aria-controls="filtersCollapse">Filters</button>
                    </div>
                    <div class="col-md-2">
                        <select id="perPageFilter" class="form-control" aria-label="select example">
                            <option value="10" {{ session('perPage', 10)==10 ? 'selected' : '' }}>10 Rows</option>
                            <option value="25" {{ session('perPage')==25 ? 'selected' : '' }}>25 Rows</option>
                            <option value="50" {{ session('perPage')==50 ? 'selected' : '' }}>50 Rows</option>
                            <option value="100" {{ session('perPage')==100 ? 'selected' : '' }}>100 Rows</option>
                        </select>
                    </div>
                </div>
                <div class="collapse {{ request()->hasAny(['outlet_id','status']) ? 'show' : '' }}" id="filtersCollapse">
                    <div class="row mt-2">
                        <div class="col-md-4">
                            <label for="outlet_id" class="form-label">Outlet / Location</label>
                            <select class="form-control select2" id="outlet_id" name="outlet_id"
                                onchange="document.getElementById('filtersForm').submit()">
                                <option value="">All Outlets</option>
                                @foreach($outlets as $outlet)
                                    <option value="{{ $outlet->id }}" {{ request('outlet_id') == $outlet->id ? 'selected' : '' }}>
                                        {{ $outlet->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="status" class="form-label">Compliance Status</label>
                            <select class="form-control" id="status" name="status"
                                onchange="document.getElementById('filtersForm').submit()">
                                <option value="">All Statuses</option>
                                <option value="compliant" {{ request('status') == 'compliant' ? 'selected' : '' }}>Compliant</option>
                                <option value="non_compliant" {{ request('status') == 'non_compliant' ? 'selected' : '' }}>Non-Compliant</option>
                            </select>
                        </div>
                    </div>
                    <br>
                    <a href="{{ route('posm.reports.availability') }}" class="btn btn-primary">Clear</a>
                </div>
            </form>

            <div class="table-responsive">
                <table class="table table-striped">
                    <thead class="bg-light">
                        <tr>
                            <th scope="col">Audit Date</th>
                            <th scope="col">Outlet Name</th>
                            <th scope="col">Audited By</th>
                            <th scope="col" class="text-center">Items Audited</th>
                            <th scope="col" class="text-center">Compliance</th>
                            <th scope="col">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($reports as $report)
                            <tr>
                                <td class="fw-bold">
                                    {{ $report->submitted_at ? $report->submitted_at->format('Y-m-d') : '-' }}
                                </td>
                                <td>
                                    <div class="fw-bold">{{ $report->outlet->name ?? 'Unknown' }}</div>
                                    <div class="small text-muted">{{ Str::limit($report->outlet->address ?? '', 30) }}</div>
                                </td>
                                <td>{{ $report->submittedBy->name ?? 'System' }}</td>
                                <td class="text-center">
                                    <span class="badge bg-light text-dark border">{{ $report->items->count() }}</span>
                                </td>
                                <td class="text-center">
                                    @if($report->geo_tag_match)
                                        <span class="badge bg-soft-success text-success rounded-pill px-3"><i
                                                class="fa-solid fa-check me-1"></i> Pass</span>
                                    @else
                                        <span class="badge bg-soft-danger text-danger rounded-pill px-3"><i
                                                class="fa-solid fa-xmark me-1"></i> Fail</span>
                                    @endif
                                </td>
                                <td>
                                    <div class="d-inline-flex table-action-btns">
                                        @if(!$report->order)
                                            <span class="action-btn">
                                                <a href="{{ route('posm.orders.create', ['availability_report_id' => $report->id]) }}" title="Create Order">
                                                    <i class="fa-solid fa-cart-plus rounded-5 p-1 d-inline-flex align-items-center justify-content-center action-btn theme-green"></i>
                                                </a>
                                            </span>
                                        @else
                                            <span class="action-btn">
                                                <a href="{{ route('posm.orders.show', $report->order->id) }}" title="View Linked Order">
                                                    <i class="fa-solid fa-receipt rounded-5 p-1 d-inline-flex align-items-center justify-content-center action-btn theme-blue"></i>
                                                </a>
                                            </span>
                                        @endif
                                        <span class="action-btn">
                                            <a href="{{ route('posm.reports.availability.show', $report->id) }}" title="View Audit">
                                                <i class="fa-regular fa-eye rounded-5 p-1 d-inline-flex align-items-center justify-content-center action-btn theme-blue"></i>
                                            </a>
                                        </span>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center py-4 text-muted">No availability audits found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="d-flex justify-content-between mt-4 align-items-center">
                <div style="font-size: 14px;" class="fw-normal">
                    Showing {{ $reports->firstItem() ?? 0 }} to {{ $reports->lastItem() ?? 0 }} of {{ $reports->total() }} entries
                </div>
                <div>
                    {{ $reports->appends(request()->query())->links() }}
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        if (document.getElementById('perPageFilter')) {
            document.getElementById('perPageFilter').addEventListener('change', function () {
                const perPage = this.value;
                const urlParams = new URLSearchParams(window.location.search);
                urlParams.set('perPage', perPage);
                window.location.href = '{{ route("posm.reports.availability") }}?' + urlParams.toString();
            });
        }

        function exportToCSV() {
            const table = document.querySelector('table');
            let csv = [];
            const rows = table.querySelectorAll('tr');

            for (let i = 0; i < rows.length; i++) {
                const row = [], cols = rows[i].querySelectorAll('td, th');

                for (let j = 0; j < cols.length - 1; j++) {
                    let data = cols[j].innerText.replace(/(\r\n|\n|\r)/gm, ' ').replace(/\s+/g, ' ').trim();
                    row.push('"' + data + '"');
                }

                csv.push(row.join(','));
            }

            const csvFile = new Blob([csv.join('\n')], { type: 'text/csv' });
            const downloadLink = document.createElement('a');
            downloadLink.download = 'availability_report_' + new Date().toISOString().split('T')[0] + '.csv';
            downloadLink.href = window.URL.createObjectURL(csvFile);
            downloadLink.style.display = 'none';
            document.body.appendChild(downloadLink);
            downloadLink.click();
            document.body.removeChild(downloadLink);
        }
    </script>
@endpush