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

    <section class="registration">
        <div class="container-fluid">
            @if(session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif
            
            @if(session('error'))
                <div class="alert alert-danger">
                    {{ session('error') }}
                </div>
            @endif
            
            @if($errors->any())
                <div class="alert alert-danger">
                    <ul>
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                    </ul>
                </div>
            @endif
            <div class="row">
                <div class="col-lg-12">
                    <div class="title">
                        <h4>Join As a Participant</h4>
                        <h5>Student Of The Years</h5>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6 col-md-12">
                    <div class="swiper mySwiper" style='border: 2px solid #ce2418; border-radius: 8px; margin-bottom: 20px;'>
                        <div class="swiper-wrapper">
                            <div class="swiper-slide"><img src="{{ asset('/img/events.png') }}" style="width: 100%; "></div>
                            <div class="swiper-slide"><img src="{{ asset('/img/events.png') }}" style="width: 100%; "></div>
                        </div>
                    
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-12">
                    <form method="POST" action="{{ route('participants.store') }}">
                        {{ csrf_field() }}
                        <div class="form-group">
                            <label for="about">How did you know about us?</label>
                            <select class="form-control" id="about" name="source">
                                <option selected>Please Select</option>
                                <option value="Facebook">Facebook</option>
                                <option value="Mentor">Mentor</option>
                                <option value="Ambasedor">Ambasedor</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="about">Joining events</label>
                            <select class="form-control" id="about" name="event">
                                <option selected>Please Select</option>
                                @foreach($events as $event)
                                <option value="{{ $event->id }}">{{ $event->session['title']}}</option>
                                @endforeach
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="about">Participate Information</label>
                            <input type="text" name="name" class="form-control" id="name" placeholder="Enter your name">
                            <div class="flex">
                                <input type="email" name="email" class="form-control" id="email" placeholder="Enter your email">
                                <input type="number" name="mobile" class="form-control" id="mobile" placeholder="Enter your phone number">
                                <input type="text" name="institute" class="form-control" id="institute" placeholder="Enter your institute name">
                                <select class="form-control" name="class" id="about">
                                    <option selected>Please Select Class</option>
                                    @foreach($classes as $key => $val)
                                    <option value="{{ $val }}">{{ $val }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                         <div class="form-group">
                            <label for="about">Password</label>
                            <div class="flex">
                                <input type="password" name="password" class="form-control" id="password" placeholder="password">
                                <input type="password" name="password_confirmation" class="form-control" id="confirm-password" placeholder="confirm password">
                            </div>
                        </div>
                        
                        
                        {{-- <div class="form-group">
                            <label for="about">Have a Coupon?</label>
                            <div class="flex">
                                <input type="couponcode" name="couponcode" class="form-control" id="couponcode" placeholder="Coupon Code">
                                <input type="checkbox" name="coupon_code"  Value"2">
                            </div> 
                        </div> --}}
                        
                        <div class="form-group">
                            <label for="about">Bkash Payment</label>
                            <p>Pay with Bkash: <strong>{{$amount->amount}} BDT /- </strong></p>
                            <div class="payment">
                                <input type="checkbox" name="bkash_payment" value="1">
                                <img src="{{ asset('/img/bkash_logo_2.png') }}">
                            </div>
                        </div>
                        
                        <div class="paynow">
                            <button type="submit" class="btn">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    
<link rel="stylesheet" href="https://unpkg.com/swiper@11/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper@11/swiper-bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
  var swiper = new Swiper(".mySwiper", {
    loop: true,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    autoplay: true,
  });
});
</script>

@endsection

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