@extends('layouts.app')
@push('css')
    <style>
        .field-icon {
            float: right;
            margin-left: -25px;
            margin-top: -5px;
            position: relative;
            z-index: 2;
        }
    </style>
@endpush
@section('content')
    @include('includes.bread_crumb_with_header', [
    'header' => 'Settings',
    'bread_crumbs' => [],
])

    <div id="kt_app_content" class="app-content flex-column-fluid">
        <div id="kt_app_content_container" class="app-container container-xxl">
            {{--GENERAL SETTING--}}
            <div class="row w-100 mb-5" id="general_setting">
                <div class="d-flex flex-column flex-row-fluid gap-7 gap-lg-8 w-100">
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="kt_ecommerce_add_product_general">
                            <div class="d-flex flex-column gap-7 gap-lg-10">
                                <div class="card card-flush py-4">
                                    <div class="card-header">
                                        <div class="card-title">
                                            <h2>General <small>(Settings)</small></h2>
                                        </div>
                                    </div>
                                    <form method="POST" action="{{ url('admin/update/general/setting') }}">
                                        @csrf
                                        <div class="card-body p-9">

                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="row mb-7">
                                                        <label
                                                            class="col-lg-4 fw-semibold text-muted">Name</label>
                                                        <div class="col-lg-8">
                                                            <input type="text" class="form-control form-control-solid"
                                                                   placeholder="Username"
                                                                   name="name" value="{{ Auth::user()->name }}"
                                                                   required>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-6">
                                                    <div class="row mb-7">
                                                        <div class="col-lg-1"></div>
                                                        <label
                                                            class="col-lg-4 fw-semibold text-muted">Phone</label>
                                                        <div class="col-lg-7">
                                                            <input type="text" class="form-control form-control-solid"
                                                                   placeholder="Phone"
                                                                   name="Phone" value="{{ Auth::user()->phone_no }}"
                                                                   required>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>


                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="row mb-7">
                                                        <label
                                                            class="col-lg-4 fw-semibold text-muted">Mail</label>
                                                        <div class="col-lg-8">
                                                            <input type="email"
                                                                   class="form-control form-control-solid"
                                                                   placeholder="Mail"
                                                                   name="Mail" value="{{ Auth::user()->email }}"
                                                                   required>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="row mb-7">
                                                        <div class="col-lg-1"></div>
                                                        <label class="col-lg-4 fw-semibold text-muted">Company
                                                            Name</label>
                                                        <div class="col-lg-7">
                                                            <input type="text"
                                                                   class="form-control form-control-solid"
                                                                   placeholder="Company Name"
                                                                   name="company_name"
                                                                   value="{{ Auth::user()->company_name }}"
                                                                   required>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-10"></div>
                                                <div class="col-2">
                                                    <button class="btn btn-primary" type="submit">
                                                        Update
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{--GENERAL SETTING--}}


            {{--ADDRESS SETTING--}}
            <div class="row w-100 mb-5" id="address_setting">
                <div class="d-flex flex-column flex-row-fluid gap-7 gap-lg-8 w-100">
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="kt_ecommerce_add_product_general">
                            <div class="d-flex flex-column gap-7 gap-lg-10">
                                <div class="card card-flush py-4">
                                    <div class="card-header">
                                        <div class="card-title">
                                            <h2>Address</h2>
                                        </div>
                                    </div>
                                    <form method="POST" action="{{ url('admin/update/address/setting') }}">
                                        @csrf
                                        <div class="card-body p-9">

                                            <div class="row">
                                                <div class="col-12">
                                                    <div class="row mb-7">
                                                        <label
                                                            class="col-lg-2 fw-semibold text-muted">Address</label>
                                                        <div class="col-lg-10">
                                                            <input type="text"
                                                                   class="form-control form-control-solid"
                                                                   placeholder="Address"
                                                                   name="address"
                                                                   value="{{ Auth::user()->address }}"
                                                                   required>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>


                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="row mb-7">
                                                        <label
                                                            class="col-lg-4 fw-semibold text-muted">Country</label>
                                                        <div class="col-lg-8">
                                                            <select
                                                                class="form-control form-select float-right countries form-control-solid"
                                                                name="countryId"
                                                                id="dropdown" required>
                                                                @foreach($countries as $country)
                                                                    @if($country->id == Auth::user()->country_id)
                                                                        <option value="{{ $country->id }}" selected>
                                                                            {{ $country->name }}</option>
                                                                    @else
                                                                        <option value="{{ $country->id }}">
                                                                            {{ $country->name }}</option>
                                                                    @endif
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="row mb-7">
                                                        <div class="col-lg-1"></div>
                                                        <label
                                                            class="col-lg-4 fw-semibold text-muted">zipcode</label>
                                                        <div class="col-lg-7">
                                                            <input type="text"
                                                                   class="form-control form-control-solid"
                                                                   placeholder="Zipcode"
                                                                   name="zipcode"
                                                                   value="{{ Auth::user()->zipcode }}"
                                                                   required>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>


                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="row mb-7">
                                                        <label class="col-lg-4 fw-semibold text-muted">State</label>
                                                        <div class="col-lg-8">
                                                            <input type="text"
                                                                   class="form-control form-control-solid"
                                                                   placeholder="State"
                                                                   name="state" value="{{ Auth::user()->state }}"
                                                                   required>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="row mb-7">
                                                        <div class="col-lg-1"></div>
                                                        <label class="col-lg-4 fw-semibold text-muted">City</label>
                                                        <div class="col-lg-7">
                                                            <input type="text"
                                                                   class="form-control form-control-solid"
                                                                   placeholder="City"
                                                                   name="city" value="{{ Auth::user()->city }}"
                                                                   required>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>


                                            <div class="row">
                                                <div class="col-10"></div>
                                                <div class="col-2">
                                                    <button class="btn btn-primary" type="submit">
                                                        Update
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="alert alert-dark d-flex align-items-center p-5 mt-3">

                                                <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-exclamation-lg" viewBox="0 0 16 16">
                                                    <path d="M7.005 3.1a1 1 0 1 1 1.99 0l-.388 6.35a.61.61 0 0 1-1.214 0L7.005 3.1ZM7 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0Z"/>
                                                </svg>

                                                <!--begin::Wrapper-->
                                                <div class="d-flex flex-column">
                                                    <!--begin::Title-->
                                                    <h4 class="mb-1 text-dark">Notice</h4>
                                                    <!--end::Title-->

                                                    <!--begin::Content-->
                                                    <span>To avoid errors and ensure accurate product processing on eBay, please make sure to provide valid information, including your zipcode and country. </span>
                                                    <!--end::Content-->
                                                </div>
                                                <!--end::Wrapper-->
                                            </div>
                                        </div>
                                    </form>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{--ADDRESS SETTING--}}


            {{--PRIVACY SETTING--}}
            <div class="row w-100 mb-5" id="privacy_setting">
                <div class="d-flex flex-column flex-row-fluid gap-7 gap-lg-8 w-100">
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="kt_ecommerce_add_product_general">
                            <div class="d-flex flex-column gap-7 gap-lg-10">
                                <div class="card card-flush py-4">
                                    <div class="card-header">
                                        <div class="card-title">
                                            <h2>Privacy <small>(Settings)</small></h2>
                                        </div>
                                    </div>
                                    <form action="{{ url('admin/user/password/reset') }}" method="POST"
                                          class="password-reset-form">
                                        <div class="card-body p-9">
                                            @csrf

                                            <div class="row mb-7">
                                                <label class="col-lg-4 fw-semibold text-muted">Current Password</label>
                                                <div class="col-lg-8 d-flex align-items-center passwordWrap">
                                                    <input id="password-field" type="password"
                                                           class="form-control form-control-solid"
                                                           name="currentpassword"
                                                           placeholder="Current Password" required>
                                                    <span toggle="#password-field"
                                                          class="fa fa-fw fa-eye field-icon toggle-password"></span>
                                                </div>
                                            </div>
                                            <div class="row mb-7">
                                                <label class="col-lg-4 fw-semibold text-muted">New Password</label>
                                                <div class="col-lg-8 d-flex align-items-center passwordWrap">
                                                    <input id="password-field" type="password"
                                                           class="form-control form-control-solid new-password"
                                                           name="newpassword"
                                                           placeholder="New Password" required>
                                                    <span toggle="#password-field"
                                                          class="fa fa-fw fa-eye field-icon toggle-password"></span>
                                                </div>
                                            </div>
                                            <div class="row mb-7">
                                                <label class="col-lg-4 fw-semibold text-muted">Confirm Password</label>
                                                <div class="col-lg-8 d-flex align-items-center passwordWrap">
                                                    <input id="password-field" type="password"
                                                           name="confirmPassword"
                                                           class="form-control form-control-solid confirm-password"
                                                           placeholder="Confirm Password" required>
                                                    <span toggle="#password-field"
                                                          class="fa fa-fw fa-eye field-icon toggle-password"></span>
                                                </div>
                                            </div>

                                            <div class="row mb-7">
                                                <label class="col-lg-10"></label>
                                                <div class="col-lg-2">
                                                    <button type="submit" class="btn btn-primary">
                                                        Reset
                                                    </button>
                                                </div>
                                            </div>


                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{--PRIVACY SETTING--}}


            {{--ROYAL_MAIL SETTING--}}
            <div class="row w-100" id="royalMail_setting">
                <div class="d-flex flex-column flex-row-fluid gap-7 gap-lg-8 w-100">
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="kt_ecommerce_add_product_general">
                            <div class="d-flex flex-column gap-7 gap-lg-10">
                                <div class="card card-flush py-4">
                                    <div class="card-header">
                                        <div class="card-title">
                                            <h2>Royal Mail <small>(Settings)</small></h2>
                                        </div>
                                    </div>
                                    <form method="POST" action="{{ url('admin/update/RoyalMAil/setting') }}">
                                        @csrf
                                        <div class="card-body p-9">
                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="row mb-7">
                                                        <label
                                                            class="col-lg-4 fw-semibold text-muted">Bearer Token</label>
                                                        <div class="col-lg-8">
                                                            <input type="text" class="form-control form-control-solid"
                                                                   placeholder="Bearer_token"
                                                                   name="bearer_token"
                                                                   value="{{ $royalMail->bearer_token }}"
                                                                   required>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-10"></div>
                                                <div class="col-2">
                                                    <button class="btn btn-primary" type="submit">
                                                        Update
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="alert alert-dark d-flex align-items-center p-5 mt-3">

                                                <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-exclamation-lg" viewBox="0 0 16 16">
                                                    <path d="M7.005 3.1a1 1 0 1 1 1.99 0l-.388 6.35a.61.61 0 0 1-1.214 0L7.005 3.1ZM7 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0Z"/>
                                                </svg>
                                                <div class="d-flex flex-column">
                                                    <h4 class="mb-1 text-dark">Notice</h4>
                                                    <span>Package and service types you select are used to process the automated order flow</span>
                                                </div>
                                            </div>
                                        </div>
                                    </form>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{--ROYAL_MAIL SETTING--}}
        </div>
    </div>

@endsection
@push('script')
    <script>


        $(".toggle-password").click(function () {

            $(this).toggleClass("fa-eye fa-eye-slash");
            let input = $(this).closest('.passwordWrap').find('input');
            if (input.attr("type") == "password") {
                input.attr("type", "text");
            } else {
                input.attr("type", "password");
            }
        });

        $(document).on('submit', '.password-reset-form', function (e) {
            let new_password = $('.new-password');
            let confirm_password = $('.confirm-password');
            if (new_password.val() != confirm_password.val()) {
                e.preventDefault();
                new_password.css("border", "solid 1px red")
                confirm_password.css("border", "solid 1px red")
                toastr.error("Passwords do not match.");
            }
            if (new_password.val().length <= 8) {
                e.preventDefault();
                new_password.css("border", "solid 1px red")
                confirm_password.css("border", "solid 1px red")
                toastr.error("New passwords must be 8 characters.");
            }
            if (confirm_password.val().length <= 8) {
                e.preventDefault();
                new_password.css("border", "solid 1px red")
                confirm_password.css("border", "solid 1px red")
                toastr.error("Confirm passwords must be 8 characters.");
            }
        });


        $(document).ready(function () {
            $('select').select2();
        });


    </script>
@endpush