<?php

namespace App\Components\Client;

use App\Models\Claim\Claim;
use App\Models\Client\Client;
use Livewire\Attributes\Lazy;
use Livewire\Component;

#[Lazy]
class View extends Component {

    public Client $client;
    public ?Claim $claim = null;

    public function booted() {
        $this->claim = $this->client->claim;
    }

    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;

    }
}
