<div>
    @component('common.breadcrumb', ['addBtn' => false, 'permission_create' => 'Employee_work_permits_index',
        'breadcrumb_show' => $breadcrumb_show])
        @slot('breadcrumb_title')
            <h3>{{ $componentName }} | {{ $pageTitle }}</h3>
        @endslot
        @slot('buttons_extras')
            @can('Employee_work_permits_index')
                <li>
                    <a href="javascript:void(0)" wire:click.prevent="openAddWorkCertificate()"
                        class="btn btn-square btn-primary txt-white" >
                        Solicitud de certificado <i class="fa fa-plus"></i>
                    </a>
                </li>
            @endcan
        @endslot
        <li class="breadcrumb-item">Empleado</li>
        <li class="breadcrumb-item active">Certificados Laborales</li>
    @endcomponent
    <div class="container-fluid">
        <div class="row layout-top-spacing">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <div class="card-header">
                            <h4>Certificados Laborales <b> | {{ $first_name }} {{ $last_name }}</b></h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row justify-content-between file-content mb-2">
            @if (isset($count_reg))
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <p class="p-l-20">Total certificados solicitados: {{ $count_reg }}</p>
                </div>
            @endif

        </div>
    </div><!-- container-fluid -->
    <div class="container-fluid">
        <div class="card">
            <div class="card-body">
        <div class="row layout-top-spacing">
            @if ($count_reg > 0)
                @foreach ($work_certificates as $item)
                <div class="col-sm-12 col-md-6">
                    <div class="project-box">
                        <div class="card-body">
                            <div class="d-flex flex-reverse-row f-right position-absolute justify-content-end w-100 top-0 start-0 end-0 m-b-10">
                                <span class="b-r-4 m-t-5 m-r-5 py-1 px-2 {{ $item->status == 0 ? 'bg-warning' : ($item->status == 1 ? 'bg-success' : 'bg-danger') }}">
                                    {{ DataTypeStatusStandard($item->status) }}
                                    <i class="fas {{ $item->status == 0 ? 'fa-clock' : ($item->status == 1 ? 'fa-check' : 'fa-times') }}"></i>
                                </span>
                                @if($item->status == 2)<!-- Si el permiso laboral es rechazado, se mostrara un boton para visualizar el motivo del rechazo -->
                                    <a href="javascript:void(0)" wire:click.prevent="openViewRejectWorkCertificate({{ $item->id }})"
                                        class="btn btn-square btn-outline-danger btn-sm b-r-4 m-t-5 m-r-5 py-1 px-2"
                                        title="Click para ver motivo del rechazo">
                                        <i class="fa fa-eye"></i>
                                    </a>
                                @endif
                            </div>
                            <div class="card-title m-t-10">
                                <p class="d-inline f-w-600 fs-5">Certificato Laboral </p>
                            </div>
                            <div class="card-content">
                                <hr class="my-2">
                                <p class="d-inline f-w-600"><i class="fas fa-calendar-alt"></i> Fecha de solicitud: </p>
                                <p class="d-inline float-right">
                                    {{ \Carbon\Carbon::parse($item->solicitation_date)->day }} de
                                    {{ \Carbon\Carbon::parse($item->solicitation_date)->monthName }} del
                                    {{ \Carbon\Carbon::parse($item->solicitation_date)->year }} a las
                                    {{ \Carbon\Carbon::parse($item->solicitation_date)->format('g:i A') }}
                                </p><br>
                                <p class="d-inline f-w-600"><i class="fas fa-envelope-open-text"></i> Dirigido a: {{ Request_to_Default($item->requested_to) }}</p>
                                </p>
                                @if ($item->status != 0)
                                    <hr class="m-t-30">
                                    <label class="fs-6"><span class="f-w-700"><span> {{ DataTypeStatusStandard($item->status) }} por {{ FullNameUser($item->reviewed_by) }}</label>
                                    @if ($status == 2)
                                        <br>
                                        <label class="fs-6"><span class="f-w-700">Motivo de rechazo:<span> {{ $item->rejected_reason == NULL ? 'No hay motivo de rechazo' : $item->rejected_reason }} </label>
                                    @elseif ($item->status == 1)
                                        @can('Employee_work_certificates_download')
                                            <p class="m-t-50">
                                            <a href="{{ url('descargar/certificado/' .$item->id) }}" target="_blank" class="btn btn-square btn-outline-primary btn-sm b-r-4 m-t-5 m-r-5 py-1 px-2">
                                                Descargar Certificado <i class="fas fa-download"></i>
                                            </a>
                                            </p>
                                        @endcan
                                    @endif

                                @endif

                            </div><!-- card-content -->

                        </div><!-- card-body -->
                    </div><!-- card -->
                </div><!-- col-sm-12  col-md-6-->
                @endforeach
                @else
                <div class="card">
                    <div class="card-header text-center">
                        <h5 class="text-danger">No hay Solicitudes de Certificados laborales registrados</h5>
                    </div>
                </div>
                @endif

                {{ $work_certificates->links() }}
        </div><!-- row -->
        </div><!-- card-body -->
        </div><!-- card -->
    </div><!-- container-fluid -->

    @include('livewire.employee.work-certificates.form')
    @include('livewire.employee.work-certificates.form-reject')

</div>

@include('common.scriptsCompStandar')
@push('help-popover')
<script src="{{ asset('assets/js/popover-custom.js')}}"></script>
@endpush
<script>
document.addEventListener('DOMContentLoaded', function() {
    window.livewire.on('show-modal-reject', msg => {
        $('#theModalReject').modal('show')
    });
});
</script>
