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

@section('style')
    <link rel="stylesheet" href="{{ asset('assets/minimalpro/css/jquery-ui.css') }}">
@endsection

@section('content')
    <div class="content-wrapper">
        <section class="content-header">
            {{-- <h1>Refrigerants</h1> --}}
            <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 active">Refrigerants</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="box">
                <div class="box-header with-border">
                    <div class="row align-items-center">
                        <div class="col-6">
                            <h4 class="box-title font-weight-bold">Refrigerants</h4>
                        </div>
                        <div class="col-6">
                            <div class="box-controls pull-right">
                                <div class="box-header-actions">
                                    <form action="{{ route('administrator.import.test.show') }}" method="get">
                                        <div class="input-group input-group-sm">
                                            <input type="text" name="code" class="form-control"
                                                placeholder="Ej: O-47, O-45" required>
                                            <div class="input-group-append">
                                                <button type="submit" class="btn btn-sm btn-success">Buscar</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="box-header-actions">
                                    <a href="{{ route('administrator.refrigerants.export-list') }}"
                                        class="btn btn-sm btn-success" target="_blank"><i class="fa fa-download"></i></a>
                                    <form id="formAcceptAll" action="{{ route('administrator.import.test.applyRules') }}"
                                        method="GET">
                                        @csrf
                                        <input type="hidden" name="type" value="2">
                                        <button class="btn btn-sm btn-success btnAcceptAll"
                                            style="margin-right: 10px;">Aplicar reglas</button>
                                    </form>
                                </div>
                                <button class="btn btn-sm btn-info mr-5" type="button" data-toggle="modal"
                                    data-target="#uploadModal">
                                    <i class="fa fa-upload"></i> Agregar
                                </button>
                                <button class="btn btn-sm btn-primary mr-5" type="button" data-toggle="modal"
                                    data-target="#refrigerantResultsModal">
                                    <i class="fa fa-upload"></i> Integración de resultados refrigerantes
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box-body">
                    <table class="table table-sm table-hover table-responsive" id="tableHistory">
                        <thead>
                            <tr>
                                <th class="text-center">
                                    <p>Marcar todo</p>
                                    <input type="checkbox" id="md_checkbox_all" class="filled-in chk-col-maroon checkAll">
                                    <label for="md_checkbox_all"></label>
                                </th>
                                <th class="text-center">Tipo de Fluido</th>
                                <th class="text-center">Sample ID</th>
                                <th class="text-center">Cliente</th>
                                <th class="text-center">Account</th>
                                <th class="text-center">Unit ID</th>
                                <th class="text-center">Modelo</th>
                                <th class="text-center">Component</th>
                                <th class="text-center">Oil reference</th>
                                <th class="text-center">Oil weight</th>
                                <th class="text-center">Laboratory samples</th>
                                <th class="text-center">Date take</th>
                                <th class="text-center">Date received</th>
                                <th class="text-center">State</th>
                                <th class="text-center">SOS</th>
                                <th class="text-center">Commentary</th>
                            </tr>
                        </thead>
                        <tbody class="text-center">
                            @if (count($samples) > 0)
                                @foreach ($samples as $sample)
                                    <tr>
                                        <td>
                                            <input type="checkbox" id="md_checkbox_{{ $sample->id }}"
                                                class="filled-in chk-col-maroon tableCheck"
                                                data-sample="{{ $sample->id }}">
                                            <label for="md_checkbox_{{ $sample->id }}"></label>
                                        </td>
                                        <td>{{ $sample->getLubricant->getCategory->name ?? 'REFRIGERANTE' }}</td>
                                        <td style="vertical-align:middle;" class="font-weight-bold">
                                            <a
                                                href="{{ route('administrator.refrigerants.show', ['code' => $sample->code]) }}">
                                                #{{ $sample->code }}
                                            </a>
                                        </td>
                                        <td>{{ $sample->getCustomer->company }}</td>
                                        <td>{{ $sample->getFleet->name }}</td>
                                        <td>{{ $sample->getEquipment->unit_id }}</td>
                                        <td>{{ $sample->model }}</td>
                                        <td>{{ $sample->component }}</td>
                                        <td>{{ $sample->lubricant }}</td>
                                        <td>{{ $sample->oil_weight }}</td>
                                        <td>
                                            @foreach (sortLaboratoryTests($sample->getTests) as $test)
                                                @if ($test->getTest)
                                                    <span
                                                        class="badge badge-{{ Config::get('constants.states_samples_test')[$test->state]['type'] }} cursor-default"
                                                        data-toggle="tooltip" title=""
                                                        data-original-title="{{ Config::get('constants.states_samples_test')[$test->state]['name'] }}">
                                                        <b>{{ $test->getTest->name }}</b>
                                                    </span>
                                                @endif
                                            @endforeach
                                        </td>
                                        <td>{{ date('d/m/Y', strtotime($sample->sample_date_taken)) }}</td>
                                        <td>{{ date('d/m/Y', strtotime($sample->sample_date_received)) }}</td>
                                        <td>
                                            @php
                                                $currentState = $sample->getCurrentState();
                                            @endphp
                                            <span data-toggle="tooltip"
                                                data-original-title="{{ config('constants.states_current_sample')[$currentState]['description'] }}"
                                                class="badge badge-{{ config('constants.states_current_sample')[$currentState]['type'] }}">{{ config('constants.states_current_sample')[$currentState]['name'] }}</span>
                                        </td>
                                        <td>
                                            @if ($sample->sos == 'true')
                                                <span class="badge badge-danger">SOS</span>
                                            @else
                                                <span class="badge badge-dark">Estandar</span>
                                            @endif
                                        </td>
                                        <td>
                                            <a href="javascript:;" class="btn btn-info btn-xs"
                                                onclick="btnCommentary({{ $sample->id }})">
                                                @if (!empty($sample->commentary))
                                                    <i class="fa fa-comment" aria-hidden="true"></i>
                                                @else
                                                    <i class="fa fa-comment-o" aria-hidden="true"></i>
                                                @endif
                                            </a>
                                            @checkAction('Samples', 'administrator.import.test.delete')
                                                <a href="javascript:;" class="btn btn-danger btn-xs"
                                                    onclick="openDelete({{ $sample->id }})">
                                                    <i class="fa fa-trash" aria-hidden="true"></i>
                                                </a>
                                            @endcheckAction
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="15">No se encontraron muestras</td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>

                <div class="box-footer clearfix">
                    <div class="row">
                        <div class="col-md-12">
                            @if (count($samples) > 0)
                                {!! $samples->appends(Request::all())->render() !!}
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <div class="modal fade" id="idModalCommentary" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="idTitleCommentary"></h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="formCommentary">
                        <div class="row mb-10">
                            <div class="col">
                                <textarea name="commentary" rows="3" class="form-control" id="idInputCommentary" placeholder="Comentario"></textarea>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <button type="button" class="btn btn-info btn-block"
                                    onclick="sendCommentary()">Enviar</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="uploadModal" tabindex="-1" aria-labelledby="uploadModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl" style="max-width: 95%; width: 95%;">
            <div class="modal-content p-3">
                <div class="modal-header">
                    <h5 class="modal-title" id="uploadModalLabel">Carga de refigerantes</h5>
                </div>

                <div class="modal-body">

                    <!-- APARTADO SUBIR EXCEL -->
                    <form enctype="multipart/form-data" id="formUploadExcel">
                        @csrf
                        <h5 class="box-title font-weight-bold">Carga masiva</h5>
                        <div class="row">
                            <div class="col-md-6">
                                <label>Descargar plantilla*</label><br>
                                <a href="{{ asset('documentos/plantilla_carga_refrigerantes_v2.xlsx') }}"
                                    download="Plantilla_Carga_Refrigerantes_V2.xlsx">
                                    <i class="fa fa-download"></i> Click para descargar plantilla
                                </a>
                                <div class="mt-2">
                                    <a href="{{ route('administrator.refrigerants.download-excel-samples') }}" class="text-info">
                                        <i class="fa fa-file-excel-o"></i> Descargar muestras existentes (Excel)
                                    </a>
                                </div>
                                <div class="mt-3">
                                    <small class="text-muted">
                                        <i class="fa fa-info-circle"></i>
                                        <b class="box-title font-weight-bold">Importante:</b> El archivo debe estar en
                                        formato .xlsx y contener los campos requeridos:
                                        N_MUESTRA, FECHA_MUESTREO, FECHA_RECEPCION, EDAD_COMPONENTE,
                                        EDAD_PRODUCTO, PRODUCTO y COMPONENTE/EQUIPO.
                                    </small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label>Subir Excel<span class="text-danger">*</span></label>
                                <input type="file" name="excel_file" class="form-control" id="excelFile">
                            </div>
                        </div>
                        <div class="d-flex justify-content-end">
                            <button type="button" class="btn btn-info mt-3" id="btnUploadExcel" disabled>
                                Cargar información
                            </button>
                        </div>

                    </form>

                    <hr>
                    <!-- FORMULARIO MANUAL -->
                    <div class="d-flex justify-content-end">
                        <button class="btn btn-info" type="button" data-toggle="collapse"
                            data-target="#collapseManualForm" aria-expanded="false" aria-controls="collapseManualForm">
                            Cargar de forma manual
                        </button>
                    </div>

                    <div class="collapse show" id="collapseManualForm">
                        <div class="card card-body px-0">
                            <h5 class="box-title font-weight-bold">Carga individual</h5>
                            <div class="box-body wizard-content">
                                <form action="#" class="wizard-circle wizardSteps">
                                    <h6>Reception<br><small></small></h6>
                                    <section>
                                        <div class="row mb-4 mx-auto">
                                            <div class="col-md-6 col-12 mx-auto">
                                                <div class="input-group">
                                                    <span class="input-group-btn">
                                                        <button class="btn btn-info dropdown-toggle dropContainer"
                                                            id="" type="button" data-toggle="dropdown"
                                                            aria-haspopup="true" aria-expanded="false">Seleccione un
                                                            cliente</button>
                                                        <div class="dropdown-menu">
                                                            @foreach ($customers as $customer)
                                                                <a class="dropdown-item customerItem"
                                                                    id="{{ $customer->id }}"
                                                                    href="#">{{ $customer->company }}</a>
                                                            @endforeach
                                                        </div>
                                                    </span>
                                                    <input type="text" class="form-control" id="idUnitId"
                                                        placeholder="Search UNIT ID" value="" disabled>
                                                    <span class="input-group-btn">
                                                        <button type="button" onclick="search()" class="btn btn-info"><i
                                                                class="fa fa-search"></i> Buscar</button>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="box" id="idInfoHead" style="display: none;">
                                            <div class="box-body">
                                                <div class="media-list media-list-hover media-list-divided ">
                                                    <div class="media media-single">
                                                        <div class="media-body">
                                                            <div class="row align-items-center">
                                                                <div class="col-md-6">
                                                                    <h4 class="mb-1 text-nowrap box-title">UNIT ID: <b
                                                                            class="font-weight-bold" id="idOneUnitId"></b>
                                                                    </h4>
                                                                    <h5 class="mb-1 text-nowrap"
                                                                        id="customerBussinessName">Make: <b
                                                                            class="font-weight-bold" id="idOneMake"></b>
                                                                    </h5>
                                                                    <h5 class="mb-1 text-nowrap" id="customerNIT">Model:
                                                                        <b class="font-weight-bold" id="idOneModel"></b>
                                                                    </h5>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <h4 class="mb-1 text-nowrap box-title"
                                                                        id="customerContactName">Customer: <b
                                                                            class="font-weight-bold"
                                                                            id="idOneCustomer"></b></h4>
                                                                    <h5 class="mb-1 text-nowrap"
                                                                        id="customerCellphoneName">Account: <b
                                                                            class="font-weight-bold"
                                                                            id="idOneAccount"></b></h5>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="idInputSampleDateTaken">Sample date taken</label>
                                                    <input type="date" class="form-control"
                                                        id="idInputSampleDateTaken" max="{{ date('Y-m-d') }}"
                                                        value="{{ date('Y-m-d') }}">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="idInputSampleDateReceivedAtLab">Sample date received at
                                                        lab</label>
                                                    <input type="date" class="form-control"
                                                        id="idInputSampleDateReceivedAtLab" max="{{ date('Y-m-d') }}"
                                                        value="{{ date('Y-m-d') }}">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label for="idInputContainerNumber">Número de envase <span
                                                            class="text-danger">*</span></label>
                                                    <input type="text" class="form-control"
                                                        id="idInputContainerNumber" placeholder="Ej: ENV-001">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label for="idInputQuantityAdded">Cantidad adicionada <span
                                                            class="text-danger">*</span></label>
                                                    <input type="number" step="0.01" class="form-control"
                                                        id="idInputQuantityAdded" placeholder="0.00">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label for="idInputQuantityUnit">Unidad de cantidad <span
                                                            class="text-danger">*</span></label>
                                                    <select class="form-control" id="idInputQuantityUnit">
                                                        <option value="gal" selected>gal (Galones)</option>
                                                        <option value="L">L (Litros)</option>
                                                        <option value="qt">qt (Cuartos)</option>
                                                        <option value="g">g (Gramos)</option>
                                                        <option value="oz">oz (Onzas)</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label for="idInputServiceLevel">Nivel de servicio <span
                                                            class="text-danger">*</span></label>
                                                    <select class="form-control" id="idInputServiceLevel">
                                                        <option value="">Seleccione...</option>
                                                        @if (isset($parameters) && $parameters->count() > 0)
                                                            @foreach ($parameters as $parameter)
                                                                <option value="{{ $parameter->id }}">
                                                                    {{ $parameter->name }}</option>
                                                            @endforeach
                                                        @endif
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label for="idInputHorometer">Horometer Machine</label>
                                                <div class="input-group">
                                                    <input type="text" class="form-control input-number"
                                                        autocomplete="off" id="idInputHorometer">
                                                    <div class="input-group-addon">
                                                        <input type="checkbox" id="idChangeHorometer">
                                                        <label for="idChangeHorometer" class="p-0 m-0"
                                                            style="height: 20px !important;"> <b class="ml-20">Change
                                                                Horometer</b> </label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <label for="idInputHorometer">UNIT MODEL</label>
                                                <div class="input-group">
                                                    <input type="text" class="form-control" id="serialComponent"
                                                        autocomplete="off">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label for="lastName1">Filter By</label>
                                                    @if ($categories->count() > 0)
                                                        <select class="form-control select2" style="width: 100%;"
                                                            id="idFilterSelected" onchange="filterLubricant(this.value)">
                                                            <option></option>
                                                            @foreach ($categories as $key => $category)
                                                                <option value="{{ $category->id }}">{{ $category->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    @else
                                                        <div class="alert alert-warning" style="margin-bottom: 0;">
                                                            <i class="fa fa-exclamation-triangle"></i>
                                                            No hay tipos de producto configurados. Por favor, registre al
                                                            menos uno en el módulo de Parámetros.
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        <h4>Component Locations<br><small></small></h4>
                                        <div class="row">
                                            <!-- /.col -->
                                            <div class="col-md-12 col-lg-12">
                                                <div class="box">
                                                    <!-- /.box-header -->
                                                    <div class="box-body">
                                                        <table class="table table-hover table-responsive centerRow">
                                                            <thead>
                                                                <th style="width: 10px">#</th>
                                                                <th>Component</th>
                                                                <th>Select</th>
                                                                <th>Lubricant</th>
                                                                <th>Lub Weight</th>
                                                                <th>Last Information</th>
                                                                <th>Lub. Time</th>
                                                                <th>Laboratory tests</th>
                                                                <th>Lub. Change</th>
                                                                <th>Filter Change</th>
                                                                <th style="width: 40px">SOS</th>
                                                            </thead>
                                                            <tbody id="idTableOneReception">

                                                            </tbody>
                                                        </table>
                                                    </div>
                                                    <!-- /.box-body -->
                                                </div>
                                                <!-- /.box -->
                                            </div>
                                        </div>
                                    </section>
                                    <!-- Step 2 -->
                                    <h6>Review <br><small>Sample</small></h6>
                                    <section>
                                        <div class="box">
                                            <div class="box-body">
                                                <div class="media-list media-list-hover media-list-divided ">
                                                    <div class="media media-single">
                                                        <input type="hidden" id="idCustomer" name="customerID">
                                                        <div class="media-body">
                                                            <div class="row align-items-center">
                                                                <div class="col-md-6">
                                                                    <h4 class="mb-0 box-title text-nowrap">UNIT ID: <b
                                                                            class="font-weight-bold" id="idTwoUnitId"></b>
                                                                    </h4>
                                                                    <h5 class="mb-1 text-nowrap"
                                                                        id="customerBussinessName">Make: <b
                                                                            class="font-weight-bold" id="idTwoMake"></b>
                                                                    </h5>
                                                                    <h5 class="mb-1 text-nowrap" id="customerNIT">Model:
                                                                        <b class="font-weight-bold" id="idTwoModel"></b>
                                                                    </h5>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <h4 class="mb-1 text-nowrap box-title"
                                                                        id="customerContactName">Customer: <b
                                                                            class="font-weight-bold"
                                                                            id="idTwoCustomer"></b></h4>
                                                                    <h5 class="mb-1 text-nowrap"
                                                                        id="customerCellphoneName">Account: <b
                                                                            class="font-weight-bold"
                                                                            id="idTwoAccount"></b></h5>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <h5 class="mb-1 text-nowrap">Horometer Machine: <b
                                                                            class="font-weight-bold"
                                                                            id="idTwoHorometerMachine"></b></h5>
                                                                    <h5 class="mb-1 text-nowrap">Sample Date Received: <b
                                                                            class="font-weight-bold"
                                                                            id="idTwoSampleDateReceived"></b></h5>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="row">
                                                <div class="col-12">
                                                    <div class="box">
                                                        <div class="box-header">
                                                            <h4 class="box-title"><strong>Listado </strong> Components
                                                                Locations</h4>
                                                        </div>
                                                        <div class="box-body">
                                                            <div class="row">
                                                                <div class="col-12">
                                                                    <div class="table-responsive">
                                                                        <table id="mainTable"
                                                                            class="table table-bordered table-striped m-b-0 centerRow">
                                                                            <thead>
                                                                                <tr>
                                                                                    <th>Component</th>
                                                                                    <th>Lubricant</th>
                                                                                    <th>Sample Taken</th>
                                                                                    <th>Sample Received</th>
                                                                                    <th>Horometer Component</th>
                                                                                    <th>Oil Time</th>
                                                                                    <th>Oil Change</th>
                                                                                    <th>Filter Change</th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody id="idTableTwoReception">

                                                                            </tbody>
                                                                        </table>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </section>
                                </form>
                            </div>
                        </div>
                    </div>
                    <hr>

                    <!-- TABLA -->
                    <div class="">
                        <table class="table table-sm table-hover table-responsive" id="dataTable">
                            <thead class="table-dark text-center">
                                <tr>
                                    <th>Código de componente</th>
                                    <th>Nivel de servicio</th>
                                    <th>Número de envase</th>
                                    <th>Fecha toma de muestra</th>
                                    <th>Edad del componente</th>
                                    <th>Temperatura</th>
                                    <th>Estado</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="refrigerantResultsModal" tabindex="-1" aria-labelledby="refrigerantResultsModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content p-3">
                <div class="modal-header">
                    <h5 class="modal-title fw-bold" id="refrigerantResultsModalLabel">Integración de resultados
                        refrigerantes</h5>
                </div>

                <div class="modal-body">
                    <!-- FORMULARIO CARGA DE EXCEL -->
                    <form id="formRefrigerantExcel" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-md-6">
                                <label class="fw-bold">Descargar plantilla*</label><br>
                                <a href="{{ route('administrator.refrigerants.download-results-template') }}">
                                    <i class="fa fa-download"></i> Click para descargar plantilla
                                </a>
                                <div class="mt-2 text-muted small">
                                    <i class="fa fa-info-circle"></i>
                                    <b>Importante:</b> El archivo debe estar en formato <b>.xlsx</b>.
                                    Se utiliza la columna <b>N_MUESTRA</b> (col. E) como identificador y las columnas
                                    de resultados: <b>GD, GH, GN, GT, HB, HF, IF, IL, IN, IP</b> e <b>IV</b>.
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="fw-bold">Subir Excel<span class="text-danger">*</span></label>
                                <input type="file" name="excel_refrigerant_file" class="form-control"
                                    id="excelRefrigerantFile">
                                <span class="text-muted small">Arrastra aquí el archivo exportado desde Smart Assistance o
                                    haz clic para seleccionarlo.</span>
                            </div>
                        </div>
                        <div class="d-flex justify-content-end">
                            <button type="button" class="btn btn-info mt-3" id="btnProcessExcel" disabled>
                                <i class="fa fa-upload"></i> Cargar información
                            </button>
                        </div>
                    </form>

                    <!-- REPORTE DE RESULTADOS DEL CARGUE -->
                    <div id="refrigerantUploadReport" class="mt-3" style="display:none;">
                        <hr>
                        <h6 class="font-weight-bold">Reporte del cargue</h6>
                        <div id="refrigerantReportSummary" class="mb-2"></div>
                        <div id="refrigerantNotFoundContainer" style="display:none;">
                            <p class="text-danger mb-1"><strong>Muestras no encontradas:</strong></p>
                            <ul id="refrigerantNotFoundList" class="text-danger small" style="max-height:120px;overflow-y:auto;"></ul>
                        </div>
                        <div id="refrigerantFoundContainer" style="display:none;">
                            <p class="text-success mb-1"><strong>Muestras procesadas:</strong></p>
                            <table class="table table-sm table-bordered" style="max-height:200px;overflow-y:auto;display:block;">
                                <thead class="table-dark">
                                    <tr>
                                        <th>N° Muestra</th>
                                        <th>Código interno</th>
                                        <th>Tests procesados</th>
                                    </tr>
                                </thead>
                                <tbody id="refrigerantFoundBody"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="idModalSelectedLubricant" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">Select lubricant</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="formLubricant">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="idSelectedLubricant" class="control-label">Lubricant *</label>
                                    <select class="form-control hg_select select2" id="idSelectedLubricant">
                                        <option value="">Select an lubricant</option>
                                        @foreach ($lubricants as $lubricant)
                                            <option value="{{ $lubricant->id }}">{{ $lubricant->name }}
                                                ({{ $lubricant->getLubWeight->name }})</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="row">
                        <div class="col-md-12">
                            <button type="button" class="btn btn_admin btn-block" onclick="sendLubricant()">
                                <i class="fa fa-floppy-o"></i> Guardar cambios
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="idInfoPreviousSample" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="mySmallModalLabel">Last Information</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h5>H. Machine</h5>
                        </div>
                        <div class="col-md-6">
                            <h5><b class="font-weight-bold" id="idInfoOilMachine"></b></h5>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <h5>Oil Time</h5>
                        </div>
                        <div class="col-md-6">
                            <h5><b class="font-weight-bold" id="idInfoOilTime"></b></h5>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <h5>Oil Change</h5>
                        </div>
                        <div class="col-md-6">
                            <h5><b class="font-weight-bold" id="idInfoOilChange"></b></h5>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
    </div>

    <div class="modal fade" id="idLabTestSample" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="idNameSystemType"></h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="control-label">Muestras *</label>
                                <div class="testSystemType">
                                    <div class="row" id="idListLabTests">

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <button type="button" onclick="updateLabTest()" class="btn btn_admin btn-block"><i
                                    class="fa fa-floppy-o"></i> Guardar</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="idModalSample" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">Sample</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="box">
                        <div class="col-12">
                            <div class="row border" id="idContentSampleSOS">
                                <h2 class="text-center mx-auto">ID SAMPLE: <b id="idModalSampleOneSampleId"></b></h2>
                                <div class="col-9">
                                    <table class="table mt-4" style="border: 7px solid #c90114;">
                                        <tr>
                                            <th class="m-1 p-1 text-nowrap"
                                                style="font-size: 15px; font-family: 'Arial Black'; color: black">
                                                <b>Customer</b></th>
                                            <td class="m-1 p-1 text-nowrap"
                                                style="font-size: 15px; font-family: 'Arial Black'; color: black"><b
                                                    class="font-weight-bold" id="idModalSampleOneCustomer"></b></td>
                                        </tr>
                                        <tr>
                                            <th class="m-1 p-1 text-nowrap"
                                                style="font-size: 15px; font-family: 'Arial Black'; color: black"><b>Unit
                                                    ID</b></th>
                                            <td class="m-1 p-1 text-nowrap"
                                                style="font-size: 15px; font-family: 'Arial Black'; color: black"><b
                                                    class="font-weight-bold" id="idModalSampleOneUnitId"></b></td>
                                        </tr>
                                        <tr>
                                            <th class="m-1 p-1 text-nowrap"
                                                style="font-size: 15px; font-family: 'Arial Black'; color: black">
                                                <b>Component</b></th>
                                            <td class="m-1 p-1"
                                                style="font-size: 15px; font-family: 'Arial Black'; color: black"><b
                                                    class="font-weight-bold" id="idModalSampleOneComponent"></b></td>
                                        </tr>
                                        <tr>
                                            <th class="m-1 p-1 text-nowrap"
                                                style="font-size: 15px; font-family: 'Arial Black'; color: black"><b>Date
                                                    Received</b></th>
                                            <td class="m-1 p-1 text-nowrap"
                                                style="font-size: 15px; font-family: 'Arial Black'; color: black"><b
                                                    class="font-weight-bold" id="idModalSampleOneDateReceived"></b></td>
                                        </tr>
                                        <tr>
                                            <th class="m-1 p-1 text-nowrap"
                                                style="font-size: 15px; font-family: 'Arial Black'; color: black">
                                                <b>Lubricant</b></th>
                                            <td class="m-1 p-1 text-nowrap"
                                                style="font-size: 15px; font-family: 'Arial Black'; color: black"><b
                                                    class="font-weight-bold" id="idModalSampleOneLubricant"></b></td>
                                        </tr>
                                        <tr>
                                            <th class="m-1 p-1 text-nowrap"
                                                style="font-size: 15px; font-family: 'Arial Black'; color: black"><b>Lub
                                                    Weight</b></th>
                                            <td class="m-1 p-1 text-nowrap"
                                                style="font-size: 15px; font-family: 'Arial Black'; color: black"><b
                                                    class="font-weight-bold" id="idModalSampleOneOilWeight"></b></td>
                                        </tr>
                                        <tr>
                                            <th class="m-1 p-1 text-nowrap"
                                                style="font-size: 15px; font-family: 'Arial Black'; color: black">
                                                <b>Items</b></th>
                                            <td class="m-1 p-1 text-nowrap" id="idModalSampleOneTest"
                                                style="font-size: 15px; font-family: 'Arial Black'; color: black">
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="col-3 my-auto mx-auto">
                                    <img src="{{ asset('assets/images/etiquetasos.jpg') }}">
                                </div>
                            </div>
                            <div class="row border" id="idContentSample">
                                <h2 class="text-center mx-auto">ID SAMPLE: <b id="idModalSampleTwoSampleId"></b></h2>
                                <div class="col-9">
                                    <table class="table mt-4" style="border: 7px solid #000;">
                                        <tr>
                                            <th class="m-1 p-1 text-nowrap"
                                                style="font-size: 15px; font-family: 'Arial Black'; color: black">
                                                <b>Customer</b></th>
                                            <td class="m-1 p-1 text-nowrap"
                                                style="font-size: 15px; font-family: 'Arial Black'; color: black"><b
                                                    class="font-weight-bold" id="idModalSampleTwoCustomer"></b></td>
                                        </tr>
                                        <tr>
                                            <th class="m-1 p-1 text-nowrap"
                                                style="font-size: 15px; font-family: 'Arial Black'; color: black"><b>Unit
                                                    ID</b></th>
                                            <td class="m-1 p-1 text-nowrap"
                                                style="font-size: 15px; font-family: 'Arial Black'; color: black"><b
                                                    class="font-weight-bold" id="idModalSampleTwoUnitId"></b></td>
                                        </tr>
                                        <tr>
                                            <th class="m-1 p-1 text-nowrap"
                                                style="font-size: 15px; font-family: 'Arial Black'; color: black">
                                                <b>Component</b></th>
                                            <td class="m-1 p-1"
                                                style="font-size: 15px; font-family: 'Arial Black'; color: black"><b
                                                    class="font-weight-bold" id="idModalSampleTwoComponent"></b></td>
                                        </tr>
                                        <tr>
                                            <th class="m-1 p-1 text-nowrap"
                                                style="font-size: 15px; font-family: 'Arial Black'; color: black"><b>Date
                                                    Received</b></th>
                                            <td class="m-1 p-1 text-nowrap"
                                                style="font-size: 15px; font-family: 'Arial Black'; color: black"><b
                                                    class="font-weight-bold" id="idModalSampleTwoDateReceived"></b></td>
                                        </tr>
                                        <tr>
                                            <th class="m-1 p-1 text-nowrap"
                                                style="font-size: 15px; font-family: 'Arial Black'; color: black">
                                                <b>Lubricant</b></th>
                                            <td class="m-1 p-1 text-nowrap"
                                                style="font-size: 15px; font-family: 'Arial Black'; color: black"><b
                                                    class="font-weight-bold" id="idModalSampleTwoLubricant"></b></td>
                                        </tr>
                                        <tr>
                                            <th class="m-1 p-1 text-nowrap"
                                                style="font-size: 15px; font-family: 'Arial Black'; color: black"><b>Lub
                                                    Weight</b></th>
                                            <td class="m-1 p-1 text-nowrap"
                                                style="font-size: 15px; font-family: 'Arial Black'; color: black"><b
                                                    class="font-weight-bold" id="idModalSampleTwoOilWeight"></b></td>
                                        </tr>
                                        <tr>
                                            <th class="m-1 p-1 text-nowrap"
                                                style="font-size: 15px; font-family: 'Arial Black'; color: black">
                                                <b>Items</b></th>
                                            <td class="m-1 p-1 text-nowrap" id="idModalSampleTwoTest"
                                                style="font-size: 15px; font-family: 'Arial Black'; color: black">
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="col-3 my-auto mx-auto">
                                    <img src="{{ asset('assets/images/etiqueta.jpg') }}">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div id="idSampleBtnPrint">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('js')
    <script src="{{ asset('assets/minimalpro/js/jquery-ui.js') }}"></script>
    <script src="{{ asset('assets/plugins/JsBarcode/dist/JsBarcode.all.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/JsBarcode/dist/barcodes/JsBarcode.code128.min.js') }}"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
    <script src="https://cdn.datatables.net/plug-ins/1.10.25/sorting/datetime-moment.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script type="text/javascript">
        var valueUnitId = null;

        var horometer = 0;
        var serialComponent = null;
        var sampleDateTaken = '{{ date('Y-m-d') }}';
        var sampleDateReceived = '{{ date('Y-m-d') }}';

        var containerNumber = '';
        var quantityAdded = null;
        var quantityUnit = 'gal';
        var serviceLevelId = null;

        var components = [];
        var componentsSelected = [];

        var componentsArr = [];

        var tests = [];

        $(document).ready(function() {

            $('.customerItem').on('click', function() {
                $('.dropContainer').text($(this).text())
                $('.dropContainer').attr('id', $(this).attr('id'))
                $('#idUnitId').attr('disabled', false)
            })

            $('.select2').select2({
                placeholder: "Select an option",
                language: {
                    noResults: function(params) {
                        return "No se encontraron resultados";
                    }
                }
            });

            $("#idInputHorometer").prop('disabled', true);
            $("#idFilterSelected").prop('disabled', true);
        });

      $(".wizardSteps").steps({
        headerTag: "h6",
        bodyTag: "section",
        transitionEffect: "slideLeft",
        titleTemplate: '<span class="step">#index#</span> #title#',
        labels: {
          previous: "Anterior",
          next: "Siguiente",
          finish: "Enviar muestras"
        },
        onStepChanging: function (event, currentIndex, newIndex) {
          switch (newIndex) {
            case 0:
              return true;
              break;
            case 1:
              var vldtOne = validateOne();
              if (vldtOne) {return true;}else{return false;}
              break;
            default:
              return false;
          }
          return true;
        },
        onFinished: function (event, currentIndex) {
          if ($.isEmptyObject(componentsArr)) {
            Swal.fire("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
            return false;
          }

                $.each(componentsArr, function(y, itemCp) {
                    var cpSampleDateTaken = $("#idSampleDateTaken_" + y).val();
                    var cpHorometerComp = $("#idHorometerComp_" + y).val();
                    var cpOilTime = $("#idOilTime_" + y).val();
                    itemCp['sampleDateTaken'] = cpSampleDateTaken;
                    itemCp['horometerComponent'] = cpHorometerComp;
                    itemCp['oilTime'] = cpOilTime;
                });

                sendInfo();
            }
        });

        $('#idUnitId').on('keyup', function(e) {
            if (e.keyCode == 13) {
                search()
            }
        })

        function search(unit) {
            var unitId = unit || $("#idUnitId").val();
            components = [];
            componentsSelected = [];
            tests = [];

            valueUnitId = null;
            $("#idInfoHead").fadeOut();
            $("#idTableOneReception").empty();

            var urlPath = urlHost + "/administrator/refrigerants/search";
            $.ajax({
                type: 'POST',
                url: urlPath,
                data: {
                    "unit_id": unitId
                },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {

                        $("#idInputHorometer").prop('disabled', false);
                        $("#idInputHorometer").val(null);
                        $("#idFilterSelected").prop('disabled', false);
                        $("#idFilterSelected").val(null).trigger('change.select2');

                        valueUnitId = response.data.head.unit_id;

                        $("#idOneAccount").html(response.data.head.fleet);
                        $("#idOneUnitId").html(response.data.head.unit_id);
                        $("#idOneMake").html(response.data.head.make);
                        $("#idOneModel").html(response.data.head.model);
                        $("#serialComponent").val(response.data.head.model);
                        $("#idOneCustomer").html(response.data.head.name);

                        $("#idTwoAccount").html(response.data.head.fleet);
                        $("#idTwoUnitId").html(response.data.head.unit_id);
                        $("#idTwoMake").html(response.data.head.make);
                        $("#idTwoModel").html(response.data.head.model);
                        $("#idTwoCustomer").html(response.data.head.name);

                        components = response.data.components;

                        $.each(response.data.components, function(index, component) {
                            $("#idTableOneReception").append('<tr class="filterAll filterLubricant_' +
                                component.get_lubricant.category + '">' +
                                '<td>' + (index + parseInt(1)) + '</td>' +
                                '<td>' + component.get_component_location.name + '</td>' +
                                '<td class="text-center">' +
                                '<input type="checkbox" onchange="checkedComponent(this)" data-id="' +
                                index + '" id="basic_checkbox_' + index +
                                '"><label for="basic_checkbox_' + index +
                                '" class="checkLabel"></label>' +
                                '</td>' +
                                '<td>' +
                                '<div class="input-group input-group-sm">' +
                                '<input type="text" class="form-control" value="' + component
                                .get_lubricant.name + '" readonly>' +
                                '<span class="input-group-btn">' +
                                '<button type="button" class="btn btn-info" onclick="openListLubricant(' +
                                index + ')"><i class="fa fa-plus"></i></button>' +
                                '</span>' +
                                '</div>' +
                                '</td>' +
                                '<td class="text-center">' + component.get_lubricant.get_lub_weight
                                .name + '</td>' +
                                '<td class="text-center"><button type="button" class="btn btn-sm btn-success" onclick="infoPreviousSample(' +
                                index + ')"><i class="fa fa-eye"></i></button></td>' +
                                '<td><input type="number" class="form-control input-number" autocomplete="off" value="0" id="idInputOilTime_' +
                                index + '" readonly></td>' +
                                '<td class="text-center"><button type="button" class="btn btn-sm btn-warning" onclick="laboratoryTest(' +
                                index + ')"><i class="fa fa-flask"></i></button></td>' +
                                '<td class="text-center"><input type="checkbox" id="idOilChange_' +
                                index + '"> <label for="idOilChange_' + index +
                                '" class="checkLabel"></label></td>' +
                                '<td class="text-center"><input type="checkbox" id="idFilterChange_' +
                                index + '"> <label for="idFilterChange_' + index +
                                '" class="checkLabel"></label></td>' +
                                '<td class="text-center"><a class="btn btn-sm btn-danger btnSOS" id="idSos_' +
                                index + '"><i class="fa fa-circle-o"></i></a></td>' +
                                '</tr>');

                            var oilTime = 0;
                            tests[index] = [];
                            $.each(component.get_system_type.get_test_system_type, function(x, test) {
                                tests[index].push(test.id_test_method);
                            });

                            $(".btnSOS").on("click", function() {
                                if ($(this).hasClass("active")) {
                                    $(this).removeClass("active");
                                    $(this).html('<i class="fa fa-circle-o"></i>');
                                } else {
                                    $(this).addClass("active");
                                    $(this).html('<i class="fa fa-dot-circle-o"></i>');
                                }
                            });
                        });

              $("#idInfoHead").fadeIn();
            }else{
              Swal.fire("Oops!", response.message, "warning");
            }
          },
          error: function(xhr){
            console.log(xhr);
          }
        });
      }

        function sampleDate(varDate) {
            return varDate.replace(/^(\d{4})-(\d{2})-(\d{2})$/g, '$3/$2/$1');
        }

        function filterLubricant(value) {
            if (value != "") {
                $(".filterAll").fadeOut();
                $(".filterLubricant_" + value).fadeIn();
                if (value == "13") {
                    $("#idInputHorometer").prop('disabled', true);
                } else {
                    $("#idInputHorometer").prop('disabled', false);
                }
            } else {
                $(".filterAll").fadeIn();
            }
        }

        $("#idInputHorometer").keyup(function() {
            $("#idTwoHorometerMachine").html(this.value + ' H');
            horometer = this.value;
            $.each(components, function(index, component) {
                var infoComp = component.info;
                if (infoComp.first) {
                    $("#idInputOilTime_" + index).val(horometer);
                } else {
                    if (parseInt(horometer) > parseInt(infoComp.horometer)) {
                        var oilTime = calculateCH(horometer, infoComp.horometer, infoComp.oil_time);
                        $("#idInputOilTime_" + index).val(oilTime);
                    } else {
                        $("#idInputOilTime_" + index).val(infoComp.oil_time);
                    }
                }
            });
        });

        function calculateCH(horometer, prevHorometer, horometerComponent) {
            var valH = parseInt(horometer) - parseInt(prevHorometer);
            if (parseInt(valH) > 0) {
                var result = parseInt(valH) + parseInt(horometerComponent);
            } else {
                var result = parseInt(horometerComponent);
            }
            return result;
        }

        $("#idInputSampleDateTaken").change(function() {
            sampleDateTaken = this.value;
        });

        $("#idInputSampleDateReceivedAtLab").change(function() {
            $("#idTwoSampleDateReceived").html(sampleDate(this.value));
            sampleDateReceived = this.value;
        });

        $("#idInputContainerNumber").on('input', function() {
            containerNumber = this.value;
        });

        $("#idInputQuantityAdded").on('input', function() {
            quantityAdded = this.value;
        });

        $("#idInputQuantityUnit").change(function() {
            quantityUnit = this.value;
        });

        $("#idInputServiceLevel").change(function() {
            serviceLevelId = this.value;
        });

        function checkedComponent(ind) {
            var index = $(ind).data("id");

            if ($(ind).is(':checked')) {
                componentsSelected.push(index);
            } else {
                var arrData = componentsSelected.indexOf(index);
                componentsSelected.splice(arrData, 1);
            }
            componentsSelected.sort();
        }

        var selectLubricant = null;

        function openListLubricant(id) {
            selectLubricant = id;
            $("#formLubricant")[0].reset();
            $("#idModalSelectedLubricant").modal();
        }

        function sendLubricant() {
            var lubricantId = $("#idSelectedLubricant").val();
            var componentId = components[selectLubricant]['id'];

        $.ajax({
          type: 'POST',
          url: '/administrator/refrigerants/lubricant',
          data: {
            "id": lubricantId,
            "component_id": componentId
          },
          dataType: 'json',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          beforeSend:function(){
            $(".content_loading").fadeIn("slow");
          },
          success:function(response){
            $(".content_loading").fadeOut("slow");
            if (response.state == 1) {
              components[selectLubricant]['lubricant'] = response.data.lubricant.id;
              components[selectLubricant]['get_lubricant'] = response.data.lubricant;
              search(valueUnitId);
              $("#idModalSelectedLubricant").modal('hide');
            }else{
              Swal.fire("Oops!", response.message, "warning");
            }
          },
          error: function(xhr){
            console.log(xhr);
          }
        });
      }

        function infoPreviousSample(index) {
            var data = components[index];
            if (!data.info.first) {
                if (data.info.oil_change == "true") {
                    $("#idInfoOilChange").html("SI");
                } else {
                    $("#idInfoOilChange").html("NO");
                }

                $("#idInfoOilMachine").html(data.info.horometer);
                $("#idInfoOilTime").html(data.info.oil_time);

          $("#idInfoPreviousSample").modal();
        }else{
          Swal.fire("Oops!", "Este component location no tiene muestras anteriores", "warning");
        }
      }

        var componentPositionTest = null;

        function laboratoryTest(index) {
            var data = components[index];
            componentPositionTest = index;
            $("#idListLabTests").empty();

            var nameSystemType = data.get_system_type.name;
            $("#idNameSystemType").html(nameSystemType);

            $.each(data.get_system_type.get_test_system_type, function(index, listTest) {
                $("#idListLabTests").append('<div class="col-md-6">' +
                    '<input type="checkbox" value="' + listTest.id_test_method + '" id="checkedTest_' + listTest
                    .id_test_method + '"><label for="checkedTest_' + listTest.id_test_method + '">' + listTest
                    .get_test_method.name + '</label>' +
                    '</div>');
            });

            var listTestChecked = tests[index];
            $.each(listTestChecked, function(index, testCheck) {
                $("#checkedTest_" + testCheck).prop('checked', true);
            });

            $("#idLabTestSample").modal();
        }

        function updateLabTest() {
            var data = components[componentPositionTest];

            var testArray = [];
            $.each(data.get_system_type.get_test_system_type, function(index, testCheck) {
                if ($("#checkedTest_" + testCheck.id_test_method).is(':checked')) {
                    testArray.push(testCheck.id_test_method);
                }
            });

            tests[componentPositionTest] = testArray;
            $("#idLabTestSample").modal('hide');
        }

      function validateOne() {
        componentsArr = [];
        serialComponent = $('#serialComponent').val()
        if (valueUnitId==null) {
          Swal.fire("Oops!", "Debe buscar un equipo", "warning");
          return false;
        }

        if (horometer==0 || sampleDateTaken==null || sampleDateReceived==null) {
          Swal.fire("Oops!", "Debe enviar los datos correctamente", "warning");
          return false;
        }

        if (!containerNumber || containerNumber.trim() === '') {
          Swal.fire("Oops!", "El número de envase es requerido", "warning");
          return false;
        }

        if (!quantityAdded || quantityAdded <= 0) {
          Swal.fire("Oops!", "La cantidad adicionada es requerida y debe ser mayor a 0", "warning");
          return false;
        }

        if (!serviceLevelId) {
          Swal.fire("Oops!", "El nivel de servicio es requerido", "warning");
          return false;
        }

        if ($.isEmptyObject(componentsSelected)) {
          Swal.fire("Oops!", "Debe escoger por lo menos un component location", "warning");
          return false;
        }

            $("#idTwoSampleDateReceived").html(sampleDateReceived);

            $("#idTableTwoReception").empty();

            var dateMax = "{{ date('Y-m-d') }}";

            var compSelected = true;
            var nameSelected = ""
            $.each(componentsSelected, function(p, item) {
                var data = components[item];
                var itemOilTime = $("#idInputOilTime_" + item).val();
                if (itemOilTime < 0) {
                    compSelected = false;
                    nameSelected = data.get_component_location.name
                    return false;
                }
            });

        if (!$("#idChangeHorometer").is(':checked')) {
          if (!compSelected) {
            Swal.fire("Oops!", "El component location ("+nameSelected+") tiene una fecha mayor a la del equipo", "warning");
            return false;
          }
        }

            $.each(componentsSelected, function(i, item) {
                var data = components[item];
                var testsData = tests[item];

                var itemOilTime = $("#idInputOilTime_" + item).val();
                if ($("#idFilterChange_" + item).is(':checked')) {
                    var itemFilterChange = true;
                } else {
                    var itemFilterChange = false;
                }
                if ($("#idOilChange_" + item).is(':checked')) {
                    var itemOilChange = true;
                } else {
                    var itemOilChange = false;
                }
                if ($("#idSos_" + item).hasClass("active")) {
                    var itemSos = true;
                } else {
                    var itemSos = false;
                }

                var itemComponent = {
                    componentId: data.component_location,
                    componentName: data.get_component_location.name,
                    lubricantId: data.lubricant,
                    lubricantName: data.get_lubricant.name,
                    horometer: horometer,
                    horometerComponent: 0,
                    oilTime: itemOilTime,
                    sampleDateTaken: sampleDateTaken,
                    sampleDateReceived: sampleDateReceived,
                    oilChange: itemOilChange,
                    filterChange: itemFilterChange,
                    sos: itemSos,
                    serialComponent: serialComponent,
                    tests: testsData,
                    containerNumber: containerNumber,
                    quantityAdded: quantityAdded,
                    quantityUnit: quantityUnit,
                    serviceLevelId: serviceLevelId
                };
                componentsArr.push(itemComponent);

                var horometerComp = calculateCH(horometer, data.info.horometer, data.info.horometer_component);

                var itemDateReceived = sampleDate(sampleDateReceived);
                if (itemOilChange) {
                    var txtOilChange = "SI"
                } else {
                    var txtOilChange = "NO"
                }
                if (itemFilterChange) {
                    var itemFilterChange = "SI"
                } else {
                    var itemFilterChange = "NO"
                }

                $("#idTableTwoReception").append('<tr>' +
                    '<td>' + data.get_component_location.name + '</td>' +
                    '<td>' + data.get_lubricant.name + '</td>' +
                    '<td tabindex="1"><input type="date" max="{{ date('Y-m-d') }}" value="' + sampleDateTaken +
                    '" id="idSampleDateTaken_' + i + '"></td>' +
                    '<td tabindex="1">' + itemDateReceived + '</td>' +
                    '<td tabindex="1"><input type="text" value="' + horometerComp + '" id="idHorometerComp_' +
                    i + '" class="input-number wth-100"></td>' +
                    '<td tabindex="1"><input type="text" value="' + itemOilTime + '" id="idOilTime_' + i +
                    '" class="input-number wth-100"></td>' +
                    '<td tabindex="1">' + txtOilChange + '</td>' +
                    '<td tabindex="1">' + itemFilterChange + '</td>' +
                    '</tr>');
            });

            return true;
        }

      function sendInfo() {
        var urlPath = urlHost + "/administrator/refrigerants/send";
        $.ajax({
          type: 'POST',
          url: urlPath,
          data: {
            "unit_id": valueUnitId,
            "components": componentsArr
          },
          dataType: 'json',
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          beforeSend:function(){
            $(".content_loading").fadeIn("slow");
          },
          success:function(response){
            $(".content_loading").fadeOut("slow");
            if (response.state == 1) {
              $("#idModalSample").modal('hide');
              Swal.fire("Good job!", response.message, "success");
              location.reload();
            }else{
              Swal.fire("Oops!", response.message, "warning");
            }
          },
        });
      }

    </script>
    <script>
        $(document).ready(function() {
            $("#idUnitId").autocomplete({
                source: function(request, response) {
                    var customerId = $('.dropContainer').attr('id');
                    if (!customerId) {
                        response([]);
                        return;
                    }
                    $.ajax({
                        url: '/administrator/refrigerants/autocomplete',
                        dataType: "json",
                        data: {
                            term: request.term,
                            customer_id: customerId
                        },
                        success: function(data) {
                            response($.map(data, function(item) {
                                return {
                                    label: item.unit_id,
                                    value: item.unit_id
                                };
                            }));
                        }
                    });
                },
                minLength: 2
            });
        });
    </script>

    <script type="text/javascript">
        var idSample = null;

        function btnCommentary(id) {
            $('#formCommentary')[0].reset();
            $.ajax({
                type: 'POST',
                url: '/administrator/import/test/get/commentary',
                data: {
                    "sample_id": id
                },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {

                        idSample = id;

                        $("#idTitleCommentary").html('Sample: ' + response.data.title);
                        $("#idInputCommentary").html(response.data.message);

                        $("#idModalCommentary").modal();
                    } else if (response.state == 2) {
                        Swal.fire("Oops!", response.message, "warning");
                    } else {
                        Swal.fire("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    Swal.fire("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        }

        function sendCommentary() {
            var commentary = $("#idInputCommentary").val();
            $.ajax({
                type: 'POST',
                url: '/administrator/import/test/post/commentary',
                data: {
                    "id": idSample,
                    "commentary": commentary
                },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.state == 1) {
                        $("#idModalCommentary").modal('hide');
                        Swal.fire("Bien!", response.message, "success");
                    } else if (response.state == 2) {
                        Swal.fire("Oops!", response.message, "warning");
                    } else {
                        Swal.fire("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    Swal.fire("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        }

        function openDelete(id) {
            Swal.fire({
                title: "Estás seguro?",
                text: "El sample sera eliminado!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Si, Eliminar!"
            }).then((result) => {
                if (result.isConfirmed) {
                    deleteSample(id);
                }
            });
        }

        function deleteSample(id) {
            $.ajax({
                type: 'POST',
                url: '/administrator/import/test/delete',
                data: {
                    "sample_id": id
                },
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $(".content_loading").fadeIn("slow");
                },
                success: function(response) {
                    $(".content_loading").fadeOut("slow");
                    if (response.code == 200) {
                        Swal.fire("Bien!", "Sample eliminado correctamente", "success");
                        window.location.reload();
                        $(".content_loading").fadeIn("slow");
                    }
                },
                error: function(xhr) {
                    $(".content_loading").fadeOut("slow");
                    Swal.fire("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
                }
            });
        }
    </script>

    <script>
        $.fn.dataTable.moment('DD/MM/YYYY');
        $('#tableHistory').DataTable({
            "bPaginate": false,
            "bFilter": false,
        });

        $('.checkAll').on('click', function() {
            if ($(this).prop('checked')) {
                $('.tableCheck').prop('checked', true)
            } else {
                $('.tableCheck').prop('checked', false)
            }
        })

        $('.btnAcceptAll').on('click', function(e) {
            e.preventDefault()
            let checks = $('.tableCheck:checked')
            $('.checkFormInput').remove()
            checks.each(function() {
                $('#formAcceptAll').append(
                    `<input class="checkFormInput" type="hidden" name="samples[]" value="${$(this).attr('data-sample')}">`
                )
            })
            $('#formAcceptAll').submit()
        })
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const addManualBtn = document.getElementById('addManual');
            const excelInput = document.getElementById('excelFile');
            const uploadExcelBtn = document.getElementById('btnUploadExcel');
            const dataTable = document.querySelector('#dataTable tbody');
            const manualForm = document.getElementById('manualForm');

            // Debug: verificar que los elementos existen
            console.log('Excel input:', excelInput);
            console.log('Upload button:', uploadExcelBtn);

            if (!excelInput || !uploadExcelBtn) {
                console.error('No se encontraron los elementos del Excel');
                return;
            }

            let dataList = [];

            // --- VALIDACIÓN MANUAL FORM ---
            if (manualForm) {
                const requiredFields = manualForm.querySelectorAll('.required');
                requiredFields.forEach(input => {
                    input.addEventListener('input', () => {
                        const allFilled = Array.from(requiredFields).every(field => field.value
                            .trim() !== '');
                        addManualBtn.disabled = !allFilled;
                    });
                });
            }

            // --- AGREGAR REGISTRO MANUAL ---
            if (addManualBtn && manualForm) {
                addManualBtn.addEventListener('click', () => {
                    const formData = new FormData(manualForm);

                    // Convertir FormData a objeto y mapear nombres de campos
                    const data = {};
                    for (const [key, value] of formData.entries()) {
                        switch (key) {
                            case 'edad_producto':
                                data['edad_producto_utilizado'] = value;
                                break;
                            case 'unidad_producto':
                                data['unidad_producto_utilizado'] = value;
                                break;
                            case 'unidad_cantidad':
                                data['unidad_cantidad_adicionada'] = value;
                                break;
                            case 'tender':
                                data['tender_combustible'] = value;
                                break;
                            case 'cambio_lubricante':
                                data['cambio_lubricante_refrigerante'] = value;
                                break;
                            case 'temperatura':
                                data['temperatura_reservorio'] = value;
                                break;
                            case 'unidad_temp':
                                data['unidad_temperatura_reservorio'] = value;
                                break;
                            default:
                                data[key] = value;
                        }
                    }

                    // Enviar datos al servidor
                    fetch('{{ route('administrator.refrigerants.store') }}', {
                            method: 'POST',
                            credentials: 'same-origin',
                            headers: {
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')
                                    .getAttribute('content'),
                                'X-Requested-With': 'XMLHttpRequest',
                                'Content-Type': 'application/json',
                                'Accept': 'application/json'
                            },
                            body: JSON.stringify(data)
                        })
                        .then(response => {
                            if (!response.ok) {
                                throw new Error(`HTTP error! status: ${response.status}`);
                            }
                            const contentType = response.headers.get('content-type');
                            if (!contentType || !contentType.includes('application/json')) {
                                throw new Error('La respuesta no es JSON válido');
                            }
                            return response.json();
                        })
                        .then(data => {
                            if (data.state === 1) {
                                // Agregar a la tabla local
                                const formData = new FormData(manualForm);
                                const obj = Object.fromEntries(formData.entries());
                                dataList.push({
                                    codigo_componente: obj.codigo_componente,
                                    nivel_servicio: obj.nivel_servicio,
                                    numero_envase: obj.numero_envase,
                                    fecha_muestra: obj.fecha_muestra,
                                    edad_componente: obj.edad_componente,
                                    temperatura: obj.temperatura,
                                    estado: "Guardado"
                                });

                                renderTable();
                                manualForm.reset();
                                addManualBtn.disabled = true;

                                Swal.fire({
                                    icon: 'success',
                                    title: 'Éxito',
                                    text: data.message,
                                    timer: 2000,
                                    showConfirmButton: false
                                });
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: data.message || 'Error al guardar el registro'
                                });
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: 'Error al conectar con el servidor'
                            });
                        });
                });
            }

            // --- HABILITAR BOTÓN GUARDAR EXCEL ---
            excelInput.addEventListener('change', () => {
                console.log('Archivo seleccionado:', excelInput.files);
                console.log('Cantidad de archivos:', excelInput.files.length);
                const shouldEnable = excelInput.files.length > 0;
                console.log('¿Debería habilitar botón?:', shouldEnable);
                uploadExcelBtn.disabled = !shouldEnable;
                console.log('Estado del botón después:', uploadExcelBtn.disabled);
            });

            // --- CARGA DE EXCEL ---
            function buildSampleUploadReportHtml(data) {
                let html = `<p><strong>${data.message || 'Procesamiento completado'}</strong></p>`;

                if (!data.data || !data.data.row_report || !data.data.row_report.length) {
                    return html;
                }

                html += `
                    <div class="table-responsive text-left" style="max-height: 380px; overflow-y: auto;">
                        <table class="table table-sm table-bordered mb-0">
                            <thead class="thead-dark">
                                <tr>
                                    <th>Fila</th>
                                    <th>N° Muestra</th>
                                    <th>Equipo</th>
                                    <th>Código muestra</th>
                                    <th>Estado</th>
                                    <th>Detalle</th>
                                </tr>
                            </thead>
                            <tbody>`;

                data.data.row_report.forEach(function(item) {
                    const rowClass = item.created ? 'table-success' : 'table-danger';
                    const badge = item.created
                        ? '<span class="badge badge-success">Creada</span>'
                        : '<span class="badge badge-danger">No creada</span>';

                    html += `
                        <tr class="${rowClass}">
                            <td>${item.row_number}</td>
                            <td>${item.n_muestra || '-'}</td>
                            <td>${item.unit_id || '-'}</td>
                            <td>${item.sample_code || '-'}</td>
                            <td>${badge}</td>
                            <td>${item.message || '-'}</td>
                        </tr>`;
                });

                html += '</tbody></table></div>';
                return html;
            }

            function showSampleUploadCompletedModal(data) {
                const hasCreated = data.data && data.data.success_count > 0;
                const hasErrors = data.data && data.data.error_count > 0;

                Swal.fire({
                    icon: hasCreated ? (hasErrors ? 'warning' : 'success') : 'error',
                    title: 'Completado',
                    html: buildSampleUploadReportHtml(data),
                    width: '900px',
                    showConfirmButton: true,
                    confirmButtonText: 'OK',
                    allowOutsideClick: false
                }).then((result) => {
                    if (result.isConfirmed) {
                        window.location.reload();
                    }
                });
            }

            uploadExcelBtn.addEventListener('click', () => {
                const file = excelInput.files[0];
                if (!file) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Por favor selecciona un archivo Excel'
                    });
                    return;
                }

                // Validar extensión del archivo
                const validExtensions = ['.xlsx', '.xls'];
                const fileExtension = file.name.toLowerCase().substring(file.name.lastIndexOf('.'));
                if (!validExtensions.includes(fileExtension)) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Archivo inválido',
                        text: 'Por favor selecciona un archivo Excel (.xlsx o .xls)'
                    });
                    return;
                }

                // Crear FormData para enviar el archivo
                const formData = new FormData();
                formData.append('excel_file', file);

                // Mostrar loading
                Swal.fire({
                    title: 'Procesando archivo...',
                    html: 'Por favor espera mientras se procesa el archivo Excel',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                // Enviar archivo al servidor
                fetch('{{ route('administrator.refrigerants.upload-excel') }}', {
                        method: 'POST',
                        credentials: 'same-origin',
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')
                                .getAttribute('content'),
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        body: formData
                    })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error(`HTTP error! status: ${response.status}`);
                        }
                        const contentType = response.headers.get('content-type');
                        if (!contentType || !contentType.includes('application/json')) {
                            throw new Error('La respuesta no es JSON válido');
                        }
                        return response.json();
                    })
                    .then(data => {
                        Swal.close();

                        if (data.data && data.data.row_report && data.data.row_report.length) {
                            showSampleUploadCompletedModal(data);
                            return;
                        }

                        if (data.state === 1) {
                            showSampleUploadCompletedModal(data);
                        } else {
                            // Error del servidor
                            let errorMessage = data.message || 'Error desconocido';

                            // Si hay errores específicos, mostrarlos
                            if (data.data && data.data.errors && data.data.errors.length > 0) {
                                errorMessage += '\n\nDetalles de los errores:\n' + data.data.errors
                                    .slice(0, 10).join('\n');
                                if (data.data.errors.length > 10) {
                                    errorMessage +=
                                        `\n... y ${data.data.errors.length - 10} errores más`;
                                }
                            }

                            Swal.fire({
                                icon: 'error',
                                title: 'Error en el procesamiento',
                                html: errorMessage.replace(/\n/g, '<br>'),
                                width: '600px',
                                customClass: {
                                    popup: 'text-left'
                                }
                            });
                        }
                    })
                    .catch(error => {
                        Swal.close();
                        console.error('Error:', error);
                        Swal.fire({
                            icon: 'error',
                            title: 'Error de conexión',
                            text: 'Error al enviar el archivo: ' + error.message
                        });
                    });
            });

            // --- RENDERIZAR TABLA ---
            function renderTable() {
                if (!dataTable) return;
                dataTable.innerHTML = '';
                dataList.forEach((item, index) => {
                    const badgeClass = item.estado === 'Guardado' ? 'bg-success' : 'bg-warning';
                    const row = `
                                <tr>
                                    <td>${item.codigo_componente}</td>
                                    <td>${item.nivel_servicio}</td>
                                    <td>${item.numero_envase}</td>
                                    <td>${item.fecha_muestra}</td>
                                    <td>${item.edad_componente || '-'}</td>
                                    <td>${item.temperatura || '-'}</td>
                                    <td><span class="badge ${badgeClass}">${item.estado}</span></td>
                                    <td class="text-center">
                                        <button class="btn btn-xs btn-info editBtn" data-index="${index}" ${item.estado === 'Guardado' ? 'disabled' : ''}><i class="fa fa-edit"></i></button>
                                        <button class="btn btn-xs btn-danger deleteBtn" data-index="${index}" ${item.estado === 'Guardado' ? 'disabled' : ''}><i class="fa fa-trash"></i></button>
                                    </td>
                                </tr>
                            `;
                    dataTable.insertAdjacentHTML('beforeend', row);
                });
            }

            // --- ELIMINAR REGISTRO ---
            if (dataTable) {
                dataTable.addEventListener('click', e => {
                    if (e.target.closest('.deleteBtn')) {
                        const index = e.target.closest('.deleteBtn').dataset.index;
                        dataList.splice(index, 1);
                        renderTable();
                    }
                });
            }

        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const fileInput = document.getElementById('excelRefrigerantFile');
            const btnProcess = document.getElementById('btnProcessExcel');
            const progressContainer = document.getElementById('progressContainer');
            const progressdataTableBar = document.getElementById('progressBar');
            const dataTable = document.querySelector('#tableRefrigerantData');
            const dataTableBody = document.querySelector('#tableRefrigerantData tbody');
            const summaryContainer = document.getElementById('summaryContainer');
            const summaryMessage = document.getElementById('summaryMessage');

            let dataList = [];

            // dataTable.style.display = 'none';


            // Habilitar botón al seleccionar archivo
            fileInput.addEventListener('change', () => {
                btnProcess.disabled = !fileInput.files.length;
            });

            // Enviar archivo al servidor para procesar resultados refrigerantes
            function buildResultsUploadReportHtml(data) {
                let html = `<p><strong>${data.message || 'Archivo procesado correctamente'}</strong></p>`;

                if (!data.data || !data.data.row_report || !data.data.row_report.length) {
                    return html;
                }

                html += `
                    <div class="table-responsive text-left" style="max-height: 380px; overflow-y: auto;">
                        <table class="table table-sm table-bordered mb-0">
                            <thead class="thead-dark">
                                <tr>
                                    <th>Fila</th>
                                    <th>N° Muestra</th>
                                    <th>Código muestra</th>
                                    <th>Tests</th>
                                    <th>Estado</th>
                                    <th>Detalle</th>
                                </tr>
                            </thead>
                            <tbody>`;

                data.data.row_report.forEach(function(item) {
                    const rowClass = item.linked ? 'table-success' : 'table-danger';
                    const badge = item.linked
                        ? '<span class="badge badge-success">Vinculada</span>'
                        : '<span class="badge badge-danger">No vinculada</span>';

                    html += `
                        <tr class="${rowClass}">
                            <td>${item.row_number}</td>
                            <td>${item.n_muestra || '-'}</td>
                            <td>${item.sample_code || '-'}</td>
                            <td>${item.tests_count || 0}</td>
                            <td>${badge}</td>
                            <td>${item.message || '-'}</td>
                        </tr>`;
                });

                html += '</tbody></table></div>';
                return html;
            }

            function showResultsUploadCompletedModal(data) {
                const hasLinked = data.data && data.data.found_count > 0;
                const hasErrors = data.data && data.data.not_found_count > 0;

                Swal.fire({
                    icon: hasLinked ? (hasErrors ? 'warning' : 'success') : 'error',
                    title: 'Completado',
                    html: buildResultsUploadReportHtml(data),
                    width: '900px',
                    showConfirmButton: true,
                    confirmButtonText: 'OK',
                    allowOutsideClick: false
                }).then((result) => {
                    if (result.isConfirmed) {
                        window.location.reload();
                    }
                });
            }

            btnProcess.addEventListener('click', () => {
                const file = fileInput.files[0];
                if (!file) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Por favor selecciona un archivo'
                    });
                    return;
                }

                const formData = new FormData();
                formData.append('results_file', file);
                formData.append('approve', 0); // cambiar a 1 si quieres aprobar automáticamente

                Swal.fire({
                    title: 'Procesando archivo...',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                fetch('{{ route('administrator.refrigerants.upload-results-refrigerants') }}', {
                        method: 'POST',
                        credentials: 'same-origin',
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')
                                .getAttribute('content')
                        },
                        body: formData
                    })
                    .then(response => response.json())
                    .then(data => {
                        Swal.close();

                        if (data.data && data.data.row_report && data.data.row_report.length) {
                            showResultsUploadCompletedModal(data);
                            return;
                        }

                        if (data.state === 1) {
                            showResultsUploadCompletedModal(data);
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: data.message || 'Error al procesar'
                            });
                        }
                    })
                    .catch(err => {
                        Swal.close();
                        console.error(err);
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Error de conexión'
                        });
                    });
            });

            // Cargar 15 registros simulados
            function loadSimulatedData() {
                dataList = Array.from({
                    length: 15
                }, (_, i) => ({
                    nombre_cliente: `Cliente ${i + 1}`,
                    nombre_operacion: `Operación ${100 + i}`,
                    n_muestra: `M-${i + 1}`,
                    correlativo: `C-${1000 + i}`,
                    fecha_muestreo: `2025-10-${String(1 + i).padStart(2, '0')}`,
                    fecha_informe: `2025-10-${String(2 + i).padStart(2, '0')}`,
                    producto: `Producto ${i + 1}`,
                    equipo: `Equipo ${i + 1}`,
                    componente: `Comp-${i + 1}`,
                    estado: i % 5 === 0 ? 'No vinculado' : 'Vinculado'
                }));

                // renderTable();
                showSummary();
                fileInput.value = '';
                btnProcess.disabled = true;
                progressContainer.style.display = 'none';
                progressBar.classList.remove('bg-success');
                progressBar.classList.add('bg-info');
                progressBar.style.width = '0%';
                progressBar.textContent = '0%';
            }

            // Renderizar tabla
            // function renderTable() {
            //     dataTable.style.display = 'block';
            //     dataTableBody.innerHTML = '';
            //     dataList.forEach(item => {
            //         const row = `
        //                     <tr>
        //                         <td>${item.nombre_cliente}</td>
        //                         <td>${item.nombre_operacion}</td>
        //                         <td>${item.n_muestra}</td>
        //                         <td>${item.correlativo}</td>
        //                         <td>${item.fecha_muestreo}</td>
        //                         <td>${item.fecha_informe}</td>
        //                         <td>${item.producto}</td>
        //                         <td>${item.equipo}</td>
        //                         <td>${item.componente}</td>
        //                         <td>
        //                             <span class="badge ${item.estado === 'Vinculado' ? 'bg-success' : 'bg-danger'}">
        //                                 ${item.estado}
        //                             </span>
        //                         </td>
        //                     </tr>
        //                 `;
            //         dataTableBody.insertAdjacentHTML('beforeend', row);
            //     });
            // }

            // Mostrar resumen final
            function showSummary() {
                const total = dataList.length;
                const vinculados = dataList.filter(d => d.estado === 'Vinculado').length;
                const noVinculados = total - vinculados;

                summaryMessage.innerHTML = `
                    ✅ <strong>Carga finalizada:</strong> ${total} registros procesados —
                    <b>${vinculados}</b> vinculados con éxito —
                    <b>${noVinculados}</b> no vinculados
                    ${noVinculados > 0 ? '' : ''}.
                `;
                summaryContainer.style.display = 'block';
            }
        });
    </script>
@endsection