@extends('backend.template.layouts.template-base')
@section('title', 'Settings - AppWeb Setting')

@section('content')

    <div class="page-head-title mb-3">
        <div class=" app-web d-flex align-items-center justify-content-between">
            <div class="d-inline-block">
                <h2 class="text-title fw-semibold mb-0">App and Web settings
                </h2>
            </div>

            <div class="d-flex align-items-center gap-3">

                <a href="javascript:void(0);" class="button-green d-flex flex-row gap-2 align-items-center px-3">

                    Update changes
                </a>
            </div>
        </div>
    </div>


    <!-- Nav tabs -->
    <ul class="nav nav-tabs nav-tabs-custom" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link active" data-bs-toggle="tab" href="#Categories" role="tab" aria-selected="false"
                tabindex="-1">
                App
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" data-bs-toggle="tab" href="#Sections" role="tab" aria-selected="false" tabindex="-1">
                Website
            </a>
        </li>
    </ul>




    <div class="tab-content card-tab-border text-muted">
        <div class="tab-pane show active" id="Categories" role="tabpanel">
            <div class="p-3">
                <div class="aws-grid">

                    <!-- LEFT -->
                    <div class="aws-card left-card1">
                        <h4 class="aws-title">App Identity</h4>

                        <div class="aws-field">
                            <label>App Name <span>*</span></label>
                            <input type="text" value="Chotekisan">
                        </div>

                        <div class="aws-field">
                            <label>App Logo <span>*</span></label>
                            <div class="aws-upload"> <svg width="67" height="56" viewBox="0 0 67 56" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M15.4353 25.1293C15.7237 24.5525 16.4746 24.3955 16.97 24.8083L31.0835 36.5696C31.5614 36.9679 32.2832 36.8377 32.5919 36.2975L52.0782 2.19644C52.5281 1.40924 53.7093 1.57895 53.9193 2.46096L66.3734 54.7684C66.523 55.3968 66.0466 56 65.4006 56H1.61803C0.87465 56 0.391156 55.2177 0.723607 54.5528L15.4353 25.1293Z"
                                        fill="#D9D9D9" />
                                    <circle cx="26.6672" cy="13.332" r="8" fill="#D9D9D9" />
                                </svg>
                            </div>
                        </div>

                        <div class="aws-field">
                            <label>Current Version</label>
                            <input type="text" value="Version 0.1">
                        </div>
                    </div>

                    <!-- RIGHT -->
                    <div class="aws-card">
                        <h4 class="aws-title">Manage Controls</h4>

                        <!-- TOGGLES -->
                        <div class="aws-toggle">
                            <div>
                                <h5>Guest Checkout</h5>
                                <p>Turn On in case of maintenance required with user notes</p>
                            </div>
                            <label class="aws-switch"><input type="checkbox" checked><span></span></label>
                        </div>

                        <div class="aws-toggle">
                            <div>
                                <h5>Subscription</h5>
                                <p>If turned off users will not get updates on email</p>
                            </div>
                            <label class="aws-switch"><input type="checkbox" checked><span></span></label>
                        </div>

                        <div class="aws-toggle">
                            <div>
                                <h5>Referral System</h5>
                                <p>If turned off users will not get updates on SMS</p>
                            </div>
                            <label class="aws-switch"><input type="checkbox" checked><span></span></label>
                        </div>

                        <div class="aws-toggle">
                            <div>
                                <h5>COD</h5>
                                <p>If turned off users will not get push notification</p>
                            </div>
                            <label class="aws-switch"><input type="checkbox" checked><span></span></label>
                        </div>

                        <div class="aws-toggle">
                            <div>
                                <h5>Wallet</h5>
                                <p>Turn On auto-confirm to make users to wait for confirmation</p>
                            </div>
                            <label class="aws-switch"><input type="checkbox"><span></span></label>
                        </div>

                        <div class="aws-toggle">
                            <div>
                                <h5>Maintenance Mode</h5>
                                <p>Turn On in case of maintenance required with user notes</p>
                            </div>
                            <label class="aws-switch"><input type="checkbox"><span></span></label>
                        </div>

                    </div>

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



        <div class="tab-pane " id="Sections" role="tabpanel">
            <div class="p-3">
                <!-- WEBSITE IDENTITY -->
                <div class="aws-card">
                    <h4 class="aws-title">Website Identity</h4>

                    <div class="aws-field1 mb-3">
                        <label>Website Name <span>*</span></label>
                        <input type="text" value="Chotekisan">
                    </div>

                    <div class="aws-upload-row">

                        <div class="aws-upload">
                            <div>
                                <label>App Logo <span>*</span></label>
                                <svg width="67" height="56" viewBox="0 0 67 56" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M15.4353 25.1293C15.7237 24.5525 16.4746 24.3955 16.97 24.8083L31.0835 36.5696C31.5614 36.9679 32.2832 36.8377 32.5919 36.2975L52.0782 2.19644C52.5281 1.40924 53.7093 1.57895 53.9193 2.46096L66.3734 54.7684C66.523 55.3968 66.0466 56 65.4006 56H1.61803C0.87465 56 0.391156 55.2177 0.723607 54.5528L15.4353 25.1293Z"
                                        fill="#D9D9D9"></path>
                                    <circle cx="26.6672" cy="13.332" r="8" fill="#D9D9D9"></circle>
                                </svg>
                            </div>
                        </div>
                        <div class="aws-upload"> <svg width="67" height="56" viewBox="0 0 67 56" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M15.4353 25.1293C15.7237 24.5525 16.4746 24.3955 16.97 24.8083L31.0835 36.5696C31.5614 36.9679 32.2832 36.8377 32.5919 36.2975L52.0782 2.19644C52.5281 1.40924 53.7093 1.57895 53.9193 2.46096L66.3734 54.7684C66.523 55.3968 66.0466 56 65.4006 56H1.61803C0.87465 56 0.391156 55.2177 0.723607 54.5528L15.4353 25.1293Z"
                                    fill="#D9D9D9"></path>
                                <circle cx="26.6672" cy="13.332" r="8" fill="#D9D9D9"></circle>
                            </svg>
                        </div>
                        <div class="aws-upload"> <svg width="67" height="56" viewBox="0 0 67 56" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M15.4353 25.1293C15.7237 24.5525 16.4746 24.3955 16.97 24.8083L31.0835 36.5696C31.5614 36.9679 32.2832 36.8377 32.5919 36.2975L52.0782 2.19644C52.5281 1.40924 53.7093 1.57895 53.9193 2.46096L66.3734 54.7684C66.523 55.3968 66.0466 56 65.4006 56H1.61803C0.87465 56 0.391156 55.2177 0.723607 54.5528L15.4353 25.1293Z"
                                    fill="#D9D9D9"></path>
                                <circle cx="26.6672" cy="13.332" r="8" fill="#D9D9D9"></circle>
                            </svg>
                        </div>
                    </div>
                </div>

                <div class="aws-grid mt-3">

                    <!-- LEFT -->
                    <div class="aws-card">
                        <h4 class="aws-title">Manage Controls</h4>

                        <!-- TOGGLES -->
                        <div class="aws-toggle">
                            <div>
                                <h5>Guest Checkout</h5>
                                <p>Turn On in case of maintenance required with user notes</p>
                            </div>
                            <label class="aws-switch"><input type="checkbox" checked><span></span></label>
                        </div>

                        <div class="aws-toggle">
                            <div>
                                <h5>Subscription</h5>
                                <p>If turned off users will not get updates on email</p>
                            </div>
                            <label class="aws-switch"><input type="checkbox" checked><span></span></label>
                        </div>

                        <div class="aws-toggle">
                            <div>
                                <h5>Referral System</h5>
                                <p>If turned off users will not get updates on SMS</p>
                            </div>
                            <label class="aws-switch"><input type="checkbox" checked><span></span></label>
                        </div>

                        <div class="aws-toggle">
                            <div>
                                <h5>COD</h5>
                                <p>If turned off users will not get push notification</p>
                            </div>
                            <label class="aws-switch"><input type="checkbox" checked><span></span></label>
                        </div>

                        <div class="aws-toggle">
                            <div>
                                <h5>Wallet</h5>
                                <p>Turn On auto-confirm to make users to wait for confirmation</p>
                            </div>
                            <label class="aws-switch"><input type="checkbox"><span></span></label>
                        </div>

                        <div class="aws-toggle">
                            <div>
                                <h5>Maintenance Mode</h5>
                                <p>Turn On in case of maintenance required with user notes</p>
                            </div>
                            <label class="aws-switch"><input type="checkbox"><span></span></label>
                        </div>

                    </div>

                    <!-- RIGHT -->
                    <div class="aws-card">
                        <h4 class="aws-title">SEO Settings</h4>

                        <div class="aws-field"><label>Meta Title</label><input placeholder="Enter meta title"></div>
                        <div class="aws-field"><label>Meta Description</label><input placeholder="Enter meta title"></div>
                        <div class="aws-field"><label>Meta Keywords</label><input
                                placeholder="Type and separate by comma or enter">
                        </div>
                        <div class="aws-field"><label>Robots.txt</label><input placeholder="Enter robots.txt"></div>
                        <div class="aws-field"><label>Sitemap URL</label><input value="xyz.url"
                                style="background-color: #F9FAFB"></div>
                    </div>

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

@endsection