<?php

namespace App\Components\Client;

use App\Models\Claim\Claim;
use App\Models\Client\Client;
use Livewire\Attributes\Lazy;
use Livewire\Component;
use Illuminate\Support\Facades\Cache;

#[Lazy]
class View extends Component {

    public Client $client;
    public ?Claim $claim = null;
    public int $totalWipUnits = 0;
    public int $totalWipSeconds = 0;
    
    public function booted() {
        $this->claim = $this->client->claim;

        // TODO: Consider caching these totals if query performance becomes an issue.
        $totals = $this->client->wipEntries()
        ->selectRaw('SUM(units) as units, SUM(seconds) as seconds')
        ->first();

        $this->totalWipUnits = (int) $totals->units;
        $this->totalWipSeconds = (int) $totals->seconds;

    }

    public function render() {
        return view('components.client.view-client');
    }

    public function placeholder() {
        return <<<HTML
<div>
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div class="placeholder-glow w-50">
            <span class="placeholder col-6 placeholder-lg"></span>
        </div>
    </div>

    <div class="row">

        <div class="col-12 col-md-3">
            <div class="card shadow-sm p-3 text-center">

                <div class="placeholder-glow mb-3 d-flex justify-content-center">
                    <span class="placeholder rounded-circle"
                          style="width:64px;height:64px;"></span>
                </div>

                <div class="placeholder-glow mb-2">
                    <span class="placeholder col-8"></span>
                </div>

                <div class="placeholder-glow">
                    <span class="placeholder col-6"></span>
                </div>

            </div>
        </div>

        {{-- CENTER: TABS / MAIN CONTENT --}}
        <div class="col-12 col-md-6">
            <div class="card shadow-sm p-4">

                {{-- Tab headers --}}
                <div class="placeholder-glow mb-4">
                    <span class="placeholder col-3 me-2"></span>
                    <span class="placeholder col-3 me-2"></span>
                    <span class="placeholder col-3"></span>
                </div>

                {{-- Content lines --}}
                <div class="placeholder-glow mb-2">
                    <span class="placeholder col-12"></span>
                </div>
                <div class="placeholder-glow mb-2">
                    <span class="placeholder col-10"></span>
                </div>
                <div class="placeholder-glow">
                    <span class="placeholder col-8"></span>
                </div>

            </div>
        </div>

        <div class="col-12 col-md-3">
            <div class="card shadow-sm p-3">

                <div class="placeholder-glow mb-2">
                    <span class="placeholder col-12"></span>
                </div>
                <div class="placeholder-glow mb-2">
                    <span class="placeholder col-9"></span>
                </div>
                <div class="placeholder-glow">
                    <span class="placeholder col-7"></span>
                </div>

            </div>
        </div>

    </div>
    </div>
HTML;

    }
}
