@extends('layouts.dash1')

@section('content')

<style>
    /* Keep the dashboard footer below this long form instead of overlaying it. */
    .footer-content {
        position: static !important;
        width: 100% !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
    }

    .vc-wrap {
        padding: 40px 15px;
        background: #f7f9fc;
        min-height: 650px;
        padding-bottom: 80px;
    }

    .vc-box {
        max-width: 900px;
        margin: 0 auto;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 4px 18px rgba(0,0,0,.08);
        padding: 30px;
    }

    .vc-title {
        text-align: center;
        margin-bottom: 25px;
    }

    .vc-title i {
        font-size: 50px;
        margin-bottom: 10px;
    }

    .vc-title h2 {
        margin: 5px 0;
        font-weight: 600;
    }

    .vc-title p {
        color: #777;
    }

    .vc-status {
        padding: 18px;
        border-radius: 8px;
        margin-bottom: 25px;
    }

    .vc-status.pending {
        background: #fff8e1;
        border: 1px solid #ffe082;
        color: #7a5a00;
    }

    .vc-status.active {
        background: #e8f5e9;
        border: 1px solid #a5d6a7;
        color: #256029;
    }

    .vc-status.rejected {
        background: #ffebee;
        border: 1px solid #ef9a9a;
        color: #9b1c1c;
    }

    .vc-status strong {
        display: block;
        font-size: 18px;
        margin-bottom: 5px;
    }

    .vc-details {
        background: #fafafa;
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 18px;
    }

    .vc-detail {
        padding: 8px 0;
    }

    .vc-form label {
        font-weight: 600;
    }

    .vc-form .form-group {
        margin-bottom: 18px;
    }

    .vc-note {
        background: #eef6ff;
        border-left: 4px solid #337ab7;
        padding: 12px 15px;
        margin-bottom: 22px;
        color: #315b7d;
    }

    @media (max-width: 767px) {
        .vc-wrap {
            padding: 25px 10px;
        }

        .vc-box {
            padding: 20px 15px;
        }
    }
</style>

<div class="vc-wrap">
    <div class="vc-box">

        @if(session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif

        @if(session('message'))
            <div class="alert alert-info">
                {{ session('message') }}
            </div>
        @endif

        @if($errors->any())
            <div class="alert alert-danger">
                <ul style="margin:0;padding-left:20px;">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        @if($application)

            <div class="vc-title">
                <i class="fa fa-credit-card"></i>
                <h2>Virtual Card</h2>
                <p>Your virtual card application status</p>
            </div>

            @if($application->status === 'active')
                <div class="vc-status active">
                    <strong>Virtual Card Active</strong>
                    Your virtual card application has been activated by Admin.
                </div>
            @elseif($application->status === 'rejected')
                <div class="vc-status rejected">
                    <strong>Application Rejected</strong>
                    {{ $application->admin_note ?: 'Please contact Admin for more information.' }}
                </div>
            @else
                <div class="vc-status pending">
                    <strong>Application Pending</strong>
                    Your application has been submitted successfully. Please contact Admin for activation.
                </div>
            @endif

            <div class="vc-details">
                <div class="row">
                    <div class="col-md-6 vc-detail">
                        <strong>Full Name:</strong>
                        {{ $application->full_name }}
                    </div>

                    <div class="col-md-6 vc-detail">
                        <strong>Email:</strong>
                        {{ $application->email }}
                    </div>

                    <div class="col-md-6 vc-detail">
                        <strong>Phone:</strong>
                        {{ $application->phone }}
                    </div>

                    <div class="col-md-6 vc-detail">
                        <strong>Country:</strong>
                        {{ $application->country }}
                    </div>

                    <div class="col-md-6 vc-detail">
                        <strong>Card Type:</strong>
                        {{ $application->card_type }}
                    </div>

                    <div class="col-md-6 vc-detail">
                        <strong>Currency:</strong>
                        {{ $application->currency }}
                    </div>

                    <div class="col-md-6 vc-detail">
                        <strong>Status:</strong>
                        {{ $application->statusLabel() }}
                    </div>

                    <div class="col-md-6 vc-detail">
                        <strong>Application Date:</strong>
                        {{ $application->created_at ? $application->created_at->format('M d, Y') : '' }}
                    </div>
                </div>
            </div>

        @else

            <div class="vc-title">
                <i class="fa fa-credit-card"></i>
                <h2>Apply for a Virtual Card</h2>
                <p>Complete the form below to submit your virtual card application.</p>
            </div>

            <div class="vc-note">
                After submitting your application, it will remain <strong>Pending</strong>
                until Admin reviews and activates it. Please contact Admin after submission.
            </div>

            <form class="vc-form" method="POST" action="{{ route('virtual.card.store') }}">
                @csrf

                <div class="row">

                    <div class="col-md-6 form-group">
                        <label>Full Name</label>
                        <input type="text"
                               name="full_name"
                               class="form-control"
                               value="{{ old('full_name', Auth::user()->name) }}"
                               required>
                    </div>

                    <div class="col-md-6 form-group">
                        <label>Email</label>
                        <input type="email"
                               name="email"
                               class="form-control"
                               value="{{ old('email', Auth::user()->email) }}"
                               required>
                    </div>

                    <div class="col-md-6 form-group">
                        <label>Phone Number</label>
                        <input type="text"
                               name="phone"
                               class="form-control"
                               value="{{ old('phone', Auth::user()->phone) }}"
                               required>
                    </div>

                    <div class="col-md-6 form-group">
                        <label>Date of Birth</label>
                        <input type="date"
                               name="date_of_birth"
                               class="form-control"
                               value="{{ old('date_of_birth') }}"
                               required>
                    </div>

                    <div class="col-md-12 form-group">
                        <label>Residential Address</label>
                        <textarea name="address"
                                  class="form-control"
                                  rows="3"
                                  required>{{ old('address') }}</textarea>
                    </div>

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

                    <div class="col-md-4 form-group">
                        <label>State / Province</label>
                        <input type="text"
                               name="state"
                               class="form-control"
                               value="{{ old('state') }}"
                               required>
                    </div>

                    <div class="col-md-4 form-group">
                        <label>Postal Code</label>
                        <input type="text"
                               name="postal_code"
                               class="form-control"
                               value="{{ old('postal_code') }}"
                               required>
                    </div>

                    <div class="col-md-6 form-group">
                        <label>Country</label>
                        <input type="text"
                               name="country"
                               class="form-control"
                               value="{{ old('country', Auth::user()->country) }}"
                               required>
                    </div>

                    <div class="col-md-3 form-group">
                        <label>Card Type</label>
                        <select name="card_type" class="form-control" required>
                            <option value="Virtual Visa" {{ old('card_type') == 'Virtual Visa' ? 'selected' : '' }}>
                                Virtual Visa
                            </option>
                            <option value="Virtual Mastercard" {{ old('card_type') == 'Virtual Mastercard' ? 'selected' : '' }}>
                                Virtual Mastercard
                            </option>
                        </select>
                    </div>

                    <div class="col-md-3 form-group">
                        <label>Currency</label>
                        <select name="currency" class="form-control" required>
                            <option value="USD" {{ old('currency') == 'USD' ? 'selected' : '' }}>USD</option>
                            <option value="EUR" {{ old('currency') == 'EUR' ? 'selected' : '' }}>EUR</option>
                            <option value="GBP" {{ old('currency') == 'GBP' ? 'selected' : '' }}>GBP</option>
                        </select>
                    </div>

                </div>

                <button type="submit" class="btn btn-primary btn-block" style="margin-top:10px;">
                    <i class="fa fa-credit-card"></i>
                    Submit Application
                </button>
            </form>

        @endif

    </div>
</div>

@endsection