@extends('adminlte::page')
@section('title', env('APP_NAME') .' - Colaboradores')
@section('content_header')
    <h1>Nuevo Colaborador</h1>
@stop
@section('content')
    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">Nuevo Colaborador</h2>
                </div>
                <div class="card-body">


                    <form action="" method="POST" id="form-empleado">
                        @csrf

                        <small class="text-muted">Busque el colaborador por DNI</small>
                        <div class="row">

                            <div class="col">
                                <div class="form-group">
                                    <label for="tipo_documento">Tipo de Documento</label>
                                    <select id="tipo_documento" name="tipo_documento" class="form-control" required>
                                        <option value="1">DNI</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col">
                                <div class="form-group">
                                    <label for="documento">Documento</label>
                                    <div class="input-group">
                                        <input type="text" id="documento" name="documento" class="form-control" required>
                                        <div class="input-group-append">
                                            <button type="button" id="searchDocumentBtn" class="btn btn-outline-secondary">
                                                <i class="fa fa-search"></i> Buscar
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>
                        <small class="text-muted">Si no encuentra el colaborador, puede registrarlo manualmente.</small>


                        <hr>
                        <div class="form-group">
                            <label for="turnos">Turnos</label>
                            <select name="turnos[]" id="turnos" class="form-control" multiple required>
                                @foreach ($turnos as $turno)
                                    <option value="{{ $turno->id }}">{{ $turno->descripcion }}</option>
                                @endforeach
                            </select>
                            <small class="text-muted">Puede seleccionar múltiples turnos. Use Ctrl+Click para selección múltiple.</small>
                        </div>
                        <div class="form-group">
                            <label for="codigo">DNI / C.E</label>
                            <input type="text" name="codigo" id="dni" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="nombre">Nombre</label>
                            <input type="text" name="nombre" id="nombre" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="apellido">Apellido</label>
                            <input type="text" name="apellido" id="apellidos" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="cargo">Cargo</label>
                            <input type="text" name="cargo" id="cargo" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="celular">Celular</label>
                            <input type="text" name="celular" id="celular" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="fecha_ingreso_laboral">Fecha de Ingreso Laboral</label>
                            <input type="date" name="fecha_ingreso_laboral" id="fecha_ingreso_laboral" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="estado">Estado</label>
                            <select name="estado" class="form-control" required>
                                <option value="1">Activo</option>
                                <option value="0">Inactivo</option>
                            </select>
                        </div>
                        <button type="button" class="btn btn-primary mr-2" id="btnGuardar"> <i class="fa fa-save"></i> Registrar</button>
                        <a href="{{ route('empleados.index') }}" class="btn btn-warning"> <i class="fa fa-list"></i> Lista de Colaboradores</a>
                    </form>

                </div>
            </div>
        </div>
    </div>
@stop
@section('css')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    span.select2-selection__choice__display{
        color: black !important;
    }
</style>

@stop
@section('js')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {

            $('#turnos').select2({
                placeholder: 'Seleccione los turnos',
                allowClear: true,
                multiple: true
            });

            $('#btnGuardar').click(function(e) {
                e.preventDefault();

                const formData = new FormData($('#form-empleado')[0]);

                $.ajax({
                    url: '{{ route('empleados.store') }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if (response.success) {
                            Swal.fire({
                                title: '¡Éxito!',
                                text: response.message,
                                icon: 'success',
                                confirmButtonText: 'OK'
                            });
                            $('#form-empleado')[0].reset();
                            location.href = "{{ route('empleados.index') }}";

                        } else {
                            Swal.fire({
                                title: 'Error',
                                text: response.message,
                                icon: 'error'
                            });
                        }
                    },
                    error: function(xhr, status, error) {
                        Swal.fire({
                            title: 'Error',
                            text: xhr.responseText,
                            icon: 'error'
                        });
                        console.log(xhr.responseText);
                    }
                });
            });



            // Buscar cliente por documento
            $('#searchDocumentBtn').on('click', function() {
                let documento = $('#documento').val();
                let tipoDocumento = $('#tipo_documento').val();

                console.log(documento, tipoDocumento);

                $.ajax({
                    url: "{{ route('empleados.search') }}",
                    type: 'POST',
                    data: {
                        documento: documento,
                        tipo_documento: tipoDocumento,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        if (response.success) {

                            $('#dni').val(response.data.dni);
                            $('#nombre').val(response.data.nombres);
                            $('#apellidos').val(response.data.apellidos);
                            $('#cargo').val(response.data.cargo);
                            $('#celular').val(response.data.celular);


                        } else {
                            Swal.fire({
                                title: 'Error!',
                                text: response.message,
                                icon: 'error',
                                confirmButtonText: 'OK'
                            });
                        }
                    },
                    error: function(xhr) {
                        Swal.fire({
                            title: 'Error!',
                            text: 'No se pudo realizar la búsqueda.',
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            });



        });
    </script>
@stop