@extends('layouts.vendor.app')

@section('title',translate('messages.profile_settings'))

@push('css_or_js')

@endpush

@section('content')
<!-- Content -->
<div class="content container-fluid">
    <!-- Page Header -->
    <div class="page-header">
        <div class="row align-items-end">
            <div class="col-sm mb-2 mb-sm-0">
                <h1 class="page-header-title">{{translate('messages.settings')}}</h1>
            </div>

            <div class="col-sm-auto">
                <a class="btn btn-primary" href="{{route('vendor.dashboard')}}">
                    <i class="tio-home mr-1"></i> {{translate('messages.dashboard')}}
                </a>
            </div>
        </div>
        <!-- End Row -->
    </div>
    <!-- End Page Header -->

    <div class="row">
        <div class="col-lg-3">
            <!-- Navbar -->
            <div class="navbar-vertical navbar-expand-lg mb-3 mb-lg-5">
                <!-- Navbar Toggle -->
                <button type="button" class="navbar-toggler btn btn-block btn-white mb-3" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarVerticalNavMenu" data-toggle="collapse" data-target="#navbarVerticalNavMenu">
                    <span class="d-flex justify-content-between align-items-center">
                        <span class="h5 mb-0">{{translate('messages.nav_menu')}}</span>

                        <span class="navbar-toggle-default">
                            <i class="tio-menu-hamburger"></i>
                        </span>

                        <span class="navbar-toggle-toggled">
                            <i class="tio-clear"></i>
                        </span>
                    </span>
                </button>
                <!-- End Navbar Toggle -->

                <div id="navbarVerticalNavMenu" class="collapse navbar-collapse">
                    <!-- Navbar Nav -->
                    <ul id="navbarSettings" class="js-sticky-block js-scrollspy navbar-nav navbar-nav-lg nav-tabs card card-navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link active text-dark" href="javascript:" id="generalSection">
                                <i class="tio-user-outlined nav-icon"></i> {{translate('messages.basic_information')}}
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" href="javascript:" id="passwordSection">
                                <i class="tio-lock-outlined nav-icon"></i> {{translate('messages.password')}}
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" href="javascript:" id="ppSection">
                                <i class="tio-calculator nav-icon"></i> PetPoojs Integration
                            </a>
                        </li>
                    </ul>
                    <!-- End Navbar Nav -->
                </div>
            </div>
            <!-- End Navbar -->
        </div>

        <div class="col-lg-9">
            <form action="{{env('APP_MODE')!='demo'?route('vendor.profile.update'):'javascript:'}}" method="post" enctype="multipart/form-data" id="vendor-settings-form">
                @csrf
                <!-- Card -->
                <div class="card mb-3 mb-lg-5" id="generalDiv">
                    <!-- Profile Cover -->
                    <div class="profile-cover">
                        <div class="profile-cover-img-wrapper"></div>
                    </div>
                    <!-- End Profile Cover -->

                    <!-- Avatar -->
                    <label class="avatar avatar-xxl avatar-circle avatar-border-lg avatar-uploader profile-cover-avatar" for="avatarUploader">
                        <img class="avatar-img" id="viewer" src="{{ \App\CentralLogics\Helpers::get_loggedin_user()?->image_full_url ?? dynamicAsset('public/assets/admin/img/160x160/img1.jpg') }}" alt="image">
                        <input type="file" name="image" class="js-file-attach avatar-uploader-input" id="customFileEg1" accept=".jpg, .png, .jpeg, .gif, .bmp, .tif, .tiff|image/*">
                        <label class="avatar-uploader-trigger" for="customFileEg1">
                            <i class="tio-edit avatar-uploader-icon shadow-soft"></i>
                        </label>
                    </label>
                    <!-- End Avatar -->
                </div>
                <!-- End Card -->

                <!-- Card -->
                <div class="card mb-3 mb-lg-5">
                    <div class="card-header">
                        <h2 class="card-title h4"><i class="tio-info"></i> {{translate('messages.basic_information')}}</h2>
                    </div>

                    <!-- Body -->
                    <div class="card-body">
                        <!-- Form -->
                        <!-- Form Group -->
                        <div class="row form-group">
                            <label for="firstNameLabel" class="col-sm-3 col-form-label input-label">{{translate('messages.full_name')}} <i class="tio-help-outlined text-body ml-1" data-toggle="tooltip" data-placement="top" title="Display name"></i></label>

                            <div class="col-sm-9">
                                <div class="input-group input-group-sm-down-break">
                                    <input type="text" class="form-control" name="f_name" id="firstNameLabel" placeholder="{{translate('messages.your_first_name')}}" aria-label="{{translate('messages.your_first_name')}}" value="{{auth('vendor')->check()?auth('vendor')->user()->f_name:auth('vendor_employee')->user()->f_name}}">
                                    <input type="text" class="form-control" name="l_name" id="lastNameLabel" placeholder="{{translate('messages.your_last_name')}}" aria-label="{{translate('messages.your_last_name')}}" value="{{auth('vendor')->check()?auth('vendor')->user()->l_name:auth('vendor_employee')->user()->l_name}}">
                                </div>
                            </div>
                        </div>
                        <!-- End Form Group -->

                        <!-- Form Group -->
                        <div class="row form-group">
                            <label for="phoneLabel" class="col-sm-3 col-form-label input-label">{{translate('messages.phone')}} <span class="input-label-secondary">({{translate('messages.optional')}})</span></label>

                            <div class="col-sm-9">
                                <input type="tel" class="js-masked-input form-control" name="phone" id="phoneLabel" placeholder="+x(xxx)xxx-xx-xx" aria-label="+(xxx)xx-xxx-xxxxx" value="{{auth('vendor')->check()?auth('vendor')->user()->phone:auth('vendor_employee')->user()->phone}}" data-hs-mask-options='{
                                           "template": "+(880)00-000-00000"
                                         }'>
                            </div>
                        </div>
                        <!-- End Form Group -->

                        <div class="row form-group">
                            <label for="newEmailLabel" class="col-sm-3 col-form-label input-label">{{translate('messages.email')}}</label>

                            <div class="col-sm-9">
                                <input type="email" class="form-control" name="email" id="newEmailLabel" value="{{auth('vendor')->check()?auth('vendor')->user()->email:auth('vendor_employee')->user()->email}}" placeholder="{{translate('messages.enter_new_email_address')}}" aria-label="{{translate('messages.enter_new_email_address')}}">
                            </div>
                        </div>

                        <div class="d-flex justify-content-end">
                            <button type="button" data-id="vendor-settings-form" data-message="{{translate('messages.you_want_to_update_user_info')}}" class="btn btn-primary @if(env('APP_MODE')!='demo') form-alert @else call-demo @endif">{{translate('messages.save_changes')}}</button>
                        </div>

                        <!-- End Form -->
                    </div>
                    <!-- End Body -->
                </div>
                <!-- End Card -->
            </form>

            <!-- Card -->
            <div id="passwordDiv" class="card mb-3 mb-lg-5">
                <div class="card-header">
                    <h4 class="card-title">{{translate('messages.change_your_password')}}</h4>
                </div>

                <!-- Body -->
                <div class="card-body">
                    <!-- Form -->
                    <form id="changePasswordForm" action="{{env('APP_MODE')!='demo'?route('vendor.profile.settings-password'):'javascript:'}}" method="post" enctype="multipart/form-data">
                        @csrf

                        <!-- Form Group -->
                        <div class="row form-group">
                            <label for="newPassword" class="col-sm-3 col-form-label input-label">{{translate('messages.new_password')}}
                                <span class="input-label-secondary ps-1" title="{{ translate('messages.Must_contain_at_least_one_number_and_one_uppercase_and_lowercase_letter_and_symbol,_and_at_least_8_or_more_characters') }}"><img src="{{ dynamicAsset('/public/assets/admin/img/info-circle.svg') }}" alt="{{ translate('messages.Must_contain_at_least_one_number_and_one_uppercase_and_lowercase_letter_and_symbol,_and_at_least_8_or_more_characters') }}"></span>

                            </label>

                            <div class="col-sm-9">
                                <input type="password" class="js-pwstrength form-control" name="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="{{ translate('messages.Must_contain_at_least_one_number_and_one_uppercase_and_lowercase_letter_and_symbol,_and_at_least_8_or_more_characters') }}" id="newPassword" placeholder="{{translate('messages.enter_new_password')}}" aria-label="{{translate('messages.enter_new_password')}}" data-hs-pwstrength-options='{
                                           "ui": {
                                             "container": "#changePasswordForm",
                                             "viewports": {
                                               "progress": "#passwordStrengthProgress",
                                               "verdict": "#passwordStrengthVerdict"
                                             }
                                           }
                                         }' required>

                                <p id="passwordStrengthVerdict" class="form-text mb-2"></p>

                                <div id="passwordStrengthProgress"></div>
                            </div>
                        </div>
                        <!-- End Form Group -->

                        <!-- Form Group -->
                        <div class="row form-group">
                            <label for="confirmNewPasswordLabel" class="col-sm-3 col-form-label input-label">{{translate('messages.confirm_password')}}</label>

                            <div class="col-sm-9">
                                <div class="mb-3">
                                    <input type="password" class="form-control" name="confirm_password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="{{ translate('messages.Must_contain_at_least_one_number_and_one_uppercase_and_lowercase_letter_and_symbol,_and_at_least_8_or_more_characters') }}" id="confirmNewPasswordLabel" placeholder="{{translate('messages.confirm_new_password')}}" aria-label="{{translate('messages.confirm_new_password')}}" required>
                                </div>
                            </div>
                        </div>
                        <!-- End Form Group -->

                        <div class="d-flex justify-content-end">
                            @if (env('APP_MODE')!='demo')
                            <button type="submit" class="btn btn--primary">{{translate('messages.Save_changes')}}</button>
                            @else
                            <button type="button" class="btn btn--primary call-demo">{{translate('messages.Save_changes')}}</button>
                            @endif

                        </div>
                    </form>
                    <!-- End Form -->
                </div>
                <!-- End Body -->
            </div>
            <!-- End Card -->

            <div id="ppDiv" class="card mb-3 mb-lg-5">
                <div class="card-header">
                    <h4 class="card-title">PetPooja Configuration</h4>
                </div>
                <div class="card-body">
                    <!-- Form -->
                    <form id="ppDetailsForm" action="{{env('APP_MODE')!='demo'?route('vendor.profile.pp.config'):'javascript:'}}" method="post">
                        @csrf
                        {{-- <div class="row form-group">
                            <label for="pp_restid" class="col-sm-3 col-form-label input-label">Choose Restautant</label>
                            <div class="col-sm-9">
                                @foreach ($restaurants as $restaurant)
                                <select name="restaurant_id" class="form-control" id="restautant" onchange="window.location.href = '?restaurant_id='+this.value">
                                    <option value="" selected>Select Restautant</option>
                                    <option @selected(Request::get('restaurant_id')==$restaurant->id) value="{{ $restaurant->id }}">{{ $restaurant->name }}</option>
                                </select>
                                @endforeach
                            </div>
                        </div> --}}

                        <div class="row form-group">
                            <label for="pp_restid" class="col-sm-3 col-form-label input-label">Restaurants ID</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="restid" id="pp_restid" value="{{$restaurants->pp_restid ?? ''}}">
                            </div>
                        </div>

                        {{-- <div class="row form-group">
                            <label for="app_key" class="col-sm-3 col-form-label input-label">App Key</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="app_key" id="app_key" value="{{$restaurant_data->pp_app_key ?? ''}}">
                            </div>
                        </div>
                        <div class="row form-group">
                            <label for="app_secret" class="col-sm-3 col-form-label input-label">App Secret</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="app_secret" id="app_secret" value="{{$restaurant_data->pp_app_secret ?? ''}}">
                            </div>
                        </div>

                        <div class="row form-group">
                            <label for="access_token" class="col-sm-3 col-form-label input-label">Access Token</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="access_token" id="access_token" value="{{$restaurant_data->pp_access_token ?? ''}}">
                            </div>
                        </div> --}}


                        <div class="d-flex justify-content-end">
                            @if (env('APP_MODE')!='demo')
                            <button type="submit" class="btn btn--primary">{{translate('messages.Save_changes')}}</button>
                            @else
                            <button type="button" class="btn btn--primary call-demo">{{translate('messages.Save_changes')}}</button>
                            @endif
                        </div>

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

            <!-- Sticky Block End Point -->
            <div id="stickyBlockEndPoint"></div>
        </div>
    </div>
    <!-- End Row -->
</div>
<!-- End Content -->
@endsection

@push('script_2')
<script src="{{dynamicAsset('public/assets/admin')}}/js/view-pages/vendor/profile.js"></script>
@endpush