@extends('app')
@section('content')
    <div class="campaign-container">
        <div class="main-content container-fluid px-lg-5 py-3">
            <div class="image-container d-block d-md-flex  align-items-center text-center text-md-start">
                <a class="logo-img" href="{{ '/' }}"></a>
                <div class="btn-group btn-group-toggle button-header pt-3 pt-md-0" data-toggle="buttons">
                    <a href="{{ '/register' }}" class="btn btn-sign-in sign-up">Sign Up</a>
                    <a href="{{ '/choose-role' }}" class="btn btn-brown-signup sign-in"> Sign In</a>
                </div>
            </div>
            <div class="row mx-auto">
                <div class="col-xl-5 col-12 d-flex align-items-center">
                    <div class="pt-2 pt-md-5">
                        <h1 class="text-blue campaing-header text-wrap">Attract, Active, Engage and Procure,Donor for
                            Life! </h1>
                        <p class="campaing-text text-grey pe-5">
                            FundMeSmart™ promotes your fundraiser on the Apple and Google marketplaces to help generate
                            ongoing revenue streams and increase awareness. Select your brand application below. If you
                            don’t see it listed, no worries—just select “Other.”
                        </p>
                    </div>
                </div>
                <div class="col-xl-7 col-12">
                    <div class="browse-fundraisers-content-cover pt-xl-5 mt-5 mt-xl-0">
                        <div class="row browse-fundraisers-images text-center">

                            @php
                                switch (config('app.env')) {
                                    case 'local':
                                    case 'development':
                                        $redirectURL = 'https://dev.grandslamnetwork.org/';
                                         $ndnURL = 'https://dev.nationaldefensenetwork.org/';
                                        break;
                                    case 'staging':
                                        $redirectURL = 'https://stg.grandslamnetwork.org/';
                                        $ndnURL = 'https://stg.nationaldefensenetwork.org/';
                                        break;
                                    default:
                                        $redirectURL = 'https://grandslamnetwork.org/';
                                        $ndnURL = 'https://nationaldefensenetwork.org/';
                                        break;
                                }

                                $sports = [
                                    [
                                        'name' => 'Baseball',
                                        'image' => 'browse_baseball.webp',
                                        'status' => 'live',
                                        'link' => $redirectURL,
                                    ],
                                     [
                                        'name' => 'Softball',
                                        'image' => 'browse_softball.webp',
                                        'status' => 'live',
                                        'link' => $redirectURL,
                                    ],
                                    [
                                        'name' => 'Hero',
                                        'image' => 'browse_hero.webp',
                                        'status' => 'live',
                                         'link' => $ndnURL,

                                    ],
                                    [
                                        'name' => 'Bands',
                                        'image' => 'browse_bands.webp',
                                        'status' => 'fms',
                                        'modal' => 'Bands is coming soon.',
                                    ],
                                    [
                                        'name' => 'Cheer',
                                        'image' => 'browse_cheer.webp',
                                        'status' => 'fms',
                                        'modal' => 'Cheer is coming soon.',
                                    ],
                                    [
                                        'name' => 'Creative',
                                        'image' => 'browse_creative.webp',
                                        'status' => 'fms',
                                        'modal' => 'Creative is coming soon.',
                                    ],
                                    [
                                        'name' => 'Golf',
                                        'image' => 'browse_golf.webp',
                                        'status' => 'fms',
                                        'modal' => 'Golf is coming soon.',
                                    ],
                                    [
                                        'name' => 'Health',
                                        'image' => 'browse_health.webp',
                                        'status' => 'fms',
                                        'modal' => 'Health is coming soon.',
                                    ],
                                    [
                                        'name' => 'Soccer',
                                        'image' => 'browse_soccer.webp',
                                        'status' => 'fms',
                                        'modal' => 'Soccer is coming soon.',
                                    ],
                                    [
                                        'name' => 'Faith',
                                        'image' => 'browse_faith.webp',
                                        'status' => 'fms',
                                        'modal' => 'Faith is coming soon.',
                                    ],
                                    [
                                        'name' => 'School',
                                        'image' => 'browse_school.webp',
                                        'status' => 'fms',
                                        'modal' => 'School is coming soon.',
                                    ],

                                    [
                                        'name' => 'Tennis',
                                        'image' => 'browse_tennis.webp',
                                        'status' => 'fms',
                                        'modal' => 'Tennis is coming soon.',
                                    ],

                                    ['name'=>'Volleyball','image'=>'browse_volleyball.webp','status'=>'fms','modal'=>'Volleyball is coming soon.'],
                                     [
                                        'name' => 'Basketball',
                                        'image' => 'browse_basketball.webp',
                                        'status' => 'fms',
                                        'modal' => 'Basketball is coming soon.',
                                    ],
                                    ['name'=>'Pickleball','image'=>'browse_pickleball.webp','status'=>'fms','modal'=>'Pickleball is coming soon.'],
                                    ['name'=>'Other','image'=>'browse_other.webp','status'=>'fms','link'=>'/register'],
                                ];
                            @endphp

                            @foreach ($sports as $sport)
                                <div class="col-6 col-md-4 col-lg-3 mb-3">
                                    <div class="sport-card mb-3">
                                        @if (isset($sport['link']))
                                            <a href="{{ $sport['link'] }}" target="_blank" class="browse-image">
                                                <img src="{{ Vite::asset('resources/images/' . $sport['image']) }}"
                                                    alt="{{ $sport['name'] }}" class="bf-card-img mt-3 w-75">
                                            </a>
                                        @else
                                            <div class="browse-image mt-3" role="button" data-bs-toggle="modal"
                                                data-bs-target="#browse-modal" data-param="{{ $sport['modal'] }}"
                                                name="{{ $sport['name'] }}">
                                                <img src="{{ Vite::asset('resources/images/' . $sport['image']) }}"
                                                    alt="{{ $sport['name'] }}" class="bf-card-img w-75">
                                            </div>
                                        @endif
                                          <div class=" pt-3 fw-bold {{ $sport['status'] }}">
                                            {{ strtoupper($sport['status']) }}
                                          </div>
                                    </div>
                                </div>
                            @endforeach


                        </div>
                        {{-- <div class="text-center">
                            <a href="{{ '/register' }}" class="btn btn-blue px-5 mt-3">Other</a>
                        </div> --}}
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="browse-modal" tabindex="-1" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="text-end">
                            <button type="button" class="btn close-browse" data-bs-dismiss="modal" aria-label="Close">
                                <i class="fa-solid fa-xmark"></i>
                            </button>
                        </div>
                        <div class="p-4 text-center">
                            <div class="image-campaign"></div>
                            <div class="image-name pt-3"></div>
                        </div>
                        <div class="text-center mb-3">
                            <p class="mb-2 fs-6">Fundmesmart.<span class="text-blue browse-text"></span></p>
                            <p class="fs-6">All fundraisers will be using FundMeSmart for now.</p>
                            <a class="btn btn-lg btn-blue browser-redirect-btn" href="/register">Start a
                                FundMeSmart™ Campaign Today!</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @Vite(['resources/js/admin_signup.js'])
@endsection