@extends('layouts.site')
@section('title', $product->name)

@section('content')
    <!-- component -->
    <div class="min-w-screen h-screen flex items-center p-5 lg:p-10 overflow-hidden relative">
        <div class="w-full max-w-6xl rounded bg-white shadow-xl p-10 lg:p-20 mx-auto text-gray-800 relative md:text-left">
            <div class="md:flex items-center -mx-10">
                <div class="w-full md:w-1/2 px-10 mb-10 md:mb-0">
                    <div class="relative">
                        <img src="{{ $product->banner_url }}" class="w-full relative z-10" alt="">
                        <div class="border-4 border-yellow-200 absolute top-10 bottom-10 left-10 right-10 z-0"></div>
                    </div>
                </div>
                <div class="w-full md:w-1/2 px-10">
                    <div class="mb-10">
                        <h1 class="font-bold uppercase text-2xl mb-5">{{ $product->name }}</h1>
                        <p class="text-sm">{{ $product->desc }}</p>
                    </div>
                    <div class="w-full flex flex-wrap space-y-4 text-center">
                        <div class="w-full inline-block align-bottom mr-5">
                            <span class="text-2xl leading-none align-baseline">$</span>
                            <span class="font-bold text-5xl leading-none align-baseline">{{ number_format($product->price,'2','.',',') }}</span>
                        </div>
                        <div class="w-full inline-block align-bottom">
                            <form action="{{ route('site.products.checkout') }}" method="POST">
                                <p><input type="hidden" name="_token" value="{{ csrf_token() }}"></p>
                                <p><input type="hidden" name="id" value="{{ $product->id }}"></p>
                                <p><button type="submit" class="w-full px-4 py-2 bg-primary hover:bg-primary-100 text-white shadow hover:shadow-lg rounded-xl">Pagar</button></p>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection