<div>
    @component('common.breadcrumb', ['addBtn' => true, 'permission_create' => 'Contract_create', 'breadcrumb_show' => $breadcrumb_show])
        @slot('breadcrumb_title')
            <h3>{{ $componentName }} | {{ $pageTitle }}</h3>
        @endslot
        <li class="breadcrumb-item">Administración</li>
        <li class="breadcrumb-item active">Contratos</li>
    @endcomponent
    @include('common.searchbox')
    <div class="container-fluid">
        <div class="card">
            <div class="card-body">
                <div class="tab-content" id="top-tabContent">

                    <div class="tab-pane fade show active" id="top-home" role="tabpanel" aria-labelledby="top-home-tab">
                        <div class="row">
                            @foreach ($contracts as $contract)
                                <div class="col-xxl-4 col-lg-6">
                                    <div class="project-box">
                                        <span class="badge" style="background-color:{{$contract->plan_color}}">{{ $contract->plan_name }}</span>
                                        <h6>{{ $contract->name }}</h6>
                                        <div class="media align-items-center">
                                            <i class="fas fa-calendar-alt me-2 "></i>
                                            <div class="media-body">
                                                <p class="p-0 m-0">{{ \Carbon\Carbon::parse($contract->created_at)->day }} de {{ \Carbon\Carbon::parse($contract->created_at)->monthName }} del {{ \Carbon\Carbon::parse($contract->created_at)->year }}</p>
                                            </div>
                                        </div>
                                        <p>{{$contract->description}}</p>
                                        <hr class="style-two">
                                        <div class="row mt-3">
                                            <div class="col-6">
                                                <a href="{{ route('contratos.edit', $contract->id)}}" class="btn btn-outline-primary btn-sm"><i class="fas fa-edit"></i></a>
                                            </div>
                                            <div class="col-6">
                                                <button class="btn-sm f-right btn btn-outline-{{ $contract->status == 'Activo' ? 'danger' : 'success'}}" wire:click="ToggleStatusContract({{$contract->id}})" title="Desactivar"><i class="fas {{ $contract->status == 'Activo' ? 'fa-eye-slash' : 'fa-eye'}}"></i></button>
                                            </div>
                                        </div>
                                        <hr class="style-two">
                                        <div class="project-status mt-4">
                                            <div class="row">
                                                <div class="col-6">
                                                    @foreach ($plans as $plan)
                                                        @if ($plan->contract_id == $contract->id)
                                                            <span class="small d-inline-block px-1 my-1" style="border: 2px solid {{$plan->plan_color}}">{{ $plan->plan_name }}</span>
                                                        @endif
                                                    @endforeach
                                                </div>
                                                <div class="col-6">
                                                    <div class="media mb-0">
                                                        <div class="media-body text-end {{ $contract->status == 'Activo' ? 'text-success' : 'text-danger' }}"><span>{{$contract->status}}</span></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div><!--end row-->
                        {{ $contracts->links() }}
                    </div><!-- /.card-body -->
                </div>
            </div>
        </div>
    </div>
    @include('livewire.contracts.form')
</div>
@include('common.scriptsCompStandar')
