@extends('layouts/contentNavbarLayout')

@section('title', 'Dashboard - Analytics')

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/apex-charts/apex-charts.css') }}">
@endsection

@section('vendor-script')
    <script src="{{ asset('assets/vendor/libs/apex-charts/apexcharts.js') }}"></script>
@endsection

@section('page-script')
    <script src="{{ asset('assets/js/dashboards-analytics.js') }}"></script>
    <script>
        $(document).on('click', '#refreshButton', function() {
            location.reload();
        });
    </script>
@endsection

@section('content')

    <div class="row gy-4">
        <!-- Congratulations card -->
        <div class="col-md-12 col-lg-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-3">Congratulations! 🎉</h4>
                    <p class="pb-5"><strong>{{ $authUser->name }}</strong></p>
                    {{-- <h4 class="text-primary mb-1">$42.8k</h4>
                    <p class="mb-2 pb-1">78% of target 🚀</p>
                    <a href="javascript:;" class="btn btn-sm btn-primary">View Sales</a> --}}
                </div>
                <div class="pb-5">
                    <img src="{{ asset('assets/img/icons/misc/triangle-light.png') }}"
                        class="scaleX-n1-rtl position-absolute bottom-0 end-0" width="166" alt="triangle background">
                    <img src="{{ asset('assets/img/illustrations/trophy.png') }}"
                        class="scaleX-n1-rtl position-absolute bottom-0 end-0 me-4 mb-4 pb-2" width="83" alt="view sales">

                </div>
            </div>
        </div>
        <!--/ Congratulations card -->

        <!-- Transactions -->
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex align-items-center justify-content-between">
                        <h5 class="card-title m-0 me-2">Transactions</h5>
                        <div class="dropdown">
                            <button class="btn p-0" type="button" id="refreshButton" data-bs-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">
                                <i class="mdi mdi-reload mdi-24px"></i>
                            </button>

                            {{-- <div class="dropdown-menu dropdown-menu-end" aria-labelledby="transactionID">
                                <a class="dropdown-item" href="javascript:void(0);" id="refreshButton">Refresh</a>
                                <a class="dropdown-item" href="javascript:void(0);">Share</a>
                                <a class="dropdown-item" href="javascript:void(0);">Update</a>
                            </div> --}}
                        </div>
                    </div>
                    {{-- <p class="mt-3"><span class="fw-medium">Total 48.5% growth</span> 😎 this month</p> --}}
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-4 col-6">
                            <div class="d-flex align-items-center">
                                <div class="avatar">
                                    <div class="avatar-initial bg-primary rounded shadow">
                                        <i class="mdi mdi-trending-up mdi-24px"></i>
                                    </div>
                                </div>
                                <div class="ms-3">
                                    <div class="small mb-1">Sales</div>
                                    <h5 class="mb-0">{{shortenNumber($totalProductSaleQuantity)}}</h5>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-6">
                            <div class="d-flex align-items-center">
                                <div class="avatar">
                                    <div class="avatar-initial bg-success rounded shadow">
                                        <i class="mdi mdi-account-outline mdi-24px"></i>
                                    </div>
                                </div>
                                <div class="ms-3">
                                    <div class="small mb-1">Customers</div>
                                    <h5 class="mb-0">{{shortenNumber($totalCustomers)}}</h5>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-6">
                            <div class="d-flex align-items-center">
                                <div class="avatar">
                                    <div class="avatar-initial bg-info rounded shadow">
                                        <i class="mdi mdi-currency-usd mdi-24px"></i>
                                    </div>
                                </div>
                                <div class="ms-3">
                                    <div class="small mb-1">Revenue</div>
                                    <h5 class="mb-0">${{shortenNumber($totalRevenue)}}</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--/ Transactions -->
        <!-- Agreement From -->
        {{-- @if ($authUser->role_id == 2)
            <div class="col-xl-4 col-md-6">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex justify-content-between">
                            <h5 class="mb-1">Referral and Commission Program Terms and Conditions</h5>
                        </div>
                    </div>
                    <div class="card-body">
                        <!-- Download Button -->
                        @php
                            // Determine the file path based on the approval status
                            $file =
                                isset($customerAgreement) && $customerAgreement->is_approved === 1
                                    ? 'storage/signed_agreements/' . $customerAgreement->file_name
                                    : 'storage/agreement_form/referral-and-commission-program-terms-and-conditions.pdf';
                        @endphp

                        <a href="{{ asset($file) }}" class="btn btn-primary" download>
                            Agreement.pdf <i class="mdi mdi-download ms-2"></i>
                        </a>

                        <!-- Conditional Messages and File Upload Form -->
                        @if (isset($customerAgreement))
                            @if ($customerAgreement->is_approved === 0)
                                <!-- Waiting for Approval Message -->
                                <div class="alert alert-info mt-3">
                                    The signed agreement has been uploaded. Your request is waiting for approval.
                                </div>
                            @elseif ($customerAgreement->is_approved === 2)
                                <!-- Rejected Agreement Message and File Upload Form -->
                                <div class="alert alert-danger mt-3">
                                    Unfortunately, your signed agreement has been rejected. Please review the agreement and
                                    upload it again for further processing.
                                </div>
                                <!-- Re-upload Form -->
                                <form action="{{ route('upload.signed.agreement') }}" method="POST"
                                    enctype="multipart/form-data" class="mt-3">
                                    @csrf
                                    <div class="form-group">
                                        <label for="signed_agreement">Upload Signed Agreement</label>
                                        <input type="file" name="signed_agreement" id="signed_agreement"
                                            class="form-control" required>
                                    </div>
                                    <button type="submit" class="btn btn-success mt-2">Upload Signed Agreement</button>
                                </form>
                            @endif
                        @else
                            <!-- No existing agreement, so show upload form -->
                            <form action="{{ route('upload.signed.agreement') }}" method="POST"
                                enctype="multipart/form-data" class="mt-3">
                                @csrf
                                <div class="form-group">
                                    <label for="signed_agreement">Upload Signed Agreement</label>
                                    <input type="file" name="signed_agreement" id="signed_agreement"
                                        class="form-control" required>
                                </div>
                                <button type="submit" class="btn btn-success mt-2">Upload Signed Agreement</button>
                            </form>
                        @endif
                    </div>


                </div>
            </div>
        @endif --}}

        <!--/ Agreement From -->

        <!-- Total Earnings -->
        <div class="col-xl-6 col-md-6">
            <div class="card">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <h5 class="card-title m-0 me-2">Account Info</h5>
                    <div class="dropdown">
                        <button class="btn p-0" type="button" id="editInfo" data-bs-toggle="dropdown" aria-haspopup="true"
                            aria-expanded="false">
                            <i class="mdi mdi-dots-vertical mdi-24px"></i>
                        </button>
                        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="editInfo">
                            <a class="dropdown-item" href="{{ route('user.profile', $authUser->slug) }}">Edit</a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled">
                        <li><strong>User Name:</strong> {{ $authUser->name }}</li>
                        <li><strong>Email:</strong> {{ $authUser->email }}</li>
                        <li><strong>Contact:</strong> {{ $authUser->phone ?? 'N/A' }}</li>
                        <li><strong>Joined:</strong> {{ $authUser->created_at->format('F j, Y') }}</li>
                        <li><strong>Address:</strong> {{ $authUser->address ?? 'N/A' }}</li>
                        @if ($authUser->role->name === 'super_admin')
                            <li><strong>Referral Link For Field Agent:</strong>
                                <span id="clientReferralLink">{{ route('url.shortner', $authUser->referral_code) }}</span>
                                <button onclick="copyToClipboard('clientReferralLink')" class="btn p-0 ms-2"
                                    title="Copy Referral Link">
                                    <i class="mdi mdi-content-copy"></i>
                                </button>
                            </li>
                            <li><strong>Referral Link For Supervisor:</strong>
                                <span
                                    id="supervisorReferralLink">{{ route('url.shortner', $authUser->supervisor_referral_code) }}</span>
                                <button onclick="copyToClipboard('supervisorReferralLink')" class="btn p-0 ms-2"
                                    title="Copy Referral Link">
                                    <i class="mdi mdi-content-copy"></i>
                                </button>
                            </li>
                        @elseif(in_array($authUser->role->name, ['field_agent', 'external_agent']))
                            <li><strong>Referral Link for Customer:</strong>
                                <span
                                    id="customerReferralLink">{{ route('url.shortner', $authUser->customer_referral_code) }}</span>
                                <button onclick="copyToClipboard('customerReferralLink')" class="btn p-0 ms-2"
                                    title="Copy Referral Link">
                                    <i class="mdi mdi-content-copy"></i>
                                </button>
                            </li>
                            <li><strong>Referral Link for Sub
                                    Agent:</strong><span id="subAgentReferralLink">
                                    {{ route('url.shortner', $authUser->subagent_referral_code) }}</span>
                                <button onclick="copyToClipboard('subAgentReferralLink')" class="btn p-0 ms-2"
                                    title="Copy Referral Link">
                                    <i class="mdi mdi-content-copy"></i>
                                </button>
                            </li>
                        @elseif($authUser->role->name === 'sub_agent')
                            <li><strong>Referral Link for Customer:</strong>
                                <span
                                    id="customerReferralLink">{{ route('url.shortner', $authUser->customer_referral_code) }}</span>
                                <button onclick="copyToClipboard('customerReferralLink')" class="btn p-0 ms-2"
                                    title="Copy Referral Link">
                                    <i class="mdi mdi-content-copy"></i>
                                </button>
                            </li>
                        @elseif($authUser->role->name === 'supervisor')
                            <li><strong>Referral Link For External Agent:</strong>
                                <span id="externalReferralLink">{{ route('url.shortner', $authUser->referral_code) }}</span>
                                <button onclick="copyToClipboard('externalReferralLink')" class="btn p-0 ms-2"
                                    title="Copy Referral Link">
                                    <i class="mdi mdi-content-copy"></i>
                                </button>
                            </li>
                        @endif



                        <!-- Add other account details as needed -->
                    </ul>
                </div>
            </div>
        </div>

        <!--/ Total Earnings -->

        <!-- Four Cards -->
        <div class="col-xl-6 col-md-6">
            <div class="row gy-4">
                <!-- Total Profit line chart -->
                <div class="col-sm-6">
                    <div class="card h-100">
                        <div class="card-header pb-0">
                            <h4 class="mb-0">${{shortenNumber($totalRevenue)}}</h4>
                        </div>
                        <div class="card-body">
                            <div id="totalProfitLineChart" class="mb-3"></div>
                            <h6 class="text-center mb-0">Total Revenue</h6>
                        </div>
                    </div>
                </div>
                <!--/ Total Profit line chart -->
                <!-- Total Profit Weekly Project -->
                <div class="col-sm-6">
                    <div class="card h-100">
                        <div class="card-header d-flex align-items-center justify-content-between">
                            <div class="avatar">
                                <div class="avatar-initial bg-secondary rounded-circle shadow">
                                    <i class="mdi mdi-poll mdi-24px"></i>
                                </div>
                            </div>
                            <div class="dropdown">
                                <button class="btn p-0" type="button" id="refreshButton" data-bs-toggle="dropdown"
                                    aria-haspopup="true" aria-expanded="false">
                                    <i class="mdi mdi-reload mdi-24px"></i>
                                </button>
                                {{-- <div class="dropdown-menu dropdown-menu-end" aria-labelledby="totalProfitID">
                                    <a class="dropdown-item" href="javascript:void(0);" id="refreshButton">Refresh</a>
                                    <a class="dropdown-item" href="javascript:void(0);">Share</a>
                                    <a class="dropdown-item" href="javascript:void(0);">Update</a>
                                </div> --}}
                            </div>
                        </div>
                        <div class="card-body mt-mg-1">
                            <h6 class="mb-2">Sales</h6>
                            <div class="d-flex flex-wrap align-items-center mb-2 pb-1">
                                <h4 class="mb-0 me-2">{{shortenNumber($weeklySales)}}</h4>
                                {{-- <small class="text-success mt-1">+42%</small> --}}
                            </div>
                            <small>Weekly Sales</small>
                        </div>
                    </div>
                </div>
                <!--/ Total Profit Weekly Project -->
                <!-- New Yearly Project -->

                {{-- <div class="col-sm-6">
                    <div class="card h-100">
                        <div class="card-header d-flex align-items-center justify-content-between">
                            <div class="avatar">
                                <div class="avatar-initial bg-primary rounded-circle shadow-sm">
                                    <i class="mdi mdi-wallet-travel mdi-24px"></i>
                                </div>
                            </div>
                            <div class="dropdown">
                                <button class="btn p-0" type="button" id="refreshButton" data-bs-toggle="dropdown"
                                    aria-haspopup="true" aria-expanded="false">
                                    <i class="mdi mdi-reload mdi-24px"></i>
                                </button>
                                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="newProjectID">
                                    <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
                                    <a class="dropdown-item" href="javascript:void(0);">Share</a>
                                    <a class="dropdown-item" href="javascript:void(0);">Update</a>
                                </div>
                            </div>
                        </div>
                        <div class="card-body mt-mg-1">
                            <h6 class="mb-2">New Project</h6>
                            <div class="d-flex flex-wrap align-items-center mb-2 pb-1">
                                <h4 class="mb-0 me-2">862</h4>
                                <small class="text-danger mt-1">-18%</small>
                            </div>
                            <small>Yearly Project</small>
                        </div>
                    </div>
                </div> --}}

                <!--/ New Yearly Project -->
                <!-- Sessions chart -->

                {{-- <div class="col-sm-6">
                    <div class="card h-100">
                        <div class="card-header pb-0">
                            <h4 class="mb-0">2,856</h4>
                        </div>
                        <div class="card-body">
                            <div id="sessionsColumnChart" class="mb-3"></div>
                            <h6 class="text-center mb-0">Sessions</h6>
                        </div>
                    </div>
                </div> --}}
                
                <!--/ Sessions chart -->
            </div>
        </div>
        <!--/ Total Earning -->

    </div>
@endsection

<script>
    function copyToClipboard(elementId) {
        // Get the text content from the element
        const textToCopy = document.getElementById(elementId).innerText;

        // Create a temporary textarea element
        const tempTextarea = document.createElement('textarea');
        tempTextarea.value = textToCopy;
        document.body.appendChild(tempTextarea);

        // Select the text and copy to clipboard
        tempTextarea.select();
        document.execCommand('copy');

        // Remove the temporary textarea
        document.body.removeChild(tempTextarea);

        // Show Toastr success message
        toastr.success('Referral link copied to clipboard!');
    }
</script>