@extends('layouts.marketplace', ['title' => 'Marketplace Account - Settings'])

@section('content')
    <!-- Account settings content -->
    <div class="col-lg-9 pt-2 pt-xl-3">
        <!-- Page title -->
        <h1 class="h2 pb-1 pb-sm-2 pb-md-3">Settings</h1>
        <!-- Nav tabs -->
        <div class="overflow-auto mb-3">
            <ul class="nav nav-pills flex-nowrap gap-2 text-nowrap pb-3" role="tablist">
                <li class="nav-item" role="presentation">
                    <button aria-controls="profile" aria-selected="true" class="nav-link active" data-bs-target="#profile"
                        data-bs-toggle="pill" id="profile-tab" role="tab" type="button">
                        Profile
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button aria-controls="security" aria-selected="false" class="nav-link" data-bs-target="#security"
                        data-bs-toggle="pill" id="security-tab" role="tab" type="button">
                        Security
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button aria-controls="payment" aria-selected="false" class="nav-link" data-bs-target="#payment"
                        data-bs-toggle="pill" id="payment-tab" role="tab" type="button">
                        Payment methods
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button aria-controls="notifications" aria-selected="false" class="nav-link"
                        data-bs-target="#notifications" data-bs-toggle="pill" id="notifications-tab" role="tab"
                        type="button">
                        Notifications
                    </button>
                </li>
            </ul>
        </div>
        <!-- Tabs content -->
        <div class="tab-content">
            <!-- Profile tab -->
            <div aria-labelledby="profile-tab" class="tab-pane fade show active" id="profile" role="tabpanel">
                <!-- Avatar -->
                <div class="d-flex align-items-start align-items-sm-center pb-3 mb-3">
                    <div class="ratio ratio-1x1 hover-effect-opacity border rounded-circle overflow-hidden"
                        style="width: 112px">
                        <img alt="Avatar" src="/img/account/avatar-lg.png" />
                        <div
                            class="hover-effect-target position-absolute top-0 start-0 d-flex align-items-center justify-content-center w-100 h-100 opacity-0">
                            <button aria-label="Remove" class="btn btn-icon btn-sm btn-light position-relative z-2"
                                type="button">
                                <i class="ci-trash fs-base"></i>
                            </button>
                            <span class="position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 z-1"></span>
                        </div>
                    </div>
                    <div class="ps-3 ps-sm-4">
                        <p class="fs-sm" style="max-width: 400px">Your profile picture will appear on your
                            profile and listings. PNG or JPG no bigger than 500px wide and tall.</p>
                        <button class="btn btn-sm btn-secondary animate-rotate rounded-pill" type="button">
                            <i class="ci-refresh-ccw animate-target fs-sm ms-n1 me-2"></i>
                            Update picture
                        </button>
                    </div>
                </div>
                <!-- Settings form -->
                <form class="needs-validation" novalidate="">
                    <div class="row row-cols-1 row-cols-sm-2 g-4 mb-4">
                        <div class="col position-relative">
                            <label class="form-label fs-base" for="fn">First name *</label>
                            <input class="form-control form-control-lg rounded-pill" id="fn" required=""
                                type="text" value="Coderthemes" />
                            <div class="invalid-tooltip bg-transparent p-0">Enter your first name!</div>
                        </div>
                        <div class="col position-relative">
                            <label class="form-label fs-base" for="ln">Last name *</label>
                            <input class="form-control form-control-lg rounded-pill" id="ln" required=""
                                type="text" value="Studio" />
                            <div class="invalid-tooltip bg-transparent p-0">Enter your last name!</div>
                        </div>
                        <div class="col position-relative">
                            <label class="form-label d-flex align-items-center fs-base" for="email">Email
                                address * <span class="badge text-danger bg-danger-subtle ms-2">Verify
                                    email</span></label>
                            <input class="form-control form-control-lg rounded-pill" id="email" required=""
                                type="email" value="contact@coderthemes" />
                            <div class="invalid-tooltip bg-transparent p-0">Enter a valid email address!</div>
                        </div>
                        <div class="col">
                            <label class="form-label fs-base" for="display-name">Display name</label>
                            <input class="form-control form-control-lg form-icon-end rounded-pill" id="display-name"
                                type="text" value="Coderthemes" />
                        </div>
                    </div>
                    <div class="pb-2 mb-3 mb-sm-4">
                        <label class="form-label fs-base" for="description">Description</label>
                        <textarea class="form-control form-control-lg rounded-5" id="description" rows="6">Digital products &amp; bespoke development</textarea>
                    </div>
                    <div class="pb-2 mb-4">
                        <div class="form-check fs-lg m-0">
                            <input class="form-check-input" id="allow-contact" type="checkbox" />
                            <label class="form-check-label fs-base" for="allow-contact">Allow other users to
                                contact you with work inquiries.</label>
                        </div>
                    </div>
                    <div class="d-flex gap-3">
                        <button class="btn btn-lg btn-primary rounded-pill" type="submit">Save changes</button>
                        <button class="btn btn-lg btn-secondary rounded-pill" type="reset">Cancel</button>
                    </div>
                </form>
            </div>
            <!-- Security tab -->
            <div aria-labelledby="security-tab" class="tab-pane fade" id="security" role="tabpanel">
                <!-- Change password form -->
                <form class="needs-validation" novalidate="">
                    <div class="row row-cols-1 row-cols-sm-2 g-4 mb-4">
                        <div class="col">
                            <label class="form-label fs-base" for="current-password">Current password</label>
                            <div class="password-toggle">
                                <input class="form-control form-control-lg rounded-pill" id="current-password"
                                    required="" type="password" />
                                <div class="invalid-tooltip bg-transparent p-0">Incorrect password. Please try
                                    again.</div>
                                <label aria-label="Show/hide password" class="password-toggle-button">
                                    <input class="btn-check" type="checkbox" />
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="row row-cols-1 row-cols-sm-2 g-4 mb-4">
                        <div class="col">
                            <label class="form-label fs-base" for="new-password">New password <span
                                    class="fs-sm fw-normal text-body-secondary">(Min 8 chars)</span></label>
                            <div class="password-toggle">
                                <input class="form-control form-control-lg rounded-pill" id="new-password" minlength="8"
                                    required="" type="password" />
                                <div class="invalid-tooltip bg-transparent p-0">Please ensure password is at least
                                    8 characters long.</div>
                                <label aria-label="Show/hide password" class="password-toggle-button">
                                    <input class="btn-check" type="checkbox" />
                                </label>
                            </div>
                        </div>
                        <div class="col">
                            <label class="form-label fs-base" for="confirm-new-password">Confirm new
                                password</label>
                            <div class="password-toggle">
                                <input class="form-control form-control-lg rounded-pill" id="confirm-new-password"
                                    minlength="8" required="" type="password" />
                                <div class="invalid-tooltip bg-transparent p-0">Passwords do not match.</div>
                                <label aria-label="Show/hide password" class="password-toggle-button">
                                    <input class="btn-check" type="checkbox" />
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex gap-3">
                        <button class="btn btn-lg btn-primary rounded-pill" type="submit">Update
                            password</button>
                        <button class="btn btn-lg btn-secondary rounded-pill" type="reset">Cancel</button>
                    </div>
                </form>
                <!-- Delete account -->
                <h2 class="h6 pt-5 mt-xl-2 pb-1 mb-2">Delete account</h2>
                <p class="fs-sm">When you delete your account, your public profile will be deactivated
                    immediately. If you change your mind before the 14 days are up, sign in with your email and
                    password, and we'll send a link to reactivate account.</p>
                <div class="form-check mb-3">
                    <input class="form-check-input" id="confirm-deletion" type="checkbox" />
                    <label class="form-check-label" for="confirm-deletion">Yes, I want to delete my
                        account</label>
                </div>
                <a class="fs-sm fw-medium text-danger" href="#!">Delete account</a>
            </div>
            <!-- Payment methods tab -->
            <div aria-labelledby="payment-tab" class="tab-pane fade" id="payment" role="tabpanel">
                <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3 g-md-4 g-lg-3 g-xl-4">
                    <div class="col">
                        <div class="card h-100 rounded-4">
                            <div class="card-body pb-3">
                                <div class="d-flex align-items-start justify-content-between mb-4">
                                    <img alt="Mastercard" class="m-n3" src="/img/payment-methods/mastercard.svg"
                                        width="100" />
                                    <span class="badge text-bg-info rounded-pill">Primary</span>
                                </div>
                                <div class="h6 mb-1">**** **** **** 8341</div>
                                <div class="text-danger fs-xs">Expired 05/24</div>
                            </div>
                            <div class="card-footer d-flex gap-2 bg-transparent border-0 pt-0 pb-4">
                                <button class="btn btn-sm btn-outline-secondary rounded-pill me-1"
                                    type="button">Edit</button>
                                <button class="btn btn-sm btn-outline-secondary rounded-pill"
                                    type="button">Remove</button>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card h-100 rounded-4">
                            <div class="card-body pb-3">
                                <div class="d-flex align-items-start justify-content-between mb-4">
                                    <img alt="Visa" class="d-none-dark m-n3"
                                        src="/img/payment-methods/visa-light-mode.svg" width="100" />
                                    <img alt="Visa" class="d-none d-block-dark m-n3"
                                        src="/img/payment-methods/visa-dark-mode.svg" width="100" />
                                    <div class="nav animate-underline">
                                        <a class="nav-link animate-target fs-xs p-0" href="#!">Set as
                                            primary</a>
                                    </div>
                                </div>
                                <div class="h6 mb-1">**** **** **** 1276</div>
                                <div class="text-body fs-xs">Expiration 01/27</div>
                            </div>
                            <div class="card-footer d-flex gap-2 bg-transparent border-0 pt-0 pb-4">
                                <button class="btn btn-sm btn-outline-secondary rounded-pill me-1"
                                    type="button">Edit</button>
                                <button class="btn btn-sm btn-outline-secondary rounded-pill"
                                    type="button">Remove</button>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card border-0 h-100">
                            <span
                                class="position-absolute top-0 start-0 w-100 h-100 border border-dashed border-secondary border-opacity-25 rounded-4 d-none-dark"></span>
                            <span
                                class="position-absolute top-0 start-0 w-100 h-100 border border-dashed border-light border-opacity-25 rounded-4 d-none d-block-dark"></span>
                            <div
                                class="card-body position-relative z-2 nav align-items-center justify-content-center py-5">
                                <a class="nav-link animate-underline stretched-link min-w-0 fs-base px-0"
                                    data-bs-toggle="modal" href="#addPaymentModal">
                                    <i class="ci-plus fs-lg ms-n2 me-2"></i>
                                    <span class="animate-target text-truncate">Add payment method</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Notifications tab -->
            <div aria-labelledby="notifications-tab" class="tab-pane fade" id="notifications" role="tabpanel">
                <div class="vstack gap-4 pt-sm-1">
                    <div class="form-check form-switch mb-0">
                        <input checked="" class="form-check-input" id="product-sold" type="checkbox" />
                        <label class="form-check-label ps-2" for="product-sold">
                            <span class="d-block h6 mb-2">Product sold notifications</span>
                            <span class="fs-sm">Send an email when someone purchased one of my product.</span>
                        </label>
                    </div>
                    <div class="form-check form-switch mb-0">
                        <input checked="" class="form-check-input" id="product-update" type="checkbox" />
                        <label class="form-check-label ps-2" for="product-update">
                            <span class="d-block h6 mb-2">Product update notifications</span>
                            <span class="fs-sm">Send an email when a product I've purchased is updated.</span>
                        </label>
                    </div>
                    <div class="form-check form-switch mb-0">
                        <input class="form-check-input" id="surveys" type="checkbox" />
                        <label class="form-check-label ps-2" for="surveys">
                            <span class="d-block h6 mb-2">Surveys and tests</span>
                            <span class="fs-sm">Receive invitations to participate in surveys, consultations, and
                                tool testing.</span>
                        </label>
                    </div>
                    <div class="form-check form-switch mb-0">
                        <input checked="" class="form-check-input" id="product-review" type="checkbox" />
                        <label class="form-check-label ps-2" for="product-review">
                            <span class="d-block h6 mb-2">Product review notifications</span>
                            <span class="fs-sm">Company news and cooperation offers.</span>
                        </label>
                    </div>
                    <div class="form-check form-switch mb-0">
                        <input class="form-check-input" id="daily-summary" type="checkbox" />
                        <label class="form-check-label ps-2" for="daily-summary">
                            <span class="d-block h6 mb-2">Daily summary emails</span>
                            <span class="fs-sm">Send an email when someone leaves a review with his/her
                                rating.</span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
@endsection
