@extends('layouts.user_type.auth')

@section('content')
<div class="container-fluid py-4">
    <div class="row">
        <div class="col-md-12">
            <div class="card shadow-lg">
                <div class="card-header bg-primary text-white text-center">
                    <h4 class="mb-0 text-white">User Details</h4>
                </div>
                <div class="card-body">
                    @if ($user)
                        <div class="row">
                            {{-- User Info --}}
                            <div class="col-md-6">
                                <h6 class="text-muted">User Information</h6>
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item"><strong>Name:</strong> {{ $user->name }}</li>
                                    <li class="list-group-item"><strong>Email:</strong> {{ $user->email }}</li>
                                    <li class="list-group-item"><strong>Phone:</strong> {{ $user->phone }}</li>
                                    <li class="list-group-item"><strong>Location:</strong> {{ $user->location }}</li>
                                    <li class="list-group-item">
                                        <strong>Email Verified:</strong> 
                                        @if($user->email_verified_at)
                                            <span class="badge bg-success">Verified</span>
                                        @else
                                            <span class="badge bg-danger">Not Verified</span>
                                        @endif
                                    </li>
                                </ul>
                            </div>
                            
                            {{-- Subscription Info --}}
                            <div class="col-md-6">
                                <h6 class="text-muted">Subscription Details</h6>
                                @if ($subscription)
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item"><strong>Subscription ID:</strong> {{ $subscription->subscription_id }}</li>
                                        <li class="list-group-item"><strong>Start Date:</strong> {{ $subscription->starts_at }}</li>
                                        <li class="list-group-item"><strong>End Date:</strong> {{ $subscription->ends_at }}</li>
                                        <li class="list-group-item"><strong>Subscription Status:</strong>  
                                            @if(\Carbon\Carbon::parse($subscription->ends_at)->isPast())
                                                <span class="text-danger">Expired</span>
                                            @else
                                                <span class="text-success">Active</span>
                                            @endif
                                        </li>
                                    </ul>
                                @else
                                    <p class="text-danger">No active subscription found.</p>

                                    {{-- Assign Plan Button (opens modal) --}}
                                    <button class="btn btn-primary mt-2" data-bs-toggle="modal" data-bs-target="#assignPlanModal">
                                        Assign Plan
                                    </button>
                                @endif
                            </div>
                        </div>

                        {{-- Plan Info --}}
                        <div class="row mt-4">
                            <div class="col-md-6">
                                <h6 class="text-muted">Plan Information</h6>
                                @if ($subscription)
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item"><strong>Plan Name:</strong> {{ $subscription->plan_name }}</li>
                                        <li class="list-group-item"><strong>Plan Price:</strong> ${{ number_format($subscription->plan_price, 2) }}</li>
                                        <li class="list-group-item"><strong>Plan Duration:</strong> {{ $subscription->plan_duration }} Days</li>
                                    </ul>
                                @else
                                    <p class="text-danger">No plan associated with this subscription.</p>
                                @endif
                            </div>

                            {{-- Payments --}}
                            <div class="col-md-12">
                                <h6 class="text-muted">Payment History</h6>
                                @if ($payments->isNotEmpty())
                                    <div class="table-responsive">
                                        <table class="table table-bordered">
                                            <thead class="table-dark">
                                                <tr>
                                                    <th>Payment ID</th>
                                                    <th>Transaction ID</th>
                                                    <th>Amount</th>
                                                    <th>Payment Method</th>
                                                    <th>Status</th>
                                                    <th>Date</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($payments as $payment)
                                                    <tr>
                                                        <td>{{ $payment->id }}</td>
                                                        <td>{{ $payment->transaction_id }}</td>
                                                        <td>${{ number_format($payment->amount, 2) }}</td>
                                                        <td>{{ ucfirst($payment->payment_method) }}</td>
                                                        <td>
                                                            <span class="badge 
                                                                {{ $payment->status == 'Success' ? 'bg-success' : 'bg-warning' }}">
                                                                {{ ucfirst($payment->status) }}
                                                            </span>
                                                        </td>
                                                        <td>{{ \Carbon\Carbon::parse($payment->created_at)->format('d M Y') }}</td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                @else
                                    <p class="text-danger">No payment records found.</p>
                                @endif
                            </div>
                        </div>
                    @else
                        <div class="text-center">
                            <h5 class="text-danger">User not found.</h5>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Modal for Assign Plan & Card --}}
<div class="modal fade" id="assignPlanModal" tabindex="-1" aria-labelledby="assignPlanModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
       <form action="{{ route('users.createOrUpdateSubscription', $user->id) }}" method="POST">
        @csrf
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="assignPlanModalLabel">Assign Plan & Payment</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                {{-- Select Plan --}}
                <div class="form-group mb-3">
                    <label for="plan_id">Select Plan</label>
                    <select name="plan_id" id="plan_id" class="form-control" required>
                        <option value="">-- Select Plan --</option>
                        @foreach($plans as $plan)
                            <option value="{{ $plan->id }}">
                                {{ $plan->slug }} - ${{ number_format($plan->price, 2) }} 
                                ({{ $plan->invoice_period }} {{ $plan->invoice_interval }})
                            </option>
                        @endforeach
                    </select>
                </div>

                {{-- Card Details --}}
                <div class="form-group mb-3">
                    <label for="card_name">Cardholder Name</label>
                    <input type="text" name="card_name" class="form-control" required>
                </div>

                <div class="form-group mb-3">
                    <label for="card_number">Card Number</label>
                    <input type="text" name="card_number" 
                        class="form-control" 
                        maxlength="16" 
                        pattern="\d{13,16}" 
                        oninput="this.value=this.value.replace(/[^0-9]/g,'')" 
                        required>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="expiry_date">Expiry Date (MM/YY)</label>
                        <input type="text" name="expiry_date" 
                            class="form-control" 
                            maxlength="5" 
                            placeholder="MM/YY" 
                            oninput="formatExpiry(this)" 
                            required>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="cvv">CVV</label>
                        <input type="text" name="cvv" 
                            class="form-control" 
                            maxlength="4" 
                            pattern="\d{3,4}" 
                            oninput="this.value=this.value.replace(/[^0-9]/g,'')" 
                            required>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">Save & Assign</button>
            </div>
        </div>
    </form>

    {{-- Scripts for formatting --}}
    <script>
    function formatExpiry(input) {
        // Only allow numbers + "/"
        input.value = input.value.replace(/[^0-9\/]/g, '');
        
        // Auto-add slash after MM
        if (input.value.length === 2 && !input.value.includes('/')) {
            input.value = input.value + '/';
        }
    }
    </script>

    </div>
</div>
@endsection