@extends('layouts.app')

@section('title', 'Procesos de Selección')

@section('content')
<div class="card">
    <div class="card-header">
        <div class="row">
            <div class="col-9">
                <h1>
                    {{ $job->title }} <br>
                    <small class="text-muted">/{{ $job->url }}</small><br>
                </h1>
            </div>
            <div class="col-3">

            </div>
        </div>
    </div>
    @if($job->closing_comment)
    <div class="card-body">
        <div class="alert alert-danger" role="alert">
            <strong>STATUS: {{ $job->status }}</strong>
            <br>
            Comentario del cierre: {{$job->closing_comment}}
        </div>
    </div>
    @endif
    <div class="card-body">
        @if (session('status'))
        <div class="alert alert-success" role="alert">
            {{ session('status') }}
        </div>
        @endif
        @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif
        <small class="lead text-muted ">Fecha de publicación:
            <span class="text-capitalize">
                {{ Carbon::parse($job->created_at)->format('l, j \d\e F Y') }}
            </span>
            @if(auth()->user()->role == 'admin')
            <span class="float-right">
                <a href="{{ route('admin.jobs.edit', $job->id, false) }}"
                    class="btn btn-primary btn-block d-flex align-items-center justify-content-center"
                    onclick="startLoading()">EDITAR PUESTO</a>
                <a href="{{ route('admin.jobs.export', $job->id) }}" target="_blank"
                    class="btn btn-success btn-block">DESCARGAR REPORTE</a>
                <form action="{{ route('admin.jobs.updateStatus', $job) }}" method="post" id="formUpdateStatus">
                    @csrf
                    @method('POST')
                    <input type="hidden" value="" name="closing_comment" id="closing_comment">
                    <select name="status" id="status" class="form-control d-block w-100 mt-2">
                        <option value="En proceso" {{ $job->status ==  'En proceso' ? 'selected': 0}}>En proceso
                        </option>
                        <option value="Suspendido" {{ $job->status ==  'Suspendido' ? 'selected': 0}}>Suspendido
                        </option>
                        <option value="Cerrado" {{ $job->status ==  'Cerrado' ? 'selected': 0}}>Cerrado</option>
                        <option value="Cancelado" {{ $job->status ==  'Cancelado' ? 'selected': 0}}>Cancelado</option>
                    </select>
                </form>
            </span>
            @endif
        </small>
        <br>
        <br>
        <div id="description" class="pub">
            {!! $job->description !!}
        </div>
        <button id="toggleDesc" class="btn btn-info mb-4">MOSTRAR/OCULTAR</button>
        @if (!$job->hide_business)
        <div class="card mb-3 bg-light">
            <div class="card-body">
                <div class="row">
                    <div class="col-sm-9">

                        <h5 class="card-title">
                            {{ $job->business->name }}
                        </h5>
                        <h6 class="card-subtitle mb-2 text-muted">{{ $job->business->heading->name}}</h6>
                        <p class="card-text">{{ $job->business->description }}</p>
                    </div>
                    <div class="col-sm-3 text-center">
                        <a href="{{ route('admin.jobs') }}?b_id={{ $job->business->id }}" class="text-decoration-none">
                            <h1 class="display-4">{{ $job->business->jobs->count() }}</h1>
                            <p>Procesos activos</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        @endif

        <div class="row">
            <div class="col-sm-4 text-center">
                <div class="card">
                    <div class="card-body">
                        <p>Web</p>
                        <span class="display-4">{{ $postulationsQuantity }}</span>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 text-center">
                <div class="card">
                    <div class="card-body">
                        <p>Linkedin</p>
                        <span class="display-4">0</span>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 text-center">
                <div class="card">
                    <div class="card-body">
                        <p>Descubierto</p>
                        <span class="display-4">{{ $postulationsApprovedQuantity }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('trello')
    <div class="card">
        <div class="card-header">
            <h2>Filtros</h2>
        </div>
        <div class="card-body">
            <div class="row bg-white">
                <div class="col-1"></div>
                <div class="col-2">
                    <div class="form-group">
                        <label for="">Estado</label>
                        <select class="form-control" id="filter_state">
                            <option value="">Seleccione</option>
                            @foreach ($states as $state)
                                <option value="{{ $state->id }}">
                                    {{ $state->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-2">
                    <div class="form-group">
                        <label for="">Fecha Desde</label>
                        <input type="date" class="form-control" id="filter_created_at_from" />
                    </div>
                </div>
                <div class="col-2">
                    <div class="form-group">
                        <label for="">Fecha Hasta</label>
                        <input type="date" class="form-control" id="filter_created_at_to" />
                    </div>
                </div>
                <div class="col-2">
                    <div class="form-group">
                        <label for="">Salario Desde</label>
                        <input type="text" class="form-control" id="filter_salary_from" />
                    </div>
                    <a href="javascript:void(0);" id="filter" class="btn btn-primary w-100">Buscar</a>
                </div>
                <div class="col-2">
                    <div class="form-group">
                        <label for="">Salario Hasta</label>
                        <input type="text" class="form-control" id="filter_salary_to" />
                    </div>
                    <a href="javascript:void(0);" class="btn btn-secondary w-100" onclick="javascript:window.location.reload()">Limpiar</a>
                </div>
                <div class="col-1"></div>
            </div>
        </div>
    </div>


<br>
<div class="card px-2 py-2" id="postulaciones">
    <div class="card-body">
        <div class="card-title">
            <div class="row">
                <div class="col-8">
                    <h2>Proceso de selección</h2>
                </div>
                <div class="col-4">
                    @if(auth()->user()->role == 'admin')
                    <div class="d-flex flex-row-reverse bd-highlight">
                        <div class="p-2 bd-highlight">
                            <button class="btn btn-outline-primary btn-lg btn-block" data-toggle="modal"
                                data-target="#createPostulantModal">
                                + Agregar postulante
                            </button>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="board-tab" data-toggle="tab" href="#board" role="tab"
                    aria-controls="board" aria-selected="true">Pizarra</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="history-tab" data-toggle="tab" href="#history" role="tab"
                    aria-controls="history" aria-selected="false">Historial</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="approved-tab" data-toggle="tab" href="#approved" role="tab"
                    aria-controls="approved" aria-selected="false">Aprobados</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="rejected-tab" data-toggle="tab" href="#rejected" role="tab"
                    aria-controls="rejected" aria-selected="false">Rechazados</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="inReview-tab" data-toggle="tab" href="#inReview" role="tab"
                    aria-controls="inReview" aria-selected="false">En revisión</a>
            </li>
        </ul>
        <div class="tab-content" id="myTabContent">
            <br>
            <div class="tab-pane fade show active" id="board" role="tabpanel" aria-labelledby="board-tab">
                <div class="row">
                    @if(auth()->user()->role == 'admin')
                        <div class="col-sm-3 text-center">
                            <div class="card">
                                <div class="card-header">
                                    <div class="card-title">
                                        POSTULANTES
                                    </div>
                                    <div class="row">
                                        <div class="col-12">
                                            <input
                                                type="text"
                                                class="form-control"
                                                id="search-postulantes"
                                                placeholder="Busqueda por Nombre, DNI"
                                            />
                                        </div>
                                    </div>
                                </div>
                                <div
                                    class="card-body"
                                    id="result-postulantes"
                                    data-url="{{ route('admin.postulants.getrows.puesto', ['jobId' => $job->id]) }}"
                                    data-state="postulante"
                                ></div>
                            </div>
                        </div>
                    @endif 
                    @if(auth()->user()->role == 'admin')
                        <div class="col-sm-3 text-center">
                            <div class="card">
                                <div class="card-header">
                                    <div class="card-title">
                                        ENTREVISTA
                                    </div>
                                    <div class="row">
                                        <div class="col-12">
                                            <input
                                                type="text"
                                                class="form-control"
                                                id="search-entrevista"
                                                placeholder="Busqueda por Nombre, DNI"
                                            />
                                        </div>
                                    </div>
                                </div>
                                <div
                                    class="card-body"
                                    id="result-entrevista"
                                    data-url="{{ route('admin.postulants.getrows.puesto', ['jobId' => $job->id]) }}"
                                    data-state="entrevista"
                                ></div>
                            </div>
                        </div>
                    @endif
                    @if(auth()->user()->role == 'business')
                        <div class="col-sm-3 text-center"></div>
                    @endif
                    <div class="col-sm-3 text-center">
                        <div class="card">
                            <div class="card-header">
                                <div class="card-title">
                                    EVALUACION
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <input
                                            type="text"
                                            class="form-control"
                                            id="search-evaluacion"
                                            placeholder="Busqueda por Nombre, DNI"
                                        />
                                    </div>
                                </div>
                            </div>
                            <div
                                class="card-body"
                                id="result-evaluacion"
                                data-url="{{ route('admin.postulants.getrows.puesto', ['jobId' => $job->id]) }}"
                                data-state="evaluacion"
                            ></div>
                        </div>
                    </div>
                    <div class="col-sm-3 text-center">
                        <div class="card">
                            <div class="card-header">
                                <div class="card-title">
                                    ENTREVISTA CON CLIENTE
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <input
                                            type="text"
                                            class="form-control"
                                            id="search-cliente"
                                            placeholder="Busqueda por Nombre, DNI"
                                        />
                                    </div>
                                </div>
                            </div>
                            <div
                                class="card-body"
                                id="result-cliente"
                                data-url="{{ route('admin.postulants.getrows.puesto', ['jobId' => $job->id]) }}"
                                data-state="cliente"
                            ></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="history" role="tabpanel" aria-labelledby="history-tab">
                <div class="row">
                    <div class="col-sm-12">
                        <ul class="list-group">
                            @foreach ($postulations as $p)
                                <li class="list-group-item postulant" id="p{{ $p->id}}" data-p="{{ $p->id}}">
                                    {{ isset($p->user->name) ? $p->user->name : '' }}
                                    {{ isset($p->user->lastname) ? $p->user->lastname : '' }}
                                    <small class="text-muted">
                                        {{ Carbon::parse($p->created_at)->format('l, j \d\e F Y') }}
                                    </small>
                                </li>
                            @endforeach
                            @forelse ($postulationsInReview as $p)
                            <li class="list-group-item postulant" id="p{{ $p->id}}" data-p="{{ $p->id}}">
                                <span>
                                    {{ isset($p->user->name) ? $p->user->name : '' }}
                                    {{ isset($p->user->lastname) ? $p->user->lastname : '' }}
                                    <small class="text-muted">{{ Carbon::parse($p->created_at)->format('l, j \d\e F Y') }}</small>
                                </span>
                                <a href="{{ route('admin.postulants.revertApproved', $p->id) }}"
                                    class="btn btn-small text-danger">revertir</a>
                            </li>
                            @empty
                            <h4>No hay postulaciones en revisión por el momento</h4>
                            @endforelse
                        </ul>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="approved" role="tabpanel" aria-labelledby="approved-tab">
                <div class="row">
                    <div class="col-sm-12">
                        <ul class="list-group">
                            @forelse ($postulationsApproved as $p)
                            <li class="list-group-item d-flex justify-content-between align-items-center postulant"
                                id="p{{ $p->id}}" data-p="{{ $p->id}}">
                                <span>
                                    {{ isset($p->user->name) ? $p->user->name : '' }}
                                    {{ isset($p->user->lastname) ? $p->user->lastname : '' }}
                                    <small class="text-muted">{{ Carbon::parse($p->created_at)->format('l, j \d\e F Y') }}</small>
                                </span>
                                <a href="{{ route('admin.postulants.revertApproved', $p->id) }}"
                                    class="btn btn-small text-danger">revertir</a>
                            </li>
                            @empty
                            <h4>No hay postulaciones aprobadas por el momento</h4>
                            @endforelse
                        </ul>

                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="rejected" role="tabpanel" aria-labelledby="rejected-tab">
                <div class="row">
                    <div class="col-sm-12">
                        <ul class="list-group">
                            @forelse ($postulationsRejected as $p)
                            <li class="list-group-item postulant" id="p{{ $p->id}}" data-p="{{ $p->id}}">
                                <span>
                                    {{ isset($p->user->name) ? $p->user->name : '' }}
                                    {{ isset($p->user->lastname) ? $p->user->lastname : '' }}
                                    <small class="text-muted">{{ Carbon::parse($p->created_at)->format('l, j \d\e F Y') }}</small>
                                </span>
                                <a href="{{ route('admin.postulants.revertApproved', $p->id) }}"
                                    class="btn btn-small text-danger">revertir</a>
                            </li>
                            @empty
                            <h4>No hay postulaciones desaprobadas por el momento</h4>
                            @endforelse
                        </ul>

                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="inReview" role="tabpanel" aria-labelledby="inReview-tab">
                <div class="row">
                    <div class="col-sm-12">
                        <ul class="list-group">
                            @forelse ($postulationsInReview as $p)
                            <li class="list-group-item postulant" id="p{{ $p->id}}" data-p="{{ $p->id}}">
                                <span>
                                    {{ isset($p->user->name) ? $p->user->name : '' }}
                                    {{ isset($p->user->lastname) ? $p->user->lastname : '' }}
                                    <small class="text-muted">{{ Carbon::parse($p->created_at)->format('l, j \d\e F Y') }}</small>
                                </span>
                                <a href="{{ route('admin.postulants.revertApproved', $p->id) }}"
                                    class="btn btn-small text-danger">revertir</a>
                            </li>
                            @empty
                            <h4>No hay postulaciones en revisión por el momento</h4>
                            @endforelse
                        </ul>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="createPostulantModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            @include('admin.postulants.create-modal', ['job_id' => $job->id])
        </div>
    </div>
</div>

<!-- Modal Detail -->
<div class="modal fade" id="showPostulantModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        </div>
    </div>
</div>
<div class="tooltip bs-tooltip-top" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">
        Some tooltip text!
    </div>
</div>
@endsection

@push('scripts')
    <style>
        .pub {
            overflow: hidden;
            max-height: 100px;
            margin-bottom: 30px;
        }
    </style>
    <script>
        $(window).on('load', () => {
            setTimeout(() => {
                $('[data-toggle="tooltip"]').tooltip()
            }, 1000)
            
            $('#filter').on('click', function (){
                let filter_state = $('#filter_state').val();
                let filter_created_at_from = $('#filter_created_at_from').val();
                let filter_created_at_to = $('#filter_created_at_to').val();
                let filter_salary_from = $('#filter_salary_from').val();
                let filter_salary_to = $('#filter_salary_to').val();

                getPostulantes('', filter_state+':'+filter_created_at_from+':'+filter_created_at_to+':'+filter_salary_from+':'+filter_salary_to)
                getEntrevista('', filter_state+':'+filter_created_at_from+':'+filter_created_at_to+':'+filter_salary_from+':'+filter_salary_to)
                getEvaluacion('', filter_state+':'+filter_created_at_from+':'+filter_created_at_to+':'+filter_salary_from+':'+filter_salary_to)
                getCliente('', filter_state+':'+filter_created_at_from+':'+filter_created_at_to+':'+filter_salary_from+':'+filter_salary_to)
                
            });
            
        })
        
        function getPostulantes(term = '', filters = '') {
            const $box  = $('#result-postulantes');
            const url   = $box.data('url');
            const state = $box.data('state');
            
            $.get(url,
            { term: term, state: state, filters: filters },
            function(response) {
                $box.html(response);
            });
        }

        function getEntrevista(term = '', filters = '') {
            const $box      = $('#result-entrevista');
            const url   = $box.data('url');
            const state = $box.data('state');
            
            $.get(url,
            { term: term, state: state, filters: filters },
            function(response) {
                $box.html(response);
            });
        }

        function getEvaluacion(term = '', filters = '') {
            const $box      = $('#result-evaluacion');
            const url   = $box.data('url');
            const state = $box.data('state');
            
            $.get(url,
            { term: term, state: state, filters: filters },
            function(response) {
                $box.html(response);
            });
        }

        function getCliente(term = '', filters = '') {
            const $box      = $('#result-cliente');
            const url   = $box.data('url');
            const state = $box.data('state');
            
            $.get(url,
            { term: term, state: state, filters: filters },
            function(response) {
                $box.html(response);
            });
        }

        function openPostulante(id) {
            $('#showPostulantModal .modal-content').load(`/admin/postulante/${id}`);
            $('#showPostulantModal').modal('show');
        }

        (function () {
            $('#toggleDesc').click(function () {
                $('#description').toggleClass('pub');
            });

            $('#status').on('change', function () {
                let resp = confirm('Esta seguro que Desea Cambiar el estado?');

                if (! resp) {
                    return;
                }

                $('#formUpdateStatus').submit();
                startLoading();
            });

            getPostulantes();
            getEntrevista();
            getEvaluacion();
            getCliente();

            $('#search-postulantes').on('keyup', function(event) {
                getPostulantes(event.target.value);
            });

            $('#search-entrevista').on('keyup', function(event) {
                getEntrevista(event.target.value);
            });

            $('#search-evaluacion').on('keyup', function(event) {
                getEvaluacion(event.target.value);
            });

            $('#search-cliente').on('keyup', function(event) {
                getCliente(event.target.value);
            });
        })();
    </script>
@endpush