@extends('layouts.new-layout')

@push('head')
    <style>
        .booking-container {
            max-width: 800px;
            margin: 0 auto;
        }
        .btn-home {
            background-color: #000 !important;
            color: #fff !important;
            padding: 10px 30px;
            border-radius: 5px;
            text-decoration: none !important;
            display: inline-block;
            margin-top: 20px;
        }
        .btn-home:hover,
        .btn-home:focus,
        .btn-home:active {
            background-color: #000 !important;
            color: #fff !important;
            text-decoration: none !important;
        }
    </style>
@endpush

@section('content')
@php use Carbon\Carbon; @endphp

@include('partials.parallaxSlider', ['title' => 'Payment Successful'])

<section class="padding-top" style="padding: 0">
    <div class="container-fluid">
        <div class="text-center">
            <h1 class="pt-3 text-white pb-2"> <span class="yellow">Payment Successful</span></h2>
        </div>
    </div>
</section>

<section class="py-5" style="background: #fff;">
    <div class="container-fluid">
        <div class="booking-container row">
            <div class="col-md-12 text-center">
                <h2 class="mb-3">Thank You!</h2>
                <h5 class="mb-3">Your Appointment Has Been Successfully Booked.</h5>
               
                @if($appointment)
                <p><strong>Booking Reference:</strong> <span id="booking-id">#APT-{{ str_pad($appointment->id, 8, '0', STR_PAD_LEFT) }}</span></p>
                <p><strong>Requested Date:</strong> <span id="requested-date">{{ Carbon::parse($appointment->date)->format('Y-m-d') }}</span></p>
                <p><strong>Requested Time:</strong> <span id="requested-time">{{ Carbon::parse($appointment->time)->format('h:i A') }}</span></p>
                <p><strong>Booking Fee Paid:</strong> <span class="text-success">${{ number_format($appointment->price, 2) }}</span></p>
                @foreach($appointment->displayFormEntries() as $field)
                <p><strong>{{ $field['label'] }}:</strong> {{ $field['value'] }}</p>
                @endforeach
                @endif

                <p>We appreciate you choosing <strong>MJ VAC Services</strong> for your duct and vent cleaning needs. Your appointment request has been received, and our team will review and confirm it shortly.</p>
                <p>You will receive a confirmation email with full details in your inbox soon.</p>
                <p>If you have any questions or need to make changes to your appointment, feel free to contact us via email - <a href="mailto:info@mjvacservices.ca">info@mjvacservices.ca</a></p>
            </div>

            <!-- Follow Us Section -->
            <div class="follow-us mt-4 text-center">
                <p>Thank you for trusting <strong>MJ VAC Services</strong>!</p>
            </div>

            <div class="text-center">
                @if($appointment)
                    <a href="{{ route('appointment.invoice-pdf', $appointment) }}"
                       class="btn btn-home" style="background-color:#1a1a1a!important;">
                        ⬇ Download Invoice
                    </a>
                @endif
                <a class="btn btn-home" href="{{ route('welcome') }}">Go To Home</a>
            </div>
        </div>
    </div>
</section>

@endsection