@extends('front.layouts.master')
<script>
window.addEventListener('pageshow', function (event) {
    if (event.persisted) {
        window.location.reload();
    }
});
</script>
@section('frontend-css')
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/css/bootstrap-datepicker.min.css"
    rel="stylesheet">
<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }

    table,
    th,
    td {
        border: 1px solid black;
    }

    th,
    td {
        padding: 8px;
        text-align: left;
    }

    .ul_text {
        text-decoration: underline;
    }
</style>
@endsection

@section('content')
<!-- banner section start -->

<section id="inner-header">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="inner-breadcrumb">
                    <h2>Appointment Summary</h2>
                    <ul>
                        <li><a href="{{ route('front.home') }}">Home</a></li>
                        <li>
                            <p>Appointment</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- banner section end -->
<section class="summary-container">
    <!-- Service Hero -->


    <div class="container py-5">
        <div class="summary-container">
            <div class="alert alert-danger" id="message" style="display:none;"></div>

            <div id="loader" style="display:none;" class="text-center">
                <div class="spinner-border text-primary"></div>
            </div>
            <div class="row g-4">

                <!-- Left Side -->
                <div class="col-lg-8">

                    <div class="appointment-card">

                        <!-- Doctor & Patient -->
                        <div class="row g-4">

                            <div class="col-md-6">
                                <div class="section-title">
                                    <i class="fa-solid fa-user-doctor me-2"></i>
                                    Doctor Details
                                </div>

                                <h4 class="doctor-name" id="doctor_id"
                                    data-doctor_id="{{ $getDoctorDetail['id'] }}">
                                    {{ $getDoctorDetail['name'] }}
                                </h4>

                                <div class="doctor-info">
                                    {{ $getDoctorDetail['designations'] }}
                                </div>

                                <div class="text-muted mb-2">
                                    {{ $getDoctorDetail['services'] }}
                                </div>

                                <!-- <div>
                            <strong>Specialties:</strong>
                            <span class="text-theme-color">
                                Dentistry, Neurology
                            </span>
                        </div> -->
                            </div>

                            <div class="col-md-6 text-md-end">
                                <div class="section-title">
                                    <i class="fa-solid fa-user me-2"></i>
                                    Patient Details
                                </div>

                                <h4 class="patient-name" id="full_name"
                                    data-full_name="{{ $inputs['full_name'] }}">
                                    {{ $inputs['full_name'] ?? '' }}
                                </h4>

                                <div class="text-muted" id="email_id"
                                    data-email_id="{{ $inputs['email_id'] }}">{{ $inputs['email_id'] ?? '' }}
                                </div>

                                <div id="phone_no"
                                    data-phone_no="{{ $inputs['phone_number'] }}">
                                  @if($inputs['appointment_dial_code']) {{$inputs['appointment_dial_code']}} @endif  {{ $inputs['phone_number'] ?? '' }}
                                </div>
                            </div>

                        </div>

                        <!-- Appointment Information -->

                        <div class="appointment-box mt-4">

                            <div class="row g-4">

                                <div class="col-md-4">
                                    <div class="info-label">
                                        <i class="fa-solid fa-calendar-days me-2"></i>
                                        Appointment Date
                                    </div>

                                    <div class="info-value" id="booking_date" data-booking_date="{{ $inputs['booking_date'] }}">
                                        {{ dateFormat($inputs['booking_date'], DISPLAY_DATE) }}

                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="info-label">
                                        <i class="fa-solid fa-sun me-2"></i>
                                        Slot
                                    </div>

                                    <div class="info-value" id="slot_type"
                                        data-slot_type="{{ $inputs['slot_type'] }}" style="color:#000">{{ ucfirst($inputs['slot_type']) }}
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="info-label">
                                        <i class="fa-solid fa-clock me-2"></i>
                                        Appointment Time
                                    </div>

                                    <div class="info-value" id="slot_timing" data-slot_timing="{{ $inputs['slot_timing'] }}" style="margin-top: 15px;">{{ $inputs['slot_timing'] }}
                                    </div>
                                </div>

                            </div>

                        </div>

                    </div>

                </div>

                <!-- Right Side Billing -->

                <div class="col-lg-4">

                    <div class="appointment-card sticky-summary">

                        <div class="section-title">
                            <i class="fa-solid fa-file-invoice-dollar me-2"></i>
                            Billing Summary
                        </div>

                        <div class="amount-row">
                            <span>Consultation Fee</span>
                            <span>{{ $inputs['doctor_fee_symbol'] }}</span>
                        </div>


                        {{-- <div class="amount-row">
                            <span>Tax</span>
                            <span>₹0.00</span>
                        </div> --}}

                        <div class="amount-row total-row">
                            <span>Total Amount</span>
                            <span>{{ $inputs['doctor_fee_symbol'] }}</span>
                        </div>

                        @if ($inputs['payment_method'] == 'cash')

                        <button
                            class="btn btn-main w-100 pay-btn mt-4 pay_button"
                            data-amount="{{ $inputs['doctor_fee'] }}">
                            <i class="fa-solid fa-credit-card me-2"></i>
                            Book Now
                        </button>

                        @else
                        <button
                            class="btn btn-main w-100 pay-btn mt-4 pay_button"
                            data-amount="{{ $inputs['doctor_fee'] }}">
                            <i class="fa-solid fa-credit-card me-2"></i>
                            Pay Now
                        </button>

                        <div class="secure-text">
                            <i class="fa-solid fa-shield-halved me-2"></i>
                            100% Secure Payment
                        </div>
                            
                        @endif


                    </div>

                </div>

            </div>

        </div>
    </div>

</section>

<!-- end book-appointment -->


@endsection

@section('frontend_bottom_script')
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>



    // Function to handle payment initiation
    function initiatePayment(totalAmount, appoiId) {
        var amountInPaise = Math.round(totalAmount * 100);
        const rajor_pay = window.razorpayKey;
        const app_name = window.razorpayKey;
        console.log(amountInPaise, appoiId);
        var options = {
            "key": "{{ config('app.razorpay.key') }}",
            //   "key": "{{ env('RAZORPAY_KEY') }}",
            "amount": amountInPaise, // Amount in paise
            "name": "{{ config('app.name') }}",
            //  "name": "{{ env('APP_NAME') }}",
            "description": "Payment",
            "image": "{{ asset('front/assets/img/favicon.png') }}",
            /* "handler": function(response) {
                completePayment(response, totalAmount, appoiId);
            }, */
            handler: function(response) {
                let paymentId = response.razorpay_payment_id;
                $.ajax({

                    url: "{{ route('front.verify-Payment') }}",
                    type: 'GET',
                    data: {
                        payment_id: response.razorpay_payment_id,
                        appoi_id: appoiId,
                        amount: totalAmount,
                    },
                    success: function(response) {
                        // Handle successful payment
                        completePayment(paymentId, appoiId)
                        //alert("Payment successful!");
                    },
                    error: function(error) {
                        console.error(error);
                        alert("Payment failed!");
                    }
                });
            },
            "prefill": {
                "name": "{!! $inputs['full_name'] !!}",
                "email": "{!! $inputs['email_id'] !!}",
            },
            "theme": {
                "color": "#f86f02"
            }
        };
        var rzp1 = new Razorpay(options);
        rzp1.open();
    }

    // Function to complete payment after Razorpay's callback
    function completePayment(paymentId, appoiId) {
        let SITEURL = "{{ route('front.appointment-detail') }}";
        let payment_method= "{!! $inputs['payment_method'] !!}";

        window.location.href = SITEURL + '?payment_id=' + paymentId + '&appoi_id=' + appoiId + '&payment_method=' + payment_method;
    }



    $(document).ready(function() {
        let validationStatus = false;
        let totalAmount = "{!! $inputs['doctor_fee'] !!}";
        var payment_method= "{!! $inputs['payment_method'] !!}";
        //alert(totalAmount);
        //  alert("Payment process initiated!");
        $(document).on('click', '.pay_button', function(e) {
            e.preventDefault();

            $('#message').hide().html('');

            let dd = @json($inputs);

            $.ajax({
                method: 'POST',
                url: "{{ route('front.get-slots') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    appoiData: JSON.stringify(dd),
                    proceed_to_pay: 1,
                    save_data: 1
                },

                beforeSend: function() {
                    $('#loader').show();
                },

                success: function(responseData) {

                    $('#loader').hide();

                    if (responseData.success === true) {

                        let appoiId = responseData.extra.id;
                        if(payment_method == 'cash')
                        {
                            let paymentId = "";    
                            completePayment(paymentId, appoiId);
                            
                        }else{

                            initiatePayment(
                                "{{ $inputs['doctor_fee'] }}",
                                appoiId
                            );

                        }


                    } else {

                        $('#message')
                            .html(responseData.message)
                            .show();

                    }
                },

                error: function(xhr) {

                    $('#loader').hide();

                    if (xhr.responseJSON?.message) {

                        $('#message')
                            .html(xhr.responseJSON.message)
                            .show();

                    } else {

                        $('#message')
                            .html('Something went wrong.')
                            .show();

                    }
                }
            });
        });
    });
</script>
{{-- <script>
        let totalAmount = 0;
        let appoiId = 0;
        var SITEURL = '{{ route('front.payment') }}';
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
let validationStatus = false;
$('body').on('click', '.pay_button', function(e) {
e.preventDefault();
/* let doctor_id = $("#doctor_id").data('doctor_id');
let booking_date = $("#booking_date").data('booking_date');
let slot_timing = $("#slot_timing").data('slot_timing');
let slot_type = $("#slot_type").data('slot_type');
let full_name = $("#full_name").data('full_name');
let email_id = $("#email_id").data('email_id');
let phone_no = $("#phone_no").data('phone_no'); */


/* console.log(slot_timing, doctor_id, slot_type, email_id, full_name, booking_date, phone_no);
return false; */

/* var queryParams = getQueryParams(); */

// Add CSRF token to the query parameters
/* queryParams['_token'] = '{{ csrf_token() }}';
queryParams['slot_timing2'] = slot_timing; */
let dd = '{!! json_encode($inputs) !!}';
/* console.log(dd) */

$.ajax({
method: 'POST',
url: "{{ route('front.get-slots') }}",
data: {
_token: '{{ csrf_token() }}',
appoiData: dd,
/* booking_date: booking_date,
slot_timing: slot_timing,
slot_type: slot_type,
full_name: full_name,
email_id: email_id,
phone_no: phone_no,*/
proceed_to_pay: 'proceed_to_pay',
save_data: 'save_data'
},

beforeSend: function() {
$('#loader').show();
},
success: function(responseData) {
$('#loader').hide();

if (responseData.success) {
//console.log(response);
let totalAmount = $(this).attr("data-amount");
let appoiId = responseData.extra.id;
validationStatus = true;

} else {
$('#message').show();
$('#message').html(response.message);
//validationStatus = false;
}

$('#bookAppointment').modal('show');
}
});



});

var options = {
"key": "{{ env('RAZORPAY_KEY') }}",
"amount": (totalAmount * 100), // 2000 paise = INR 20
"name": "{{ env('APP_NAME') }}",
"description": "Payment",
"image": "{{ asset('front/assets/img/favicon.png') }}",
"handler": function(response) {
window.location.href = SITEURL +
'?payment_id=' + response.razorpay_payment_id + '&appoi_id=' +
appoiId + '&amount=' + totalAmount;
},
/* "prefill": {
"name": 'test',
"email": 'abc@gmail.com',
}, */
"theme": {
"color": "#528FF0"
}
};
if (validationStatus) {
var rzp1 = new Razorpay(options);
rzp1.open();
e.preventDefault();
}
</script> --}}
@endsection