@extends('layouts.dashboard.app')

@php
    $body_class = 'fullpage';


    $header_params = [
            'heading_page_title' => 'Settings',
    ];

@endphp

@section('content')

    <div class="wrapper header-fixed sidebar-gutters">
        <main class="content">
            <section class="full-vh">
                <!-- <div class="container"> -->
                <div class="card">
                    <div class="tabs-group">
                        <div class="tabs-links-container">
                            <div class="tabs-links-list">
                                <a class="tab-link btn btn--sm radius-10 active-tab" data-tab-link="" href="#tab__account-information">
                                
                                    {{__('Account Information')}}
                                </a>
                                <a class="tab-link btn btn--sm radius-10 " data-tab-link="" href="#tab__privacy-security">
                                    Privacy & Security
                                </a>
                                <a class="tab-link btn btn--sm radius-10" data-tab-link="" href="#tab__company-info">
                                    Company Info
                                </a>
                            </div>
                        </div>
                        <div class="tabs-body">
                            <div class="tab active-tab" data-id="tab__account-information">
                                <form action="{{route('dashboard.profile.update')}}" class="general-ajax-submit" method="POST">
                                    @csrf
                                    @method('PUT')

                                    <div class="flex items-center justify-between flex-wrap gap-15 mb-52">
                                        <h1>Account Information</h1>
                                        <button type="submit" href="#" class="btn btn--primary btn--md radius-10">Save Changes</button>
                                    </div>


                                    <div class="row gy-24 mb-42">
                                        <div class="col-lg-5">
                                            <h3 class="mb-10">General Info</h3>
                                            <p class="fw-500 color-secondary text--xs mb-20">Edit information about your personal data</p>
                                        </div>
                                        <div class="col-lg-7">
                                            <div class="row gy-24 gx-16">
                                                <div class="col-12">
                                                    <div class="form-group input--xl">
                                                        <label class="label">{{$page->show('account-details:name')}}</label>
                                                        <input type="text" class="input input--outline" name="name" value="{{$currentUser->name}}" placeholder="Jenny Wilson">
                                                        <span data-input="name" class="input-error"></span>
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="form-group input--xl">
                                                        <label class="label">{{$page->show('account-details:email')}}</label>
                                                        <input type="text" class="input input--outline" name="email" value="{{$currentUser->email}}" placeholder="tim.jennings@example.com">
                                                        <span data-input="email" class="input-error"></span>
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="form-group input--xl">
                                                        <label class="label">Phone Number</label>
                                                        <input type="text" class="input input--outline" name="phone" value="{{$currentUser->phone}}" placeholder="(229) 555-0109">
                                                        <span data-input="phone" class="input-error"></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row gy-24">
                                        <div class="col-lg-5">
                                            <h3 class="mb-10">Address</h3>
                                            <p class="fw-500 color-secondary text--xs mb-20">Your address info can be edited here</p>
                                        </div>
                                        <div class="col-lg-7">
                                            <div class="row gy-24 gx-16">
                                                <div class="col-12">
                                                    <div class="form-group input--xl">
                                                        <label class="label">Address Line 1</label>
                                                        <input type="text" class="input input--outline" name="address1" value="{{$currentUser->address1}}"
                                                               placeholder="3891 Ranchview Dr. Richardson, California 62639">
                                                        <span data-input="address1" class="input-error"></span>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div class="form-group input--xl">
                                                        <label class="label">Address Line 2</label>
                                                        <input type="text" class="input input--outline" name="address2" value="{{$currentUser->address2}}"
                                                               placeholder="">
                                                        <span data-input="address2" class="input-error"></span>
                                                    </div>
                                                </div>
                                                <div class="col-lg-4">
                                                    <div class="form-group input--xl">
                                                        <label class="label">City</label>
                                                        <input type="text" class="input input--outline" name="city" value="{{$currentUser->city}}" placeholder="Los Angeles">
                                                        <span data-input="city" class="input-error"></span>
                                                    </div>
                                                </div>
                                                <div class="col-lg-4">
                                                    <div class="form-group input--xl">
                                                        <label class="label">Country</label>
                                                        <input type="text" class="input input--outline" name="country" value="{{$currentUser->country}}" placeholder="USA">
                                                        <span data-input="city" class="input-error"></span>
                                                    </div>
                                                </div>
                                                <div class="col-lg-4">
                                                    <div class="form-group input--xl">
                                                        <label class="label">ZIP</label>
                                                        <input type="text" class="input input--outline" name="zip" value="{{$currentUser->zip}}" placeholder="62639">
                                                        <span data-input="zip" class="input-error"></span>
                                                    </div>
                                                </div>

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

                                </form>

                            </div>
                            <div class="tab " data-id="tab__privacy-security">
                                <form action="{{route('dashboard.profile.update-password')}}" class="general-ajax-submit" method="POST">
                                    @csrf
                                    @method('PUT')
                                    <h1 class="mb-52">Privacy & Security</h1>

                                    <div class="row gy-24 mb-42">
                                        <div class="col-lg-5">
                                            <h3 class="mb-10">Change Password</h3>
                                            <p class="fw-500 color-secondary text--xs mb-20">Create new password for account</p>
                                        </div>
                                        <div class="col-lg-7">
                                            <div class="row gy-24 gx-16">
                                                <div class="col-12">
                                                    <div class="form-group input--xl">
                                                        <label class="label">Old Password</label>
                                                        <input required class="input input--outline" name="old_password" type="password" placeholder="••••••••••••••••••••••••••" value="" >
                                                        <span data-input="old_password" class="input-error"></span>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div class="form-group input--xl">
                                                        <label class="label">New Password</label>
                                                        <input required class="input input--outline" name="password" type="password" placeholder="••••••••••••••••••••••••••" value="" >
                                                        <span data-input="password" class="input-error"></span>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div class="form-group input--xl">
                                                        <label class="label">Confirm Password</label>
                                                        <input required class="input input--outline" name="password_confirmation" type="password" placeholder="••••••••••••••••••••••••••" value="" >
                                                        <span data-input="password_confirmation" class="input-error"></span>
                                                    </div>
                                                </div>
                                                <div class="col-12 flex justify-end">
                                                    <button type="submit" href="#" class="btn btn--primary btn--md radius-10">Change Password</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    @if(false)
                                    <div class="row gy-24 mb-42">
                                        <div class="col-lg-5">
                                            <h3 class="mb-10">Two-Factor Authentication</h3>
                                            <p class="fw-500 color-secondary text--xs mb-20">Require an authentication code when you login</p>
                                        </div>
                                        <div class="col-lg-7">
                                            <label class="check-item justify-between">
                                                <label class="check-switch">
                                                    <input name="use_two_factor" type="checkbox" class="hidden">
                                                    <span class="switch"></span>
                                                </label>
                                            </label>
                                        </div>
                                    </div>
                                    @endif
                                </form>

                            </div>

                            <div class="tab" data-id="tab__company-info">
                                <form action="{{route('dashboard.profile.update-company')}}" class="general-ajax-submit" method="POST">
                                    @csrf
                                    @method('PUT')
                                    <div class="flex items-center justify-between flex-wrap gap-15 mb-52">
                                        <h1>Company Info</h1>
                                        <button type="submit" href="#" class="btn btn--primary btn--md radius-10">Save Changes</button>
                                    </div>

                                    <div class="row gy-24  mb-42">
                                        <div class="col-lg-5">
                                            <h3 class="mb-10">Company Info</h3>
                                            <p class="fw-500 color-secondary text--xs mb-20">Edit information about your company</p>
                                        </div>
                                        <div class="col-lg-7">
                                            <div class="row gy-24">
                                                <div class="col-12">
                                                    <div class="form-group input--xl">
                                                        <label class="label">Company Name</label>
                                                        <input type="text" class="input input--outline" name="name" value="{{$currentUser->company?->name}}" placeholder="3891 Ranchview Dr. Richardson, California 62639">
                                                        <span data-input="name" class="input-error"></span>

                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div class="form-group input--xl">
                                                        <label class="label">VAT Number</label>
                                                        <input type="text" class="input input--outline" name="vat" value="{{$currentUser->company?->vat}}" placeholder="">
                                                        <span data-input="vat" class="input-error"></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row gy-24">
                                        <div class="col-lg-5">
                                            <h3 class="mb-10">Company Address</h3>
                                            <p class="fw-500 color-secondary text--xs mb-20">Your company address info can be edited here</p>
                                        </div>
                                        <div class="col-lg-7">
                                            <div class="row gy-24 gx-16">
                                                <div class="col-12">
                                                    <div class="form-group input--xl">
                                                        <label class="label">Address Line 1</label>
                                                        <input data-user-value="{{ $currentUser->address1 }}" type="text" class="company_address_field input input--outline" name="address1" value="{{$currentUser->company?->address1}}"
                                                               placeholder="3891 Ranchview Dr. Richardson, California 62639">
                                                        <span data-input="address1" class="input-error"></span>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div class="form-group input--xl">
                                                        <label class="label">Address Line 2</label>
                                                        <input data-user-value="{{ $currentUser->address2 }}" type="text" class="company_address_field input input--outline" name="address2" value="{{$currentUser->company?->address2}}"
                                                               placeholder="">
                                                        <span data-input="address2" class="input-error"></span>
                                                    </div>
                                                </div>
                                                <div class="col-lg-4">
                                                    <div class="form-group input--xl">
                                                        <label class="label">City</label>
                                                        <input data-user-value="{{ $currentUser->city }}" type="text" class="company_address_field input input--outline" name="city" value="{{$currentUser->company?->city}}" placeholder="Los Angeles">
                                                        <span data-input="city" class="input-error"></span>
                                                    </div>
                                                </div>
                                                <div class="col-lg-4">
                                                    <div class="form-group input--xl">
                                                        <label class="label">Country</label>
                                                        <input data-user-value="{{ $currentUser->country }}" type="text" class="company_address_field input input--outline" name="country" value="{{$currentUser->company?->country}}" placeholder="USA">
                                                        <span data-input="city" class="input-error"></span>
                                                    </div>
                                                </div>
                                                <div class="col-lg-4">
                                                    <div class="form-group input--xl">
                                                        <label class="label">ZIP</label>
                                                        <input data-user-value="{{ $currentUser->zip }}" type="text" class="company_address_field input input--outline" name="zip" value="{{$currentUser->company?->zip}}" placeholder="62639">
                                                        <span data-input="zip" class="input-error"></span>
                                                    </div>
                                                </div>

                                                <div class="col-12">
                                                    <label class="check-form check--xs">
                                                        <input class="use_user_address" type="checkbox"  hidden="">
                                                        <div class="check-row">
                                                            <span class="check-control check-control--custom"></span>
                                                            <div class="check-content my-auto">
                                                                <p class="check-text text--lg">Employ the address listed on your profile</p>
                                                            </div>
                                                        </div>
                                                    </label>
                                                </div>

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

                        </div>
                    </div>

                </div>
                <!-- </div> -->
            </section>

        </main>

        <x-footer-dashboard />
    </div>


@endsection



@push('scripts')
    <script src="{{ asset('dash/js/settings.js') }}"></script>
@endpush