@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 ID</th>
                    <th>Tenant</th>
                    <th>Branch</th>
                    <th>Walk-ins</th>
                    <th>Manual Entries</th>
                    <th>Cancelled</th>
                    <th>No-Show</th>
                </tr>
            </thead>
            <tbody>
                @forelse($performanceData as $index => $data)
                    <tr>
                        <td>{{ $performanceData->firstItem() + $index }}</td>
                        <td>{{ \Carbon\Carbon::parse($data->report_date)->format('d-m-Y') }}</td>
                        <td>{{ $data->tenant_id }}</td>
                        <td>{{ $data->tenant_name }}</td>
                        <td>{{ $data->branch_name }}</td>
                        <td><span class="badge bg-success">{{ $data->walkins }}</span></td>
                        <td><span class="badge bg-info">{{ $data->manual_entries }}</span></td>
                        <td><span class="badge bg-warning">{{ $data->cancelled }}</span></td>
                        <td><span class="badge bg-danger">{{ $data->no_show }}</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() }}
    </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