@extends('layouts.app')
@section('content')
    @php
        $locale = session()->get('locale') ? session()->get('locale') : App\Helpers\ConstantHelper::ENGLISH;
    @endphp
    <section class="pay-booking py-4 py-sm-5">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="top-head">
                        <h2>{{ __('label.book_your_appointment') }}</h2>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="py-2 py-sm-4">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="services-tabs">

                        <div class="tab-content" id="nav-tabContent">
                            @include('customer.book-appoinment.nav-bar')

                            <div class="row justify-content-center">
                                <div class="col-md-8">
                                    <form class="form" role="post-data" method="POST"
                                        action="/api/book-appointments/store-summary"
                                        redirect="/book-appointments/confirmed">
                                        @csrf
                                        <input type="hidden" name="branch_id" value="{{ @$cart->branch_id }}">
                                        <input type="hidden" name="user_id"
                                            value="{{ auth()->check() ? auth()->user()->id : '' }}">
                                        <input type="hidden" name="cart_id" id="cart_id" value="{{ @$cart->id }}">
                                        <input type="hidden" name="service_type_id" value="{{ @$cart->service_type_id }}">
                                        <div class="bg-light p-3 my-4">
                                            <div class="bnooking-help-txt">
                                                <h6><strong>{{ __('label.apply_coupon_code_and_redemption_points_if_any') }}</strong>
                                                </h6>
                                                <p>{{ __('label.click_on_payment_gateway_to_proceed') }}</p>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-6 col-12">
                                                    <div class="form-group custominnergroup">
                                                        <label class="pay-label">{{ __('label.sub_total') }} <span
                                                                class="text-danger">*</span></label>
                                                        <div class="search-group">
                                                            <input type="text" name="sub_total" class="form-control"
                                                                placeholder="" value="{{ 'EGP  ' . @$cart->sub_total }}"
                                                                readonly>
                                                        </div>
                                                    </div>
                                                </div>
                                                @if ($cart->applied_distance_charge > 0 && @$cart->serviceType->alias == App\Helpers\ConstantHelper::HOME)
                                                    <div class="col-md-6 col-12">
                                                        <div class="form-group custominnergroup">
                                                            <label
                                                                class="pay-label">{{ __('label.applied_distance_charges') }}
                                                            </label>
                                                            <div class="search-group">
                                                                <input type="text" name="applied_distance_charges"
                                                                    class="form-control" placeholder=""
                                                                    value="{{ 'EGP  ' . @$cart->applied_distance_charge }}"
                                                                    readonly>
                                                            </div>
                                                            <caption>
                                                                <span style="color:red; font-size:10px;">
                                                                    {{ __('message.you_have_selected_the_location_with_in_range', ['distance' => round($sessionBookingInfo['distance'])]) }}
                                                                </span>
                                                            </caption>
                                                        </div>
                                                    </div>
                                                @endif
                                            </div>
                                            <div class="row">
                                                {{-- @if (@$appliedCoupon->coupon_code || count($coupons) > 0) --}}
                                                <div class="col-md-6 col-12">
                                                    <div class="form-group custominnergroup">
                                                        <label class="pay-label w-100">{{ __('label.apply_coupon') }}
                                                            <span class="redeem-txt cursor-pointer apply-coupan-point"
                                                                data-target="#couponavalialbel"
                                                                data-toggle="modal">{{ count($coupons) }}
                                                                {{ __('label.coupon_available') }}</span></label>
                                                        <div class="search-group position-relative">
                                                            <input type="text" class="form-control" name="coupon_code"
                                                                id="coupon-code" value="{{ @$appliedCoupon->coupon_code }}"
                                                                @if (@$appliedCoupon->coupon_code) readonly @endif>
                                                            @if (@$appliedCoupon->coupon_code)
                                                                <button type="button"
                                                                    class="btn btn-danger btn-sm cou-apply-btn"
                                                                    id="remove-points-btn"
                                                                    onclick="applyCoupon('removed')">{{ __('label.remove') }}</button>
                                                            @else
                                                                <button type="button"
                                                                    class="btn btn-primary btn-sm cou-apply-btn"
                                                                    id="apply-points-btn"
                                                                    onclick="applyCoupon('apply')">{{ __('label.apply') }}</button>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                                {{-- @endif --}}

                                                {{-- @if (@$cart->redeem_points > 0 || auth()->user()->points > 0) --}}
                                                <div class="col-md-6 col-12">
                                                    <div class="form-group custominnergroup">
                                                        {{-- @if (auth()->user()->points > 0) --}}
                                                        <label class="pay-label w-100">{{ __('label.redeem_points') }}
                                                            <span
                                                                class="redeem-txt apply-redeen-point">{{ 'EGP ' . auth()->user()->points }}</span></label>
                                                        {{-- @endif --}}
                                                        <div class="search-group position-relative">
                                                            <input type="text" name="redeem_points" class="form-control"
                                                                id="redeem-points-input"
                                                                value="{{ @$cart->redeem_points }}"
                                                                @if ($cart->redeem_points > 0) readonly @endif>

                                                            @if ($cart->redeem_points > 0)
                                                                <button type="button"
                                                                    class="btn btn-danger btn-sm cou-apply-btn"
                                                                    id="remove-points-btn"
                                                                    onclick="applyRedeemPoints('removed')">{{ __('label.remove') }}</button>
                                                            @else
                                                                <button type="button"
                                                                    class="btn btn-primary btn-sm cou-apply-btn"
                                                                    id="apply-points-btn"
                                                                    onclick="applyRedeemPoints('apply')">{{ __('label.apply') }}</button>
                                                            @endif
                                                        </div>
                                                        <caption><span
                                                                style="color:red; font-size:10px;">{{ __('static.point_is_equal_to', ['value' => $setting->points_rate_factor]) }}</span>
                                                        </caption>
                                                    </div>
                                                </div>
                                                {{-- @endif --}}

                                                @if (@$cart->wallet > 0 || auth()->user()->wallet > 0)
                                                    <div class="col-md-6 col-12">
                                                        <div class="form-group custominnergroup">
                                                            <label class="pay-label w-100">{{ __('label.wallet') }}
                                                                <span
                                                                    class="redeem-txt apply-redeen-point">{{ 'EGP ' . auth()->user()->wallet }}</span></label>
                                                            <div class="search-group position-relative">
                                                                <input type="text" name="wallet" class="form-control"
                                                                    id="wallet-input" value="{{ @$cart->wallet }}"
                                                                    @if ($cart->wallet > 0) readonly @endif>

                                                                @if ($cart->wallet > 0)
                                                                    <button type="button"
                                                                        class="btn btn-danger btn-sm cou-apply-btn"
                                                                        id="remove-wallet-btn"
                                                                        onclick="applyWalletAmount('removed')">{{ __('label.remove') }}</button>
                                                                @else
                                                                    <button type="button"
                                                                        class="btn btn-primary btn-sm cou-apply-btn"
                                                                        id="apply-wallet-btn"
                                                                        onclick="applyWalletAmount('apply')">{{ __('label.apply') }}</button>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endif

                                                <div class="col-md-6 col-12">
                                                    <div class="form-group custominnergroup">
                                                        <label class="pay-label">{{ __('label.balance_amount') }} <span
                                                                class="text-danger">*</span></label>
                                                        <div class="search-group">
                                                            <input type="text" class="form-control"
                                                                id="balance-amount-input" name="payable_amount"
                                                                value="{{ @$cart->payable_amount }}" readonly>
                                                        </div>
                                                        @if ($setting && $setting->partial_payment == 1 && $cart->payable_amount > 0)
                                                            <div class="check-box mt-3">
                                                                <input id="isPartially" type="checkbox" class="filled-in"
                                                                    name="is_partial">
                                                                <label for="isPartially">
                                                                    <div class="service-context">
                                                                        <p><strong>{{ __('label.partially_amount') }}</strong>
                                                                        </p>
                                                                    </div>
                                                                </label>
                                                            </div>
                                                        @endif
                                                    </div>
                                                </div>
                                                @if ($setting && $setting->partial_payment == 1 && $cart->payable_amount > 0)
                                                    <div class="col-md-6 col-12" id="partial-amount-div"
                                                        style="display: none;">
                                                        <div class="form-group custominnergroup">
                                                            <label class="pay-label">{{ __('label.partially_amount') }}
                                                                <span class="text-danger">*</span></label>
                                                            <div class="search-group">
                                                                <input type="text" name="partial_amount"
                                                                    id="partial-amount"
                                                                    value="{{ old('partial_amount') }}"
                                                                    class="form-control numberonly">
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endif
                                            </div>

                                            <div class="row mt-2 mt-sm-4">
                                                <div class="col-md-12">
                                                    {{-- Online --}}
                                                    <div id="accordion-online" class="pay-bookingaccord">
                                                        <div class="card">
                                                            <div class="card-header" id="headingTwoOnline">
                                                                <h5 class="mb-0">
                                                                    <button type="button" class="btn btn-link collapsed"
                                                                        data-toggle="collapse"
                                                                        data-target="#collapseTwoOnline"
                                                                        aria-expanded="false"
                                                                        aria-controls="collapseTwoOnline">
                                                                        <div className="address-radio">
                                                                            <input type="radio" class="with-gap"
                                                                                name="payment_mode" value="online"
                                                                                id="groupType-Online" checked />
                                                                            <label data-toggle="modal"
                                                                                data-target="#exampleModal"
                                                                                for="groupType-Online"
                                                                                class="payment-label mb-0">
                                                                                {{ __('label.online') }}.</label>
                                                                        </div>
                                                                    </button>
                                                                </h5>
                                                            </div>
                                                            <div id="collapseTwoOnline" class="collapse"
                                                                aria-labelledby="headingTwoOnline"
                                                                data-parent="#accordion-online">
                                                                <div class="card-body">
                                                                    <div class="address-radio-2">
                                                                        <div className="address-radio">
                                                                            <input type="radio"
                                                                                class="payment-method-type with-gap"
                                                                                name="payment_method_type" value="card"
                                                                                id="card" />
                                                                            <label for="card"
                                                                                class="payment-label mb-0">{{ __('label.card') }}</label>
                                                                            <img class="master-card-img"
                                                                                src="{{ asset('assets/images/mc.png') }}" />
                                                                        </div>
                                                                        <div className="address-radio">
                                                                            <input type="radio"
                                                                                class="payment-method-type with-gap"
                                                                                name="payment_method_type" value="wallet"
                                                                                id="wallet" />
                                                                            <label for="wallet"
                                                                                class="payment-label mb-0">{{ __('label.wallet') }}</label>
                                                                        </div>
                                                                    </div>
                                                                    <div class="d-block">
                                                                        {{ __('label.redirected_to_payment') }}.
                                                                    </div>

                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>


                                                    {{-- Cash --}}
                                                    @if (isset($setting) && $setting->cash == 1 && $cart->payable_amount > 0)
                                                        <div id="accordion-cash" class="pay-bookingaccord">
                                                            <div class="card">
                                                                <div class="card-header" id="headingTwocash">
                                                                    <h5 class="mb-0">
                                                                        <button type="button"
                                                                            class="btn btn-link collapsed"
                                                                            data-toggle="collapse"
                                                                            data-target="#collapseTwocash"
                                                                            aria-expanded="false"
                                                                            aria-controls="collapseTwocash">
                                                                            <div className="address-radio">
                                                                                <input type="radio" class="with-gap"
                                                                                    name="payment_mode" value="cash"
                                                                                    id="groupType-cash" />
                                                                                <label for="groupType-cash"
                                                                                    class="payment-label mb-0">
                                                                                    {{ __('label.cash') }}.</label>
                                                                            </div>
                                                                        </button>
                                                                    </h5>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>

                                        </div>

                                        <div class="d-flex mt-4 justify-content-between">
                                            <a href="{{ url('/book-appointments/detail') }}"
                                                class="btn btn-outline-secondary">
                                                <i class="fas fa-chevron-left mr-1"></i> {{ __('static.back') }}
                                            </a>

                                            <button type="button" class="btn btn-primary" role="button"
                                                data-request="ajax-submit" data-target="[role=post-data]"><i
                                                    class="fas fa-chevron-right mr-1"></i>
                                                {{ __('label.confirm_and_pay') }}.</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>
    {{-- modal --}}

    {{-- <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>

        <div class="modal-body">
            <h1></h1>

            <div class="row">
                <div class="col-md-6">
                    <div className="address-radio">
                        <input type="radio" class="with-gap"
                            name="payment_mode" value="online"
                            id="groupType-Online1"  />
                        <label for="groupType-Online1"
                            class="payment-label mb-0">ghhjhjj</label>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="demo-inline-spacing">
                        <div className="address-radio">
                            <input type="radio" class="with-gap"
                                name="payment_mode" value="online"
                                id="groupType-Online2" />
                            <label for="groupType-Online2"
                                class="payment-label mb-0">ghhjhjj</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div> --}}


    {{-- end moddal --}}
    {{-- Coupon Code Modal --}}
    @include('customer.book-appoinment.coupon-code-modal')
@endsection

@section('script')
    <script>
        // Trigger click event on the button to open the accordion
        $('#headingTwoOnline button').click();
        $('input[name="payment_mode"]').change(function() {
            if ($(this).val() === 'cash') {
                $('#headingTwoOnline button').click(); // Close the "Online" accordion
            }
        });

        $(document).ready(function() {
            $('#isPartially').change(function() {
                if ($(this).is(':checked')) {
                    $('#partial-amount-div').show();
                    $('#accordion-cash').hide();
                } else {
                    let originalPayableAmount = Math.round('{{ @$cart->payable_amount }}');
                    $('#balance-amount-input').val(originalPayableAmount)
                    $('#partial-amount-div').hide();
                    $('#partial-amount').val('');
                    $('#accordion-cash').show();
                }
            });
        });

        // Calculate Partial Amount
        $('#partial-amount').on("change", function() {
            let partialAmount = parseFloat($(this).val());
            let balanceAmount = parseFloat($('#balance-amount-input').val());
            let originalPayableAmount = parseFloat('{{ @$cart->payable_amount }}');
            let halfOriginalPayable = Math.round(originalPayableAmount / 2);

            if (!partialAmount && partialAmount !== 0) {
                $('#balance-amount-input').val(originalPayableAmount);
                $('#balance-amount-display').text(originalPayableAmount);
            } else {
                if (partialAmount < halfOriginalPayable) {
                    $(this).val(halfOriginalPayable);
                    partialAmount = halfOriginalPayable;
                }

                if (partialAmount > balanceAmount) {
                    $(this).val(originalPayableAmount);
                    partialAmount = originalPayableAmount;
                }

                let newBalanceAmount = Math.round(originalPayableAmount - partialAmount);
                $('#balance-amount-input').val(newBalanceAmount);
                $('#balance-amount-display').text(newBalanceAmount);
            }
        });


        // Apply Redeem Points
        function applyRedeemPoints(type) {
            if (type == 'apply') {
                var redeemPoints = $('#redeem-points-input').val();
            } else {
                var redeemPoints = 0;
            }
            var cartId = $('#cart_id').val();
            $.ajax({
                url: app_url + '/api/bookings/apply-points', // Replace with your server-side endpoint
                type: 'POST',
                data: {
                    redeem_points: redeemPoints,
                    cart_id: cartId,
                    type: type,
                    '_token': '{{ csrf_token() }}'
                },
                beforeSend: function() {
                    $('#loaderDiv').show();
                },
                success: function($response) {
                    $('#loaderDiv').hide();
                    if ($response.status === 200) {
                        Swal.fire("Success!", $response.message, "success");
                        setTimeout(function() {
                            location.reload();
                        }, 2200);
                    }
                },
                error: function($response) {
                    $('#loaderDiv').hide();
                    if ($response.status === 422) {
                        if (
                            Object.size($response.responseJSON) > 0 &&
                            Object.size($response.responseJSON.errors) > 0
                        ) {
                            show_validation_error($response.responseJSON.errors);
                        }
                    } else {
                        Swal.fire(
                            "Info!",
                            $response.responseJSON.message,
                            "warning"
                        );
                        setTimeout(function() {}, 1200);
                    }
                },
            });
        }

        // Apply Coupon

        function applyCoupon(type) {

            if (type == 'apply') {
                var couponCode = $('#coupon-code').val();
            } else {
                var couponCode = '';
            }
            var cartId = $('#cart_id').val();

            $.ajax({
                url: app_url + '/api/bookings/apply-coupon', // Replace with your server-side endpoint
                type: 'POST',
                data: {
                    coupon_code: couponCode,
                    cart_id: cartId,
                    type: type,
                    '_token': '{{ csrf_token() }}'
                },
                beforeSend: function() {
                    $('#loaderDiv').show();
                },
                success: function($response) {
                    $('#loaderDiv').hide();
                    if ($response.status === 200) {
                        Swal.fire("Success!", $response.message, "success");
                        setTimeout(function() {
                            location.reload();
                        }, 2200);
                    }
                },
                error: function($response) {
                    $('#loaderDiv').hide();
                    if ($response.status === 422) {
                        if (
                            Object.size($response.responseJSON) > 0 &&
                            Object.size($response.responseJSON.errors) > 0
                        ) {
                            show_validation_error($response.responseJSON.errors);
                        }
                    } else {
                        Swal.fire(
                            "Info!",
                            $response.responseJSON.message,
                            "warning"
                        );
                        setTimeout(function() {}, 1200);
                    }
                },
            });
        }

        function applyWalletAmount(type) {

            if (type == 'apply') {
                var wallet = $('#wallet-input').val();
            } else {
                var wallet = 0;
            }
            var cartId = $('#cart_id').val();

            $.ajax({
                url: app_url + '/api/bookings/apply-wallet', // Replace with your server-side endpoint
                type: 'POST',
                data: {
                    wallet: wallet,
                    cart_id: cartId,
                    type: type,
                    '_token': '{{ csrf_token() }}'
                },
                beforeSend: function() {
                    $('#loaderDiv').show();
                },
                success: function($response) {
                    $('#loaderDiv').hide();
                    if ($response.status === 200) {
                        Swal.fire("Success!", $response.message, "success");
                        setTimeout(function() {
                            location.reload();
                        }, 2200);
                    }
                },
                error: function($response) {
                    $('#loaderDiv').hide();
                    if ($response.status === 422) {
                        if (
                            Object.size($response.responseJSON) > 0 &&
                            Object.size($response.responseJSON.errors) > 0
                        ) {
                            show_validation_error($response.responseJSON.errors);
                        }
                    } else {
                        Swal.fire(
                            "Info!",
                            $response.responseJSON.message,
                            "warning"
                        );
                        setTimeout(function() {}, 1200);
                    }
                },
            });
        }
    </script>
@endsection