@extends('layout.template')
@section('title', 'Especialidades y Duplicados | SICCAP')
@section('content')

<div class="content-body">
    <div class="container-fluid">
        <div class="row page-titles mx-0 mt-4 shadow-sm"
            style="border-radius: 12px; border: none; background: white; padding: 1.5rem;">
            <div class="col-sm-12 p-md-0 card-body">
                <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                    <div>
                        <h3 class="mb-2" style="font-weight: 700; color: #2C3E50;">Impresiones</h3>
                    </div>
                    <div class="d-flex gap-2">
                        @puede('Impresiones', 'entrar_especialidades')
                        <a href="{{ route('control.especialidades') }}"
                            class="btn btn-secondary btn-sm d-flex align-items-center gap-2 shadow-sm"
                            style="border-radius: 8px; font-weight: 600;">
                            <i class="la la-bookmark la-2x text-white"></i><span style="font-size: 12px;"
                                class="text-white">Imprimir
                                Especialidad</span>
                        </a>
                        @endpuede
                        @puede('Impresiones', 'entrar_duplicados')
                        <a href="{{ route('control.impresion') }}"
                            class="btn btn-success btn-sm d-flex align-items-center gap-2 shadow-sm"
                            style="border-radius: 8px; font-weight: 600;">
                            <i class="la la-print la-2x text-white"></i> <span style="font-size: 12px;"
                                class="text-white">Imprimir
                                Duplicado</span>
                        </a>
                        @endpuede
                    </div>
                </div>

                @if (Session::get('username') == 'sonia_machorro' || Session::get('username') == 'admin')
                    <div class="mt-4 pt-3 border-top">
                        <form method="POST" action="{{ route('impresiones.buscar') }}" id="filtroForm"
                            class="row gx-3 gy-2 align-items-center">
                            @csrf
                            <div class="col-lg-8">
                                <div class="input-group shadow-sm" style="border-radius: 8px; overflow: hidden;">
                                    <span class="input-group-text bg-white border-end-0 text-muted">
                                        <i class="fa fa-search"></i>
                                    </span>
                                    <input type="text" name="busca" class="form-control border-start-0 ps-0"
                                        style="text-transform: uppercase; height: 45px;" value="{{ $busqueda }}"
                                        placeholder="Nombre capacitando | CURP | Nombre del Curso" required>
                                </div>
                            </div>
                            <div class="col-lg-4 d-flex gap-2">
                                <button type="submit" class="btn btn-primary w-100 shadow-sm"
                                    style="border-radius: 8px; font-weight: 600; height: 45px;">
                                    Buscar registro
                                </button>
                                <a href="{{ route('impresiones.index') }}" class="btn btn-outline-danger shadow-sm"
                                    style="border-radius: 8px; font-weight: 600; height: 45px; width: 120px;">
                                    Limpiar
                                </a>
                            </div>
                        </form>
                    </div>
                @endif
            </div>
        </div>

        <!-- Table Results Card -->
        <div class="row mt-4">
            <div class="col-12">
                <div class="card shadow-sm" style="border-radius: 12px; border: none; overflow: hidden;">
                    <div class="card-header bg-white py-3 border-bottom">
                        <h4 class="card-title mb-0" style="font-weight: 700; color: #2C3E50;">Registros</h4>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="datatable_impresiones" class="table table-striped w-100 display dataTable">
                                <thead class="custom-thead">
                                    <tr>
                                        <th>ID</th>
                                        <th>No. CONTROL</th>
                                        <th>CAPACITANDO</th>
                                        <th>DOCUMENTO</th>
                                        <th>CURSO | ESPECIALIDAD</th>
                                        <th>UNIDAD</th>
                                        <th width="10%">ACCIONES</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($impresiones as $impresion)
                                    @php
                                        $cancelado = $impresion->imp_cancelado;
                                        $rowClass = $impresion->imp_tipo == 'E' ? 'table-primary-soft' : '';
                                        $textClass = $impresion->imp_tipo == 'E' ? 'text-primary' : 'text-dark';
                                        $tipoDocumento = $impresion->imp_tipo == 'E' ? 'ESPECIALIDAD' : 'DUPLICADO';

                                        // Determinar color del estado
                                        $colorStatus = 'btn-dark text-white';
                                        if (
                                            $impresion->imp_folio &&
                                            $impresion->imp_num_recibo &&
                                            $impresion->imp_liga_comprobante &&
                                            $impresion->imp_importe &&
                                            $impresion->imp_fecha_documento &&
                                            $impresion->imp_fecha_entrega
                                        ) {
                                            $colorStatus = 'btn-success';
                                        } elseif (
                                            $impresion->imp_folio &&
                                            $impresion->imp_num_recibo &&
                                            $impresion->imp_liga_comprobante &&
                                            $impresion->imp_importe &&
                                            $impresion->imp_fecha_documento
                                        ) {
                                            $colorStatus = 'btn-warning';
                                        }
                                    @endphp
                                    <tr class="{{ $rowClass }}">
                                        <td class="align-middle"><strong>{{ $impresion->imp_id }}</strong></td>

                                        <td class="align-middle"><span
                                                class=" text-primary">{{ $impresion->imp_num_control }}</span>
                                        </td>
                                        <td class="align-middle  font-w600">
                                            {{ $impresion->imp_al_nombre }}
                                        </td>
                                        <td class="align-middle">
                                            <span
                                                class="badge {{ $impresion->imp_tipo == 'E' ? 'bg-secondary' : 'bg-success' }} shadow-sm">
                                                {{ $tipoDocumento }}
                                            </span>
                                        </td>
                                        <td class="align-middle ">{{ $impresion->imp_nombre_curso }}
                                        </td>
                                        <td class="align-middle"><span
                                                class="text-muted small">{{ $impresion->imp_unidad_nombre }}</span>
                                        </td>
                                        <td class="align-middle">
                                            <div class="d-flex">
                                                @if ($cancelado == 1)
                                                    <form method="POST" action="{{ route('impresiones.consulta') }}">
                                                        @csrf
                                                        <button type="submit" name="edita_impresion"
                                                            class="btn btn-danger btn-sm shadow-sm font-w600"
                                                            style="font-size: 0.7rem !important; border-radius: 6px;"
                                                            data-bs-toggle="tooltip"
                                                            title="{{ $impresion->imp_observaciones }}">
                                                            CANCELADO
                                                        </button>
                                                        <input name="impresion_edita" type="hidden"
                                                            value="{{ $impresion->imp_id }}">
                                                    </form>
                                                @else
                                                @puede('Impresiones', 'editar_documento')
                                                <form method="POST" action="{{ route('impresiones.consulta') }}"
                                                    class="d-inline">
                                                    @csrf
                                                    <button type="submit" name="edita_impresion"
                                                        class="btn {{ $colorStatus }} shadow btn-xs sharp me-1 ver-pdf"
                                                        data-bs-toggle="tooltip" title="Editar registro">
                                                        <i class="la la-certificate fs-4 text-white"></i>
                                                    </button>
                                                    <input name="impresion_edita" type="hidden"
                                                        value="{{ $impresion->imp_id }}">
                                                </form>
                                                @endpuede
                                                @endif

                                                @puede('Impresiones', 'cancelar_documento')
                                                @if (!$impresion->imp_fecha_entrega)
                                                    <button type="button"
                                                        class="btn btn-danger shadow btn-xs sharp me-1 ver-pdf"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#cancelaAula{{ $impresion->imp_id }}"
                                                        title="Cancelar impresión">
                                                        <i class="fa fa-ban text-white"></i>
                                                    </button>
                                                @endif
                                                @endpuede
                                            </div>
                                        </td>
                                    </tr>

                                    {{-- Modal de cancelación --}}
                                    <div class="modal fade" id="cancelaAula{{ $impresion->imp_id }}"
                                        data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog"
                                        aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered" role="document">
                                            <div class="modal-content" style="border-radius: 15px; border: none;">
                                                <div class="modal-header border-0 pb-0">
                                                    <h5 class="modal-title font-w700">Confirmar Cancelación</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                        aria-label="Close"></button>
                                                </div>
                                                <form action="{{ route('impresiones.cancelar') }}" method="POST">
                                                    @csrf
                                                    <div class="modal-body pt-3">
                                                        <div class="text-center mb-4">
                                                            <i class="fa fa-exclamation-triangle text-warning mb-3"
                                                                style="font-size: 3rem;"></i>
                                                            <h6 class="font-w600">¿ESTÁ SEGURO DE CANCELAR LA IMPRESIÓN?
                                                            </h6>
                                                        </div>
                                                        <div class="alert alert-warning border-0 p-3 mb-4"
                                                            style="background-color: #fff3cd; border-radius: 10px;">
                                                            <p class="mb-1 small text-muted">DETALLES DEL REGISTRO:</p>
                                                            <p class="mb-0 font-w600 text-dark">
                                                                {{ $impresion->imp_al_nombre }}<br>
                                                                <span
                                                                    class="small">{{ $impresion->imp_nombre_curso }}</span>
                                                            </p>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="form-label text-dark font-w600">Motivo de la
                                                                cancelación:</label>
                                                            <textarea name="obs_cancelacion" class="form-control"
                                                                rows="3" placeholder="Describa el motivo..."
                                                                style="text-transform: uppercase; border-radius: 8px;"
                                                                required></textarea>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer border-0 pt-0">
                                                        <button type="button" class="btn btn-light shadow-sm"
                                                            style="border-radius: 8px;"
                                                            data-bs-dismiss="modal">Cerrar</button>
                                                        <button type="submit" class="btn btn-danger shadow-sm"
                                                            style="border-radius: 8px;">Confirmar Cancelación</button>
                                                        <input name="impresionId" type="hidden"
                                                            value="{{ $impresion->imp_id }}">
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .custom-thead {
        background: #f8f9fa !important;
    }

    .custom-thead th {
        color: #444 !important;
        border-bottom: 2px solid #dee2e6 !important;
        padding: 15px 12px !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        font-size: 0.8rem;
        letter-spacing: 0.5px;
    }

    .table-primary-soft {
        background-color: rgba(10, 107, 253, 0.05) !important;
    }

    .font-w600 {
        font-weight: 600;
    }

    .font-w700 {
        font-weight: 700;
    }

    DataTables Customization #datatable_impresiones {
        width: 100% !important;
        margin: 0 !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background: #0d6efd !important;
        color: white !important;
        border: 1px solid #0d6efd !important;
        border-radius: 6px !important;
    }

    .dataTables_wrapper .dataTables_filter input {
        border: 1px solid #dee2e6 !important;
        border-radius: 6px !important;
        padding: 5px 10px !important;
    }
</style>

@endsection

@push('scripts')
    <!-- DataTables JS from Template Resources -->
    <script src="{{ asset('assets/libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net-responsive/js/dataTables.responsive.min.js') }}"></script>

    <script>
        $(document).ready(function () {
            // Tooltip Initialization
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });

            // DataTable Initialization
            if ($('#datatable_impresiones').length) {
                $('#datatable_impresiones').DataTable({
                    "bProcessing": true,
                    "pageLength": 10,
                    "ordering": true,
                    "order": [
                        [0, "desc"]
                    ],
                    "columnDefs": [{
                        "targets": 0,
                        "visible": false
                    }],
                    "language": {
                        "url": "//cdn.datatables.net/plug-ins/1.13.7/i18n/es-MX.json"
                    },
                    "dom": '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>rt<"row"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7"p>>',
                    "drawCallback": function () {
                        $('.dataTables_paginate > .pagination').addClass('pagination-sm justify-content-end');
                    }
                });
            }
        });
    </script>
@endpush