@extends('layout.app')
@section('content')

    <a data-toggle="modal" class="ml-auto mr-4" data-target="#staticBackdrop" href="javascript:;">
        <button class="themeBtn btnPay">Place Service Payment</button>
    </a>
    <!-- Modal -->
    <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1"
         aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">
                        <img src="{{ asset('front/images/headericon.jpg') }}" alt="">
                        Joint Pain Specialists</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="checkOutStyle">
                        <div class="container">
                            <div class="col-lg-12 col-md-12">
                                <div class="title text-center">
                                    <h5>Select Payment process</h5>
                                </div>
                            </div>

                            <div class="tab-content" id="pills-tabContent">
                                <div class="tab-pane fade show active" id="pills-online" role="tabpanel"
                                     aria-labelledby="pills-online-tab">
                                    <div class="row justify-content-center">
                                        <div class="col-lg-12 col-md-12">
                                            <div class="title text-center">
                                                <h2>Payment Methods</h2>
                                                <ul class="nav nav-pills" id="pills-tab" role="tablist">
                                                    <li class="nav-item" role="presentation">
                                                        <a class="nav-link active my-5" id="pills-online-tab"
                                                           data-toggle="pill"
                                                           href="#pills-online" role="tab"
                                                           aria-controls="pills-online" aria-selected="true">Pay online
                                                        </a>
                                                    </li>
                                                    <li class="nav-item" role="presentation">
                                                        <a class="nav-link my-5" id="pills-cash-tab" data-toggle="pill"
                                                           href="#pills-cash"
                                                           role="tab"
                                                           aria-controls="pills-cash" aria-selected="false">Cash on
                                                            arrival
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>

                                        {{--Pay Online Form--}}
                                        <div class="col-lg-8 col-md-12">
                                            <form class="row formStyle" method="post" action="{{ route('online.payment') }}">
                                                @csrf

                                                <div class="col-md-12 mb-4 text-center">
                                                    <img src="{{asset('front')}}/images/card-img.png" alt="">
                                                </div>
                                                <div class="col-md-12 mt-4 text-center">
                                                    <button id="proceedToPayBtn" class="btnStyle" type="submit">Proceed
                                                        To Pay
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>

                                {{--Pay Cash On Arrival Form--}}
                                <div class="tab-pane fade" id="pills-cash" role="tabpanel"
                                     aria-labelledby="pills-cash-tab">
                                    <form method="POST" action="{{ route('cash.on.arrival') }}" class="row justify-content-center formStyle"
                                          id="">
                                        @csrf

                                        <div class="title text-center">
                                            <h2>Payment Methods</h2>
                                            <ul class="nav nav-pills" id="pills-tab" role="tablist">
                                                <li class="nav-item" role="presentation">
                                                    <a class="nav-link my-5" id="pills-cash-tab" data-toggle="pill"
                                                       href="#pills-cash"
                                                       role="tab"
                                                       aria-controls="pills-cash" aria-selected="false">Cash on
                                                        arrival
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="col-md-12 text-center mt-4">
                                            <button type="submit" id="confirmBtn" class="btnStyle">Confirm</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('script')
    <script>
        $(document).ready(function () {
            // Initially hide the buttons
            $('#proceedToPayBtn').hide();
            $('#confirmBtn').hide();

            // Handle payment method selection
            $('#pills-online-tab').click(function () {
                // Show the Proceed To Pay button
                $('#proceedToPayBtn').show();
                // Hide the Confirm button
                $('#confirmBtn').hide();
                $('#pills-cash-tab').hide();
            });

            $('#pills-cash-tab').click(function () {
                // Hide the Proceed To Pay button
                $('#proceedToPayBtn').hide();
                // Show the Confirm button
                $('#confirmBtn').show();
            });
        });
    </script>
@endsection