@extends('layouts.app')
@section('content')
<style>
    .flat-spacing-11 {
        padding-top: 80px;
        padding-bottom: 70px;
    }
    .my-account-nav {
        display: flex;
        flex-direction: column;
        gap: 10px;
        position: sticky;
        top: 0;
    }
    ul, li {
        list-style-type: none;
        margin-bottom: 0;
        padding-left: 0;
        list-style: none;
    }
    .my-account-nav .my-account-nav-item:hover, .my-account-nav .my-account-nav-item.active {
        background-color: #f2f2f2;
        color: #db1215;
        border-color: transparent;
    }
    .my-account-nav .my-account-nav-item {
        display: flex;
        width: 100%;
        border: 1px solid #ebebeb;
        padding: 15px 20px;
        border-radius: 3px;
        font-size: 16px;
        font-weight: 500;
        line-height: 20px;
        position: relative;
    }
    .tf-field {
        position: relative;
    }
    .mb_15 {
        margin-bottom: 15px;
    }
    .tf-field.style-1 .tf-input {
        padding: 25px 18px 6px;
        height: 50px;
        border: 1px solid #ebebeb !important;
        border-radius: 3px;
    }
    .tf-field .tf-input {
        padding: 13px 10px;
    }
    form input[type=text]{
        font-family: "Albert Sans", sans-serif;
        border: 1px solid #ebebeb;
        outline: 0;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        font-size: 14px;
        line-height: 24px;
        border-radius: 3px;
        padding: 12px 18px;
        width: 100%;
        background: #ffffff;
        color: #909090;
        font-weight: 400;
    }
    input[type=text] {
        font-family: "Albert Sans", sans-serif;
        border: 1px solid #ebebeb;
        outline: 0;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        font-size: 14px;
        line-height: 24px;
        border-radius: 3px;
        padding: 12px 18px;
        width: 100%;
        background: #ffffff;
        color: #909090;
        font-weight: 400;
    }
    input{
        margin: 0;
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
    } {
        font-family: "Albert Sans", sans-serif;
        border: 1px solid ebebeb;
        outline: 0;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        font-size: 14px;
        line-height: 24px;
        border-radius: 3px;
        padding: 12px 18px;
        width: 100%;
        background: var(--white);
        color: var(--text-2);
        font-weight: 400;
    }
    input {
        margin: 0;
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
    }
    
    .tf-field.style-1 .tf-input:not(:placeholder-shown) ~ .tf-field-label, .tf-field.style-1 .tf-input:focus ~ .tf-field-label {
        top: 4px;
        left: 14px;
        transform: scale(0.8);
        background-color: transparent;
        padding: 0;
        font-size: 14px;
    }
    .tf-field .tf-input:not(:placeholder-shown) ~ .tf-field-label, .tf-field .tf-input:focus ~ .tf-field-label {
        border-radius: 3px;
        background-color: rgb(242, 242, 242);
        font-size: 12px;
        top: 0;
        letter-spacing: 0.4px;
        padding: 0 8px;
    }
    .tf-field.style-1 .tf-field-label {
        font-weight: 400;
        color: #909090;
        left: 18px;
        font-size: 14px;
    }
    .tf-field .tf-field-label {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 10px;
        transition: all 0.1s ease;
        cursor: text;
    }
    .text_black-2 {
        color: #545454 !important;
    }
    .fw-4 {
        font-weight: 400 !important;
    }
    label {
        font-weight: 600;
    }
    
    .animate-hover-btn {
        position: relative;
        overflow: hidden;
    }
    .btn-fill {
        background-color: #000000 !important;
        border: 1px solid #000000 !important;
        color: #ffffff;
    }
    .tf-btn {
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        will-change: background-color, color, border;
        pointer-events: auto;
        overflow: hidden;
        font-size: 14px;
        line-height: 16px;
        font-weight: 500;
        box-sizing: border-box;
        padding: 14px 24px;
        display: inline-flex;
        border-radius: 3px;
        align-items: center;
        border: 1px solid transparent;
        background-color: transparent;
        cursor: pointer;
    }
    .radius-3 {
        border-radius: 3px !important;
    }
    .justify-content-center {
        justify-content: center !important;
    }
    .w-100 {
        width: 100% !important;
    }
</style>

<!-- page-cart -->
<section class="flat-spacing-11"  style="background-color:white;"> 
    <div class="container">
        <div class="row">
            <div class="col-lg-3">
                @include('account.satellite.show.menu')
            </div>
            <div class="col-lg-9">
                
                <form method="post" action="{{route('shop-bo.account.satellite.show.update',['satellite_id' => Crypt::encrypt($satellite_query->id)])}}">
                    @csrf
                    @honeypot
                    <div class="my-account-content account-edit">
                        <div class="">
                            <form class="" id="form-password-change" action="#">
                                <div class="tf-field style-1 mb_15">
                                    <input class="tf-field-input tf-input" placeholder=" " type="text" id="property1" name="firstname" value="{{$satellite_query->firstname}}">
                                    <label class="tf-field-label fw-4 text_black-2" for="property1">First name</label>
                                </div>
                                <div class="tf-field style-1 mb_15">
                                    <input class="tf-field-input tf-input" placeholder=" " type="text" id="property2" name="surname" value="{{$satellite_query->surname}}">
                                    <label class="tf-field-label fw-4 text_black-2" for="property2">Last name</label>
                                </div>
                                <div class="tf-field style-1 mb_15">
                                    <input class="tf-field-input tf-input" placeholder=" " type="email" id="property3" name="email" value="{{$satellite_query->email}}">
                                    <label class="tf-field-label fw-4 text_black-2" for="property3">Email</label>
                                </div>
                                <h6 class="mb_20">Password Change</h6>
                                <div class="tf-field style-1 mb_30">
                                    <input class="tf-field-input tf-input" placeholder=" " type="password" id="property5" name="password">
                                    <label class="tf-field-label fw-4 text_black-2" for="property5">New password</label>
                                </div><br><br>
                                <div class="tf-field style-1 mb_30">
                                    <input class="tf-field-input tf-input" placeholder=" " type="password" id="property6" name="password_confirmation">
                                    <label class="tf-field-label fw-4 text_black-2" for="property6">Confirm password</label>
                                </div><br><br>
                                <div class="mb_20">
                                    <button type="submit" class="tf-btn w-100 radius-3 btn-fill animate-hover-btn justify-content-center">Save Changes</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
<!-- page-cart -->

<div class="btn-sidebar-account">
    <button data-bs-toggle="offcanvas" data-bs-target="#mbAccount" aria-controls="offcanvas"><i class="icon icon-sidebar-2"></i></button>
</div>
@endsection           
@section('page_script') 
@parent
<script>
    $(".account-menu.dashboard").addClass('active')
    $(".user-menu").addClass("active");
    $(".satellite").addClass("active");
</script>
@endsection                                  
<!-- App js -->