@extends('layouts.app')

@section('title', 'Apply for Membership | AICDS')

@section('content')

<x-breadcrumb title="Apply for Membership" :breadcrumbs="['Membership' => route('membership.index'), 'Apply' => route('membership.apply')]" />

<div class="sp_top_100 sp_bottom_100">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-9 col-lg-10">
                <div class="card border-0 shadow-lg rounded-5 overflow-hidden">
                    <div class="bg-primary text-white p-4 p-md-5">
                        <span class="badge bg-white text-primary text-uppercase px-3 py-2 fw-bold mb-3">Official Enrollment</span>
                        <h2 class="text-white fw-bold mb-2">AICDS Membership Application Form</h2>
                        <p class="text-white-50 mb-0">Please fill out your details accurately. Your submitted application will be assigned an Application Reference Number and reviewed by the Secretariat.</p>
                    </div>

                    <div class="p-4 p-md-5 bg-white">
                        <form action="{{ route('membership.apply.submit') }}" method="POST">
                            @csrf

                            <h5 class="fw-bold text-dark mb-4 border-bottom pb-2">1. Select Membership Category &amp; Plan</h5>
                            <div class="mb-4">
                                <label class="form-label fw-semibold small">Select Plan <span class="text-danger">*</span></label>
                                <select name="membership_plan_id" required class="form-select form-select-lg" style="border-radius: 8px;">
                                    <option value="">-- Choose Membership Plan --</option>
                                    @foreach($plans as $p)
                                        <option value="{{ $p->id }}" {{ (old('membership_plan_id', $selectedPlanId) == $p->id) ? 'selected' : '' }}>
                                            {{ $p->name }} ({{ ucfirst($p->category) }}) — ₹{{ number_format($p->fee, 0) }} + 18% GST (Total: ₹{{ number_format($p->total_fee, 2) }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <h5 class="fw-bold text-dark mb-4 border-bottom pb-2 mt-5">2. Personal &amp; Contact Information</h5>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold small">Full Legal Name <span class="text-danger">*</span></label>
                                    <input type="text" name="full_name" value="{{ old('full_name', auth()->user()?->name) }}" required class="form-control" placeholder="e.g. Dr. Ramesh Kumar or Priya Sharma">
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label fw-semibold small">Email Address <span class="text-danger">*</span></label>
                                    <input type="email" name="email" value="{{ old('email', auth()->user()?->email) }}" required class="form-control" placeholder="name@college.edu or name@domain.com">
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label fw-semibold small">Mobile / Phone Number <span class="text-danger">*</span></label>
                                    <input type="text" name="phone" value="{{ old('phone', auth()->user()?->phone) }}" required class="form-control" placeholder="+91 98765 43210">
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label fw-semibold small">Institutional / Company ID Number</label>
                                    <input type="text" name="id_proof_number" value="{{ old('id_proof_number') }}" class="form-control" placeholder="e.g. College Roll No. or Employee ID">
                                </div>
                            </div>

                            <h5 class="fw-bold text-dark mb-4 border-bottom pb-2 mt-5">3. Academic or Institutional Affiliation</h5>
                            <div class="row g-3">
                                <div class="col-12">
                                    <label class="form-label fw-semibold small">College / Institution / Organization Name <span class="text-danger">*</span></label>
                                    <input type="text" name="institution_or_company" value="{{ old('institution_or_company', auth()->user()?->organization) }}" required class="form-control" placeholder="e.g. Madras Institute of Technology or Infosys Ltd.">
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label fw-semibold small">Department / Branch</label>
                                    <input type="text" name="department_or_branch" value="{{ old('department_or_branch') }}" class="form-control" placeholder="e.g. Computer Science & Engineering / AI & DS">
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label fw-semibold small">Designation / Degree Enrolled</label>
                                    <input type="text" name="designation_or_degree" value="{{ old('designation_or_degree', auth()->user()?->designation) }}" class="form-control" placeholder="e.g. B.Tech 3rd Year or Associate Professor">
                                </div>
                            </div>

                            <h5 class="fw-bold text-dark mb-4 border-bottom pb-2 mt-5">4. Mailing Address</h5>
                            <div class="row g-3">
                                <div class="col-12">
                                    <label class="form-label fw-semibold small">Address</label>
                                    <input type="text" name="address" value="{{ old('address') }}" class="form-control" placeholder="Street, campus building, or residential address">
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label fw-semibold small">City</label>
                                    <input type="text" name="city" value="{{ old('city') }}" class="form-control" placeholder="City">
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label fw-semibold small">State</label>
                                    <input type="text" name="state" value="{{ old('state') }}" class="form-control" placeholder="State">
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label fw-semibold small">Pincode</label>
                                    <input type="text" name="pincode" value="{{ old('pincode') }}" class="form-control" placeholder="Pincode">
                                </div>
                            </div>

                            <h5 class="fw-bold text-dark mb-3 border-bottom pb-2 mt-5">5. Declaration</h5>
                            <div class="form-check p-3 bg-light rounded-3 border mb-4">
                                <input class="form-check-input ms-0 me-3" type="checkbox" name="declaration" value="1" id="declaration" required {{ old('declaration') ? 'checked' : '' }}>
                                <label class="form-check-label small text-muted" for="declaration">
                                    I hereby declare that all details furnished above are accurate and true to the best of my knowledge. I agree to abide by the bylaws, code of scientific ethics, and professional conduct of the Association for Intelligent Computing and Data Science (AICDS).
                                </label>
                            </div>

                            <div class="text-end">
                                <button type="submit" class="default__button px-5 py-3">Submit Membership Application</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection