@extends('layouts.front')
@section('title', 'Checkout')

@section('content')
<div class="container py-5">
    <h3 class="fw-bold mb-4">Your Personal Training Summary</h3>

    <table class="table table-bordered">
        <tbody>
            <tr>
                <th>Age Group</th>
                <td>{{ $profile['age'] ?? '-' }}</td>
            </tr>
            <tr>
                <th>Height (cm)</th>
                <td>{{ $profile['height_cm'] ?? '-' }}</td>
            </tr>
            <tr>
                <th>Weight (kg)</th>
                <td>{{ $profile['weight_kg'] ?? '-' }}</td>
            </tr>
            <tr>
                <th>Goal</th>
                <td>{{ $profile['goal_weight_change'] ?? '-' }}</td>
            </tr>
            <tr>
                <th>Location</th>
                <td>{{ $profile['location'] ?? '-' }}</td>
            </tr>
            <tr>
                <th>Food Allergy</th>
                <td>{{ $profile['food_allergy'] ?? '-' }}</td>
            </tr>
            <tr>
                <th>Medicine/Antibiotics</th>
                <td>{{ $profile['medicine_history'] ?? '-' }}</td>
            </tr>
            <tr>
                <th>Gym Experience</th>
                <td>{{ $profile['gym_experience'] ?? '-' }}</td>
            </tr>
            <tr>
                <th>Number of Persons</th>
                <td>{{ $profile['number_of_persons'] ?? '-' }}</td>
            </tr>
            <tr class="table-success">
                <th>Selected Package (Classes & Price)</th>
                <td>{{ $profile['selected_package'] ?? '-' }}</td>
            </tr>
        </tbody>
    </table>

    <div class="text-center mt-4">
        <h4 class="fw-bold">Total to Pay</h4>
        <div class="fs-2 text-success mb-4">
            {{ explode('-', $profile['selected_package'])[1] ?? '---' }}
        </div>

        <!-- Add Full Name, Email, Phone No Form -->
        <form id="checkout-form" action="{{ route('physical_clients.stripecheckout') }}" method="POST" class="mt-4">
            @csrf
            <div class="row justify-content-center mb-3">
                <div class="col-md-6">
                    <label class="form-label">Full Name</label>
                    <input type="text" name="name" id="name" value="@if(auth()->user()){{ auth()->user()->name }}@endif" class="form-control" placeholder="Enter your full name" required>
                </div>
            </div>

            <div class="row justify-content-center mb-3">
                <div class="col-md-6">
                    <label class="form-label">Email Address</label>
                    <input type="email" name="email" id="email" value="@if(auth()->user()){{ auth()->user()->email }}@endif" class="form-control" placeholder="Enter your email" required>
                </div>
            </div>

            <div class="row justify-content-center mb-4">
                <div class="col-md-6">
                    <label class="form-label">Phone Number</label>
                    <input type="tel" name="phone" id="phone" value="@if(auth()->user()){{ auth()->user()->phone }}@endif" class="form-control" placeholder="Enter your phone number" required>
                </div>
            </div>

            <button  class="btn btn-primary btn-lg" onclick="submitCheckout()">Proceed to Payment</button>

        </form>
    </div>
</div>
@endsection
@push('scripts')

<script>
 

    function submitCheckout() {
        const name = document.getElementById('name').value.trim();
        const email = document.getElementById('email').value.trim();
        const phone = document.getElementById('phone').value.trim();

        if (!name || !email) {
            Swal.fire({
                icon: 'warning',
                title: 'Missing or invalid info',
                text: 'Please enter a valid name, email',
                confirmButtonText: 'OK'
            });
            return false;
        }

        document.getElementById('checkout-form').submit();
    }
</script>
@endpush