@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' => 'My Profile',
    'bread_crumbs' => [],
])

    @php
        $imageUrl  = "";
            if(Auth::user()->image_url != null){
            $imageUrl =  asset('storage/' . Auth::user()->image_url);
            }else{
            $imageUrl =  asset('assets/media/avatars/blank.png');
            }
    @endphp

        <div id="kt_app_content" class="app-content flex-column-fluid">
            <div id="kt_app_content_container" class="app-container container-xxl">
                <div id="kt_ecommerce_add_product_form"
                     class="form d-flex flex-column flex-lg-row fv-plugins-bootstrap5 fv-plugins-framework">
                    <div class="d-flex flex-column gap-7 gap-lg-10 w-100 w-lg-300px mb-7 me-lg-10">
                        <div class="card card-flush py-4">
                            <div class="card-header">
                                <div class="card-title">
                                    <h2>{{ substr_replace(Auth::user()->name, "",20)  }}
                                        @if(Auth::user()->type != 0)
                                            <span
                                                class="badge badge-light-success fw-bold fs-8 px-2 py-1 ms-2">Seller</span>
                                        @else
                                            <span
                                                class="badge badge-light-danger fw-bold fs-8 px-2 py-1 ms-2">Admin</span>
                                        @endif</h2>
                                </div>
                            </div>
                            <div class="card-body text-center pt-0">
                                <div
                                    class="image-input image-input-empty image-input-outline image-input-placeholder mb-3">
                                    <div class="image-input-wrapper w-150px h-150px"
                                         style="background-image: url({{ $imageUrl }})">
                                    </div>
                                </div>
                                <div class="text-muted fs-7">“If you always do what you've always done, you'll always
                                    get
                                    what you've always got.”
                                </div>
                            </div>
                        </div>
                        <div class="card card-flush py-1">

                            <div class="card-header"
                                 @if(Auth::user()->type == 0)
                                     style="filter: blur(2px);pointer-events: none;"
                                @endif>
                                <div class="card-title">
                                    <h2><span style="color:#E53238;">e</span><span style="color:#0064D2;">b</span><span
                                            style="color:#F5AF02;">a</span><span style="color:#86B817;">y</span><small>-
                                            Status</small></h2>
                                </div>
                                <div class="card-toolbar">
                                    @if(auth()->user()->ebayAccount()->exists())
                                        <div class="rounded-circle bg-success w-15px h-15px"
                                             id="kt_ecommerce_add_product_status"></div>
                                    @else
                                        <div class="rounded-circle bg-danger w-15px h-15px"
                                             id="kt_ecommerce_add_product_status"></div>
                                    @endif
                                </div>
                                <div class="card-body" style="display:flex; flex-direction:column;">
                                    @if(auth()->user()->ebayAccount()->exists())
                                        <a class="btn btn-light"> <small class="text-success">ebay Connected</small></a>
                                    @else
                                        <a class="btn btn-light" href="{{route('ebay.connect')}}"><small
                                                class="text-danger">Link
                                                eBay Account</small></a>
                                    @endif
                                    <div class="text-muted fs-7">Set the product status.</div>
                                </div>
                            </div>

                        </div>


                    </div>
                    <div class="d-flex flex-column flex-row-fluid gap-7 gap-lg-10">
                        <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</h2>
                                            </div>
                                        </div>
                                        <form method="POST" action="{{ url('/user/update') }}">
                                            @csrf
                                            <div class="card-body p-9">
                                                <div class="row mb-7">
                                                    <label class="col-lg-2 fw-semibold text-muted">Name</label>
                                                    <div class="col-lg-4">
                                                        <input type="text" class="form-control form-control-solid"
                                                               placeholder="Username"
                                                               name="name" value="{{ Auth::user()->name }}" required>
                                                    </div>
                                                </div>
                                                <div class="row mb-7">
                                                    <label class="col-lg-2 fw-semibold text-muted">Phone</label>
                                                    <div class="col-lg-4 ">
                                                        <input type="text" class="form-control form-control-solid"
                                                               placeholder="Phone"
                                                               name="Phone" value="{{ Auth::user()->phone_no }}"
                                                               required>
                                                    </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">Address</label>
                                                            <div class="col-lg-7">
                                                                <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>
                                        </form>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row w-100">
                <div class="d-flex flex-column flex-row-fluid gap-7 gap-lg-8 w-75">
                    <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>Reset Password</h2>
                                        </div>
                                    </div>
                                    <form action="{{ url('/user/password/reset') }}" method="POST">
                                        <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">
                                                    <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" name="newpassword"
                                                           placeholder="New Password">
                                                    <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"
                                                           placeholder="Confirm Password">
                                                    <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 class="d-flex flex-column flex-row-fluid gap-7 gap-lg-8 w-25"
                     @if(Auth::user()->type == 0)
                         style="filter: blur(2px);pointer-events: none;"
                    @endif
                >
                    <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" style="justify-content: space-around">
                                        <div class="card-title  content-center">
                                            <h2>Delete My Account</h2>
                                        </div>
                                    </div>
                                    <div class="card-body p-2 content-center d-flex"
                                         style="justify-content: space-around">
                                        <a href="{{ url('user/delete_account')."/".Auth::user()->id }}" type="submit"
                                           class="btn btn-outline btn-outline-dashed btn-outline-danger btn-active-light-danger">
                                            <i class="bi bi-trash3"></i> Delete Account
                                        </a>
                                        </form>
                                    </div>

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

        </div>

    @isset($message)
        <h1>dsfdsfdsfdsdfs</h1>
    @endisset
@endsection
@push('script')
    <script>

        $(document).on('click', ".delete-account-btn", async function () {
            if (await isConfirmToProcess("Warning", "", 'Are you sure! You want to delete Permanently !', 'warning')) {
                try {
                    const url = "{{ url('user/delete_account')."/".Auth::user()->id }}"
                    let ajaxRequest = new HttpRequest(url, 'GET');
                    ajaxRequest.set_data_as_object({
                        '_token': csrfToken
                    });
                    let response = await ajaxRequest.call();
                    toastr.success(response.message);
                    location.reload();
                } catch (err) {
                    toastr.error(err);
                }
            }
        });

        $(".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).ready(function () {
            $('select.countries').select2();
        });


    </script>
@endpush