@extends('adminlte::page')

@section('title', env('APP_NAME') . ' - Permisos de Colaboradores')
@section('plugins.Sweetalert2', true)
@section('plugins.Datatables', true)
@section('plugins.Select2', true)

@section('content_header')
    <h1>Permisos de Colaboradores</h1>
@stop

@section('content')
    <div class="row mb-3">
        <div class="col-md-12">
            @can('admin.permisos.create')
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalCrearPermiso">
                    <i class="fas fa-plus"></i> Registrar Permiso
                </button>
            @endcan
        </div>
    </div>

    <div class="card">
        <div class="card-header bg-primary text-white">
            <h2 class="card-title">
                <i class="fas fa-list"></i> Lista de Permisos
            </h2>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="permisos-table" class="table table-bordered table-hover table-striped">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Colaborador</th>
                            <th>Rango de Fechas</th>
                            <th>Motivo</th>
                            <th>Observación</th>
                            <th>Estado</th>
                            <th>Registrado por</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- DataTables cargará los datos aquí -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Modal Crear Permiso -->
    @can('admin.permisos.create')
    <div class="modal fade" id="modalCrearPermiso" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h4 class="modal-title">
                        <i class="fas fa-plus"></i> Registrar Nuevo Permiso
                    </h4>
                    <button type="button" class="close text-white" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <form id="formCrearPermiso">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="empleado_id">Colaborador <span class="text-danger">*</span></label>
                            <select name="empleado_id" id="empleado_id" class="form-control select2" style="width: 100%;" required>
                                <option value="">Seleccione un colaborador</option>
                                @foreach($empleados as $empleado)
                                    <option value="{{ $empleado->id }}">
                                        {{ $empleado->nombre }} {{ $empleado->apellido }} - {{ $empleado->codigo }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="fecha_inicio">Fecha de Inicio <span class="text-danger">*</span></label>
                            <input type="date" name="fecha_inicio" id="fecha_inicio" class="form-control" required>
                        </div>

                        <div class="form-group">
                            <label for="fecha_fin">Fecha de Fin <span class="text-danger">*</span></label>
                            <input type="date" name="fecha_fin" id="fecha_fin" class="form-control" required>
                            <small class="text-muted">Debe ser mayor o igual a la fecha de inicio</small>
                        </div>

                        <div class="form-group">
                            <label for="motivo">Motivo <span class="text-danger">*</span></label>
                            <input type="text" name="motivo" id="motivo" class="form-control"
                                   placeholder="Ej: Enfermedad, Emergencia familiar, etc." maxlength="100" required>
                        </div>

                        <div class="form-group">
                            <label for="observacion">Observación</label>
                            <textarea name="observacion" id="observacion" class="form-control" rows="3"
                                      placeholder="Detalles adicionales del permiso"></textarea>
                        </div>

                        <div class="form-group">
                            <label for="estado">Estado</label>
                            <select name="estado" id="estado" class="form-control">
                                <option value="aprobado" selected>Aprobado</option>
                                <option value="pendiente">Pendiente</option>
                                <option value="rechazado">Rechazado</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> Guardar
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @endcan

    <!-- Modal Editar Permiso -->
    @can('admin.permisos.edit')
    <div class="modal fade" id="modalEditarPermiso" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header bg-warning text-white">
                    <h4 class="modal-title">
                        <i class="fas fa-edit"></i> Editar Permiso
                    </h4>
                    <button type="button" class="close text-white" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <form id="formEditarPermiso">
                    <input type="hidden" name="permiso_id" id="edit_permiso_id">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="edit_empleado_id">Colaborador <span class="text-danger">*</span></label>
                            <select name="empleado_id" id="edit_empleado_id" class="form-control select2" style="width: 100%;" required>
                                <option value="">Seleccione un colaborador</option>
                                @foreach($empleados as $empleado)
                                    <option value="{{ $empleado->id }}">
                                        {{ $empleado->nombre }} {{ $empleado->apellido }} - {{ $empleado->codigo }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="edit_fecha_inicio">Fecha de Inicio <span class="text-danger">*</span></label>
                            <input type="date" name="fecha_inicio" id="edit_fecha_inicio" class="form-control" required>
                        </div>

                        <div class="form-group">
                            <label for="edit_fecha_fin">Fecha de Fin <span class="text-danger">*</span></label>
                            <input type="date" name="fecha_fin" id="edit_fecha_fin" class="form-control" required>
                            <small class="text-muted">Debe ser mayor o igual a la fecha de inicio</small>
                        </div>

                        <div class="form-group">
                            <label for="edit_motivo">Motivo <span class="text-danger">*</span></label>
                            <input type="text" name="motivo" id="edit_motivo" class="form-control"
                                   placeholder="Ej: Enfermedad, Emergencia familiar, etc." maxlength="100" required>
                        </div>

                        <div class="form-group">
                            <label for="edit_observacion">Observación</label>
                            <textarea name="observacion" id="edit_observacion" class="form-control" rows="3"
                                      placeholder="Detalles adicionales del permiso"></textarea>
                        </div>

                        <div class="form-group">
                            <label for="edit_estado">Estado</label>
                            <select name="estado" id="edit_estado" class="form-control">
                                <option value="pendiente">Pendiente</option>
                                <option value="aprobado">Aprobado</option>
                                <option value="rechazado">Rechazado</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-warning">
                            <i class="fas fa-save"></i> Actualizar
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @endcan

    <!-- Modal Ver Detalle Permiso -->
    @can('admin.permisos.show')
    <div class="modal fade" id="modalVerDetallePermiso" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header bg-info text-white">
                    <h4 class="modal-title">
                        <i class="fas fa-eye"></i> Detalle del Permiso
                    </h4>
                    <button type="button" class="close text-white" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="card card-outline card-info mb-3">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="fas fa-user"></i> Información del Colaborador
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <p class="mb-2">
                                        <strong>Nombre:</strong>
                                        <span id="detalle_empleado_nombre">-</span>
                                    </p>
                                    <p class="mb-0">
                                        <strong>Código:</strong>
                                        <span id="detalle_empleado_codigo">-</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card card-outline card-info mb-3">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="fas fa-calendar-alt"></i> Rango de Fechas
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <p class="mb-2">
                                        <strong>Fecha Inicio:</strong>
                                        <span id="detalle_fecha_inicio">-</span>
                                    </p>
                                    <p class="mb-2">
                                        <strong>Fecha Fin:</strong>
                                        <span id="detalle_fecha_fin">-</span>
                                    </p>
                                    <p class="mb-0">
                                        <strong>Total de Días:</strong>
                                        <span id="detalle_dias_totales" class="badge badge-primary">-</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="card card-outline card-info mb-3">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="fas fa-info-circle"></i> Detalles del Permiso
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <p class="mb-2">
                                        <strong>Motivo:</strong>
                                        <span id="detalle_motivo">-</span>
                                    </p>
                                    <p class="mb-2">
                                        <strong>Observación:</strong>
                                        <span id="detalle_observacion">-</span>
                                    </p>
                                    <p class="mb-0">
                                        <strong>Estado:</strong>
                                        <span id="detalle_estado">-</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="card card-outline card-secondary mb-3">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="fas fa-user-plus"></i> Información de Registro
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <p class="mb-2">
                                        <strong>Registrado por:</strong>
                                        <span id="detalle_registrado_por">-</span>
                                    </p>
                                    <p class="mb-0">
                                        <strong>Fecha de Registro:</strong>
                                        <span id="detalle_fecha_registro">-</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card card-outline card-secondary mb-3">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="fas fa-check-circle"></i> Información de Aprobación
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <p class="mb-2">
                                        <strong>Aprobado por:</strong>
                                        <span id="detalle_aprobado_por">-</span>
                                    </p>
                                    <p class="mb-0">
                                        <strong>Fecha de Aprobación:</strong>
                                        <span id="detalle_fecha_aprobacion">-</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        <i class="fas fa-times"></i> Cerrar
                    </button>
                </div>
            </div>
        </div>
    </div>
    @endcan
@stop

@section('css')
<style>
    .select2-container--default .select2-selection--single {
        background-color: #fff;
        border: 1px solid #aaa;
        border-radius: 4px;
        height: 35px !important;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 35px !important;
        padding-left: 12px;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 35px !important;
    }
    .select2-dropdown {
        z-index: 9999 !important;
    }
</style>
@stop

@section('js')
<script>
$(document).ready(function() {
    // Inicializar Select2 para el modal de crear cuando se abre
    $('#modalCrearPermiso').on('shown.bs.modal', function() {
        if (!$('#empleado_id').hasClass('select2-hidden-accessible')) {
            $('#empleado_id').select2({
                placeholder: 'Seleccione un colaborador',
                dropdownParent: $('#modalCrearPermiso'),
                allowClear: true,
                width: '100%',
                language: {
                    noResults: function() {
                        return "No se encontraron colaboradores";
                    },
                    searching: function() {
                        return "Buscando...";
                    }
                }
            });
        }
    });

    // Limpiar select2 cuando se cierra el modal de crear
    $('#modalCrearPermiso').on('hidden.bs.modal', function() {
        if ($('#empleado_id').hasClass('select2-hidden-accessible')) {
            $('#empleado_id').select2('destroy');
        }
    });

    // Limpiar select2 cuando se cierra el modal de editar
    $('#modalEditarPermiso').on('hidden.bs.modal', function() {
        if ($('#edit_empleado_id').hasClass('select2-hidden-accessible')) {
            $('#edit_empleado_id').select2('destroy');
        }
        // Limpiar formulario
        $('#formEditarPermiso')[0].reset();
    });

    // Validar que fecha_fin >= fecha_inicio
    $('#fecha_inicio, #edit_fecha_inicio').on('change', function() {
        var fechaInicio = $(this).val();
        var fechaFinId = $(this).attr('id') === 'fecha_inicio' ? '#fecha_fin' : '#edit_fecha_fin';
        $(fechaFinId).attr('min', fechaInicio);
        if ($(fechaFinId).val() && $(fechaFinId).val() < fechaInicio) {
            $(fechaFinId).val(fechaInicio);
        }
    });

    // Ver detalle permiso
    $(document).on('click', '.btn-ver-detalle-permiso', function(e) {
        e.preventDefault();
        var permisoId = $(this).data('permiso-id');

        $.ajax({
            url: "{{ url('permisos') }}/" + permisoId,
            type: 'GET',
            success: function(response) {
                if (response.success) {
                    var permiso = response.permiso;

                    // Información del colaborador
                    $('#detalle_empleado_nombre').text(permiso.empleado_nombre);
                    $('#detalle_empleado_codigo').text(permiso.empleado_codigo);

                    // Rango de fechas
                    $('#detalle_fecha_inicio').text(permiso.fecha_inicio_formatted);
                    $('#detalle_fecha_fin').text(permiso.fecha_fin_formatted);
                    $('#detalle_dias_totales').text(permiso.dias_totales + ' día(s)');

                    // Detalles del permiso
                    $('#detalle_motivo').text(permiso.motivo || '-');
                    $('#detalle_observacion').text(permiso.observacion || 'Sin observaciones');
                    $('#detalle_estado').html('<span class="badge badge-' + permiso.estado_badge + '">' +
                        (permiso.estado.charAt(0).toUpperCase() + permiso.estado.slice(1)) + '</span>');

                    // Información de registro
                    $('#detalle_registrado_por').text(permiso.registrado_por);
                    $('#detalle_fecha_registro').text(permiso.fecha_registro);

                    // Información de aprobación
                    $('#detalle_aprobado_por').text(permiso.aprobado_por || 'N/A');
                    $('#detalle_fecha_aprobacion').text(permiso.fecha_aprobacion || 'N/A');

                    // Abrir modal
                    $('#modalVerDetallePermiso').modal('show');
                }
            },
            error: function(xhr) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'No se pudo cargar la información del permiso'
                });
            }
        });
    });

    // Inicializar DataTable
    var table = $('#permisos-table').DataTable({
        processing: true,
        serverSide: false,
        ajax: {
            url: "{{ route('permisos.index') }}",
            type: 'GET'
        },
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'empleado_nombre', name: 'empleado_nombre' },
            { data: 'fecha_permiso_formatted', name: 'fecha_permiso' },
            { data: 'motivo', name: 'motivo' },
            { data: 'observacion', name: 'observacion', defaultContent: '-' },
            { data: 'estado_badge', name: 'estado', orderable: false },
            { data: 'usuario.name', name: 'usuario.name', defaultContent: '-' },
            { data: 'acciones', name: 'acciones', orderable: false, searchable: false }
        ],
        language: {
            url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/es-ES.json'
        },
        order: [[2, 'desc']] // Ordenar por fecha descendente
    });

    // Crear permiso
    $('#formCrearPermiso').on('submit', function(e) {
        e.preventDefault();

        $.ajax({
            url: "{{ route('permisos.store') }}",
            type: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                if (response.success) {
                    Swal.fire({
                        icon: 'success',
                        title: '¡Éxito!',
                        text: response.message,
                        timer: 2000,
                        showConfirmButton: false
                    });
                    $('#modalCrearPermiso').modal('hide');
                    $('#formCrearPermiso')[0].reset();
                    $('#empleado_id').val(null).trigger('change');
                    table.ajax.reload();
                }
            },
            error: function(xhr) {
                var message = 'Error al registrar el permiso';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    message = xhr.responseJSON.message;
                }
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: message
                });
            }
        });
    });

    // Editar permiso
    $(document).on('click', '.btn-editar-permiso', function(e) {
        e.preventDefault();
        var permisoId = $(this).data('permiso-id');

        $.ajax({
            url: "{{ url('permisos') }}/" + permisoId + "/edit",
            type: 'GET',
            success: function(response) {
                if (response.success) {
                    var permiso = response.permiso;
                    $('#edit_permiso_id').val(permiso.id);
                    $('#edit_fecha_inicio').val(permiso.fecha_inicio);
                    $('#edit_fecha_fin').val(permiso.fecha_fin);
                    $('#edit_motivo').val(permiso.motivo);
                    $('#edit_observacion').val(permiso.observacion);
                    $('#edit_estado').val(permiso.estado);

                    // Abrir modal primero
                    $('#modalEditarPermiso').modal('show');

                    // Inicializar/actualizar select2 cuando el modal esté visible
                    setTimeout(function() {
                        if ($('#edit_empleado_id').hasClass('select2-hidden-accessible')) {
                            $('#edit_empleado_id').select2('destroy');
                        }
                        $('#edit_empleado_id').select2({
                            placeholder: 'Seleccione un colaborador',
                            dropdownParent: $('#modalEditarPermiso'),
                            allowClear: true,
                            width: '100%',
                            language: {
                                noResults: function() {
                                    return "No se encontraron colaboradores";
                                },
                                searching: function() {
                                    return "Buscando...";
                                }
                            }
                        });
                        $('#edit_empleado_id').val(permiso.empleado_id).trigger('change');
                    }, 300);
                }
            }
        });
    });

    // Actualizar permiso
    $('#formEditarPermiso').on('submit', function(e) {
        e.preventDefault();
        var permisoId = $('#edit_permiso_id').val();

        $.ajax({
            url: "{{ url('permisos') }}/" + permisoId,
            type: 'PUT',
            data: $(this).serialize(),
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {
                    Swal.fire({
                        icon: 'success',
                        title: '¡Éxito!',
                        text: response.message,
                        timer: 2000,
                        showConfirmButton: false
                    });
                    $('#modalEditarPermiso').modal('hide');
                    table.ajax.reload();
                }
            },
            error: function(xhr) {
                var message = 'Error al actualizar el permiso';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    message = xhr.responseJSON.message;
                }
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: message
                });
            }
        });
    });

    // Aprobar permiso
    $(document).on('click', '.btn-aprobar-permiso', function(e) {
        e.preventDefault();
        var permisoId = $(this).data('permiso-id');

        Swal.fire({
            title: '¿Aprobar permiso?',
            text: 'Esta acción no se puede deshacer',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#28a745',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Sí, aprobar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "{{ url('permisos') }}/" + permisoId + "/aprobar",
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response.success) {
                            Swal.fire({
                                icon: 'success',
                                title: '¡Aprobado!',
                                text: response.message,
                                timer: 2000,
                                showConfirmButton: false
                            });
                            table.ajax.reload();
                        }
                    }
                });
            }
        });
    });

    // Rechazar permiso
    $(document).on('click', '.btn-rechazar-permiso', function(e) {
        e.preventDefault();
        var permisoId = $(this).data('permiso-id');

        Swal.fire({
            title: '¿Rechazar permiso?',
            text: 'Esta acción no se puede deshacer',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#dc3545',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Sí, rechazar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "{{ url('permisos') }}/" + permisoId + "/rechazar",
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Rechazado',
                                text: response.message,
                                timer: 2000,
                                showConfirmButton: false
                            });
                            table.ajax.reload();
                        }
                    }
                });
            }
        });
    });

    // Eliminar permiso
    $(document).on('click', '.btn-eliminar-permiso', function(e) {
        e.preventDefault();
        var permisoId = $(this).data('permiso-id');

        Swal.fire({
            title: '¿Eliminar permiso?',
            text: 'Esta acción no se puede deshacer',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#dc3545',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "{{ url('permisos') }}/" + permisoId,
                    type: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Eliminado',
                                text: response.message,
                                timer: 2000,
                                showConfirmButton: false
                            });
                            table.ajax.reload();
                        }
                    }
                });
            }
        });
    });
});
</script>
@stop