@extends('layouts.admin')

@section('title', 'Gym Admission')

@section('breadcrumb')
    <li class="breadcrumb-item active">Gym Admission</li>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        // Custom file input label update and preview
        $('.custom-file-input').on('change', function() {
            let fileName = $(this).val().split('\\').pop();
            $(this).next('.custom-file-label').addClass("selected").html(fileName);

            // Preview
            if (this.files && this.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#image-preview').attr('src', e.target.result).show();
                }
                reader.readAsDataURL(this.files[0]);
            }
        });

        const planSelect = $('#plan_id');
        const paymentModeGroup = $('#payment_mode_group');
        const paymentModeSelect = $('#payment_mode');
        const amountPaidInput = $('#amount_paid');

        function updateAmount() {
            const selectedOption = planSelect.find('option:selected');
            if (!selectedOption.val()) {
                amountPaidInput.val('');
                paymentModeGroup.hide();
                return;
            }

            const price = parseFloat(selectedOption.data('price'));
            const hasInstallment = selectedOption.data('has-installment');
            const installmentMonths = parseInt(selectedOption.data('installment-months'));
            const fullDiscount = parseFloat(selectedOption.data('full-discount')) || 0;

            if (hasInstallment) {
                paymentModeGroup.show();
            } else {
                paymentModeGroup.hide();
                paymentModeSelect.val('full'); // Reset to full if no installment
            }

            const mode = paymentModeSelect.val();

            if (mode === 'installment' && hasInstallment) {
                // Calculate first installment
                const installmentAmount = price / installmentMonths;
                amountPaidInput.val(installmentAmount.toFixed(2));
            } else {
                // Full Payment
                const finalPrice = price - fullDiscount;
                amountPaidInput.val(finalPrice.toFixed(2));
            }
        }

        planSelect.on('change', updateAmount);
        paymentModeSelect.on('change', updateAmount);
    });
</script>
@endpush

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">New Admission Form</h3>
                </div>
                <form action="{{ route('admin.admission.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="card-body">
                        <div class="row">
                            <!-- Personal Information -->
                            <div class="col-md-6">
                                <h5 class="mb-3 text-muted">Personal Information</h5>
                                <div class="form-group">
                                    <label for="profile_image">Profile Image</label>
                                    <div class="mb-2">
                                        <img id="image-preview" src="#" alt="Image Preview" style="max-width: 150px; display: none;" class="img-thumbnail">
                                    </div>
                                    <div class="custom-file">
                                        <input type="file" class="custom-file-input @error('profile_image') is-invalid @enderror" id="profile_image" name="profile_image" accept="image/*">
                                        <label class="custom-file-label" for="profile_image">Choose file</label>
                                    </div>
                                    <small class="form-text text-muted">Optional. Allowed formats: jpeg, png, jpg, gif. Max: 2MB.</small>
                                    @error('profile_image') <span class="invalid-feedback d-block">{{ $message }}</span> @enderror
                                </div>

                                <div class="form-group">
                                    <label for="first_name">First Name <span class="text-danger">*</span></label>
                                    <input type="text" name="first_name" class="form-control @error('first_name') is-invalid @enderror" id="first_name" value="{{ old('first_name') }}" placeholder="Enter first name" required>
                                    @error('first_name') <span class="invalid-feedback">{{ $message }}</span> @enderror
                                </div>
                                <div class="form-group">
                                    <label for="last_name">Last Name <span class="text-danger">*</span></label>
                                    <input type="text" name="last_name" class="form-control @error('last_name') is-invalid @enderror" id="last_name" value="{{ old('last_name') }}" placeholder="Enter last name" required>
                                    @error('last_name') <span class="invalid-feedback">{{ $message }}</span> @enderror
                                </div>
                                <div class="form-group">
                                    <label for="email">Email <span class="text-danger">*</span></label>
                                    <input type="email" name="email" class="form-control @error('email') is-invalid @enderror" id="email" value="{{ old('email') }}" placeholder="Enter email" required>
                                    <small class="form-text text-muted">If email exists, user info will be updated.</small>
                                    @error('email') <span class="invalid-feedback">{{ $message }}</span> @enderror
                                </div>
                                <div class="form-group">
                                    <label for="phone">Phone <span class="text-danger">*</span></label>
                                    <input type="text" name="phone" class="form-control @error('phone') is-invalid @enderror" id="phone" value="{{ old('phone') }}" placeholder="Enter phone number" required>
                                    @error('phone') <span class="invalid-feedback">{{ $message }}</span> @enderror
                                </div>
                                <div class="form-group">
                                    <label for="address">Address</label>
                                    <textarea name="address" class="form-control @error('address') is-invalid @enderror" id="address" rows="3" placeholder="Enter address">{{ old('address') }}</textarea>
                                    @error('address') <span class="invalid-feedback">{{ $message }}</span> @enderror
                                </div>
                            </div>

                            <!-- Membership & Payment -->
                            <div class="col-md-6">
                                <h5 class="mb-3 text-muted">Membership & Payment</h5>
                                <div class="form-group">
                                    <label for="plan_id">Membership Plan <span class="text-danger">*</span></label>
                                    <select name="plan_id" id="plan_id" class="form-control @error('plan_id') is-invalid @enderror" required>
                                        <option value="">Select Plan</option>
                                        @foreach($plans as $plan)
                                            <option value="{{ $plan->id }}" 
                                                data-price="{{ $plan->price }}"
                                                data-has-installment="{{ $plan->has_installment }}"
                                                data-installment-months="{{ $plan->installment_months }}"
                                                data-full-discount="{{ $plan->full_payment_discount }}"
                                                >{{ $plan->name }} - {{ number_format($plan->price, 2) }}</option>
                                        @endforeach
                                    </select>
                                    @error('plan_id') <span class="invalid-feedback">{{ $message }}</span> @enderror
                                </div>
                                
                                <div class="form-group" id="payment_mode_group" style="display: none;">
                                    <label for="payment_mode">Payment Mode</label>
                                    <select name="payment_mode" id="payment_mode" class="form-control">
                                        <option value="full">Full Payment</option>
                                        <option value="installment">Installment</option>
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label for="start_date">Start Date <span class="text-danger">*</span></label>
                                    <input type="date" name="start_date" class="form-control @error('start_date') is-invalid @enderror" id="start_date" value="{{ old('start_date', date('Y-m-d')) }}" required>
                                    @error('start_date') <span class="invalid-feedback">{{ $message }}</span> @enderror
                                </div>

                                <div class="form-group">
                                    <label for="amount_paid">Amount Paid <span class="text-danger">*</span></label>
                                    <input type="number" step="0.01" name="amount_paid" class="form-control @error('amount_paid') is-invalid @enderror" id="amount_paid" value="{{ old('amount_paid') }}" placeholder="0.00" required readonly>
                                    @error('amount_paid') <span class="invalid-feedback">{{ $message }}</span> @enderror
                                </div>

                                <div class="form-group">
                                    <label for="payment_method">Payment Method <span class="text-danger">*</span></label>
                                    <select name="payment_method" class="form-control @error('payment_method') is-invalid @enderror" required>
                                        <option value="Cash" {{ old('payment_method') == 'Cash' ? 'selected' : '' }}>Cash</option>
                                        <option value="Card" {{ old('payment_method') == 'Card' ? 'selected' : '' }}>Credit/Debit Card</option>
                                        <option value="UPI" {{ old('payment_method') == 'UPI' ? 'selected' : '' }}>UPI / Digital Wallet</option>
                                        <option value="Bank Transfer" {{ old('payment_method') == 'Bank Transfer' ? 'selected' : '' }}>Bank Transfer</option>
                                    </select>
                                    @error('payment_method') <span class="invalid-feedback">{{ $message }}</span> @enderror
                                </div>

                                <div class="form-group">
                                    <label for="transaction_id">Transaction ID (Optional)</label>
                                    <input type="text" name="transaction_id" class="form-control @error('transaction_id') is-invalid @enderror" id="transaction_id" value="{{ old('transaction_id') }}" placeholder="Enter transaction ID if applicable">
                                    @error('transaction_id') <span class="invalid-feedback">{{ $message }}</span> @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card-footer text-right">
                        <button type="submit" class="btn btn-primary"><i class="fas fa-check-circle mr-1"></i> Submit Admission & Download PDF</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection