@extends('layouts.app')

@section('title', 'Performance Report - Tiqkets')

@section('page-title', 'Performance Report')

@section('header-action')
    <button class="btn-add">Export</button>
@endsection

@push('styles')
    <style>
        .filters-section {
            background: white;
            border-radius: 12px;
            padding: 24px;
            margin-bottom: 24px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .filter-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            align-items: end;
        }

        .filter-group {
            display: flex;
            flex-direction: column;
        }

        .filter-label {
            font-size: 14px;
            font-weight: 500;
            color: #374151;
            margin-bottom: 8px;
        }

        .filter-input,
        .filter-select {
            padding: 10px 14px;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            font-size: 14px;
            color: #374151;
            background: white;
            transition: all 0.2s;
        }

        .filter-input:focus,
        .filter-select:focus {
            outline: none;
            border-color: #7c2d5e;
            box-shadow: 0 0 0 3px rgba(124, 45, 94, 0.1);
        }

        .search-wrapper {
            position: relative;
        }

        .search-icon {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: #9ca3af;
            pointer-events: none;
        }

        .date-input-wrapper {
            position: relative;
        }

        .calendar-icon {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: #9ca3af;
            pointer-events: none;
        }

        .filter-input[type="text"] {
            padding-right: 40px;
        }

        .stats-col {
            text-align: center;
            font-weight: 500;
            color: #111827;
        }

        @media (max-width: 768px) {
            .filter-row {
                grid-template-columns: 1fr;
            }

            .filters-section {
                padding: 16px;
            }
        }
    </style>
@endpush

@section('content')
    <!-- Filters Section -->
    <div class="filters-section">
        <div class="filter-row">
            <div class="filter-group">
                <label class="filter-label">Search</label>
                {{-- <div class="search-wrapper">
                    <input
                        type="text"
                        class="filter-input"
                        placeholder="Search"
                        value=""
                    >
                    <i class="fas fa-search search-icon"></i>
                </div> --}}
                <div class="input-group mb-3">
                    <input type="text" class="form-control" placeholder="Search">
                    <span class="input-group-text" id="basic-addon2"><i class="fas fa-search"></i></span>
                </div>
            </div>

            <div class="filter-group">
                <label class="filter-label">Date</label>
                {{-- <div class="date-input-wrapper">
                    <input type="text" class="filter-input" placeholder="Select date range"
                        value="20 Oct 2025 to 21 Oct 2025" readonly>
                    <i class="far fa-calendar calendar-icon"></i>
                </div> --}}
                <div class="input-group mb-3">
                    <input type="text" class="form-control" placeholder="Search">
                    <span class="input-group-text" id="basic-addon2"><i class="far fa-calendar"></i></span>
                </div>
            </div>

            <div class="filter-group">
                <label class="filter-label">Branch</label>
                {{-- <select class="form-select" aria-describedby="validationServer04Feedback" required>
                    <option selected>All Branches</option>
                    <option>Briyani Brothers, RK Puram</option>
                    <option>Briyani Brothers, Peelamedu</option>
                    <option>Briyani Brothers, Lakshmi Mills</option>
                </select> --}}
                <div class="input-group mb-3">
                <select class="form-select" aria-label="Default select example">
                   <option selected>All Branches</option>
                    <option>Briyani Brothers, RK Puram</option>
                    <option>Briyani Brothers, Peelamedu</option>
                    <option>Briyani Brothers, Lakshmi Mills</option>
                </select>
                </div>
            </div>
        </div>
    </div>

    <!-- Performance Table -->
    <div class="table-card">
        <table class="table">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Branch Name</th>
                    <th class="stats-col">Walkins</th>
                    <th class="stats-col">Manual Entries</th>
                    <th class="stats-col">Cancelled</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <div class="contact-details">23 Jul, 2025</div>
                    </td>
                    <td>
                        <div class="branch-name">Briyani Brothers, RK Puram</div>
                    </td>
                    <td class="stats-col">23</td>
                    <td class="stats-col">12</td>
                    <td class="stats-col">4</td>
                </tr>
                <tr>
                    <td>
                        <div class="contact-details">5 Aug, 2024</div>
                    </td>
                    <td>
                        <div class="branch-name">Briyani Brothers, Peelamedu</div>
                    </td>
                    <td class="stats-col">3</td>
                    <td class="stats-col">1</td>
                    <td class="stats-col">17</td>
                </tr>
                <tr>
                    <td>
                        <div class="contact-details">12 Sep, 2023</div>
                    </td>
                    <td>
                        <div class="branch-name">Briyani Brothers, Lakshmi Mills</div>
                    </td>
                    <td class="stats-col">42</td>
                    <td class="stats-col">2</td>
                    <td class="stats-col">8</td>
                </tr>
            </tbody>
        </table>
    </div>
@endsection

@push('scripts')
    <script>
        // You can add date picker initialization here
        // Example with a date range picker library
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize your date picker here
            console.log('Performance Report page loaded');
        });
    </script>
@endpush