@extends('adminlte::page')

@section('content')

<div class="container">

    <a href="{{ route('admin.allsales') }}" class="btn btn-primary mt-4">Back</a>
    <h1 class="heading">Sales Details</h1>
    <hr style="background-color: black;" />
    <h2 class="salesName mb-3 mt-3">Sales : {{ $user->name }}, {{ ucfirst($user->role) }}</h2>
    <button type="button" class="btn btn-primary mt-3 mb-3" data-bs-toggle="modal" data-bs-target="#updateTargetModal{{ $user->id }}">
        Update Target
    </button>

    <div class="progress mb-3 mt-3">
        <div class="progress-bar" role="progressbar" style="width: {{ min(($totalRevenue / $user->target) * 100, 100) . '%' }};" aria-valuenow="{{ min(($totalRevenue / $user->target) * 100, 100) }}" aria-valuemin="0" aria-valuemax="100">{{ min(($totalRevenue / $user->target) * 100, 100) }}%</div>


    </div>
    <div class="modal fade" id="updateTargetModal{{ $user->id }}" tabindex="-1" aria-labelledby="updateTargetModalLabel{{ $user->id }}" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="updateTargetModalLabel{{ $user->id }}">Update Target for {{ $user->name }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="updateTargetForm{{ $user->id }}" method="POST" action="{{ route('update.target', $user->id) }}">
                    @csrf
                    @method('PUT')
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="target">Target</label>
                            <input type="number" class="form-control" id="target" name="target" value="{{ $user->target }}">
                        </div>
                        <div id="spinner{{ $user->id }}" class="d-none text-center">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button id="updateButton{{ $user->id }}" type="submit" class="btn btn-primary">Update Target</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            $('#updateTargetForm{{ $user->id }}').submit(function() {
                $('#updateButton{{ $user->id }}').attr('disabled', true);
                $('#spinner{{ $user->id }}').removeClass('d-none');
            });
        });
    </script>

    <div class="container">
        <div class="row">
            <div class="kunjungan-container">
                <div class="success">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <svg class="succes-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                            </svg>
                        </div>
                        <div class="success-prompt-wrap">
                            <p class="success-prompt-heading">Kunjungan Bulan Ini</p>
                            <div class="success-prompt-prompt">
                                <p>Total : <strong>{{ $kunjunganCountThisMonth }} Kunjungan</strong></p>
                            </div>
                            <div class="success-button-container">
                                <a href="{{ route('admin.visit.project', $user->id) }}" class="success-button-main">Lihat Kunjungan</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="order-container mt-3 mb-3">
                <div class="success-order">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <svg class="succes-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                            </svg>
                        </div>
                        <div class="success-prompt-wrap">
                            <p class="success-prompt-heading">Sales Order Bulan Ini</p>
                            <div class="success-prompt-prompt">
                                <p>Total : <strong>{{ $orderBiasaCountAdmin + $orderKunjunganCountAdmin }} Order, {{ $orderKunjunganCountAdmin }} dari Kunjungan</strong></p>
                            </div>
                            <div class="success-button-container">
                                <a href="{{ route('admin.salesOrderThisMonth.project', ['user' => $user->id]) }}" class="success-button-main">Lihat Order</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="revenue-container mb-3">
                <div class="total-revenue">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <svg class="succes-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                            </svg>
                        </div>
                        <div class="success-prompt-wrap">
                            <p class="success-prompt-heading">Pendapatan Bulan Ini</p>
                            <div class="success-prompt-prompt">
                                <p>Total : <strong> Rp.{{ number_format($totalRevenue, 0, ',', '.') }} / Rp.{{ number_format($user->target, 0, ',', '.') }}</strong></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="order-container mb-3">
                <div class="success-order">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <svg class="succes-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                            </svg>
                        </div>
                        <div class="success-prompt-wrap">
                            <p class="success-prompt-heading">Prospek</p>
                            <div class="success-prompt-prompt">
                                <p>{{$projectProspectsCount}} Prospek</p>
                            </div>
                            <div class="success-button-container">
                                <a href="{{ route('admin.viewProspect', ['userId' => $user->id]) }}" class="success-button-main">Lihat Prospek</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

<style scoped>
    .arrow {
        max-width: 30px;
        margin-top: 35px;
        margin-right: 20px;
    }

    .heading {
        margin-top: 20px;
    }

    .salesName {
        margin-top: 20px;
    }

    .kunjungan-container {
        margin-top: 20px;
        width: 320px;
        height: auto;
        font-size: 0.875rem;
        line-height: 1.25rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        border: 2px solid green;
        border-radius: 8px;
        margin-right: 20px;
        background-color: rgb(240 253 244);
    }

    .order-container {
        margin-top: 20px;
        width: 320px;
        height: auto;
        font-size: 0.875rem;
        line-height: 1.25rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        border: 2px solid blue;
        border-radius: 8px;
        margin-right: 20px;
        background-color: #ADD8E6;
    }

    .revenue-container {
        margin-top: 20px;
        width: 320px;
        height: auto;
        font-size: 0.875rem;
        line-height: 1.25rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        border: 2px solid red;
        border-radius: 8px;
        margin-right: 20px;
        background-color: #FF7F7F;
    }

    .flex {
        display: flex;
    }

    .flex-shrink-0 {
        flex-shrink: 0;
    }

    .success {
        padding: 1rem;
        border-radius: 0.375rem;
    }

    .success-order {
        padding: 1rem;
        border-radius: 0.375rem;
    }

    .total-revenue {
        padding: 1rem;
        border-radius: 0.375rem;
    }

    .succes-svg {
        color: rgb(74 222 128);
        width: 1.25rem;
        height: 1.25rem;
    }

    .success-prompt-wrap {
        margin-left: 0.75rem;
    }

    .success-prompt-heading {
        font-weight: bold;
        color: black;
    }

    .success-prompt-prompt {
        margin-top: 0.5rem;
        color: black;
    }

    .success-button-container {
        display: flex;
        margin-top: 0.875rem;
        margin-bottom: -0.375rem;
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }

    .success-button-main {
        padding-top: 0.375rem;
        padding-bottom: 0.375rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        background-color: transparent;
        color: black;
        font-size: 0.875rem;
        line-height: 1.25rem;
        font-weight: bold;
        border-radius: 0.375rem;
        border: none;
        text-decoration: none;
    }

    .success-button-main:hover {
        background-color: #D1FAE5;
        text-decoration: none;

    }

    .success-button-secondary {
        padding-top: 0.375rem;
        padding-bottom: 0.375rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        margin-left: 0.75rem;
        background-color: #ECFDF5;
        color: #065F46;
        font-size: 0.875rem;
        line-height: 1.25rem;
        border-radius: 0.375rem;
        border: none;
    }
</style>