@extends('layouts.dashboard.app')

@section('content')
    <div class="cw-content">
        <div class="container-fluid">
            <div class="cw-content-inner">
                <div class="cw-content-body">
                    <div class="cw-block-head cw-block-head-sm">
                        <div class="cw-block-between">
                            <div class="cw-block-head-content">
                                <h3 class="cw-block-title page-title">Hello 👋,
                                    {{ Auth::user()->first_name . ' ' . Auth::user()->last_name }}</h3>
                                </h3>
                                <div class="cw-block-des text-soft">
                                    <p>Welcome to Your Chemical Wholesale Seller Dashboard.</p>
                                </div>
                            </div>

                        </div>
                    </div>
                    @if ($dashboard_completed < 5)
                        <div>
                            <p class="bg-light p-3" style="font-weight:600;border-radius:5px">
                                🎉Congratulations, You’re successfully registered as a supplier. Please complete your
                                profile
                                setup to start selling your products.
                            </p>
                        </div>
                    @endif

                    @if ($dashboard_completed == 1)
                        <div class="onboarding-dash-banner">
                            <div class="text-center">
                                <h2 class="dash-banner-title">Add Your Business Information to Add Products</h2>
                                <p class="dash-banner-p">
                                    Complete your business profile for more exposure on our platform.
                                </p>
                                <a href="{{ route('admin.business-profile') }}" class="btn-dashrounded pe-4">
                                    <i class="bi bi-plus me-2"></i>Add Your Business
                                </a>
                            </div>
                        </div>
                    @elseif ($dashboard_completed == 4)
                        <div class="onboarding-dash-banner">
                            <div class="text-center">
                                <h2 class="dash-banner-title">Verify Phone number </h2>
                                <p class="dash-banner-p">
                                   Verify your phone number to complete the Supplier registration process
                                </p>
                            </div>
                        </div>
                    @elseif ($dashboard_completed == 2)
                        <div class="onboarding-dash-banner-2">
                            <div class="text-left">
                                <h2 class="dash-banner-title">The Next Step is Adding Your Products</h2>
                                <p class="dash-banner-p">
                                    Add your products and their details to start meeting qualified buyers.
                                </p>
                                <a href="{{ route('admin.product.create') }}" class="btn-dashrounded pe-4">
                                    <i class="bi bi-plus me-2"></i>Add Your Products
                                </a>
                            </div>
                            <div class="onboarding-dash-banner-2-img">
                                <img src="{{ asset('assets/dashboard/img/icons/add-products-banner.png') }}" alt="img">
                            </div>
                        </div>
                    @endif

                    <div class="onboarding-cards">
                        <div class="row">
                            <div class="col-lg-3">
                                <div class="card inprogress">
                                    <div class="circlePercent" id="circleprogress" data-id="{{ $dashboard_percent }}">
                                    </div>
                                </div>
                            </div>
                            @php
                              $businessId = (Common::getSupplierBusiness()) ? Common::getSupplierBusiness()->first() : Common::getSupplierBusiness();
                              $busId = (!empty($businessId) && !empty($businessId->business)) ? @$businessId->business->uuid : false;
                              $busStatus = (!empty($businessId) && !empty($businessId->business)) ? @$businessId->business->approved : 0;
                            @endphp
                            <div class="col-lg-9">
                                <div class="row">
                                    <div class="col-lg-3">
                                        <div
                                            class="card {{ $dashboard_completed == 1 ? 'inprogress' : '' }} {{ $addBusiness == 1 ? 'completed' : '' }}">
                                            <div class="card-img">
                                                <img src="/assets/dashboard/img/icons/business-icon.png"
                                                    class="card-img-icon" alt="img">
                                            </div>
                                            <div class="card-body">
                                                <h5 class="card-title">Add Your Business</h5>
                                                <a href="{{ $dashboard_completed > 1 ? 'javascript:void(0);' : route('admin.business-profile') }}" class="btn-dashrounded">
                                                    @if ($dashboard_completed > 1)
                                                        <p class="mb-0 {{ $busStatus == 1 ? 'lh-1' : '' }}">Completed
                                                            @if($busStatus == 1)
                                                                <span class="d-block fss-2">(Pending Review)</span>
                                                            @endif
                                                        </p>
                                                    @else
                                                        <span>Complete Now</span>
                                                    @endif
                                                </a>
                                                @if ($dashboard_completed > 1)
                                                    {{-- <a href="{{ !empty(@$busId) ? route('admin.business.edit', @$busId) : route('admin.business-profile') }}" class="btn-link pt-2">Manage</a> --}}
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div
                                            class="card {{ $dashboard_completed == 2 ? 'inprogress' : '' }} {{ $addProducts == 1 ? 'completed' : '' }}">
                                            <div class="card-img">
                                                <img src="/assets/dashboard/img/icons/products-icon.png"
                                                    class="card-img-icon" alt="img">
                                            </div>
                                            <div class="card-body">
                                                <h5 class="card-title">Add Your Products</h5>
                                                <a href="{{ $dashboard_completed == 2 ? route('admin.product.create'): 'javascript:void(0);' }}" class="btn-dashrounded">
                                                    {{ $dashboard_completed > 2 ? 'Completed' : 'Add Now' }}</a>
                                                @if ($dashboard_completed > 2)
                                                    <a href="{{ route('admin.products') }}" class="btn-link pt-2">Manage</a>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div
                                            class="card {{ $dashboard_completed >= 3 ? 'inprogress' : '' }} {{ $addBusinessDocuments == 1 ? 'completed' : '' }}">
                                            <div class="card-img">
                                                <img src="/assets/dashboard/img/icons/documents-icon.png"
                                                    class="card-img-icon" alt="img">
                                            </div>
                                            <div class="card-body">
                                                <h5 class="card-title">Upload Documents</h5>
                                                @if($dashboard_completed >= 3)
                                                    <a href="{{ $addBusinessDocuments == 1 ? 'javascript:void(0);' : route('admin.business-documents') }}"
                                                        class="btn-dashrounded">{{ $addBusinessDocuments == 1 ? 'Uploaded' : 'Upload Now' }}</a>
                                                    @else
                                                    <a class="btn-dashrounded">Upload Now</a>
                                                @endif
                                                @if ($dashboard_completed > 3)
                                                    {{-- <a href="{{ !empty(@$busId) ? route('admin.business.edit', @$busId) : route('admin.business-profile') }}?tab=document" class="btn-link pt-2">Manage</a> --}}
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div
                                            class="card {{ $dashboard_completed == 4 ? 'inprogress' : '' }} {{ $dashboard_completed > 4 ? 'completed' : '' }}">
                                            <div class="card-img">
                                                <img src="/assets/dashboard/img/icons/phone-icon.png" class="card-img-icon"
                                                    alt="img">
                                            </div>
                                            <div class="card-body">
                                                <h5 class="card-title">Verify Phone Number</h5>
                                                @if($dashboard_completed == 4)
                                                    <a href="#" class="btn-dashrounded" data-bs-target="#successmodal" data-bs-toggle="modal">Verify Now</a>
                                                @else
                                                    <a href="#" class="btn-dashrounded" data-bs-target="#completeTasks" data-bs-toggle="modal">Verify Now</a>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    @php 
        $detail = Common::getBusiness(true);
    @endphp
    <div class="modal fade" id="successmodal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="card-title">Verify Phone Number</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pb-4">
                    <div class="success-modal-body">
                        <div class="row">
                            <input type="hidden" name="bid" id="businessId" value="{{ @$detail->uuid }}">
                            <div class="col-lg-12">
                                <div class="mb-3">
                                    <input type="text" value="{{ @$detail->company_phone }}" onkeyup="this.value = this.value.replace(/[^0-9\s\-\(\)]/g, '')" minlength="10" maxlength="20" class="form-control onboarding-input phone_number" name="phone_number" placeholder="Business phone" id="phone_number" required>
                                </div>
                            </div>
                        </div>
                        <a href="javascript:void(0);" onclick="phone_otpsend()" class="btn-submit d-block text-center">Verify Phone Number</a>
                    </div>
                </div>
                <div class="">
                    <div class="alert p-0 m-0">
                        <p id="verify_form_message" class="small pt-3 pb-0"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="completeTasks" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pb-4">
                    <div class="text-center">
                        <p class="text-danger fs-1 mb-3"><i class="bi bi-info-circle"></i></p>
                        <h5 class="fw-bold">Please complete your profile.</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="otpmodal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pb-4">
                    <div class="success-modal-body">
                        <form id="phoneform">
                            <div class="OtpContainer">
                                <h2 class="register-modal-title mb-4">Confirm Your Phone Number </h2>
                                <input type="hidden" name="phone" id="phoneverify">
                                <input type="hidden" name="bid" id="businessId" value="{{ @$detail->uuid }}">
                                <p>Enter the 6-digit pin sent to your phone <span id="mask-email"></span></p>
                                <div class="otpinput">
                                    <input type="text" class="otpsingleinput js-otp-phone"
                                        inputmode="numeric">
                                    <input type="text" class="otpsingleinput js-otp-phone"
                                        inputmode="numeric">
                                    <input type="text" class="otpsingleinput js-otp-phone"
                                        inputmode="numeric">
                                    <input type="text" class="otpsingleinput js-otp-phone"
                                        inputmode="numeric">
                                    <input type="text" class="otpsingleinput js-otp-phone"
                                        inputmode="numeric">
                                    <input type="text" class="otpsingleinput js-otp-phone"
                                        inputmode="numeric">
                                </div>
                                <a href="javascript:void(0)" onclick="phone_otpsend()" class="resend-a">Resend Code</a>
                            </div>

                            <span style="color:green; font-weight:600;" class="otpres"></span>
                            <div class="mt-4">
                                <a onclick="phone_otpSubmit()" href="javascript:void(0)" class="btn-submit d-block text-center">
                                    Continue
                                </a>
                            </div>
                        </form>
                        <div class="alert p-0 m-0">
                            <p id="form_message" class="small pt-3 pb-0"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('css')
<link rel="stylesheet" href="{{ asset('assets/dashboard/css/lib/alertify.css') }}" />
<style>
    .fss-2 {
        font-size: 12px;
    }
</style>
@endpush
@push('js')
<script src="{{ asset('assets/dashboard/js/lib/otpscript.js') }}"></script>
<script src="{{ asset('assets/dashboard/js/lib/alertify.min.js') }}"></script>
<script>
    var eotp_entered = '';
    const container = document.querySelector(".circlePercent");
    var progressid = $("#circleprogress").attr("data-id");
    const courses = [{
        percent: progressid,
        color: "#4169E1"
    }];

    courses.forEach((course) => {
        container.innerHTML += `
            <div class="progess-group">
            <div class="circular-progress">
                <div>
                    <span class="course-value">0%</span>
                    <p class="progress-text">Profile Complete</p>
                </div>
            </div>
            </div>`;
    });

    const progressGroups = document.querySelectorAll(".progess-group");

    progressGroups.forEach((progress, index) => {
        let progressStartValue = 0;
        let progressStartEnd = courses[index].percent;
        let speed = 10;
        let progessTimer = setInterval(() => {
            progressStartValue++;
            if (progressStartValue == progressStartEnd) {
                clearInterval(progessTimer);
            }
            progress.querySelector(".circular-progress").style.background = `
            conic-gradient(${courses[index].color} ${
                    3.6 * progressStartValue
                }deg, #fff 0deg)`;

            progress.querySelector(".course-value").innerHTML =
                progressStartValue + "%";
        }, speed);
    });

    var otpemail = otp('.js-otp-phone');
    otpemail.init(function(passcode) {
        eotp_entered = passcode;
        console.log(eotp_entered);
    });
    var adminDashboardRoute = @json(route('admin.dashboard'));
    function phone_otpSubmit() {
        var otpData = {
            step: 4,
            bid: $("#businessId").val(),
            phone: $("#phoneverify").val(),
            phoneotp: eotp_entered,
        };
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: "admin/business/phoneverify",
            type: "POST",
            data: otpData,
            context: this,
            dataType: "json",
            beforeSend: function() {
                $('body').append(
                    '<div class="blockUI" style="z-index: 10000; border: none; margin: 0px; padding: 0px; width: 100%; height: 100%; top: 0px; left: 0px; background-color: rgb(0, 0, 0); opacity: 0.6; cursor: wait; position: fixed;"></div>'
                );
            },
            success: function(data) {
                if (data.status == "success") {
                    alertify.success(data.message);
                    //$("#form_message").html(data.message).removeClass('text-danger');
                    window.location.reload();
                } else {
                    alertify.error(data.message);
                    //$("#form_message").html(data.message).addClass('text-danger');
                }
                $('div.blockUI').remove();
            }
        });
    };
    function phone_otpsend() {
        if($("#phone_number").val() == ''){
            $("#verify_form_message").html('Please enter phone number').addClass('text-danger');
            return false;
        }
        var otpReqData = {
            bid: $("#businessId").val(),
            phone: $("#phone_number").val(),
        };
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: "admin/phoneverify/otp",
            type: "POST",
            data: otpReqData,
            context: this,
            dataType: "json",
            beforeSend: function() {
                $('body').append(
                    '<div class="blockUI" style="z-index: 10000; border: none; margin: 0px; padding: 0px; width: 100%; height: 100%; top: 0px; left: 0px; background-color: rgb(0, 0, 0); opacity: 0.6; cursor: wait; position: fixed;"></div>'
                );
            },
            success: function(data) {
                if (data.status == "success") {
                    alertify.success(data.message);
                    $("#verify_form_message").html(data.message).removeClass('text-danger');
                    $("#phoneverify").val($("#phone_number").val());
                    // $('.otpres').html('Otp: '+data.otp);
                    $("#successmodal").modal('hide');
                    $("#otpmodal").modal('show');
                } else {
                    alertify.error(data.message);
                    $("#verify_form_message").html(data.message).addClass('text-danger');
                }
                $('div.blockUI').remove();
            }
        });
    };
</script>
@endpush