@extends('frontend.layouts.app')
@section('content')
    <style>
        .form-section {
            /*   background: #f8f9fc; */
            padding: 60px 0;
        }

        .form-card {
            font-family: 'Segoe UI', sans-serif;
            padding: 40px;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
            width: 100%;
            box-sizing: border-box;
            align-items: center;
            background-color: #fff;
            border: none;
            border-radius: 8px;
            margin: 20px auto;
        }

        .form-card h2 {
            font-weight: 700;
            color: #015fc9;
            margin-bottom: 30px;
        }

        .form-control,
        .form-select {
            border-radius: 8px;
            border: 1px solid #ced4da;
            box-shadow: none !important;
            transition: all 0.2s ease-in-out;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: #015fc9;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        }

        .btn-submit {
            background-color: #015fc9;
            border: none;
            padding: 12px 25px;
            font-weight: 600;
            border-radius: 10px;
            color: #fff;
        }

        .btn-submit:hover {
            background-color: #015fc9;
        }


        @media (max-width: 767px) {
            .form-card {
                width: 100% !important;
                margin: 0 !important;
                border-radius: 0 !important;
                box-shadow: none !important;
                padding: 15px !important;
            }

            .container.form-section {
                padding: 0;
            }
        }
    </style>
    <div class="container-fluid page-header-modern">
        <div class="container">
            <h1>Member Registration</h1>
            <ol class="breadcrumb breadcrumb-modern">
                <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
                <li class="breadcrumb-item">Pages</li>
                <li class="breadcrumb-item active">Member Registration</li>
            </ol>
        </div>
    </div>
    <div class="container form-section">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="form-card">
                    @if (session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif


                    @if (session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            {{ session('error') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    {{--     @if ($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif --}}

                    <form method="POST" action="{{ route('member.preview') }}" enctype="multipart/form-data">
                        @csrf
                        <div class="row g-4">
                            <div class="col-md-6">
                                <label>Full Name *</label>
                                <input type="text" name="full_name"
                                    class="form-control @error('full_name') is-invalid @enderror"
                                    value="{{ old('full_name') }}">
                                @error('full_name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label>CPR Number *</label>
                                <input type="text" name="cpr_number"
                                    class="form-control @error('cpr_number') is-invalid @enderror"
                                    value="{{ old('cpr_number') }}">
                                @error('cpr_number')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label>Passport Number</label>
                                <input type="text" name="passport_number"
                                    class="form-control @error('passport_number') is-invalid @enderror"
                                    value="{{ old('passport_number') }}">
                                @error('passport_number')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label>Date of Birth *</label>
                                <input type="date" name="dob" class="form-control @error('dob') is-invalid @enderror"
                                    value="{{ old('dob') }}">
                                @error('dob')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label>Gender *</label>
                                <select name="gender" class="form-select  @error('gender') is-invalid @enderror">
                                    <option value="">Select</option>
                                    <option value="Male">Male</option>
                                    <option value="Female">Female</option>
                                </select>
                                @error('gender')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror

                            </div>
                            <div class="col-md-6">
                                <label>Blood Group</label>
                                <select name="blood_group" class="form-select @error('blood_group') is-invalid @enderror">
                                    <option value="">Select</option>
                                    <option value="A+">A+</option>
                                    <option value="B+">B+</option>
                                    <option value="AB+">AB+</option>
                                    <option value="O+">O+</option>
                                    <option value="A-">A-</option>
                                    <option value="B-">B-</option>
                                    <option value="AB-">AB-</option>
                                    <option value="O-">O-</option>
                                </select>
                                @error('blood_group')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label>Mobile Number (WhatsApp) *</label>
                                <input type="text" name="mobile"
                                    class="form-control @error('mobile') is-invalid @enderror" value="{{ old('mobile') }}">
                                @error('mobile')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label>Email</label>
                                <input type="email" name="email"
                                    class="form-control @error('email') is-invalid @enderror" value="{{ old('email') }}">
                                @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label>Address in Bahrain *</label>
                                <input type="text" name="address"
                                    class="form-control @error('address') is-invalid @enderror"
                                    value="{{ old('address') }}">
                                @error('address')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label>Occupation *</label>
                                <input type="text" name="occupation"
                                    class="form-control @error('occupation') is-invalid @enderror"
                                    value="{{ old('occupation') }}">
                                @error('occupation')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label>Convenient Time for Volunteering</label>
                                <input type="text" name="volunteer_time"
                                    class="form-control @error('volunteer_time') is-invalid @enderror"
                                    value="{{ old('volunteer_time') }}">
                                @error('volunteer_time')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="col-md-12">
                                <label>Your Expertise</label>
                                <div class="row">
                                    @php
                                        $skills = [
                                            'Volunteering',
                                            'Graphic design',
                                            'LMRA/Passport/Visa work',
                                            'Info Collection',
                                            'Presentation',
                                            'Interview',
                                        ];
                                    @endphp
                                    @foreach ($skills as $skill)
                                        <div class="col-md-4">
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" name="expertise[]"
                                                    value="{{ $skill }}">
                                                <label class="form-check-label">{{ $skill }}</label>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label>Bangladesh Contact Number</label>
                                <input type="text" name="bd_contact"
                                    class="form-control @error('bd_contact') is-invalid @enderror"
                                    value="{{ old('bd_contact') }}">
                                @error('bd_contact')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label>Reference Person</label>
                                <input type="text" name="ref_person"
                                    class="form-control @error('ref_person') is-invalid @enderror"
                                    value="{{ old('ref_person') }}">
                                @error('ref_person')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label>Reference Person Phone</label>
                                <input type="text" name="ref_phone"
                                    class="form-control @error('ref_phone') is-invalid @enderror"
                                    value="{{ old('ref_phone') }}">
                                @error('ref_phone')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label>Upload Photo *</label>
                                <input type="file" name="photo"
                                    class="form-control @error('photo') is-invalid @enderror">
                                @error('photo')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label>Upload CPR Front *</label>
                                <input type="file" name="cpr_front"
                                    class="form-control @error('cpr_front') is-invalid @enderror">
                                @error('cpr_front')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label>Upload CPR Back *</label>
                                <input type="file" name="cpr_back"
                                    class="form-control @error('cpr_back') is-invalid @enderror">
                                @error('cpr_back')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="col-12">
                                <div class="form-check mt-3">
                                    <input class="form-check-input" type="checkbox" name="accept_rules">
                                    <label class="form-check-label">
                                        I confirm all information is correct and I accept the rules of Bangladesh Society
                                        Bahrain.
                                    </label>
                                </div>
                            </div>
                            <div class="col-12 text-center mt-4">
                                <button class="btn btn-submit">Submit Registration</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection