@extends('frontend.layouts.app')
@section('frontend-content')

    <div class="content-wrapper">
        <div class="page-header">
            <h3 class="page-title"> {{ trans('main-sidebar.booking') }} </h3>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item active" aria-current="page"><span class="text-danger">{{ trans('main-sidebar.note') }} </span>{{ trans('main-sidebar.booking_note') }}</li>
                </ol>
            </nav>
        </div>
        <div class="row">
            <div class="col-md-12 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title"><span class="text-danger">{{ trans('main-sidebar.note') }} </span> {{ trans('main-sidebar.note_pay') }}</h4>
                        <form class="forms-sample" method="POST" action="{{ route('booking.store') }}">
                            @csrf
                            <br>
                            <div class="form-group">
                                <label for="username">
                                    <h6>{{ trans('main-sidebar.card_owner') }}</h6>
                                </label>
                                <input type="text" name="owner_name" placeholder="{{ trans('main-sidebar.card_owner') }}" required class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="cardNumber">
                                    <h6>{{ trans('main-sidebar.card_number') }}</h6>
                                </label>
                                <div class="input-group">
                                    <input type="text" name="card_number" placeholder="{{ trans('main-sidebar.card_number') }}" class="form-control " required>
                                    <div class="input-group-append"> 
                                           <span class="input-group-text text-muted">
                                               <i class="mdi mdi-credit-card"></i>
                                           </span>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-8">
                                    <div class="form-group">
                                        <label>
                                        <span class="hidden-xs">
                                            <h6>{{ trans('main-sidebar.ex_date') }}</h6>
                                        </span>
                                        </label>
                                        <div class="input-group">
                                            <input type="number" placeholder="MM" name="month" class="form-control" required>
                                            <input type="number" placeholder="YY" name="year" class="form-control" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="form-group mb-4">
                                        <label data-toggle="tooltip" title="Three digit CV code on the back of your card">
                                            <h6>CVV <i class="fa fa-question-circle d-inline"></i></h6>
                                        </label>
                                        <input type="text" name="cvv" required class="form-control">
                                    </div>
                                </div>
                            </div>
                                                        <br>

                            
                            <hr>
                            <hr>
                                                        <br>

                            <div class="form-group">
                                <label for="Username">{{ trans('main-sidebar.full_name') }}</label>
                                <input type="text" class="form-control" name="name" id="Username" value="{{ \Illuminate\Support\Facades\Auth::user()->name }}" required placeholder="{{ trans('main-sidebar.full_name') }}">
                            </div>
                            
                            
                            <div class="form-group">
                                <label for="Birthdate">{{ trans('main-sidebar.birth_date') }}</label>
                                <input type="date" class="form-control" name="birth_date" id="Birthdate" placeholder="{{ trans('main-sidebar.birth_date') }}" required>
                            </div>


                            <div class="form-group">
                                <label for="Phone">{{ trans('main-sidebar.phone_number') }}</label>
                                <input type="number" class="form-control" name="phone_number" id="Phone" placeholder="{{ trans('main-sidebar.phone_number') }}" required>
                            </div>
                            
                            
                            <div class="row">
                                <div class="col">
                                    @if($price->h_price != 0)
                                    <div class="form-group">
                                        <div class="form-check form-check-success">
                                            <label for="h" class="form-check-label">
                                                <input id="h" type="radio" class="form-check-input" value="haider_alkafaji" name="type" required>
                                                <i class="input-helper"></i>
                                                Haider Al-kafaji ({{ $price->h_price }}$)
                                            </label>
                                        </div>
                                    </div>
                                    @endif
                                    @if($price->s_price != 0)
                                    <div class="form-group">
                                        <div class="form-check form-check-warning">
                                            <label for="s" class="form-check-label">
                                                <input id="s" type="radio" class="form-check-input" value="a_specialist" name="type" required>
                                                <i class="input-helper"></i>
                                                a Specialist ({{ $price->s_price }}$)
                                            </label>
                                        </div>
                                    </div>
                                    @endif
                                    
                                </div>
                            </div>
                            
                            <button type="submit" class="btn btn-gradient-primary me-2">{{ trans('main-sidebar.save') }}</button>
                        </form>
                        
                        <br>
                        <br>
                        
                        <div class="card-footer">
                            <p>{{ trans('main-sidebar.on_whatsapp') }}</p>
                            <a class="btn btn-success btn-rounded" href="https://wa.me/+9647730959600?text=Booking%20Your%20Session">
                                <i class="mdi mdi-whatsapp"></i>
                                {{ trans('main-sidebar.send_whatsapp') }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- content-wrapper ends -->
    <!-- partial:partials/_footer.html -->

    <!-- partial -->
@endsection

@push('frontend-script')

    @if(session()->has('message'))
        <script>
            Toastify({
                text: '{{  session()->get('message') }}',
                duration: 3000,
                newWindow: true,
                close: true,
                gravity: "top", // `top` or `bottom`
                position: "left", // `left`, `center` or `right`
                stopOnFocus: true, // Prevents dismissing of toast on hover
                style: {
                    background: "linear-gradient(to right, #00b09b, #96c93d)",
                },
                onClick: function(){} // Callback after click
            }).showToast();
        </script>
    @endif
@endpush