@extends('layouts.app')

@section('content')
    <div class="bgc-white p-20 bd">
    <h3>Notificaciones</h3>

    <div class="card">
        <div class="card-body">
            <div class="d-flex justify-content-end">
            <div class="align-content-center font-bolder"> Tiene {{count($notificaciones)}} Notificaciones</div>
            <form class="d-flex justify-content-end" action="{{route('users.notificaciones.index') }}" method="get">
           
            <b-form-group class="col-4">
                <label class="form-label">Módulo</label>
                <b-form-select :options="estados" name="modulo" value-field="id" text-field="nombre" placeholder="Seleccione Estado" >
                    <template #first>
                        <b-form-select-option :value="null" >-- Seleccione Módulo --</b-form-select-option>
                    </template>
                </b-form-select>
            </b-form-group>


            <b-form-group class="col-4">
                <label class="form-label">Estado</label>
                <b-form-select name="estado" :options="[{id:'0','nombre':'No Leído'},{id:'1','nombre':'Leído'}]" value-field="id" text-field="nombre" placeholder="Seleccione Estado">
                    <template #first>
                        <b-form-select-option :value="null" >-- Seleccione Estado --</b-form-select-option>
                    </template>
                </b-form-select>
            </b-form-group>

            <b-form-group class="align-content-end">
                <b-button type="submit" variant="primary">Filtrar</b-button>
            </b-form-group>
            </form>

            </div>
            @foreach($notificaciones as $notificacion)
                <div class="bd">
                    <div
                        class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue {{ $notificacion->read() ? 'bgc-white' : 'bgc-grey-100' }}'>
                        <div class="peer peer-greed">
                            <div class="row">
                                <div class="col-10">
                                    @include('components.notification-view', ['notificacion' => $notificacion])
                                </div>

                                <div class="col-2">
                                    <form action="{{ route('users.notificaciones.leido', ['id' => $notificacion->id]) }}" method="post">
                                        @csrf
                                        <div class="d-flex justify-content-end">
                                            <button class="btn btn-link"><span class="fa fa-close"></span></button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
            <div class="d-flex pY-10 justify-content-end">
            {{ $notificaciones->links() }}
            </div>
            
        </div>
    </div>
    </div>
@endsection

@push('pre-scripts')
@endpush