@extends('layouts.master')

@section('title')
    Performance Report
@endsection

@section('css')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" />
@endsection

@section('content')
    <div class="bg-white px-4 py-3">
        <!-- Header -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h4 class="mb-0">Performance Report</h4>
            <a href="{{ route('reports.performance.export', request()->query()) }}" class="btn btn-success">
                <i class="fas fa-download"></i> Export Report
            </a>
        </div>

        <!-- Filters -->
        <div class="card mb-4">
            <div class="card-body">
                <form action="{{ route('reports.performance') }}" method="GET">
                    <div class="row g-3">
                        <!-- Date Range -->
                        <div class="col-md-3">
                            <label class="form-label">From Date</label>
                            <input type="date" name="date_from" class="form-control" value="{{ $filters['date_from'] }}">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">To Date</label>
                            <input type="date" name="date_to" class="form-control" value="{{ $filters['date_to'] }}">
                        </div>

                        <!-- Tenant Filter -->
                        <div class="col-md-2">
                            <label class="form-label">Tenant</label>
                            <select name="tenant_id" class="form-select" id="tenant-select">
                                <option value="">All Tenants</option>
                                @foreach ($tenants as $tenant)
                                    <option value="{{ $tenant->id }}"
                                        {{ $filters['tenant_id'] == $tenant->id ? 'selected' : '' }}>
                                        {{ $tenant->tenant_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Branch Filter -->
                        <div class="col-md-2">
                            <label class="form-label">Branch</label>
                            <select name="branch_id" class="form-select" id="branch-select">
                                <option value="">All Branches</option>
                                @foreach ($branches as $branch)
                                    <option value="{{ $branch->id }}" data-tenant="{{ $branch->cid }}"
                                        {{ $filters['branch_id'] == $branch->id ? 'selected' : '' }}>
                                        {{ $branch->branch_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Search -->
                        <div class="col-md-2">
                            <label class="form-label">Search</label>
                            <input type="text" name="search" class="form-control" placeholder="Search..."
                                value="{{ $filters['search'] }}">
                        </div>
                    </div>

                    <div class="mt-3">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-filter"></i> Apply Filters
                        </button>
                        <a href="{{ route('reports.performance') }}" class="btn btn-secondary">
                            <i class="fas fa-redo"></i> Reset
                        </a>
                    </div>
                </form>
            </div>
        </div>

        <!-- Results Table -->
        <div class="table-responsive">
            <table class="table table-bordered table-hover">
                <thead class="table-light">
                    <tr>
                        <th>S.No</th>
                        <th>Date</th>
                        {{-- <th>Tenant</th> --}}
                        <th>Tenant</th>
                        <th>Branch</th>
                        <th>Scanned Entries</th>
                        <th>Manual Entries</th>
                        <th>Reservation</th>
                        <th>Cancelled</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($performanceData as $index => $data)
                        <tr>
                            <td>{{ $loop->iteration + ($performanceData->currentPage() - 1) * $performanceData->perPage() }}
                            </td>

                            <td>{{ $data['date'] }}</td>
                            <td>{{ $data['tenant_name'] ?? 'N/A' }}</td>
                            <td>{{ $data['branch_name'] ?? 'N/A' }}</td>

                            <td><span class="badge bg-success">{{ $data['walk_ins'] }}</span></td>
                            <td><span class="badge bg-info text-dark">{{ $data['manual_entries'] }}</span></td>
                            <td><span class="badge bg-primary">{{ $data['reserved'] }}</span></td>
                            <td><span class="badge bg-danger">{{ $data['cancelled'] }}</span></td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="text-center text-muted py-4">
                                No performance records found
                            </td>
                        </tr>
                    @endforelse
                </tbody>

            </table>
        </div>

        <!-- Pagination -->
        <div class="d-flex justify-content-center mt-4">
            {{ $performanceData->appends(request()->query())->links('pagination::bootstrap-5')}}
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        // Filter branches based on selected tenant
        $('#tenant-select').on('change', function() {
            var tenantId = $(this).val();
            var branchSelect = $('#branch-select');

            branchSelect.find('option').each(function() {
                var option = $(this);
                if (option.val() === '') {
                    option.show();
                } else if (!tenantId || option.data('tenant') == tenantId) {
                    option.show();
                } else {
                    option.hide();
                }
            });

            branchSelect.val('');
        });
    </script>
@endsection