@extends('layouts.app')

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

@section('content')

@if(auth()->user()->role == 'admin')
<div class="d-flex flex-row-reverse bd-highlight">
    <div class="mb-2 bd-highlight">
        <a href="{{ route('admin.jobs.create', [], false) }}" class="btn btn-outline-primary btn-lg">
            + Registrar nuevo
        </a>
    </div>
</div>
@endif

<div class="card">
    <div class="card-body">
        @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif

        @if (session('status'))
        <div class="alert alert-success" role="alert">
            {{ session('status') }}
        </div>
        @endif

        <table id="jobsTable" class="table datatable" style="width: 100%">
            <thead>
                <tr>
                    <th scope="col">Empleo</th>
                    <th scope="col">Empresa</th>
                    <th scope="col">Status</th>
                    <th scope="col">Rango</th>
                    <th scope="col">Ubicación</th>
                    <th scope="col">Fecha/Pub.</th>
                    @if(auth()->user()->role == 'admin')
                    <th scope="col">Acciones</th>
                    @endif
                </tr>
            </thead>
            <tbody>
                @foreach ($jobs as $j)
                <tr>
                    <td class="text-left">
                        <a href="{{ route('admin.jobs.show', $j->id, false) }}" class="font-weight-bolder text-black">
                            {{ $j->title}}
                        </a>
                    </td>
                    <td>
                        @if($j->hide_business)
                            Confidencial
                        @else
                            {{ $j->business_title }}
                        @endif
                    </td>
                    <td>{{$j->status}}</td>
                    <td class="text-center">
                        <span class="text-uppercase">{{$j->currency}}</span> <br>
                        {{ $j->min }} - {{ $j->max }}
                    </td>
                    <td>{{ $j->location_title }}</td>
                    <td>{{ Carbon::parse($j->created_at)->format('d/m/Y') }}</td>
                    @if(auth()->user()->role == 'admin')
                    <td>
                        <a href="{{ route('admin.jobs.edit', $j->id, false) }}" class="btn btn-sm">
                            <i class="far fa-edit"></i>
                        </a>
                        <div style="position: relative">
                            <button class="btn btn-sm" id="j{{ $j->id}}" data-toggle="dropdown" aria-haspopup="true"
                                aria-expanded="false" onclick="clickDropdown(this)">
                                @if ($j->assigned_id)
                                <i class="fas fa-user-check"></i>
                                @else
                                <i class="far fa-user"></i>
                                @endif
                            </button>
                            <div class="dropdown-menu" aria-labelledby="j{{ $j->id}}">
                                @if ($j->assigned_id)
                                <h6 class="dropdown-header">Asignado a</h6>
                                <a class="dropdown-item disabled" tabindex="-1"
                                    aria-disabled="true">{{ $j->assigned_name }}</a>
                                <div class="dropdown-divider"></div>
                                @endif
                                <h6 class="dropdown-header">Asignar a</h6>
                                <form class="px-4 py-3" method="POST" id="selectRecruiter{{ $j->id }}"
                                    action="{{ route('admin.jobs.assign', [], false) }}">
                                    @csrf
                                    <div class="form-group">
                                        <input type="hidden" name="job_id" value="{{ $j->id }}">
                                        <input type="hidden" name="user_id" id="real_user_id" value="{{ $j->id }}">
                                        <select class="form-control" id="user_id" name="user_id"
                                            onchange="setValue(this)">
                                            <option disabled selected readonly>Selecciona un reclutador</option>
                                            @foreach ($headhunters as $hh)
                                            <option value="{{ $hh->id }} ">{{ $hh->full_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <button type="submit" class="btn btn-primary preventFormSubmit"
                                        confirmMessage="¿Seguro que desea asignar un reclutador?"
                                        form="selectRecruiter{{ $j->id }}">Asignar</button>
                                </form>
                            </div>
                        </div>
                        <form action="{{ route('admin.jobs.delete', $j, false) }}" method="post" id="deleteJob{{$j->id}}"
                            style="display: inline-block">
                            @csrf
                            @method('DELETE')
                            <button class="btn btn-sm preventFormSubmit"
                                confirmMessage="¿Seguro que quieres eliminar '{{$j->title}}?'" type="submit"
                                form="deleteJob{{$j->id}}">
                                <i class="fas fa-trash"></i>
                            </button>
                        </form>
                    </td>
                    @endif
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script>
    (function () {
        setTimeout(() => {
            jQuery('#jobsTable tbody').on('click', '.dropdown-menu', function (e) {
                e.stopPropagation();
            });
            jQuery('#user_id').on('change', function () {
                console.log($(this).val());
            });
        }, 3000);
    }());

    function setValue(event) {
        $('#real_user_id').val(event.value);
        console.log(event.value);
    }

    function clickDropdown(event) {
        const dropdown = $("body").find(`[aria-labelledby='${event.id}']`);
        if (dropdown.hasClass('show')) {
            dropdown.removeClass('show');
        } else {
            dropdown.addClass('show')
        }
    }

</script>
<style>
    .dropdown-menu.show {
        right: 0;
        left: auto;
        width: 270px;
    }

    div#jobsTable_wrapper {
        width: 100% !important;
    }

    table td,
    table th {
        white-space: normal !important;
    }

</style>
@endpush