@extends('layout.administrator.index')
@section('title', 'Consecuencias')

@section('css')
    <style>
        .dataTables_wrapper .dataTables_filter { display: none; }
    </style>
@endsection

@section('content')
    <div class="content-wrapper">
        <section class="content-header">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('administrator.dashboard') }}"><i class="fa fa-dashboard"></i>
                        Inicio</a></li>
                <li class="breadcrumb-item"><a href="{{ route('administrator.comments.index') }}">Comentarios</a></li>
                <li class="breadcrumb-item active">Consecuencias</li>
            </ol>
        </section>

        <section class="content">
            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif
            @if (session('danger'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    {{ session('danger') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            <div class="row">
                <div class="col-lg-12">
                    <div class="row mb-4 text-center">
                        <div class="col-md-6">
                            <div class="card shadow-sm border-0">
                                <div class="card-body">
                                    <h6 class="text-muted mb-1">Total Consecuencias</h6>
                                    <h3 class="fw-bold mb-0">{{ $consequences_all }}</h3>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card shadow-sm border-0">
                                <div class="card-body">
                                    <h6 class="text-muted mb-1">Activas</h6>
                                    <h3 class="fw-bold mb-0">{{ $consequences_active }}</h3>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Filtros --}}
                    <form action="{{ route('administrator.consequences.index') }}" method="get" class="mb-3">
                        <div class="row g-2 align-items-end">
                            <div class="col-md-3">
                                <label class="form-label">Código</label>
                                <input type="text" name="code" class="form-control" value="{{ request()->code }}" placeholder="Filtrar por código">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Tipo</label>
                                <input type="text" name="type" class="form-control" value="{{ request()->type }}" placeholder="Filtrar por tipo">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Estado</label>
                                <select name="status" class="form-control">
                                    <option value="">Todos</option>
                                    <option value="1" {{ request()->status === '1' ? 'selected' : '' }}>Activo</option>
                                    <option value="0" {{ request()->status === '0' ? 'selected' : '' }}>Inactivo</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <button type="submit" class="btn btn-info btn-sm"><i class="fa fa-search"></i> Buscar</button>
                                <a href="{{ route('administrator.consequences.index') }}" class="btn btn-danger btn-sm"><i class="fa fa-refresh"></i></a>
                            </div>
                        </div>
                    </form>

                    <div class="box">
                        <div class="box-header with-border">
                            <div class="row align-items-center">
                                <div class="col-6">
                                    <h4 class="box-title">Consecuencias</h4>
                                </div>
                                <div class="col-6">
                                    <div class="box-controls pull-right">
                                        <div class="box-header-actions">
                                            <button type="button" class="btn btn-sm btn-info pointer"
                                                data-toggle="modal" data-target="#idAddConsequence">
                                                <i class="fa fa-plus"></i> Nueva consecuencia
                                            </button>
                                            &nbsp;
                                            <a href="{{ route('administrator.causes.index') }}" class="btn btn-sm btn-warning">
                                                <i class="fa fa-list"></i> Causas
                                            </a>
                                            &nbsp;
                                            <a href="{{ route('administrator.comments.index') }}" class="btn btn-sm btn-default">
                                                <i class="fa fa-comments"></i> Comentarios
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="box-body">
                            <table class="table table-sm table-hover table-responsive" id="consequencesTable">
                                <thead>
                                    <tr>
                                        <th class="text-center">Código</th>
                                        <th class="text-center">Tipo</th>
                                        <th class="text-center">Consecuencia Técnica</th>
                                        <th class="text-center">Comentario Estándar</th>
                                        <th class="text-center">Estado</th>
                                        <th class="text-center">Fecha Creación</th>
                                        <th class="text-center">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody class="text-center">
                                    @foreach ($consequences as $consecuencia)
                                        <tr>
                                            <td>{{ $consecuencia->code }}</td>
                                            <td>{{ $consecuencia->type ?? '-' }}</td>
                                            <td>{{ $consecuencia->technical_consequence ?? '-' }}</td>
                                            <td>{{ $consecuencia->consequence_text }}</td>
                                            <td>
                                                @if ($consecuencia->status == 1)
                                                    <span class="badge badge-success">Activo</span>
                                                @else
                                                    <span class="badge badge-danger">Inactivo</span>
                                                @endif
                                            </td>
                                            <td>{{ $consecuencia->created_at ? $consecuencia->created_at->format('d/m/Y') : '-' }}</td>
                                            <td>
                                                <button type="button"
                                                    class="btn btn-xs btn-warning btnEditConsequence"
                                                    data-id="{{ $consecuencia->id }}">
                                                    <i class="fa fa-pencil"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    {{-- Modal Crear --}}
    <div class="modal fade" id="idAddConsequence" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Nueva Consecuencia</h5>
                </div>
                <div class="modal-body">
                    <form action="{{ route('administrator.consequences.store') }}" method="post">
                        @csrf
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label for="consequence_code" class="form-label">Código</label>
                                <input type="text" id="consequence_code" name="consequence_code" class="form-control">
                            </div>
                            <div class="col-md-8">
                                <label for="type" class="form-label">Tipo</label>
                                <input type="text" id="type" name="type" class="form-control">
                            </div>
                            <div class="col-md-12">
                                <label for="technical_consequence" class="form-label">Consecuencia Técnica</label>
                                <textarea class="form-control" id="technical_consequence" name="technical_consequence" rows="2"></textarea>
                            </div>
                            <div class="col-md-12">
                                <label for="consequence_text" class="form-label">Comentario Estándar</label>
                                <textarea class="form-control" id="consequence_text" name="consequence_text" rows="2"></textarea>
                            </div>
                        </div>
                        <div class="mt-4 text-right">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                            <button type="submit" class="btn btn-info">Guardar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Editar --}}
    <div class="modal fade" id="idEditConsequence" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Editar Consecuencia</h5>
                </div>
                <div class="modal-body">
                    <form id="formEditConsequence" method="POST">
                        @csrf
                        @method('PUT')

                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label">Código</label>
                                <input type="text" id="edit_code" name="consequence_code" class="form-control">
                            </div>
                            <div class="col-md-8">
                                <label class="form-label">Tipo</label>
                                <input type="text" id="edit_type" name="type" class="form-control">
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">Consecuencia Técnica</label>
                                <textarea id="edit_technical" name="technical_consequence" class="form-control" rows="2"></textarea>
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">Comentario Estándar</label>
                                <textarea id="edit_text" name="consequence_text" class="form-control" rows="2"></textarea>
                            </div>
                            <div class="col-md-12 mt-3">
                                <div class="form-check form-switch">
                                    <input type="checkbox" id="edit_status" name="status" class="form-check-input">
                                    <label for="edit_status" class="form-check-label">Activo</label>
                                </div>
                            </div>
                        </div>

                        <div class="mt-4 text-right">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                            <button type="submit" class="btn btn-info">Actualizar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#consequencesTable').DataTable({
                language: {
                    lengthMenu: 'Mostrar _MENU_ registros',
                    info: 'Mostrando _START_ a _END_ de _TOTAL_ registros',
                    infoEmpty: 'Mostrando 0 a 0 de 0 registros',
                    zeroRecords: 'Sin resultados',
                    search: 'Buscar:',
                    paginate: {
                        first: 'Primero',
                        last: 'Último',
                        next: 'Siguiente',
                        previous: 'Anterior'
                    }
                }
            });
        });
    </script>
    <script type="text/javascript">
        document.querySelectorAll('.btnEditConsequence').forEach(function (btn) {
            btn.addEventListener('click', function () {
                const id = this.dataset.id;

                fetch(`/administrator/consequences/${id}/json`)
                    .then(function (res) { return res.json(); })
                    .then(function (data) {
                        document.getElementById('edit_code').value = data.code;
                        document.getElementById('edit_type').value = data.type || '';
                        document.getElementById('edit_text').value = data.consequence_text;
                        document.getElementById('edit_technical').value = data.technical_consequence || '';
                        document.getElementById('edit_status').checked = data.status == 1;

                        document.getElementById('formEditConsequence').action =
                            `/administrator/consequences/update/${id}`;

                        $('#idEditConsequence').modal('show');
                    });
            });
        });
    </script>
@endsection