@extends('components.layouts.landing')
@section('title')
    <title>{{$data->title }}</title>
@endsection
@section('content')
    <form
        method="post"
        action="{{route('landing.purchase' , $data->id)}}"
        class="flex flex-col items-center">
        @csrf
        <div class=" my-3 md:my-10 lg:w-2/3 mx-auto border rounded-xl p-2  flex flex-col-reverse lg:flex-row items-center lg:gap-4 space-y-4 lg:space-y-0 lg:justify-between ">
            <div class="lg:mr-8 w-full lg:w-2/3  space-y-4">
                <h2 class="text-amber-500 text-3xl font-bold">{{$data->title }}</h2>
                <div class="bg-stone-700 rounded-full w-full p-4  space-y-4">
                    <div class="flex justify-between text-amber-50 ">
                        <div>
                            هزینه آموزش
                        </div>
                        <div class="line-through">{{number_format($data->price) }}</div>
                    </div>
                    <div class="flex justify-between">
                        <div class=" text-amber-50 ">
                            <span>تخفیف</span>
                            <span class="bg-amber-500 p-2 rounded-md">
                        %{{round((($data->price - $data->discount) / $data->price) * 100 , 2)}}
                        </span>
                        </div>
                        <div class="text-amber-500 font-bold">{{number_format($data->discount) }}</div>
                    </div>
                </div>
                <div class="space-y-4">
                    <label class="flex gap-2 items-center" for="phoneInput">
                    <span class="text-red-500">
                        <x-icons.check-badge/>
                    </span>
                        <span class="text-amber-50">شماره همراه خود را وارد کنید</span>
                    </label>
                    <input type="text"
                           id="phoneInput"
                           inputmode="numeric" pattern="[0-9]*"
                           lang="en"
                           maxlength="11"
                           name="phone"
                           placeholder="0912000000"
                           class="outline-0 w-full rounded-full font-bold p-2 bg-purple-50 text-gray-800 border-b @error('phone') border-red-500 placeholder:text-red-500 text-red-500 @enderror">
                    <span >@error('phone') <span class="text-red-800">{{$message}}</span> @enderror</span>
                </div>
            </div>
            <div class="lg:w-1/3">
                <img
                    class="rounded-xl w-full lg:w-80"
                    src="{{$data->avatar }}" alt="">
            </div>
        </div>
        <button class="bg-green-400 font-bold w-1/2 md:w-1/5 py-2 px-4 rounded-xl ">
            ثبت نام
        </button>
    </form>
    <img src="{{asset('assets/images/landing.png')}}" alt="">
@endsection