@extends('layouts.app')

@section('content')
    @php
        $locale = session()->get('locale') ? session()->get('locale') : App\Helpers\ConstantHelper::ENGLISH;
    @endphp

    <section class="py-2 py-sm-4">
        <div class="container">
            <form class="form" role="post-data" method="POST" action="/api/bookings/store" redirect="/bookings/transaction">
                @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="row">
                    <div class="col-md-8 mb-3 mb-sm-0">
                        <div class="personal-detailstext">
                            <h3>{{ __('label.personal_details') }}</h3>
                        </div>

                        <div class="row mt-2 mt-sm-4">
                            <div class="col-md-6 col-12">
                                <div class="form-group">
                                    <label class="pay-label">{{ __('label.first_name') }} <span
                                            class="text-danger">*</span></label>
                                    <div class="search-group">
                                        <input type="text" name="first_name" value="{{ auth()->user()->first_name }}"
                                            class="form-control">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="form-group">
                                    <label class="pay-label">{{ __('label.last_name') }} <span
                                            class="text-danger">*</span></label>
                                    <div class="search-group">
                                        <input type="text" name="last_name" value="{{ auth()->user()->last_name }}"
                                            class="form-control">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="form-group">
                                    <label class="pay-label">{{ __('label.email_address') }} <span
                                            class="text-danger">*</span></label>
                                    <div class="search-group  envelope-icon">
                                        <a href="##"> <i class="far fa-envelope" aria-hidden="true"></i> </a>
                                        <input type="email" name="email" value="{{ auth()->user()->email }}"
                                            class="form-control">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="form-group">
                                    <label class="pay-label">{{ __('label.phone') }} <span
                                            class="text-danger">*</span></label>
                                    <div class="search-group  envelope-icon">
                                        <a href="##"> <i class="fas fa-mobile-alt"></i> </a>
                                        <input type="text" name="mobile_number"
                                            value="{{ auth()->user()->mobile_number }}" class="form-control">
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="row mt-3 mt-sm-5">
                            <div class="col-md-12">
                                <div class="personal-detailstext">
                                    <h3>{{ __('label.payment_details') }}</h3>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-2 mt-sm-4">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <label class="pay-label">{{ __('label.sub_total') }} <span
                                                    class="text-danger">*</span></label>
                                            <div class="search-group">
                                                <input type="text" class="form-control" name="sub_total" placeholder=""
                                                    value="{{ '$' . @$cart->sub_total }}" disabled>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            @if (@$appliedCoupon->coupon_code || count($coupons) > 0)
                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <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">
                                        <label class="pay-label w-100">{{ __('label.redeem_points') }} <span
                                                class="redeem-txt apply-redeen-point">{{ '$' . auth()->user()->points }}</span></label>
                                        <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;">1
                                                Point is equal to
                                                ${{ $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">{{ '$' . 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">
                                    <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)
                                        <div class="check-box mt-3">
                                            <input id="isPartially" type="checkbox" class="filled-in">
                                            <label for="isPartially">
                                                <div class="service-context">
                                                    <p><strong>{{ __('label.partial_payment') }}</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">
                                        <label class="pay-label">{{ __('label.partially_amount') }} <span
                                                class="text-danger">*</span></label>
                                        <div class="search-group">
                                            <input type="text" id="partial-amount" name="partial_amount"
                                                value="{{ old('partial_amount') }}" class="form-control">
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>


                        <div class="row mt-3 mt-sm-5">
                            <div class="col-md-12">
                                <div class="personal-detailstext">
                                    <h3>{{ __('label.payment_method') }}</h3>
                                </div>
                            </div>
                        </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 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">
                                                {{ __('label.redirected_to_payment') }}.
                                            </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 id="collapseTwocash" class="collapse" aria-labelledby="headingTwocash"
                                                data-parent="#accordion-cash">
                                                <div class="card-body">
                                                    {{ __('label.redirected_to_payment') }}.
                                                </div>
                                            </div> --}}
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>

                        <div class="row mt-4 mt-sm-5">
                            <div class="col-md-12">
                                <a href="{{ url('/bookings/book-appointment') }}"
                                    class="btn btn-primary-banner">{{ __('label.back') }}</a>
                                <button type="button" class="btn btn-primary-banner" role="button"
                                    data-request="ajax-submit"
                                    data-target="[role=post-data]">{{ __('label.confirm_and_pay') }}</button>
                            </div>
                        </div>

                    </div>
                    <div class="col-md-4">
                        <div class="open-box">
                            <div class="overlay">
                                <h2 class="new-text">{{ __('static.starting_services_from') }}
                                    {{ '$' . @$cart->branchView->starting_from }}</h2>
                                <div class="listing-item-content">
                                    <span class="tag">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="far fa-star"></i>
                                        <i class="far fa-star"></i>
                                    </span>
                                    <h1 class="my-2">
                                        @foreach ($cart->services as $service)
                                            {{ $locale == App\Helpers\ConstantHelper::ARABIC ? $service->name_ar : $service->name_en }}
                                            @unless ($loop->last)
                                                ,
                                            @endunless
                                        @endforeach
                                    </h1>
                                    <p>{{ $cart->branch->address }}</p>
                                </div>
                            </div>
                            <div class="img-box">
                                <img src="{{ isset($cart->branch->companyProfile->company_logo) ? $cart->branch->companyProfile->company_logo : '' }}"
                                    onerror="this.src='/assets/images/service-img-2.jpg'"
                                    alt="{{ isset($cart->branch->companyProfile->company_logo) ? $cart->branch->companyProfile->company_logo : '' }}">
                            </div>
                        </div>
                        <div class="booking-summary mt-4">
                            <h6><i class="far fa-calendar-alt mr-2"></i>{{ __('label.booking_summary') }}</h6>

                            <div class="row mt-4">
                                <div class="col-md-12">
                                    <ul>
                                        <li>{{ __('label.date') }}
                                            <span>{{ date('d-m-Y', strtotime($cart->date)) }}</span>
                                        </li>
                                        <li>{{ __('label.time') }}
                                            <span>{{ App\Helpers\GeneralHelper::timeFormat($cart->start_time) }}-{{ App\Helpers\GeneralHelper::timeFormat($cart->end_time) }}</span>
                                        </li>
                                        <li>{{ __('label.service') }} <span>
                                                @foreach ($cart->services as $service)
                                                    {{ $locale == App\Helpers\ConstantHelper::ARABIC ? $service->name_ar : $service->name_en }}
                                                    @unless ($loop->last)
                                                        ,
                                                    @endunless
                                                @endforeach
                                            </span></li>
                                        <li class="total-costs"></li>
                                        <li>{{ __('label.sub_total') }} <span>{{ $cart->sub_total }}</span></li>
                                        <li>{{ __('label.discount') }}
                                            <span>{{ '$' . $cart->total_discount_amount }}</span>
                                        </li>
                                        <li>{{ __('label.redemption') }} <span>{{ '$' . $cart->redeem_points }}</span>
                                        </li>
                                        <li class="total-costs"></li>
                                        <li class="total-costs">{{ __('label.payable_amount') }} <span
                                                id="balance-amount-display">${{ $cart->payable_amount }}</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </form>
        </div>
    </section>
    @include('customer.branches.available-coupon-modal')
@endsection

@section('script')
    <script>
        $(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