@extends('layouts.master')
@section('content')

    <section class="our-teams">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-3 col-sm-12">
                    <aside>
                        <div class="title">
                            <h4>Search</h4>
                        </div>
                        
                        <form action={{route('team.filter')}} method="GET">
                            <!--@csrf-->
                            <div class="form-group">
                                <label for="email-id">Email/Login ID</label>
                                <input type="text" name="email" class="form-control" id="email-id" placeholder="Email/Login ID">
                            </div>
                            <div class="form-group">
                                <label for="about">Select Team</label>
                                <select class="form-control" id="about" name="team_id">
                                    <option value="" selected>Please Select</option>
                                    @foreach($joinAsTypes as $key => $event)
                                        <option value="{{$event->id}}">{{$event->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="about">Select Events</label>
                                <select class="form-control" id="about" name="event_id">
                                    <option value="" selected>Please Select</option>
                                    @foreach($events as $key => $event)
                                        <option value="{{$event->id}}">{{$event->session['title']}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="about">Select Division</label>
                                <select class="form-control" name="division_id" id="division">
                                    <option value="" selected>Please Select</option>
                                    @foreach($divisions as $key => $divission)
                                        <option value="{{$divission->id}}">{{$divission->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="about">Select District</label>
                                <select name="district_id" id="district" class="form-control">
                                    <option value="">Select District</option>
                                </select>
                            </div>
                            <div class="search-btn">
                                <button class="btn">Search</button>
                            </div>
                        </form>
                    </aside>
                </div>
                
                <div class="col-lg-9 col-sm-12">
                    <div class="teams">
                        @foreach($mentors as $team)
                        <div class="team-member" style="background-image: url({{ asset('public/best2.jpg') }})">
                            <div class="image">
                                <img src="{{ URL::to('storage/app/public/' . $team->profile_image)}}"/>
                            </div>
                            <div class="informations">
                                <span>{{$team->join['name']}}</span>
                                <h4>{{$team->full_name}}</h4>
                                <h5>{{$team->class_level_designation}}</h5>
                                <p>{{$team->institute}}</p>
                                <p><?php echo str_limit($team->address, 25); ?></p>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        
    </section>

@endsection
<style>
    section.rewards .contact-forms .contact-form button {
    background: #bf7b24;
    border-radius: 8px;
    display: inline-block;
    padding: 13px 28px;
    font-size: 16px;
    font-weight: 700;
    width: 100%;
    height: 50px !important;
    line-height: normal;
    outline: none;
}
section.rewards .contact-forms {
    background: #10182f;
    padding: 25px;
    border-radius: 10px;
    height: auto !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 60px;
    align-items: center;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const divisionSelect = document.getElementById('division');
    const districtSelect = document.getElementById('district');

    divisionSelect.addEventListener('change', function() {
        let divisionId = this.value;
        
        // Clear previous options
        districtSelect.innerHTML = '<option value="">Select District</option>';

        if(divisionId) {
            fetch(`/get-districts/${divisionId}`)
                .then(response => response.json())
                .then(data => {
                    data.forEach(district => {
                        let option = document.createElement('option');
                        option.value = district.id;
                        option.text = district.name;
                        districtSelect.appendChild(option);
                    });
                })
                .catch(error => console.error('Error:', error));
        }
    });
});
</script>


@section('footer')
    @include('layouts.footer')
@endsection