��JFIF��`�`��Viewing File: /home/u820193700/domains/throtllr.com/public_html/js/pages/ToursList.js
const { useState, useEffect } = React;
const { Link } = ReactRouterDOM;

function ToursList() {
    const [allTours, setAllTours] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState('');

    // Filters
    const [filterLocation, setFilterLocation] = useState('');
    const [filterMonth, setFilterMonth] = useState('');
    const [filterYear, setFilterYear] = useState('');

    // Applied Filters
    const [appliedFilters, setAppliedFilters] = useState({
        location: '',
        month: '',
        year: ''
    });

    const fetchTours = () => {
        setLoading(true);
        window.fetchAPI('/tours.php')
            .then(res => {
                setAllTours(res.data);
                setLoading(false);
            })
            .catch(err => {
                setError(err.message);
                // Fallback tours if db is down
                setAllTours([
                    {
                        id: 'f1',
                        title: 'Spiti Valley Expedition',
                        description: 'Ride through the high altitude cold desert of Spiti. Rugged terrains and ancient monasteries.',
                        start_location: 'Shimla',
                        end_location: 'Kaza',
                        duration_days: 12,
                        start_date: '2026-08-05',
                        price: 45000,
                        showroom_name: 'Avahan Delhi Royal',
                        image_url: 'https://images.unsplash.com/photo-1591154665854-01dbaf614bd8?w=800'
                    },
                    {
                        id: 'f2',
                        title: 'Desert Storm: Rajasthan',
                        description: 'Explore the royal forts and dunes of Rajasthan on two wheels.',
                        start_location: 'Jaipur',
                        end_location: 'Jaisalmer',
                        duration_days: 8,
                        start_date: '2026-11-20',
                        price: 28000,
                        showroom_name: 'Avahan Delhi Royal',
                        image_url: 'https://images.unsplash.com/photo-1599940778173-e276d4acb2bb?w=800'
                    },
                    {
                        id: 'f3',
                        title: 'Sikkim Silk Route',
                        description: 'Breathtaking heights and winding roads of the historic Silk Route.',
                        start_location: 'Siliguri',
                        end_location: 'Gangtok',
                        duration_days: 7,
                        start_date: '2026-05-10',
                        price: 32000,
                        showroom_name: 'Avahan BLR Adventure',
                        image_url: 'https://images.unsplash.com/photo-1587582423116-ec07293f0395?w=800'
                    }
                ]);
                setLoading(false);
            });
    };

    useEffect(() => {
        fetchTours();
    }, []);

    // Generate Year Dropdown options (Current year +/- 3 years)
    const currentYear = new Date().getFullYear();
    const availableYears = [];
    for (let i = currentYear - 3; i <= currentYear + 3; i++) {
        availableYears.push(i.toString());
    }

    const filteredTours = allTours.filter(tour => {
        if (appliedFilters.location) {
            const loc = appliedFilters.location.toLowerCase();
            const tourLoc = (tour.start_location + ' ' + (tour.end_location || '') + ' ' + (tour.showroom_name || '') + ' ' + tour.title).toLowerCase();
            if (!tourLoc.includes(loc)) return false;
        }

        const date = new Date(tour.start_date);
        const tourMonth = (date.getMonth() + 1).toString().padStart(2, '0');
        const tourYear = date.getFullYear().toString();

        if (appliedFilters.month && tourMonth !== appliedFilters.month) return false;
        if (appliedFilters.year && tourYear !== appliedFilters.year) return false;

        return true;
    });

    const handleApplyFilters = () => {
        setAppliedFilters({
            location: filterLocation,
            month: filterMonth,
            year: filterYear
        });
    };

    const handleClearFilters = () => {
        setFilterLocation('');
        setFilterMonth('');
        setFilterYear('');
        setAppliedFilters({ location: '', month: '', year: '' });
    };

    return (
        <div className="container mt-5 mb-5">
            <div className="mb-5 animate-fade">
                <h1 className="mb-4">Available Tours</h1>

                {/* Edelweiss-Style Filter Bar */}
                <div className="card" style={{ padding: '25px', background: 'rgba(24, 24, 27, 0.8)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.05)', borderRadius: '12px' }}>
                    <div className="filter-bar-responsive">
                        <div className="filter-item" style={{ flex: '1 1 250px' }}>
                            <label className="form-label">DESTINATION / KEYWORD</label>
                            <div style={{ position: 'relative' }}>
                                <i className="fa-solid fa-location-dot" style={{ position: 'absolute', left: '15px', top: '50%', transform: 'translateY(-50%)', color: 'var(--text-muted)' }}></i>
                                <input
                                    type="text"
                                    className="form-control"
                                    placeholder="Where to?"
                                    value={filterLocation}
                                    onChange={(e) => setFilterLocation(e.target.value)}
                                    style={{ paddingLeft: '40px', width: '100%', height: '48px' }}
                                />
                            </div>
                        </div>
                        <div className="filter-item" style={{ flex: '1 1 150px' }}>
                            <label className="form-label">MONTH</label>
                            <div style={{ position: 'relative' }}>
                                <i className="fa-regular fa-calendar" style={{ position: 'absolute', left: '15px', top: '50%', transform: 'translateY(-50%)', color: 'var(--text-muted)' }}></i>
                                <select
                                    className="form-control"
                                    value={filterMonth}
                                    onChange={e => setFilterMonth(e.target.value)}
                                    style={{ paddingLeft: '40px', width: '100%', height: '48px', appearance: 'none' }}
                                >
                                    <option value="">All Months</option>
                                    <option value="01">January</option>
                                    <option value="02">February</option>
                                    <option value="03">March</option>
                                    <option value="04">April</option>
                                    <option value="05">May</option>
                                    <option value="06">June</option>
                                    <option value="07">July</option>
                                    <option value="08">August</option>
                                    <option value="09">September</option>
                                    <option value="10">October</option>
                                    <option value="11">November</option>
                                    <option value="12">December</option>
                                </select>
                                <i className="fa-solid fa-chevron-down" style={{ position: 'absolute', right: '15px', top: '50%', transform: 'translateY(-50%)', color: 'var(--text-muted)', pointerEvents: 'none' }}></i>
                            </div>
                        </div>
                        <div className="filter-item" style={{ flex: '1 1 150px' }}>
                            <label className="form-label">YEAR</label>
                            <div style={{ position: 'relative' }}>
                                <select
                                    className="form-control"
                                    value={filterYear}
                                    onChange={e => setFilterYear(e.target.value)}
                                    style={{ width: '100%', height: '48px', appearance: 'none', paddingLeft: '15px' }}
                                >
                                    <option value="">All Years</option>
                                    {availableYears.map(year => (
                                        !isNaN(year) && <option key={year} value={year}>{year}</option>
                                    ))}
                                </select>
                                <i className="fa-solid fa-chevron-down" style={{ position: 'absolute', right: '15px', top: '50%', transform: 'translateY(-50%)', color: 'var(--text-muted)', pointerEvents: 'none' }}></i>
                            </div>
                        </div>
                        <div className="filter-actions">
                            <button
                                className="btn"
                                style={{ height: '48px', padding: '0 25px' }}
                                onClick={handleApplyFilters}
                            >
                                Apply Filters
                            </button>
                            <button
                                className="btn btn-outline"
                                style={{ height: '48px', padding: '0 25px' }}
                                onClick={handleClearFilters}
                            >
                                Clear
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            {loading && <div className="text-center mt-5"><i className="fa-solid fa-circle-notch fa-spin fa-3x" style={{ color: 'var(--primary-color)' }}></i></div>}
            {error && !allTours.length && <div className="mb-3" style={{ color: 'var(--danger)', padding: '10px', backgroundColor: 'rgba(220, 53, 69, 0.1)' }}>{error}</div>}

            {!loading && !error && filteredTours.length === 0 && (
                <div className="card text-center" style={{ padding: '60px 20px', backgroundColor: 'transparent', border: '1px dashed var(--border-color)' }}>
                    <i className="fa-solid fa-route" style={{ fontSize: '3.5rem', color: 'var(--text-muted)', marginBottom: '15px' }}></i>
                    <h3>No matching tours found</h3>
                    <p className="text-muted">Try removing some filters or adjusting your destination keyword.</p>
                </div>
            )}

            {!loading && filteredTours.length > 0 && (
                ['Easy', 'Moderate', 'Professional'].map(level => {
                    const levelTours = filteredTours.filter(tour => {
                        const diff = parseFloat(tour.difficulty || 3);
                        if (level === 'Easy') return diff <= 2;
                        if (level === 'Moderate') return diff > 2 && diff <= 3;
                        if (level === 'Professional') return diff > 3;
                        return false;
                    });

                    if (levelTours.length === 0) return null;

                    return (
                        <div key={level} className="mb-5">
                            <h3 className="mb-3 premium-header">
                                <span className="section-indicator"></span>
                                {level === 'Easy' ? 'Easy Rides' : level === 'Moderate' ? 'Moderate Adventures' : 'Professional Expeditions'}
                            </h3>
                            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: '30px' }}>
                                {levelTours.map(tour => (
                                    <div key={tour.id} className="card tour-card" style={{ cursor: 'pointer', padding: 0, overflow: 'hidden', position: 'relative' }}>
                                        <Link to={`/tour/${tour.id}`} style={{ textDecoration: 'none', color: 'inherit', display: 'block', height: '100%', position: 'relative' }}>
                                            {tour.package_id ? (
                                                <div style={{ position: 'absolute', top: '10px', right: '10px', backgroundColor: 'var(--success)', color: 'white', padding: '4px 8px', borderRadius: '4px', fontSize: '0.75rem', fontWeight: 'bold', zIndex: 10, display: 'flex', alignItems: 'center', gap: '5px', boxShadow: '0 2px 4px rgba(0,0,0,0.2)' }}>
                                                    <i className="fa-solid fa-circle-check"></i> Admin Verified
                                                </div>
                                            ) : null}
                                            <div style={{ position: 'relative', overflow: 'hidden', aspectRatio: '16/9' }}>
                                                <img src={tour.image_url || 'https://images.unsplash.com/photo-1558981403-c5f9899a28bc?w=500'} alt={tour.title} className="card-img" style={{ margin: 0, borderRadius: 0, borderBottom: '2px solid var(--primary-color)', width: '100%', height: '100%', objectFit: 'cover' }} />
                                            </div>
                                            <div className="card-body" style={{ padding: '20px', display: 'flex', flexDirection: 'column', height: '100%' }}>
                                                <div style={{ minHeight: '3.2rem', marginBottom: '8px' }}>
                                                    <h3 className="card-title line-clamp-2" style={{ fontSize: '1.3rem', color: 'white', fontWeight: '800', margin: 0 }}>{tour.title.toUpperCase()}</h3>
                                                </div>
                                                <p style={{ fontSize: '0.85rem', color: 'var(--primary-color)', marginBottom: '12px', fontWeight: 'bold', display: 'flex', alignItems: 'center', gap: '8px' }}>
                                                    <i className="fa-solid fa-building"></i> Hosted by: {tour.showroom_name || tour.dealer_name || 'Dealer'}
                                                </p>
                                                
                                                <div className="d-flex justify-between align-center mb-2" style={{ color: 'var(--text-muted)', fontSize: '0.85rem' }}>
                                                    <span><i className="fa-regular fa-calendar" style={{ marginRight: '8px' }}></i> {new Date(tour.start_date).toLocaleDateString()} ({tour.duration_days} Days)</span>
                                                </div>
                                                
                                                <div className="mb-3">
                                                    <div style={{ fontSize: '0.85rem', color: 'var(--text-muted)', marginBottom: '8px' }}>
                                                        Available Slots: <span style={{ color: 'var(--success)', fontWeight: 'bold' }}>{tour.available_slots}/{tour.max_riders}</span>
                                                    </div>
                                                    <div style={{ fontSize: '1rem', color: '#fbbf24' }}>
                                                        {Array.from({ length: 5 }).map((_, i) => {
                                                            const diff = parseFloat(tour.difficulty || 3);
                                                            if (i < Math.floor(diff)) return <i key={i} className="fa-solid fa-star"></i>;
                                                            if (i === Math.floor(diff) && diff % 1 !== 0) return <i key={i} className="fa-solid fa-star-half-stroke"></i>;
                                                            return <i key={i} className="fa-regular fa-star"></i>;
                                                        })}
                                                    </div>
                                                </div>
 
                                                <div className="d-flex justify-between align-center mt-3 pt-3" style={{ borderTop: '1px solid rgba(255,255,255,0.05)' }}>
                                                    <div style={{ display: 'flex', flexDirection: 'column' }}>
                                                        <span style={{ fontSize: '1.4rem', fontWeight: '900', color: 'var(--primary-color)' }}>₹{parseFloat(tour.price).toLocaleString()}</span>
                                                    </div>
                                                    <span className="btn-view-premium">VIEW</span>
                                                </div>
                                            </div>
                                        </Link>
                                    </div>
                                ))}
                            </div>
                        </div>
                    );
                })
            )}
        </div>
    );
}
Back to Directory ��}�!1AQa"q2��#B��R��$3br� %&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz�� w�!1AQaq"2�B�� #3R�br� $4�%�&'()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz��?��_��+��?��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��