@push('styles')
<style>
    .livewire-datatable .page-title {
        font-size: 1.25rem;
    }
</style>
@endpush

<div>
    @php
        $projectCategoryId = data_get($simulation, 'project_category_id')
    @endphp

    <h5 @class(['title', 'd-none' => !$projectCategoryId])>
        @lang('Simulator') 
        @if($this->simulationId)
            <x-ui.badge :label="'Mode édition : ' . $this->ref" class="badge-md rounded-pill shadow-sm ms-4"/>
        @endif
    </h5>
    
    @if($this->simulationId)
    <p><x-ui.nicon name="info-i" class="mr-1 text-info"/> En cliquant sur <b>Sauvegarder</b> vous allez éditer la simulation <b>{{ $this->ref }}</b> et le client associé.</p>
    @endif

    <div @class(['text-center', 'd-none' => $projectCategoryId])>
        <div class="mb-4">
            <h5>Sélectionnez un type de crédit</h5>
        </div>
        <div class="d-flex justify-content-center">
            <div 
                class="d-flex justify-content-center align-items-center flex-wrap g-2"
                style="width: 650px">
                @foreach($this->projectCategories as $id => $category)
                    @php $enum = ProjectCategoriesId::from($id) @endphp
                    <div>
                        <x-ui.card-icon
                            :label="$category"
                            :icon="$enum->icon()"
                            click="setProjectCategory({{ $id }})"
                            icon-size="3.2rem"
                            height="9rem"
                            :enabled="$enum->isEnabled()"
                        />
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    <div @class(['card card-bordered', 'd-none' => !$projectCategoryId])>
        <div>
            {{-- <div class="nk-wg1-block">
                <div class="nk-wg1-img">
                    @svg('settings')
                </div>
                <div class="nk-wg1-text">
                    <h5 class="title">@lang('Simulator')</h5>
                    <p>@lang('Create and manage your loan simulations')
                </div>
            </div> --}}
            <div class="card-header bg-primary p-2 d-flex justify-content-between align-items-center">
                @if(! $this->simulationId)
                    <div>
                        <h6 class="text-white fs-15px">{{ $this->selected_category_label ?? '' }}</h6>
                    </div>
                    <div>
                        <x-ui.button label="Changer la catégorie" icon="undo" class="btn-outline-primary btn-dim" 
                            click="setProjectCategory" />
                    </div>
                @else
                    <div>
                        <h6 class="text-white fs-15px">
                            {{ $this->selected_category_label ?? '' }}
                            <x-ui.nicon name="bullet" class="mx-1"/>
                            {{ $this->ref }}
                            <x-ui.nicon name="bullet" class="mx-1"/>
                            {{ $this->product['bank']['name'] ?? '' }}
                            <x-ui.nicon name="bullet" class="mx-1"/>
                            {{ $this->product['name'] ?? '' }}
                            <x-ui.nicon name="bullet" class="mx-1"/>
                            {{ str()->formatDecimal($this->simulation['credit_amount'] ?? '') }}€
                        </h6>
                    </div>
                @endif
            </div>
            <div class="card-inner">
                <div class="row">
                    @if($this->showClientForm)
                    <div class="col-sm-4">
                        <x-simulations.loan-simulator-clients />
                        {{-- @if($this->client->exists)
                            @if(!$this->client->is_lead)
                                <button 
                                    class="btn btn-success btn-dim mt-2 btn-block" 
                                    @click("createLead")
                                    data-bs-toggle="tooltip"
                                    data-bs-placement="top"
                                    title="@lang('Convert this simulation into a lead')"
                                >
                                    <x-ui.nicon name="user-add" class="me-1"/>
                                    @lang('Create Lead')
                                </button>
                            @else
                                <a 
                                    class="btn btn-success btn-dim mt-2 btn-block" 
                                    href="{{ route('leads.detail', $this->client) }}"
                                >
                                    <x-ui.nicon name="user-c" class="me-1"/>
                                    @lang('View lead details')
                                </a>
                            @endif
                        @endif --}}
                    </div>
                    <div class="col-sm-8">
                        <div class="card" x-data="{hasCoClient: @entangle('hasCoClient').defer}">
                            @if($this->showClientForm)
                            <div class="card-header card-header-rounded d-flex justify-content-between align-items-center tw-bg-blue-gray-100">
                                <div><h6>Projet</h6></div>
                            </div>
                            @endif
                            <div class="card-inner">
                                <x-simulations.loan-simulator-fields :project-category-id="data_get($this->simulation, 'project_category_id')"/>
                            </div>
                        </div>
                    </div>
                    @else
                    <div class="col-sm-12">
                        <x-simulations.loan-simulator-fields :project-category-id="data_get($this->simulation, 'project_category_id')"/>
                    </div>
                    @endif
                    <div class="col-sm-12 justify-content-end">
                        <x-ui.list :items="$errors?->toArray()" list-class="text-danger" class="tw-bg-red-50 br-1 p-3 mt-4"/>
                        <button class="btn btn-primary btn-block btn-dim mt-4" @click("simulate")>Simuler le dossier</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div @class(['card card-inner shadow tw-bg-blue-gray-50', 'd-none' => ! (data_get($simulation, 'project_category_id') && $this->simulations)])>
        <x-simulations.simulation-results />
    </div>

    <div @class(['mt-3', 'd-none' => !$projectCategoryId])>
        @livewire('simulations.temporary-simulations-table', [
            'restrict' => ($this->client->exists ? ['client_id' => $this->client->id] : []),
            'params' => ['session_only' => !$this->client->exists],
            'isLead' => $this->client->is_lead,
            'showPagination' => false,
            'loader' => true
        ])
    </div>

    @if($this->showClientForm)
    <div @class(['d-none' => !$this->client->exists])>
        <h3 class="mt-3" style="font-size: 1.25rem">Notes</h3>
        @if($this->client->exists)
        <div class="mt-4 card">
            <div class="card-inner">
                @livewire('notes.notes-viewer', [
                    'modelClass' => $this->client->getMorphClass(), 
                    'modelId' => $this->client->id,
                    'loader' => true,
                    'hasChannels' => false,
                    'showTitle' => false,
                    'view' => 'notes-viewer-chat',
                ])
            </div>
        </div>
        @endif
    </div>
    @endif
</div>