@extends('layouts.app')

@section('title', 'Postulantes')
@section('pagename', 'Postulantes')

@section('content')
<div class="d-flex flex-row-reverse bd-highlight">
    <div class="p-2 bd-highlight">
        &nbsp;
    </div>
</div>
<div>
    <form id="form-search">
        <h3 class="mb-4">Buscador:</h3>
        <div class="row">
            <div class="col-12 col-md-6 col-lg-3 col-xl-2 mb-3">
                <label>Nombre, Apellido o DNI</label>
                <input type="search" name="searchTerm" id="searchTerm"
                    placeholder="Buscar por: Nombre, Apellido o DNI"
                    class="form-control"
                />
            </div>
            <div class="col-12 col-md-6 col-lg-3 col-xl-2 mb-3">
                <label>Estado</label>
                <select name="searchStatus" id="searchStatus"
                    class="form-control">
                    <option value="1">Activos</option>
                    <option value="0">Eliminados</option>
                </select>
            </div>
            <div class="col-12 col-md-6 col-lg-3 col-xl-2 mb-3">
                <label>Fecha Desde</label>
                <input
                    type="date"
                    name="searchDateFrom"
                    id="searchDateFrom"
                    placeholder="Fecha Desde"
                    class="form-control"
                />
            </div>
            <div class="col-12 col-md-6 col-lg-3 col-xl-2 mb-3">
                <label>Fecha Hasta</label>
                <input
                    type="date"
                    name="searchDateTo"
                    id="searchDateTo"
                    placeholder="Fecha Hasta"
                    class="form-control"
                />
            </div>
            <div class="col-12 col-md-6 col-lg-3 col-xl-2 mb-3">
                <label>Salario Desde</label>
                <input
                    type="text"
                    name="searchSalaryFrom"
                    id="searchSalaryFrom"
                    placeholder="Salario Desde"
                    class="form-control"
                />
            </div>
            <div class="col-12 col-md-6 col-lg-3 col-xl-2 mb-3">
                <label>Salario Hasta</label>
                <input
                    type="text"
                    name="searchSalaryTo"
                    id="searchSalaryTo"
                    placeholder="Salario Hasta"
                    class="form-control"
                />
            </div>
        </div>
        <div class="row justify-content-end">
            <div class="col-12 col-md-6 col-lg-3 col-xl-2 mb-3">
                <button type="submit" class="btn btn-primary btn-block">Buscar</button>
            </div>
            <div class="col-12 col-md-6 col-lg-3 col-xl-2 mb-3">
                <button type="button" onClick="window.location.reload()" class="btn btn-secondary btn-block">Limpiar</button>
            </div>
        </div>
    </form>
</div>
<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <input type="text" id="routeGrid" value="{{ route('admin.postulants.getrows') }}" hidden />
            <table class="table" id="tb-grid-postulantes">
                <thead>
                    <tr>
                        <th>Nombres</th>
                        <th>DNI</th>
                        <th>Correo</th>
                        <th>Teléfono</th>
                        <th>Salario</th>
                        <th>Dispon.</th>
                        <th>Social</th>
                        <th>Fecha Postulación</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    let myDatatable;

    function search() {
        myDatatable.ajax.reload();
    }

    function getRows() {
        let url = $('#routeGrid').val();

        myDatatable = $('#tb-grid-postulantes').DataTable({
            "responsive": true,
            "processing": true,
            "serverSide": true,
            "searching": false,
            "ordering": false,
            "ajax": {
                "url": url,
                "type": "GET",
                "data": function (d) {
                    return $.extend( {}, d, {
                        "term": $('#searchTerm').val(),
                        "status": $('#searchStatus').val(),
                        "dateFrom": $('#searchDateFrom').val(),
                        "dateTo": $('#searchDateTo').val(),
                        "salaryFrom": $('#searchSalaryFrom').val(),
                        "salaryTo": $('#searchSalaryTo').val()
                    });
                }
            },
            "columns": [
                { "data": "name" },
                { "data": "dni" },
                { "data": "email" },
                { 'data': "phone" },
                { 'data': "wage" },
                { 'data': "availab" },
                {
                    "data": "social",
                    "render": function (data) {
                        return data;
                    }
                },
                { "data": "created" },
                {
                    "data": "action",
                    "render": function (data) {
                        return data;
                    }
                },
            ],
            language: {
                "sProcessing":     "Procesando...",
                "sLengthMenu":     "Mostrar _MENU_ registros",
                "sZeroRecords":    "No se encontraron resultados",
                "sEmptyTable":     "Ningun dato disponible en esta tabla",
                "sInfo":           "Mostrando del _START_ al _END_ de un total de _TOTAL_ registros",
                "sInfoEmpty":      "Mostrando registros del 0 al 0 de un total de 0 registros",
                "sInfoFiltered":   "(filtrado de un total de _MAX_ registros)",
                "sInfoPostFix":    "",
                "sSearch":         "Buscar:",
                "sUrl":            "",
                "sInfoThousands":  ",",
                "sLoadingRecords": "Cargando...",
                "oPaginate": {
                    "sFirst":    "Primero",
                    "sLast":     "Ultimo",
                    "sNext":     "Siguiente",
                    "sPrevious": "Anterior"
                },
                "oAria": {
                    "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
                    "sSortDescending": ": Activar para ordenar la columna de manera descendente"
                }
            },
        });
    }

    function deleteRow(url) {
        let rpta = confirm('Seguro que desea Eliminar este Postulante?');

        if (!rpta)
            return;

        $.post(url,
        {  _token : $("meta[name='csrf-token']").attr('content') },
        function(resp) {
            location.reload();
        });
    }

    function activateRow(url) {
        let rpta = confirm('Seguro que desea Activar este Postulante?');

        if (!rpta)
            return;

        $.post(url,
        {  _token : $("meta[name='csrf-token']").attr('content') },
        function(resp) {
            location.reload();
        });
    }

    $(document).ready(function() {
        getRows();

        $('#form-search').submit(function(e) {
            e.preventDefault();
            search();
        });
    });
</script>
@endpush