HEX
Server: Apache/2.4.52 (Ubuntu)
System: Linux ip-10-0-8-47 6.8.0-1021-aws #23~22.04.1-Ubuntu SMP Tue Dec 10 16:31:58 UTC 2024 aarch64
User: ubuntu (1000)
PHP: 8.1.2-1ubuntu2.22
Disabled: NONE
Upload Files
File: /var/www/javago-portal-updates/resources/views/cafe/set-cafe-profile.blade.php
<x-app-layout>
    <x-slot name="css">
        <link rel="stylesheet" href="{{ asset('assets/css/components/custom-modal.css') }}">
        <link rel="stylesheet" href="{{ asset('plugins/select2/select2.min.css') }}">
        <link rel="stylesheet" href="{{ asset('assets/css/components/custom-modal.css') }}">
        <link rel="stylesheet" href="{{ asset('plugins/table/datatable/datatables.css') }}">
        <link rel="stylesheet" href="{{ asset('plugins/table/datatable/dt-global_style.css') }}">
        <style>
            .layout-top-spacing {
                min-height: calc(100vh - 190px) !important;
            }

            /* > Process Styles */
            .process-wrap {
                width: 50%;
                margin: 100px auto;
                padding-top: 100px;
            }

            .process-main {
                width: 100%;
                min-width: 320px;
                display: flex;
            }

            .col-4 {
                width: 25%;
                position: relative;
            }

            .process-main .col-4:not(:first-child):before {
                content: "";
                display: block;
                position: absolute;
                width: 100%;
                height: 2px;
                top: 32%;
                left: calc(-50% + 20px);
                right: 0;
                background: #ebebeb;
                border: 2px #ebebeb solid;
                -o-transition: .4s;
                -ms-transition: .4s;
                -moz-transition: .4s;
                -webkit-transition: .4s;
                transition: .4s;
            }

            .process-step-cont {
                font-family: sans-serif;
                font-size: 16px;
                text-transform: uppercase;
                text-decoration: none;
                white-space: nowrap;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: center;
                align-content: space-between;
            }

            .process-step {
                border: 3px #ebebeb solid;
                border-radius: 100%;
                line-height: 0;
                background: #D9D9D9;
                text-align: center;
                align-items: center;
                justify-content: center;
                align-self: center;
                display: flex;
                color: var(--coffee-dark) !important;
                width: 65px;
                height: 65px;
                font-weight: 700;
                margin-bottom: 7px;
                z-index: 4;
                cursor: pointer;
                font-size: 30px;
            }

            .active-step {
                background: var(--coffee-dark) !important;
                border: 3px var(--coffee-medium) solid !important;
            }

            .process-label {
                color: #959595;
                font-weight: 600;
                width: 100%;
                text-align: center;
            }

            @media screen and (max-width: 640px) {
                .process-main {
                    flex-wrap: wrap;
                }

                .col-4 {
                    width: 50%;
                }

                .process-main .col-4:nth-of-type(3):not(:first-child):before {
                    top: -19.5px;
                    left: calc(-50% + 145px);
                    transform: rotate(150deg);
                }
            }

            .modalDilogFilter {
                margin: 114px 44px 0 auto !important;
            }

            .modal-sm {
                max-width: 450px;
            }

            .flatpickr-calendar.open {
                z-index: 1050;
            }

            input::-webkit-outer-spin-button,
            input::-webkit-inner-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }

            /* Firefox */
            input[type=number] {
                -moz-appearance: textfield;
            }

            .form-group label,
            label {
                text-transform: capitalize;
            }

            .process-main .step:not(:first-child):before {
                content: "";
                display: block;
                position: relative;
                width: 100%;
                height: 2px;
                top: 32%;
                left: calc(-50% + 20px);
                right: 0;
                border: 2px #ebebeb dotted;
                -o-transition: .4s;
                -ms-transition: .4s;
                -moz-transition: .4s;
                transition: .4s;
            }

            .process-main .step {
                width: 10%;
            }

            .tab {
                display: none;
            }

            .step.active .process-step {
                border: 1px solid #6A442E;
                background: #fff;
            }

            .tab {
                margin-top: 4%;
            }

            hr {
                margin-top: 0px;
                margin-bottom: 0px;
                border-top: 1px solid #461c10;
            }

            .header-container {
                display: none;
            }

            div#thanks_for_submission {
                height: 80vh;
                position: relative;
            }

            #thanks_for_submission .col-md-8 {
                margin: 0 auto;
                top: 50%;
            }
        </style>
    </x-slot>
    <div id="setup_profile">
        <!-- Circles which indicates the steps of the form: -->
        <div style="text-align:center;margin-top:40px;" class="process-main justify-content-center d-flex">
            <div class="step">
                <div class="process-step-cont">
                    <div class="process-step step-1">
                        1
                    </div>
                    <span class="process-label">{{ __('common.cafe') }}</span>
                </div>
            </div>
            <div class="step">
                <div class="process-step-cont">
                    <div class="process-step step-2">
                        2
                    </div>
                    <span class="process-label">{{ __('common.Menu') }}</span>
                </div>
            </div>
            <div class="step">
                <div class="process-step-cont">
                    <div class="process-step step-3">
                        3
                    </div>
                    <span class="process-label">{{ __('common.loyaltyCard') }}</span>
                </div>
            </div>
            <div class="step">
                <div class="process-step-cont">
                    <div class="process-step step-4">
                        4
                    </div>
                    <span class="process-label">{{ __('common.review') }}</span>
                </div>
            </div>
            <div class="step">
                <div class="process-step-cont">
                    <div class="process-step step-5">
                        5
                    </div>
                    <span class="process-label">{{ __('common.publish') }}</span>
                </div>
            </div>
        </div>
        <!-- profile tab start here -->
        <div class="tab">
            <div class="modal fade" id="setCafeHoursModel" tabindex="-1" role="dialog"
                aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header border-remove-model">
                            <h3 class="modal-title fw-bold" id="exampleModalLabel">
                                <strong>{{ __('common.setCafeHours') }}</strong>
                            </h3>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <svg class="mt-2 model-close" width="25" height="25" viewBox="0 0 25 25" fill="none"
                                    stroke="currentColor" stroke-width="2">
                                    <path
                                        d="M12.5002 22.9168C18.2531 22.9168 22.9168 18.2531 22.9168 12.5002C22.9168 6.7472 18.2531 2.0835 12.5002 2.0835C6.7472 2.0835 2.0835 6.7472 2.0835 12.5002C2.0835 18.2531 6.7472 22.9168 12.5002 22.9168Z"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                    <path d="M15.625 9.375L9.375 15.625" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    <path d="M9.375 9.375L15.625 15.625" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                </svg>
                            </button>
                        </div>
                        {{-- add set cafe hours from --}}
                        <form id="set_cafe_hours_from" action="{{ $cafesetHoursUrl }}" method="POST">
                            @csrf
                            @method('PUT')
                            <div class="modal-body pb-0">
                                @foreach ($cafe_timing as $time)
                                    <div class="form-group d-flex">
                                        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 mx-0 px-0 form-group">
                                            <label class="form-label d-flex">
                                                <svg class="mr-2 svg-cafe-hours" width="25" height="24" viewBox="0 0 25 24"
                                                    fill="none" stroke="currentColor" stroke-width="2">
                                                    <path
                                                        d="M12.0444 22C17.5673 22 22.0444 17.5228 22.0444 12C22.0444 6.47715 17.5673 2 12.0444 2C6.52159 2 2.04443 6.47715 2.04443 12C2.04443 17.5228 6.52159 22 12.0444 22Z"
                                                        stroke-linecap="round" stroke-linejoin="round" />
                                                    <path d="M12.0444 6V12L16.0444 14" stroke-linecap="round"
                                                        stroke-linejoin="round" />
                                                </svg>
                                                <span>{{ $cafe_days[$time->day] }}</span>
                                            </label>
                                        </div>
                                        <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 form-group">
                                            <input type="text" class="form-control px-3 open_time" maxlength="5"
                                                name="cafe[{{ $time->day }}][open_time]" placeholder=""
                                                value="{{ $time->open_time != '' ? $time->open_time : '' }}">
                                        </div>
                                        <div class="col-xl-1 col-lg-1 col-md-1 col-sm-1 mx-0 px-0 text-center form-group">
                                            <label class="form-label">{{ __('common.to') }}</label>
                                        </div>
                                        <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 form-group">
                                            <input type="text" class="form-control px-3 close_time" maxlength="5"
                                                name="cafe[{{ $time->day }}][close_time]" placeholder=""
                                                value="{{ $time->close_time != '' ? $time->close_time : '' }}">
                                        </div>
                                        <div class="col-xl-1 col-lg-1 col-md-1 col-sm-1 mx-0 px-0 form-group">
                                            <label class="switch s-coffee-medium-light">
                                                <input type="checkbox" class="is_active"
                                                    name="cafe[{{ $time->day }}][is_active]" value="1" {{ $time->is_active == 1 ? 'checked=' : '' }}>
                                                <span class="slider round"></span>
                                            </label>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <div class="modal-footer justify-content-start border-remove-model">
                                {{-- <button type="button" id="set_cafe_hours" class="btn btn-coffee-dark">{{
                                    __('common.Save') }}</button> --}}
                                <button type="button" id="set_cafe_hours_btn" class="btn btn-coffee-dark" {{--
                                    data-dismiss="modal" aria-label="Close" --}}>{{ __('common.Save') }}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="page-header row">
                <div class="page-title col-12 d-flex pr-4">
                    <h3 class="my-auto">{{ __('common.createProfile') }}
                    </h3>
                    <button type="button" class="d-flex ml-auto btn btn-coffee-medium py-2 px-3" data-toggle="modal"
                        data-target="#setCafeHoursModel">
                        <svg class="mr-2 my-1" width="25" height="24" viewBox="0 0 25 24" fill="none"
                            stroke="currentColor" stroke-width="2">
                            <path
                                d="M12.0444 22C17.5673 22 22.0444 17.5228 22.0444 12C22.0444 6.47715 17.5673 2 12.0444 2C6.52159 2 2.04443 6.47715 2.04443 12C2.04443 17.5228 6.52159 22 12.0444 22Z"
                                stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M12.0444 6V12L16.0444 14" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        <span class="my-1" id="getCafeHours" {{-- data-action={{ $cafeeditHoursUrl }}
                            --}}>{{ __('common.setCafeHours') }}</span>
                    </button>
                </div>
            </div>
            <div class="row layout-top-spacing">
                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing pb-0">
                    {{--
                    <x-flash-message></x-flash-message>
                    --}}
                    <div class="row">
                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                            <form class="mt-4" method="POST" id="edit_profile_form" class="edit_profile_form"
                                action="{{ $cafe_update_url }}" enctype="multipart/form-data">
                                @csrf
                                @method('PUT')
                                <input type="hidden" name="latitude" id="latitude" hidden
                                    value="{{ isset($cafe_latitude) && $cafe_latitude != null ? $cafe_latitude : '' }}">
                                <input type="hidden" name="longitude" id="longitude" hidden
                                    value="{{ isset($cafe_longitude) && $cafe_longitude != null ? $cafe_longitude : '' }}">
                                <div class="row mt-4">
                                    <div class="col-xl-3 col-lg-3 col-md-4 col-sm-4 col-4">
                                        <div
                                            class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 px-0 form-group mb-4">
                                            <label for=""
                                                class="form-label mb-3">{{ __('common.bannerImage') }}*</label>
                                            <label class="picture" for="picture__input" tabIndex="0">
                                                <span class="picture__image">
                                                    <img src="{{ isset($cafe_banner_image) && $cafe_banner_image != '' ? asset($cafe_banner_image) : asset('assets/img/400x300.jpg') }}"
                                                        class="picture__img">
                                                </span>
                                            </label>
                                            <input type="file" name="picture__input" id="picture__input"
                                                accept="image/jpg, image/jpeg, image/png">
                                            @error('banner_image')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                        <div
                                            class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 px-0 form-group mb-4">
                                            <label for="cafe_filter"
                                                class="form-label">{{ __('common.cafe_category') }}*</label>
                                            <select id="cafe_filter" name="cafe_filter[]" multiple="multiple"
                                                class="form-control @error('cafe_type') is-invalid @enderror">
                                                <option value="">{{ __('common.selectCafeCategory') }}</option>
                                                @foreach ($CafeFilter as $index => $filter)
                                                    <option {{ isset($cafe_filter) && in_array($index, $cafe_filter) ? 'selected' : '' }} value="{{ $index }}">{{ $filter }} options
                                                        Available
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('cafe_type')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div
                                        class="col-xl-9 col-lg-9 col-md-8 col-sm-12 col-12 row justify-content-end p-0">
                                        <div class="col-xl-5 col-lg-5 col-md-12 col-sm-12 col-12 form-group mb-4">
                                            <label for="cafe_name"
                                                class="form-label">{{ __('common.cafe_name') }}*</label>
                                            <input type="text"
                                                class="form-control @error('cafe_name') is-invalid @enderror"
                                                id="cafe_name" name="cafe_name"
                                                placeholder="{{ __('common.EnterCafeName') }}"
                                                value="{{ isset($cafe_name) && $cafe_name != '' ? $cafe_name : '' }}">
                                            @error('cafe_name')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                        <div
                                            class="col-xl-5 col-lg-5 col-md-5 col-sm-12 col-12 form-group mb-4 offset-xl-1 offset-lg-1 offset-md-1">
                                            <label for="email" class="form-label">{{ __('common.email') }}*</label>
                                            <input type="text" class="form-control @error('email') is-invalid @enderror"
                                                id="email" name="email" placeholder="{{ __('common.EnterEmail') }}"
                                                value="{{ isset($cafe_email) && $cafe_email != '' ? $cafe_email : '' }}">
                                            @error('email')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                        <div class="col-xl-5 col-lg-5 col-md-12 col-sm-12 col-12 form-group mb-4">
                                            <label for="phone" class="form-label">{{ __('common.phone') }}</label>
                                            <input type="text" class="form-control @error('phone') is-invalid @enderror"
                                                id="phone" name="phone" placeholder="{{ __('common.EnterPhone') }}"
                                                value="{{ isset($cafe_phone) && $cafe_phone != '' ? $cafe_phone : '' }}">
                                            @error('phone')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                        <div
                                            class="col-xl-5 col-lg-5 col-md-5 col-sm-12 col-12 form-group mb-4 offset-xl-1 offset-lg-1 offset-md-1">
                                            <label for="cafe_type"
                                                class="form-label">{{ __('common.cafe_type') }}</label>
                                            <select id="cafe_type" name="cafe_type"
                                                class="form-control @error('cafe_type') is-invalid @enderror">
                                                @foreach ($cafe_types as $index => $type)
                                                    <option value="{{ $index }}">{{ $type }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('cafe_type')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                        <div class="col-xl-5 col-lg-5 col-md-5 col-sm-12 col-12 form-group mb-4">
                                            <label for="address" class="form-label">{{ __('common.address') }}*</label>
                                            <input type="text"
                                                class="form-control text-wrap @error('address') is-invalid @enderror"
                                                id="address" name="address"
                                                placeholder="{{ __('common.EnterAddress') }}"
                                                value="{{ isset($cafe_address) && $cafe_address != '' ? $cafe_address : '' }}">
                                            @error('address')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                        <div
                                            class="col-xl-5 col-lg-5 col-md-5 col-sm-12 col-12 form-group mb-4 offset-xl-1 offset-lg-1 offset-md-1">
                                            <label for="postcode"
                                                class="form-label">{{ __('common.postcode') }}*</label>
                                            <input type="text"
                                                class="form-control @error('postcode') is-invalid @enderror"
                                                maxlength="10" id="postcode" name="postcode"
                                                placeholder="{{ __('common.EnterPostcode') }}"
                                                value="{{ isset($cafe_postcode) && $cafe_postcode != '' ? $cafe_postcode : '' }}">
                                            @error('postcode')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                        <div class="col-xl-5 col-lg-5 col-md-12 col-sm-12 col-12 form-group mb-4">
                                            <label for="bio" class="form-label">{{ __('common.bio') }}*</label>
                                            <textarea class="form-control @error('bio') is-invalid @enderror" id="bio"
                                                name="bio" rows="3"
                                                placeholder="{{ __('common.EnterBio') }}">{{ isset($cafe_bio) && $cafe_bio != '' ? $cafe_bio : '' }}</textarea>
                                            @error('bio')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                        <div
                                            class="col-xl-5 col-lg-5 col-md-12 col-sm-12 col-12 form-group mb-4 offset-xl-1 offset-lg-1 offset-md-1">
                                            <label for="website" class="form-label">{{ __('common.website') }}</label>
                                            <input type="text"
                                                class="form-control @error('website') is-invalid @enderror" id="website"
                                                name="website" placeholder="{{ __('common.EnterWebsite') }}"
                                                value="{{ isset($cafe_website) && $cafe_website != '' ? $cafe_website : '' }}">
                                            @error('website')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Prfile tab ends here -->
        <!-- cafe menu tab start here-->
        <div class="tab">
            <div class="page-header row">
                <div class="page-title col-12 d-flex mt-4 pr-4" style="justify-content: space-between;">
                    <h3 class="my-auto">{{ __('common.CafeMenu') }}</h3>
                    <a href="{{ $cafe_menu_create_url }}" class="d-flex btn btn-coffee-medium py-2 px-3">
                        <svg class="mr-2 my-1" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="feather feather-plus-circle">
                            <circle cx="12" cy="12" r="10"></circle>
                            <line x1="12" y1="8" x2="12" y2="16"></line>
                            <line x1="8" y1="12" x2="16" y2="12"></line>
                        </svg>
                        <span class="my-1">{{ __('common.addItem') }}</span>
                    </a>
                </div>
            </div>
            <div class="row layout-top-spacing">
                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
                    <div class="widget-content widget-content-area br-6">
                        <table id="cafe_menu" class="table dt-table-hover" style="width:100%">
                            <thead>
                                <tr>
                                    <th>{{ __('common.no.') }}</th>
                                    <th>{{ __('common.image') }}</th>
                                    <th>{{ __('common.itemName') }}</th>
                                    <th>{{ __('common.category') }}</th>
                                    <th>{{ __('common.price') }}</th>
                                    <th>{{ __('common.types') }}</th>
                                    <th>{{ __('common.status') }}</th>
                                    <th>{{ __('common.availability') }}</th>
                                    <th class="no-content"></th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- cafe menu tab end here -->
        <!-- cafe loyalty stamp tab start here -->
        <div class="tab">
            <div class="page-header row">
                <div class="page-title col-12 d-flex mt-4 pr-4">
                    <h3 class="my-auto">{{ __('common.ManageLoyaltyStamp') }}</h3>
                    <a href="{{ $cafe_stamp_create_url }}" id="addStamp"
                        class="d-flex ml-auto btn btn-coffee-medium py-2 px-3">
                        <svg class="mr-2 my-1" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="feather feather-plus-circle">
                            <circle cx="12" cy="12" r="10"></circle>
                            <line x1="12" y1="8" x2="12" y2="16"></line>
                            <line x1="8" y1="12" x2="16" y2="12"></line>
                        </svg>
                        <span class="my-1">{{ __('common.addStamp') }}</span>
                    </a>
                </div>
            </div>
            <div class="row layout-top-spacing">
                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
                    <div class="widget-content widget-content-area br-6">
                        <table id="manage_loyalty_stamps" class="table dt-table-hover" style="width:100%">
                            <thead>
                                <tr>
                                    {{--
                                    <th>{{ __('common.no.') }}</th>
                                    --}}
                                    <th>{{ __('common.stamp_color') }}</th>
                                    <th>{!! __('common.discount') !!}</th>
                                    <th>{{ __('common.minOrderValue') }}</th>
                                    <th>{{ __('common.noOfTotalStamp') }}</th>
                                    <th class="no-content"></th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- cafe loyalty stamp tab end here -->
        <!-- Information review tab start here -->
        <div class="tab">
            <div class="page-header row">
                <div class="page-title col-12 d-flex mt-4 pr-4">
                    <h3 class="my-auto">{{ __('common.review') }}</h3>
                </div>
            </div>
            <div class="review_section" style="margin: 0 15%;">
                <!--Password section start -->
                <div class="row" height="auto">
                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
                        <div class="widget-content br-6 d-flex"
                            style="justify-content: space-between;align-items: center;">
                            <div class="">
                                <div class="email_input d-flex">
                                    <label>Email ID: </label>
                                    <p style="color:#461C10">{{Auth::user()->email}}</p>
                                </div>
                                <div class="psw_input d-flex">
                                    <label>Password: </label>
                                    <p style="color:#461C10">********</p>
                                </div>
                            </div>
                            <!--div class="">
                        <a href="{{ route(Auth::getDefaultDriver() . '.changePassword') }}" class="d-flex btn btn-coffee-medium py-2 px-3">
                            <svg class="mr-2 my-1" width="24" height="24" viewBox="0 0 24 24" fill="none"
                                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                class="feather feather-plus-circle">
                                <circle cx="12" cy="12" r="10"></circle>
                                <line x1="12" y1="8" x2="12" y2="16"></line>
                                <line x1="8" y1="12" x2="16" y2="12"></line>
                            </svg>
                            <span class="my-1">{{ __('common.editPsw') }}</span>
                        </a>
                        </div-->
                        </div>
                    </div>
                </div>
                <!--Password section end -->
                <hr>
                <!--Profile section start -->
                <div class="row d-flex" style="margin-top:20px;">
                    <div class="col-md-10">
                        <h4 class=""><strong>{{$cafe_name}}</strong></h4>
                    </div>
                    <div class="col-md-2">
                        <a href="#" class="d-flex btn btn-coffee-medium py-2 px-3"
                            style="width: fit-content;float: right;" onclick="editProfile()">
                            <svg class="mr-2 my-1" width="24" height="24" viewBox="0 0 24 24" fill="none"
                                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                class="feather feather-plus-circle">
                                <circle cx="12" cy="12" r="10"></circle>
                                <line x1="12" y1="8" x2="12" y2="16"></line>
                                <line x1="8" y1="12" x2="16" y2="12"></line>
                            </svg>
                            <span class="my-1">{{ __('common.editProfile') }}</span>
                        </a>
                    </div>
                    <div class="col-md-4">
                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 px-0 form-group mb-4">
                            <label class="picture" for="picture__input" tabIndex="0">
                                <span class="picture__image">
                                    <img src="{{ isset($cafe_banner_image) && $cafe_banner_image != '' ? asset($cafe_banner_image) : asset('assets/img/400x300.jpg') }}"
                                        class="picture__img">
                                </span>
                            </label>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <div class="col-md-12 d-flex mb-4" style="justify-content: space-between;">
                            <div class="col-md-6">
                                <div class="">
                                    <h4 class=""><strong>{{ __('common.phone') }}</strong></h4>
                                    <p style="color:#461C10">
                                        <strong>{{ isset($cafe_phone) && $cafe_phone != '' ? $cafe_phone : ' - ' }}</strong>
                                    </p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="">
                                    <h4 class=""><strong>{{ __('common.address') }}</strong></h4>
                                    <p style="color:#461C10">
                                        <strong>{{ isset($cafe_address) && $cafe_address != '' ? $cafe_address : ' - ' }}</strong>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 d-flex" style="justify-content: space-between;">
                            <div class="col-md-3">
                                <div class="">
                                    <h4 class=""><strong>Categories</strong></h4>
                                    @if (isset($seleted_cafe_filter) && sizeof($seleted_cafe_filter) > 0)
                                        @foreach ($seleted_cafe_filter as $filter)
                                            <p style="color:#461C10">
                                                <strong>{{ isset($filter) && $filter != '' ? $filter : ' - ' }}</strong></p>
                                        @endforeach
                                    @else
                                        <p style="color:#461C10">{{ ' N/A ' }}</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-10 mb-4">
                        <h4 class=""><strong>{{ __('common.bio') }}</strong></h4>
                        <p>{{$cafe_bio}}</p>
                    </div>
                    <div class="col-md-4 mb-2">
                        <h4 class=""><strong>{{ __('common.cafeHours') }}</strong></h4>
                        @foreach ($cafe_timing as $index => $time)
                            <div class="row">
                                <div class="col-5">
                                    <p style="color:#461C10"><strong>{{ $cafe_days[$index] }}</strong></p>
                                </div>
                                <div class="col-7">
                                    <p style="color:#461C10">:
                                        <strong>{{ $time->is_active == 1 ? date('h:i A', strtotime($time->open_time)) . ' - ' . date('h:i A', strtotime($time->close_time)) : '-' }}</strong>
                                    </p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                <!--profile section end -->
                <hr>
                <!--Menu section start -->
                <div class="row d-flex" style="margin-top:20px;">
                    <div class="col-md-10">
                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
                            <div class="widget-content widget-content-area br-6">
                                <table id="cafe_menu_review" class="table dt-table-hover" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th>{{ __('common.no.') }}</th>
                                            <th>{{ __('common.image') }}</th>
                                            <th>{{ __('common.itemName') }}</th>
                                            <th>{{ __('common.category') }}</th>
                                            <th>{{ __('common.price') }}</th>
                                            <th>{{ __('common.types') }}</th>
                                            <th>{{ __('common.status') }}</th>
                                            <th>{{ __('common.availability') }}</th>
                                            <th class="no-content"></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <a href="#" class="d-flex btn btn-coffee-medium py-2 px-3 editMenu"
                            style="width: fit-content;float: right;" onclick="editMenu()">
                            <svg class="mr-2 my-1" width="24" height="24" viewBox="0 0 24 24" fill="none"
                                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                class="feather feather-plus-circle">
                                <circle cx="12" cy="12" r="10"></circle>
                                <line x1="12" y1="8" x2="12" y2="16"></line>
                                <line x1="8" y1="12" x2="16" y2="12"></line>
                            </svg>
                            <span class="my-1">{{ __('common.editMenu') }}</span>
                        </a>
                    </div>
                </div>
                <!--menu section end -->
                <hr>
                <!--Loyalty stamp section start -->
                <div class="row d-flex" style="margin-top:20px;">
                    <div class="col-md-10">
                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
                            <div class="widget-content widget-content-area br-6">
                                <table id="manage_loyalty_stamps_review" class="table dt-table-hover"
                                    style="width:100%">
                                    <thead>
                                        <tr>
                                            {{--
                                            <th>{{ __('common.no.') }}</th>
                                            --}}
                                            <th>{{ __('common.stamp_color') }}</th>
                                            <th>{!! __('common.discount') !!}</th>
                                            <th>{{ __('common.minOrderValue') }}</th>
                                            <th>{{ __('common.noOfTotalStamp') }}</th>
                                            <th class="no-content"></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <a href="#" class="d-flex btn btn-coffee-medium py-2 px-3 editStamp"
                            style="width: fit-content;float: right;" onclick="editStamp()">
                            <svg class="mr-2 my-1" width="24" height="24" viewBox="0 0 24 24" fill="none"
                                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                class="feather feather-plus-circle">
                                <circle cx="12" cy="12" r="10"></circle>
                                <line x1="12" y1="8" x2="12" y2="16"></line>
                                <line x1="8" y1="12" x2="16" y2="12"></line>
                            </svg>
                            <span class="my-1">{{ __('common.editloyaltyCard') }}</span>
                        </a>
                    </div>
                </div>
                <!--Loyalty stamp section end -->
            </div>
        </div>
        <!-- Information Review tab ends here -->
        <!-- Payment Tab starts here -->
        <div class="tab">
            <div class="text-center">
                <h3>Payment Information</h3>
                <div class="col-md-12 mb-4" style="text-align: center;">
                    <p style="color: #461C10; max-width: 600px; margin: 0 auto;">
                        Please click below to add your payment details. You will not be charged until after the 8-month
                        free trial. After which, your subscription will automatically continue at &pound;12.99 per
                        month. You can cancel anytime before the trial ends to avoid being charged.
                    </p>
                </div>
                <!-- <div class="stripe_div">
               <button class="btn btn-primary btn-lg" id="btn btn-coffee-dark mt-4 py-2 px-4" onclick="stripe_payment()">Enter Details</button>
               </div> -->
                <div class="card">
                    <div class="card-header">Connect with Stripe</div>
                    <div class="card-body">
                        @if (session('status'))
                            <div class="alert alert-success" role="alert">
                                {{ session('status') }}
                            </div>
                        @endif
                        <div id="stripe-connect-container">
                            @if(!auth()->user()->stripe_account_id)
                                <button class="btn btn-primary" id="stripe-connect-button"
                                    onclick="initiateStripeConnect()">
                                    Connect with Stripe
                                </button>
                            @elseif(!auth()->user()->stripe_onboarding_complete)
                                <button class="btn btn-warning" id="stripe-connect-button"
                                    onclick="initiateStripeConnect()">
                                    Complete Stripe Onboarding
                                </button>
                            @else
                                <div class="alert alert-success">
                                    Your Stripe account is connected and ready to receive payments!
                                </div>
                            @endif
                        </div>
                        <div id="loading" style="display: none;">
                            Processing... Please wait...
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab">
            <div class="text-center publish_div">
                <div>
                    <input type="checkbox" id="reviewCheckbox"> I have reviewed my account and can confirm the
                    information I have provided is correct
                </div>
                <div>
                    <input type="checkbox" id="termsCheckbox"> I have read and agree to the <a target="blank"
                        href="terms-and-conditions">Terms of Service</a>
                </div>
                <div>
                    <button id="publishBtn" class="btn btn-coffee-light mt-4 mx-3 py-2 px-4" disabled
                        onclick="publishFunction()"> Publish </button>
                </div>
            </div>
        </div>
        <!-- Payment Tab end here-->
        <!-- Next and Prev button strts here -->
        <div style="overflow:auto;">
            <div>
                <button type="button" id="prevBtn" class="btn btn-coffee-dark mt-4 py-2 px-4"
                    onclick="nextPrev(-1)">Back</button>
                <button type="button" id="nextBtn" onclick="nextPrev(1)"
                    class="btn btn-coffee-light mt-4 mx-3 py-2 px-4">Next</button>
                <p id="cafe_hours_reminder" class="cafe_hours_reminder">Don't forget to adjust cafe hours (in the top
                    right corner)</p>
            </div>
        </div>
        <!-- Next and Prev button ends here-->
    </div>
    <div id="thanks_for_submission" class="text-center d-none">
        <div class="col-md-8" style="margin:0 auto;">
            <h4>Thanks You For submitting</h4>
            <p>Our team will review your information and notify you of the approval status via the email you provided.
                Once it is approved, we will publish it on to the Java Go app. </p>
            <p>Please reach out to <a href="mailto:javago@javaapp.co.uk">javago@javaapp.co.uk </a> for any further
                questions </p>
            <a class="btn btn-coffee-dark mt-4 py-2 px-4" href="{{ route('logout') }}" onclick="event.preventDefault();
            document.getElementById('logout-form').submit();">
                {{ __('Back') }}
            </a>
            <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                @csrf
            </form>
        </div>
    </div>
    <x-slot name="script">
        <script src="{{ asset('assets/js/libs/jquery.validate.min.js') }}"></script>
        <script src="{{ asset('assets/js/libs/additional-methods.min.js') }}"></script>
        <script src="{{ asset('plugins/select2/select2.min.js') }}"></script>
        <script src="{{ asset('plugins/table/datatable/datatables.js') }}"></script>
        <script src="{{ asset('assets/js/custom.js') }}"></script>
        <script src="https://checkout.stripe.com/checkout.js"></script>
        <script>
            const imageFound = "{{ isset($cafe_banner_image) && $cafe_banner_image != '' }}";
            const upload = "{{ __('common.upload') }}";
            const maxSize = 500;
            //validations start
            const validation = {};
            validation.cafe_name_required = "{{ __('validation.validation.cafe_name.required') }}";
            validation.cafe_name_minlength = "{{ __('validation.validation.cafe_name.minlength') }}";
            validation.cafe_name_maxlength = "{{ __('validation.validation.cafe_name.maxlength') }}";
            validation.email_required = "{{ __('validation.validation.email.required') }}";
            validation.email_email = "{{ __('validation.validation.email.email') }}";
            validation.email_customEmail = "{{ __('validation.validation.email.customEmail') }}";
            validation.phone_required = "{{ __('validation.validation.phone.required') }}";
            validation.phone_minlength = "{{ __('validation.validation.phone.minlength') }}";
            validation.phone_maxlength = "{{ __('validation.validation.phone.maxlength') }}";
            validation.phone_maxlength = "{{ __('validation.validation.phone.maxlength') }}";
            validation.phone_regex = "{{ __('validation.validation.phone.regex') }}";
            validation.phone_pattern = "{{ __('validation.validation.phone.pattern') }}";
            validation.cafe_type_required = "{{ __('validation.validation.cafe_type.required') }}";
            validation.bio_required = "{{ __('validation.validation.bio.required') }}";
            validation.bio_minlength = "{{ __('validation.validation.bio.minlength') }}";
            validation.bio_maxlength = "{{ __('validation.validation.bio.maxlength') }}";
            validation.address_required = "{{ __('validation.validation.address.required') }}";
            validation.address_minlength = "{{ __('validation.validation.address.minlength') }}";
            validation.address_maxlength = "{{ __('validation.validation.address.maxlength') }}";
            validation.postcode_required = "{{ __('validation.validation.postcode.required') }}";
            validation.postcode_minlength = "{{ __('validation.validation.postcode.minlength') }}";
            validation.postcode_maxlength = "{{ __('validation.validation.postcode.maxlength') }}";
            validation.website_required = "{{ __('validation.validation.website.required') }}";
            validation.website_minlength = "{{ __('validation.validation.website.minlength') }}";
            validation.website_maxlength = "{{ __('validation.validation.website.maxlength') }}";
            validation.image_extension = "{{ __('validation.validation.image.extensionMimes') }}";
            validation.image_maxSize = "{{ __('validation.validation.image.maxsize') }}";
            validation.regexTime = "{{ __('validation.validation.time.regexTime') }}";
            validation.open_time_required = "{{ __('validation.validation.open_time.required') }}";
            validation.open_time_maxlength = "{{ __('validation.validation.open_time.maxlength') }}";
            validation.close_time_required = "{{ __('validation.validation.close_time.required') }}";
            validation.close_time_maxlength = "{{ __('validation.validation.close_time.maxlength') }}";
            validation.cafe_filter_required = "{{ __('validation.validation.cafe_filter.required') }}";
            const selectCafeFilter = "{{ __('common.selectCafeFilter') }}";

            let isStripeConnected = false;
            let accountId = @json(Auth::user()->stripe_account_id ?? '');
            let onboardingCompleted = @json(Auth::user()->stripe_onboarding_completed ?? false);

            console.log(isStripeConnected);
            console.log(accountId);
            console.log(onboardingCompleted);

            sessionStorage.setItem('menu_display', 'no');
            localStorage.setItem('menu_display', 'no');
            //tabs functionality
            var cafe_profile_completed = "{{ $cafe_profile_completed }}";
            var cafe_menu_completed = "{{ $cafe_menu_completed }}";
            var cafe_loyalty_completed = "{{ $cafe_loyalty_completed }}";
            var transaction_id = "{{ $transaction_id }}";
            var is_published = "{{ $is_published }}";
            var currentTab = 0;
            function editMenu() {
                var currentTab = 1;
                proceedWithTabChange(-2);

            }
            function editProfile() {
                var currentTab = 0;
                proceedWithTabChange(-3);

            }

            function editStamp() {
                var currentTab = 2;
                proceedWithTabChange(-1);
            }
            if (cafe_profile_completed == 0) {
                var currentTab = 0;
            }
            if (cafe_profile_completed == 1 && cafe_menu_completed == 0) {
                var currentTab = 1;
                //sessionStorage.setItem('currentTab', currentTab);
            }
            if (cafe_profile_completed == 1 && cafe_menu_completed == 1) {
                var currentTab = 1;
                //sessionStorage.setItem('currentTab', currentTab);
            }
            //if(cafe_menu_completed == 1 && cafe_loyalty_completed == 0){
            //var currentTab = 2;
            //sessionStorage.setItem('currentTab', currentTab);
            //}
            if (cafe_menu_completed == 1 && cafe_loyalty_completed == 1) {
                var currentTab = 2;
            }
            if (cafe_menu_completed == 1 && cafe_loyalty_completed == 1 && onboardingCompleted == 1) {
                currentTab = 5;
            }
            // }else if(transaction_id == null || transaction_id == ''){
            //     var currentTab = 4;
            //     //sessionStorage.setItem('currentTab', currentTab);
            // }else if(is_published == 0){
            //     var currentTab = 5;
            //     //sessionStorage.setItem('currentTab', currentTab);
            // }
            // else if(cafe_menu_completed == 1 && sessionStorage.getItem('currentTab') == 1){
            //     currentTab = 1;
            // }else if(cafe_loyalty_completed == 1 && sessionStorage.getItem('currentTab') == 2){
            //     currentTab = 2;
            // }else if(transaction_id != null && sessionStorage.getItem('currentTab') == 4){
            //     currentTab = 5;
            // }else if(is_published == 1 && sessionStorage.getItem('currentTab') == 5){
            //     currentTab = 6;
            // }
            //currentTab = 4;

            showTab(currentTab);
            function showTab(n) {
                document.body.scrollTop = 0; // For Safari
                document.documentElement.scrollTop = 0;
                var x = document.getElementsByClassName("tab");
                // Hide all tabs
                for (var i = 0; i < x.length; i++) {
                    x[i].style.display = "none";
                }
                // Show the current tab
                x[n].style.display = "block";

                // Update the Previous/Next buttons
                if (n == 0) {
                    document.getElementById("prevBtn").style.display = "none";
                    document.getElementById("cafe_hours_reminder").style.display = "inline";
                    document.getElementById("cafe_hours_reminder").style.display = "inline";
                } else {
                    document.getElementById("prevBtn").style.display = "inline";
                    document.getElementById("cafe_hours_reminder").style.display = "none";
                }
                if (n == (x.length - 1)) {
                    document.getElementById("nextBtn").style.display = "none";  // Hide the "Submit" button on the last tab
                } else {
                    document.getElementById("nextBtn").style.display = "inline";
                    document.getElementById("nextBtn").innerHTML = "Next";
                }

                // Show "Submit" button if on the last tab
                if (n == (x.length - 1)) {
                    document.getElementById("nextBtn").innerHTML = "Submit";
                }

                // Update the step indicator
                fixStepIndicator(n);
            }


            // Check if Stripe account is not connected or onboarding is incomplete
            $(document).on('click', '#nextBtn', function () {
                if (currentTab === 4) { // We're on the 4th tab
                    if (isStripeConnected === false || onboardingCompleted === false) {
                        // Disable the "Next" button
                        $('#nextBtn').attr('disabled', 'disabled');

                        // Show an error message
                        Swal.fire({
                            title: 'Stripe Payment Required',
                            text: 'Please complete the Stripe payment and onboarding before proceeding.',
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });

                        return false; // Prevent tab change
                    } else {
                        // Enable the "Next" button if conditions are met
                        $('#nextBtn').removeAttr('disabled');
                    }
                } else {
                    $('#nextBtn').removeAttr('disabled');
                }
            })
            $(document).on('click', '#prevBtn', function () {
                $('#nextBtn').removeAttr('disabled');
            });

            function nextPrev(n) {



                console.log("currentTab:", currentTab);
                console.log("n:", n);


                if (currentTab === 0 && n > 0) {

                    // We're on the first tab and trying to move forward
                    var form = document.getElementById("edit_profile_form");
                    var formData = new FormData(form);

                    // Add custom validation for the image
                    var imageInput = document.getElementById("picture__input");

                    if (!imageFound && (!imageInput.files || imageInput.files.length === 0)) {
                        // Show error message for missing image
                        $("<label class='error' style='color:#e7515a'>Please upload an image.</label>").insertAfter(imageInput);
                        return false;
                    }
                    // Trigger form validation
                    if ($(form).valid()) {
                        // If the form is valid, submit it
                        $.ajax({
                            url: form.action,
                            type: form.method,
                            data: formData,
                            processData: false,
                            contentType: false,
                            success: function (response) {
                                //setTimeout(function() {
                                proceedWithTabChange(n);
                                // }, 1000);
                            },
                            error: function (xhr, status, error) {
                                console.error("Form submission error:", error);
                                Swal.fire({
                                    title: 'Error!',
                                    text: 'An unexpected error occurred.',
                                    icon: 'error',
                                    confirmButtonText: 'OK'
                                });
                            }
                        });
                    } else {
                        // If the form is not valid, don't change tabs
                        return false;
                    }
                } else {
                    // For other tabs, or when moving backwards, proceed normally
                    proceedWithTabChange(n);
                }
            }

            function proceedWithTabChange(n) {
                var x = document.getElementsByClassName("tab");
                x[currentTab].style.display = "none";
                currentTab = currentTab + n;
                if (currentTab >= x.length) {
                    document.getElementById("regForm").submit();
                    return false;
                }
                showTab(currentTab);
            }

            // function nextPrev(n) {
            //     submitForm();

            //     var x = document.getElementsByClassName("tab");
            //     // Hide the current tab:
            //     x[currentTab].style.display = "none";
            //     // Increase or decrease the current tab by 1:
            //     currentTab = currentTab + n;
            //     // if you have reached the end of the form...
            //     if (currentTab >= x.length) {
            //         // ... the form gets submitted:
            //         document.getElementById("regForm").submit();
            //         return false;
            //     }

            //     showTab(currentTab);
            // }

            function validateform() {

            }
            //submit forms by tabs
            function submitForm() {
                var tabs = document.getElementsByClassName("tab");
                var currentTabElement = tabs[currentTab];
                var form = '';
                if (currentTab == 0) {
                    form = currentTabElement.getElementsByTagName("form")[1];
                } else {
                    form = currentTabElement.getElementsByTagName("form")[0];
                }
                if (form) {
                    var formAction = form.getAttribute("action");
                    var formMethod = form.getAttribute("method");
                    var formData = new FormData(form);
                    // Perform AJAX request
                    var xhr = new XMLHttpRequest();
                    xhr.open(formMethod, formAction, true);
                    xhr.onload = function () {
                        if (xhr.status >= 200 && xhr.status < 300) {
                            // Handle successful response
                            console.log('Form submitted successfully.');
                        } else {
                            console.log('Form submission failed.');
                        }
                    };
                    xhr.send(formData);
                } else {
                    console.log("No form found in the current tab.");
                }
            }
            //set cafe hours update
            $('#set_cafe_hours_btn').on('click', function (event) {
                console.log('clicked');
                event.preventDefault(); // Prevent default form submission

                // Reference to the form
                var form = $('#set_cafe_hours_from');
                var formAction = form.attr("action"); // Retrieve action URL correctly
                var formMethod = form.attr("method"); // Retrieve form method correctly
                if (!formAction) {
                    console.error('Form action URL is undefined.');
                    return;
                }

                // Convert jQuery object to DOM element and then create FormData
                var formData = new FormData(form[0]);
                // Perform AJAX request
                $.ajax({
                    url: formAction, // Use the URL from the form action attribute
                    type: formMethod, // Use the method from the form method attribute
                    data: formData,
                    processData: false, // Prevent jQuery from processing the data
                    contentType: false, // Prevent jQuery from setting the content type
                    success: function (response) {
                        if (response.status === 200) {
                            Swal.fire({
                                title: 'Success!',
                                text: 'Cafe hours set successfully.',
                                icon: 'success',
                                confirmButtonText: 'OK'
                            });
                        } else {
                            Swal.fire({
                                title: 'Error!',
                                text: 'Cafe hours update failed.',
                                icon: 'error',
                                confirmButtonText: 'OK'
                            });
                        }

                        $('.modal').modal('hide');
                    },
                    error: function (xhr, status, error) {
                        Swal.fire({
                            title: 'Error!',
                            text: 'An unexpected error occurred.',
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            });

            //step highlighter
            function fixStepIndicator(n) {
                var i, x = document.getElementsByClassName("step");
                for (i = 0; i < x.length; i++) {
                    x[i].className = x[i].className.replace(" active", "");
                }        //... and adds the "active" class on the current step:
                if (n >= 0 && n < x.length) {
                    // Add "active" class to the element at index `n`
                    x[n].className += " active";
                } else {
                    console.log('publishing tab');
                }
            }

            //cafe menu
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                }
            });
            const getData = "{{ $cafe_menu_dataUrl }}";
            const tableElement = document.getElementById('cafe_menu');
            //cafe menu review
            const reviewgetData = "{{ $cafe_menu_dataUrl }}";
            const reviewtableElement = document.getElementById('cafe_menu_review');
            //loyalty stamps
            const stampgetData = "{{ $cafe_stamp_dataUrl }}";
            const stamptableElement = document.getElementById('manage_loyalty_stamps');

            const reviewstampgetData = "{{ $cafe_stamp_dataUrl }}";
            const reviewstamptableElement = document.getElementById('manage_loyalty_stamps_review');

            //Stripe payment
            const amount = 12.99 * 100;
            const desc = 'Please enter your details, you will not be charged untill free trial is over';

            //pk_test_51QEnSAQc61PBzjGtqpCEVSsvm1XUDro5QsnLvz97nlfHh944lLGzc08JcxYoEKcDSwJWf5AtcicvwDHdhBdVwYtF00t5DRLPSw
            function stripe_payment() {
                StripeCheckout.open({
                    //key: 'pk_live_51MprpUH68ivyxSXqdytxIYmvJNTHokAZ0hawB5mtCe5dyNedsKLkGxLpqNX0otPL87T5bd2I1xuqFTCMQMeuxMQl005LLuhKDf',
                    key: 'pk_test_51QEnSAQc61PBzjGtqpCEVSsvm1XUDro5QsnLvz97nlfHh944lLGzc08JcxYoEKcDSwJWf5AtcicvwDHdhBdVwYtF00t5DRLPSw',
                    amount: amount,
                    currency: 'GBP',
                    name: 'Card Details',
                    description: desc,
                    panelLabel: 'Pay',
                    token: function (res) {
                        var stripeToken = res.id;
                        var stripeEmail = res.email;

                        // Show the loader
                        $('#load_screen').show();
                        $('#load_screen').css('z-index', 'unset');

                        $.ajax({
                            url: '{{route('cafe.update-transaction-id')}}',
                            method: 'POST',
                            data: {
                                _token: '{{ csrf_token() }}',
                                stripeToken: stripeToken,
                                stripeEmail: stripeEmail,
                                amount: amount,
                                payer_name: '{{ Auth::user()->name }}'
                            },
                            success: function (response) {
                                // Hide the loader
                                $('.loader').hide();

                                if (response.status === 'success') {
                                    $('.stripe_div button').addClass('d-none');
                                    $('.stripe_div').append('<h5>Payment Done</h5>');
                                    alert('Details Submitted!');
                                    console.log(response);
                                    $('#nextBtn').click();
                                } else {
                                    alert('Payment failed: ' + response.message);
                                    console.error(response);
                                }
                            },
                            error: function (xhr, status, error) {
                                // Hide the loader
                                $('#load_screen').hide();
                                alert('Payment failed: ' + error);
                                console.error(error);
                            }
                        });
                    }
                });
            }

            function initiateStripeConnect() {
                // Show the loading spinner and disable the button
                const stripeConnectButton = document.getElementById('stripe-connect-button');
                const loadingSpinner = document.getElementById('loading');

                if (stripeConnectButton && loadingSpinner) {
                    loadingSpinner.style.display = 'block';
                    stripeConnectButton.disabled = true;

                    // Make an API call to check if the user already has a Stripe account
                    fetch('{{ route("cafe.stripe-check-account") }}', {
                        method: 'GET',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}' // CSRF token included for security
                        }
                    })
                        .then(response => response.json()) // Parse the response as JSON
                        .then(data => {
                            if (data.status === 'success') {
                                if (data.stripe_account_id && !data.stripe_onboarding_completed) {
                                    // If the user has a Stripe account but hasn't completed onboarding, request the onboarding link
                                    fetch('{{ route("cafe.stripe-complete-onboarding") }}', {
                                        method: 'POST',
                                        headers: {
                                            'Content-Type': 'application/json',
                                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                        }
                                    })
                                        .then(response => response.json())
                                        .then(data => {
                                            if (data.status === 'success') {
                                                // Redirect to Stripe onboarding
                                                window.location.href = data.url;
                                                isStripeConnected = true;
                                                onboardingCompleted = true;
                                                $('#nextBtn').removeAttr('disabled').click();
                                            } else {
                                                alert('Error completing Stripe onboarding: ' + data.message);
                                            }
                                        })
                                        .catch(error => {
                                            console.error('Error completing onboarding:', error);
                                            alert('An error occurred. Please try again.');
                                        });
                                } else if (!data.stripe_account_id) {
                                    // If the user does not have a Stripe account, create one
                                    fetch('{{ route("cafe.stripe-create-account") }}', {
                                        method: 'POST',
                                        headers: {
                                            'Content-Type': 'application/json',
                                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                        }
                                    })
                                        .then(response => response.json()) // Parse the response as JSON
                                        .then(data => {
                                            if (data.status === 'success') {
                                                // Redirect to Stripe onboarding
                                                window.location.href = data.url;

                                                isStripeConnected = true;
                                                onboardingCompleted = true;
                                                $('#nextBtn').removeAttr('disabled').click();
                                            } else {
                                                alert('Error creating Stripe account: ' + data.message);
                                            }
                                        })
                                        .catch(error => {
                                            console.error('Error creating account:', error);
                                            alert('An error occurred. Please try again.');
                                        });
                                } else {
                                    isStripeConnected = true;
                                    onboardingCompleted = true;
                                    $('#nextBtn').removeAttr('disabled').click();
                                }
                            } else {
                                alert('Error checking Stripe account: ' + data.message);
                            }

                            // Hide the loading spinner and enable the button
                            loadingSpinner.style.display = 'none';
                            stripeConnectButton.disabled = false;
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            alert('An error occurred. Please try again.');
                            loadingSpinner.style.display = 'none';
                            stripeConnectButton.disabled = false;
                        });
                }
            }



            const reviewCheckbox = document.getElementById('reviewCheckbox');
            const termsCheckbox = document.getElementById('termsCheckbox');
            const publishBtn = document.getElementById('publishBtn');
            function updateButtonState() {
                // Enable the button if both checkboxes are checked
                if (reviewCheckbox.checked && termsCheckbox.checked) {
                    publishBtn.disabled = false; // Enable the button
                    publishBtn.style.opacity = 1; // Ensure it's visible
                } else {
                    publishBtn.disabled = true; // Disable the button
                    publishBtn.style.opacity = 0.5; // Make it appear disabled
                }
            }

            function publishFunction() {
                $.ajax({
                    url: '{{route('cafe.update-publishing-status')}}',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                    },
                    success: function (response) {
                        $("#thanks_for_submission").toggleClass("d-none");
                        $("#setup_profile").toggleClass("d-none");
                    },
                    error: function (xhr, status, error) {
                        console.error(error);
                    }
                });
                sessionStorage.removeItem('menu_display')
                localStorage.setItem('menu_display');
            }    // Attach the event listeners
            reviewCheckbox.addEventListener('change', updateButtonState);
            termsCheckbox.addEventListener('change', updateButtonState);

            // Initial check
            updateButtonState();

        </script>
        <script src="{{ asset('assets/js/cafe/manageLoyaltyStamp.js') }}"></script>
        <script src="{{ asset('assets/js/cafe/cafeMenu.js') }}"></script>
        <script src="{{ asset('assets/js/tableAction.js') }}"></script>
        <script src="{{ asset('assets/js/inputImagePreview.js') }}"></script>
        <script src="{{ asset('assets/js/cafe/editProfile.js') }}"></script>
        <script src="{{ asset('assets/js/cafe/editCafeHours.js') }}"></script>
        <script type="text/javascript" src="{{ $cafeurlGoogleAPI }}&callback=initAutocomplete" async defer></script>
        <script src="{{ asset('assets/js/getLatLng.js') }}"></script>
    </x-slot>
</x-app-layout>