<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="openAddWorkPermit()"
                        class="btn btn-square btn-primary txt-white" >
                        Solicitud de permiso <i class="fa fa-plus"></i>
                    </a>
                </li>
            @endcan
        @endslot
        <li class="breadcrumb-item">Empleado</li>
        <li class="breadcrumb-item active">Permisos 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>Permisos Laborales <b> | {{ $first_name }} {{ $last_name }}</b></h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row justify-content-between file-content mb-2">
            <div class="col-lg-4 col-md-4 col-sm-12">
                <div class="form-inline">
                    <div class="form-group d-flex mb-0"><i class="fa fa-search"></i>
                        <input class="form-control-plaintext" type="text" wire:model="search" placeholder="Buscar...">
                    </div>
                </div>
            </div>
            @if (isset($count_reg))
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <p class="p-l-20">Total permisos 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_permits 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="openViewRejectWorkPermit({{ $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">Tipo de permiso: </p>
                                <p class="d-inline float-right">{{ $item->type_work_permit_name }}</p>

                            </div>
                            <div class="card-subtitle mb-2 text-muted">
                                <p class="d-inline f-w-600">Radicado Nro: </p>
                                <p class="d-inline float-right">{{ $item->register_code }}</p>

                            </div>
                            <div class="card-content">
                                <p class="d-inline f-w-600"><i class="fas fa-calendar-alt"></i> Desde: </p>
                                <p class="d-inline float-right">
                                    {{ \Carbon\Carbon::parse($item->start_date)->day }} de
                                    {{ \Carbon\Carbon::parse($item->start_date)->monthName }} de
                                    {{ \Carbon\Carbon::parse($item->start_date)->year }} a las
                                    {{ \Carbon\Carbon::parse($item->start_date)->format('g:i A') }}
                                </p>
                                <br>
                                <p class="d-inline f-w-600"><i class="fas fa-calendar-alt"></i> Hasta: </p>
                                <p class="d-inline float-right">
                                    {{ \Carbon\Carbon::parse($item->end_date)->day }} de
                                    {{ \Carbon\Carbon::parse($item->end_date)->monthName }} de
                                    {{ \Carbon\Carbon::parse($item->end_date)->year }} a las
                                    {{ \Carbon\Carbon::parse($item->end_date)->format('g:i A') }}
                                </p>
                                <hr class="my-2">
                                <p class="d-inline f-w-600">Fecha de solicitud: </p>
                                <p class="d-inline float-right">
                                    {{ \Carbon\Carbon::parse($item->created_at)->day }} de
                                    {{ \Carbon\Carbon::parse($item->created_at)->monthName }} del
                                    {{ \Carbon\Carbon::parse($item->created_at)->year }} a las
                                    {{ \Carbon\Carbon::parse($item->created_at)->format('g:i A') }}
                                <br>
                                <p class="d-inline f-w-600">Observaciones: </p>
                                <p class="d-inline float-right">{{ $item->observations }}</p>

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

                            <div class="row m-t-20">
                                <div class="col-sm-12 col-md-6">

                                </div>
                                <div class="col-sm-12 col-md-6">
                                        @include('livewire.employee.work-permits.upload-support')
                                </div>
                            </div><!-- row -->

                        </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 Permisos laborales registrados</h5>
                    </div>
                </div>
                @endif

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

    @include('livewire.employee.work-permits.form')
    @include('livewire.employee.work-permits.form-reject')
    @include('livewire.employee.work-permits.form-upload-support')

</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')
    });
    window.livewire.on('show-modal-support-document', msg => {
        $('#theModalUpload').modal('show')
    });
    window.livewire.on('hide-modal-support-document', msg => {
        $('#theModalUpload').modal('hide')
    });
});
</script>
