@extends('layouts/indexBuddyLayoutMaster')

@section('title', 'Checkout')

@section('content')
<!-- Page layout -->
<section class="checkout-hero" style="background-image: url('{{asset('images/banners/' . $heroBanner['image'])}}');">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 text-center">
                <h3 class="font-large-2 text-white title">{{ __('locale.checkout') }}</h3>
            </div>
        </div>
    </div>
</section>

<section class="checkout-detail mb-5" data-checkout="{{$service->id}}">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 p-0">
                <div class="card card-checkout" style="min-height:500px">
                    <div class="card-body">
                        <h3 class="font-weight-bolder font-large-1 text-primary mt-1 mb-3">
                            {{ __('locale.order_detail') }}
                        </h3>

                        <div class="row mb-3 m-0">
                            <div class="col-md-2">
                                <p class="mb-25">{{ __('locale.participant') }}</p>
                                <p class="font-medium-3 font-weight-bolder sum-participant">
                                    <span class="total-participant">{{$service->participant}}</span> x Rp. {{ number_format($price, 0, ',', '.') }}
                                </p>
                            </div>
                            <div class="col-md-2">
                                <p class="mb-25">{{ __('locale.duration') }}</p>
                                <p class="font-medium-3 font-weight-bolder">
                                    <span class="total-hour">{{$service->duration}}</span> x Rp. {{ number_format($price, 0, ',', '.') }}
                                </p>
                            </div>
                            <div class="col-md-2">
                                <p class="mb-25">{{ __('locale.sub_total') }}</p>
                                <p class="font-medium-5 font-weight-bolder">
                                    Rp. <span class="total-price">{{ number_format($service->total_price, 0, ',', '.') }}</span>
                                </p>
                            </div>
                            <div class="col-md-2">
                                <p class="mb-25">{{ __('locale.unique_code') }}</p>
                                <p class="font-medium-5 font-weight-bolder">
                                    <span class="total-price">{{ $service->payment_code }}</span>
                                </p>
                            </div>
                            <div class="col-md-4 text-right">
                                <p class="mb-25">{{ __('locale.total') }}</p>
                                <p class="font-medium-5 font-weight-bolder text-primary">
                                    Rp. <span class="total-price">{{ number_format(($service->total_price + $service->payment_code), 0, ',', '.') }}</span>
                                </p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="alert alert-secondary" role="alert">
                                    <div class="alert-body">
                                        <i data-feather="info" class="mr-50 align-middle"></i>
                                        <span>
                                            {{ __('locale.unique_code_note') }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="row mb-3 m-0 pt-3">
                            <div class="col-md-6">
                                <label class="form-label" for="payment">{{ __('locale.payment_method') }}</label>
                                <select name="payment" class="select2 form-control select-payment" data-minimum-results-for-search="Infinity" required>
                                    @foreach($paymentMethod as $key => $data)  
                                        @if ($key == 0)
                                            <option value="{{ $data['id'] }}" selected>{{ $data['name'] }}</option>
                                        @else
                                            <option value="{{ $data['id'] }}">{{ $data['name'] }}</option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 payment-detail text-center">
                                <div class="image-bank mb-2">
                                    <img class="image" height="70">
                                </div>
                                <p class="font-large-1 font-weight-bolder text-primary payment-title mt-1 mb-1"></p>
                                <p class="font-medium-2 text-primary payment-desc"></p>
                            </div>
                        </div>
                        <div class="row mb-2 m-0">
                            <div class="col-md-12">
                                <button class="btn btn-success w-100 btn-checkout">{{ __('locale.checkout') }}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@include('panels.call-to-action')
@include('panels.socmed')

<!--/ Page layout -->
@endsection

@section('page-script')
  {{-- Page js files --}}
  <script src="{{ asset(('js/scripts/home/checkout.js')) }}"></script>
@endsection