@extends('layouts.app')

@section('content')
    @include('includes.bread_crumb_with_header', [
    'header' => 'Products',
    'bread_crumbs' => ['Dashboard' => "", 'Products' => ''],
])
    <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(
                                  @if (Auth::user()->image_url != null)
                                    {{ asset('storage/' . Auth::user()->image_url) }}
                                @else
                                   {{ asset('assets/media/avatars/blank.png')}}
                                @endif
                               )"></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">
                            <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">
                        <!--begin::Tab pane-->
                        <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">
                                    <!--begin::Card header-->
                                    <div class="card-header">
                                        <div class="card-title">
                                            <h2>General</h2>
                                        </div>
                                        <div class="card-toolbar flex-row-fluid justify-content-end gap-5" data-select2-id="select2-data-123-681x">
                                            <a  class="btn btn-primary edit-account"
                                                data-backdrop="static" data-keyboard="false">
                                                <i class="bi bi-pencil"></i>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="card-body p-9">
                                        <div class="row mb-7">
                                            <label class="col-lg-4 fw-semibold text-muted">Name</label>
                                            <div class="col-lg-8">
                                                <span
                                                    class="fw-bold fs-6 text-gray-800">{{substr_replace(Auth::user()->name, " .",20)  }}</span>
                                            </div>
                                        </div>
                                        <div class="row mb-7">
                                            <label class="col-lg-4 fw-semibold text-muted">Phone
                                                <i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip"
                                                   aria-label="Phone number must be active" data-kt-initialized="1"></i></label>
                                            <div class="col-lg-8 d-flex align-items-center">
                                                <span
                                                    class="fw-bold fs-6 text-gray-800 me-2">{{Auth::user()->phone_no }}</span>
                                            </div>
                                        </div>
                                        <div class="row mb-7">
                                            <label class="col-lg-4 fw-semibold text-muted">Mail</label>
                                            <div class="col-lg-8">
                                                <a href="#"
                                                   class="fw-semibold fs-6 text-gray-800 text-hover-primary">{{Auth::user()->email }}</a>
                                            </div>
                                        </div>

                                        <div class="row mb-7">
                                            <label class="col-lg-4 fw-semibold text-muted">Address</label>
                                            <div class="col-lg-8">
                                                <span
                                                    class="fw-bold fs-6 text-gray-800">{{ Auth::user()->address }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-flex flex-column flex-row-fluid gap-7 gap-lg-10">
                <div class="tab-content">
                    <!--begin::Tab pane-->
                    <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">
                                <!--begin::Card header-->
                                <div class="card-header">
                                    <div class="card-title">
                                        <h2>General</h2>
                                    </div>
                                </div>
                                <div class="card-body p-9">
                                    <div class="row mb-7">
                                        <label class="col-lg-4 fw-semibold text-muted">Name</label>
                                        <div class="col-lg-8">
                                                <span
                                                    class="fw-bold fs-6 text-gray-800">{{substr_replace(Auth::user()->name, " .",20)  }}</span>
                                        </div>
                                    </div>
                                    <div class="row mb-7">
                                        <label class="col-lg-4 fw-semibold text-muted">Phone
                                            <i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip"
                                               aria-label="Phone number must be active" data-kt-initialized="1"></i></label>
                                        <div class="col-lg-8 d-flex align-items-center">
                                                <span
                                                    class="fw-bold fs-6 text-gray-800 me-2">{{Auth::user()->phone_no }}</span>
                                        </div>
                                    </div>
                                    <div class="row mb-7">
                                        <label class="col-lg-4 fw-semibold text-muted">Mail</label>
                                        <div class="col-lg-8">
                                            <a href="#"
                                               class="fw-semibold fs-6 text-gray-800 text-hover-primary">{{Auth::user()->email }}</a>
                                        </div>
                                    </div>

                                    <div class="row mb-7">
                                        <label class="col-lg-4 fw-semibold text-muted">Address</label>
                                        <div class="col-lg-8">
                                                <span
                                                    class="fw-bold fs-6 text-gray-800">{{ Auth::user()->address }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@push('script')
<script>
    $(document).on("click", ".product-add-btn", async function (e) {
        e.preventDefault()
        const btn = $(this);
        const btnTitle = btn.html();
        try {
            loadButton(btn, 'Loading ...');
            let loadURL = `${baseUrl}/admin/products/create`;
            await loadModal(modalId, loadURL);
        } catch (err) {
            toast.error("Could not load add event popup. (error_ref: add_product)");
            console.log("add_product", err);
        } finally {
            resetButton(btn, btnTitle);
        }

        $(".variant-type-values").select2({
            tags: true,
            tokenSeparators: [',', ' ']
        });


        $('select.category').select2({
            dropdownParent: $('.modal'),
            placeholder: "SELECT A CATEGORY",
            ajax: {
                url: '{{ route('getCategory') }}',
                dataType: 'json',
                // Additional AJAX parameters go here; see the end of this chapter for the full code of this example
                data: function (params) {
                    let query = {
                        search: params.term,
                        type: 'public',
                        page: params.page || 1
                    }

                    // Query parameters will be ?search=[term]&type=public
                    return query;
                }
            },
            processResults: function (data, params) {
                return {
                    results: data.results,
                };
            }

        });


        $('select.variant-type').select2({
            dropdownParent: $('.modal'),
        });
        $('select.weight-unit').select2({
            dropdownParent: $('.modal'),
            minimumResultsForSearch: Infinity
        });
        $('.input-images1').imageUploader({

        });
    });
</script>
@endpush