@section('estilos')
<link rel="stylesheet" href="{{asset('assets/js/plugins/select2/css/select2.min.css')}}">
@endsection
<div>
    <div class="content">
        <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">
            <div class="flex-grow-1">
                <h1 class="h3 fw-bold mb-2">
                    {{$type_orden}}
                </h1>
                <p class="mb-0 fs-xs"><b>{{$company}}</b></p>
                <p class="fs-xs">{{$marca}} {{$modelo}} {{$year}} {{$economico}}</p>
                <a href="{{asset('/tec/servicios')}}" class="fs-base lh-base fw-medium text-primary mb-0">
                    <i class="fa fa-arrow-left"></i> Regresar
                </a>
            </div>
        </div>
    </div>

    <div class="content">

        @if($type_orden == "Instalación")
        <div class="block">
            <div class="block-header block-header-default">
                <h3 class="block-title">Complementos a instalar</h3>
            </div>
            <div class="block-content">
                <div class="table-responsive push">
                    <table class="table table-borderless">
                        <tbody>
                            @if($info->features != null)
                            @foreach($complementos as $complement)
                            <tr class="py-0">
                                <td class="mb-0 pb-0">
                                    <div class="block block-rounded block-mode-hidden mb-0">
                                        <div class="block-header block-header-default">
                                            <h3 class="block-title fs-xs">{{$complement->name}}</h3>
                                            <div class="block-options">
                                                <button type="button" class="btn-block-option" data-toggle="block-option" data-action="content_toggle"><i class="si si-arrow-up"></i></button>
                                            </div>
                                        </div>
                                        <div class="block-content">
                                            <p class="mb-0 fw-semibold fs-sm">Manual y contenido de apoyo.</p>
                                            <span class="fs-sm">Duración estimada: {{$complement->time}} min</span>
                                            <hr>
                                            @if($complement->url_video != null)<a class="btn btn-sm btn-danger" href="{{$complement->url_video}}" target="_blank"><i class="fa fa-play"></i> Video apoyo</a>@endif
                                            @if($complement->url_video != null)<p>{!! $complement->manual !!}</p>@endif
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        @endif
{{--
        <div class="block">
            <div class="block-header block-header-default">
                <h3 class="block-title">Herramientas necesarias</h3>
            </div>
            <div class="block-content">
                <div class="table-responsive push">
                    <table class="table table-bordered">
                        <tbody>
                            @foreach($herramientas as $herramienta)
                            <tr>
                                <td>
                                    <p class="fw-semibold mb-1">{{$herramienta->nombre}}</p>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div> --}}

        <div class="block">
            <div class="block-header block-header-default">
                <h3 class="block-title">Información del servicio</h3>
            </div>
            <div class="block-content">
                <div class="row">
                    <p class="mb-0 fs-md"><b>Descripción adicional del servicio</b></p>
                    <p class="fs-sm">
                        @if($info['comments'] == null)
                        No hay ningún comentario.
                        @else
                        {{$info['comments']}}
                        @endif
                    </p>
                    <hr>
                    <p class="mb-2 fs-md"><b>Información de la unidad</b></p>
                    <div class="col-6">
                        <div class="form-floating mb-4">
                            <input type="text" class="form-control form-control-alt @error('marca') is-invalid @enderror" wire:model.defer="marca">
                            <label for="example-text-input-floating">Marca <span class="text-danger">*</span></label>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-floating mb-4">
                            <input type="text" class="form-control form-control-alt @error('color') is-invalid @enderror" wire:model.defer="color">
                            <label for="example-text-input-floating">Color <span class="text-danger">*</span></label>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-floating mb-4">
                            <input type="text" class="form-control form-control-alt @error('modelo') is-invalid @enderror" wire:model.defer="modelo">
                            <label for="example-text-input-floating">Modelo <span class="text-danger">*</span></label>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-floating mb-4">
                            <input type="text" class="form-control form-control-alt @error('year') is-invalid @enderror" wire:model.defer="year">
                            <label for="example-text-input-floating">Año <span class="text-danger">*</span></label>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-floating mb-4">
                            <input type="text" class="form-control form-control-alt @error('placa') is-invalid @enderror" wire:model.defer="placa">
                            <label for="example-text-input-floating">Placa <span class="text-danger">*</span></label>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-floating mb-4">
                            <input type="text" class="form-control form-control-alt @error('economico') is-invalid @enderror" wire:model.defer="economico">
                            <label for="example-text-input-floating">Ecónomico <span class="text-danger">*</span></label>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="form-floating mb-4">
                            <input type="text" class="form-control form-control-alt @error('vin') is-invalid @enderror" wire:model.defer="vin">
                            <label for="example-text-input-floating">VIN <span class="text-danger">*</span></label>
                        </div>
                    </div>

                    <div class="col-6">
                        <div class="mb-4">
                            <p class="mb-2 fs-sm"><b>Odómetro</b></p>
                            <input type="text" class="form-control form-control-lg form-control-alt" wire:model.defer="odometro" placeholder="Sólo números enteros">
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="mb-4">
                            <p class="mb-2 fs-sm"><b>Horómetro</b></p>
                            <input type="text" class="form-control form-control-lg form-control-alt" wire:model.defer="horometro" placeholder="Formato hora HH:MM">
                        </div>
                    </div>
                    <hr>
                    @if($type_orden == "Instalación")
                    <p class="mb-2 fs-md"><b>Dispositivo(s) que instalarás en la unidad (IMEI)</b></p>
                    <div class="col-6">
                        @for($i = 0; $i <= sizeof($imeis)-1; $i++)
                        <div class="mb-4">
                            <label class="form-label">IMEI <span class="text-danger">*</span> <span class="text-muted fs-xs">({{$imeis[$i]['name']}})</span></label>
                            <select class="form-select @error('dispositivo_select.{{$i}}') is-invalid @enderror" id="dispositivo_select{{$i}}" name="dispositivo_select{{$i}}" wire:model="id_dispositivo.{{$i}}" data-placeholder="Seleccione un dispositivo">
                                <option></option>
                                @foreach($dispositivos as $dispositivo)
                                <option value="{{$dispositivo['id']}}">{{$dispositivo['imei']}} ({{$dispositivo['name']}})</option>
                                @endforeach
                            </select>
                        </div>
                        @endfor
                    </div>
                    @elseif($type_orden == "Mantenimiento")
                    <p class="mb-2 fs-md"><b>Reemplazar dispositivos de la unidad (IMEI)</b></p>
                    <div class="col-12" wire:ignore>
                        @for($i = 0; $i <= sizeof($imeis)-1; $i++)
                        <div class="mb-4">
                            <label class="form-label">IMEI actual <span class="text-muted fs-xs">{{$imeis[$i]['imei']}} ({{$imeis[$i]['name']}})</span></label>
                            <select class="form-select" id="dispositivo_select2{{$i}}" name="dispositivo_select2{{$i}}" wire:model.defer="dispositivo_select.{{$i}}" data-placeholder="Selecciona el dispositivo de reemplazo">
                                <option></option>
                                @foreach($dispositivos as $dispositivo)
                                    @if($imeis[$i]['id'] == $dispositivo['id_product'])
                                <option value="{{$dispositivo['id']}}">{{$dispositivo['imei']}} ({{$dispositivo['name']}})</option>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                        @endfor
                    </div>
                    @elseif($type_orden == "Desintstalacion")
                    <p class="mb-2 fs-md"><b>Dispositivo(s) que vas a desinstalar (IMEI)</b></p>
                    <div class="col-12" wire:ignore>
                        <div class="table-responsive">
                            <table class="table table-hover table-vcenter">
                                <tbody class="fs-sm">
                                    @for($i = 0; $i <= sizeof($imeis)-1; $i++)
                                    <tr class="table-active">
                                        <td>
                                            <p class="fs-sm fw-medium text-muted mb-0"><em>{{$imeis[$i]['name']}}</em></p>
                                            <p class="fw-semibold mb-0">{{$imeis[$i]['imei']}}</p>
                                        </td>
                                        <td class="text-end">
                                            @if($imeis[$i]['status'] != "Desinstalado pendiente")
                                            <button class="btn btn-danger fs-xs" wire:click="desinstalarComponente({{$imeis[$i]['id_serial']}}, 1)"><i class="fa fa-trash"></i> Desinstalar</button>
                                            @else
                                            <button class="btn btn-warning fs-xs" wire:click="desinstalarComponente({{$imeis[$i]['id_serial']}}, 2)"><i class="fa fa-trash-arrow-up"></i> Restaurar</button>
                                            @endif
                                        </td>
                                    </tr>
                                    @endfor
                                </tbody>
                            </table>
                        </div>
                    </div>
                    @endif
                    <hr>
                    <div class="row" wire:ignore.self>
                        <div class="col-12">
                            <div class="mb-4">
                                <p class="mb-2 fs-md"><b>Marque si aplica el caso</b></p>
                                <div class="space-y-2">
                                    @foreach($preguntas as $pregunta)
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" wire:model.defer="pregunta.{{$pregunta['id']}}">
                                        <label class="form-check-label fs-sm">{{$pregunta['pregunta']}}</label>
                                    </div>
                                    @endforeach
                                </div>
                            </div>

                            <div class="mb-4">
                                <textarea class="form-control form-control-alt" id="example-textarea-input-alt" wire:model.defer="descripcion" name="example-textarea-input-alt" rows="5" placeholder="Escribe alguna observación adicional sin faltas ortográficas"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="block-content block-content-full block-content-sm bg-body-light fs-sm">
                <button class="btn btn-primary" wire:click="actualizarServicio({{$id_editar}})">Guardar</button>
            </div>
        </div>

        <div class="block">
            <div class="block-header block-header-default">
                <h3 class="block-title">Evidencia fotográfica</h3>
            </div>
            <div class="block-content">
                <div class="table-responsive push">
                    <table class="table table-bordered">
                        <tbody>
                            @forelse($fotos as $foto)
                                @foreach($foto as $require_img)
                                <tr>
                                    <td>
                                        <label class="form-label" for="example-file-input">{{$require_img['titulo']}} <span class="text-danger">{{$require_img['requerido'] === 1 ? '*' : ''}}</span></label>
                                        @if(sizeof($imagenes) > 0)
                                            @foreach($imagenes as $key => $img)
                                                @if($require_img['id'] == $img['id_fotografia'])
                                                <div class="mb-2">
                                                    <a target="_blank" href="{{ asset('/storage').'/'.$img['url_imagen'] }}"><i class="fa fa-image"></i> Ver imagen</a>
                                                    <button class="btn btn-link text-danger" wire:click="eliminarImagen({{$img['id']}})"><i class="fa fa-trash"></i> Eliminar</button>
                                                </div>
                                                @break
                                                @else
                                                    @if($key == count($imagenes) - 1)
                                                    <div class="input-group">
                                                        <input type="file" class="form-control" wire:model="imagen">
                                                        <button type="button" class="btn btn-success" wire:click="subirImagen({{$require_img['id']}})"><i class="fa fa-upload"></i> Subir</button>
                                                    </div>
                                                    @endif
                                                @endif
                                            @endforeach
                                        @else
                                        <div class="input-group">
                                            <input type="file" class="form-control" wire:model="imagen">
                                            <button type="button" class="btn btn-success" wire:click="subirImagen({{$require_img['id']}})"><i class="fa fa-upload"></i> Subir</button>
                                        </div>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            @empty
                                <tr>
                                    <td>
                                        <span>No se requieren fotografías para este servicio.</span>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                        <div wire:loading wire:target="imagen">
                            <div class="spinner-border spinner-border-sm text-primary" role="status">
                            </div>
                            <span class="text-muted">Subiendo imagen, espere por favor...</span>
                        </div>
                    </table>
                </div>
            </div>
        </div>

        <div class="block">
            <div class="block-header block-header-default">
                <h3 class="block-title">Firma</h3>
            </div>
            <div class="block-content">

                <div class="mb-4">
                    <label class="form-label">Responsable <span class="text-danger">*</span></label>
                    <button class="btn btn-link text-muted mb-0 push" data-bs-toggle="modal" data-bs-target="#modal-block-contact">+ Agregar</button>
                    <select class="form-select form-control-alt" wire:model.defer="id_contacto">
                        <option>Selecciona una contacto</option>
                        @foreach($contactos as $contacto)
                        <option value="{{$contacto['id']}}">{{$contacto['name']}}</option>
                        @endforeach
                    </select>
                    <span class="text-muted fs-xs">Evita crear responsables que ya existen.</span>
                </div>

                <div class="table-responsive push">
                    <table class="table table-bordered">
                        <tbody>
                            <label class="form-label">Firma del responsable <span class="text-danger">*</span></label>
                            <div class="wrapper">
                                <canvas style="border: 1px solid #757880;" id="signature" class="signature" width=290 height=200></canvas>
                            </div>
                            <div class="mb-2">
                                <button class="btn btn-sm btn-link text-danger" id="clear" type="reset"><i class="fa fa-trash"></i> Limpiar</button>
                            </div>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="block-content block-content-full block-content-sm bg-body-light fs-sm">
                <button class="btn btn-warning" id="guardarFirma" wire:click="finalizarServicio">Finalizar servicio</button>
            </div>
        </div>

        <div wire:ignore.self class="modal" id="modal-block-contact" tabindex="-1" role="dialog" aria-labelledby="modal-block-contact" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="block block-rounded block-transparent mb-0">
                        <div class="block-header block-header-default">
                            <h3 class="block-title">Nuevo contacto</h3>
                            <div class="block-options">
                            <button type="button" class="btn-block-option" data-bs-dismiss="modal" aria-label="Close">
                                <i class="fa fa-fw fa-times"></i>
                            </button>
                            </div>
                        </div>
                        <div class="block-content fs-sm">
                            <div class="row">
                                <label class="form-label">Contactos</label>
                                <div class="col-12">
                                    <div class="row">
                                        <div class="col-4">
                                            <div class="form-floating mb-4">
                                                <input type="text" class="form-control form-control-alt" id="nombre_contacto" wire:model.defer="nombre_contacto">
                                                <label for="example-text-input-floating">Nombre del contacto <span class="text-danger">*</span></label>
                                            </div>
                                        </div>
                                        <div class="col-4">
                                            <div class="form-floating mb-4">
                                                <input type="text" class="form-control form-control-alt" id="telefono_contacto" wire:model.defer="telefono_contacto">
                                                <label for="example-text-input-floating">Teléfono <span class="text-danger">*</span></label>
                                            </div>
                                        </div>
                                        <div class="col-4">
                                            <div class="form-floating mb-4">
                                                <input type="text" class="form-control form-control-alt" id="email_contacto" wire:model.defer="email_contacto">
                                                <label for="example-text-input-floating">Correo electrónico <span class="text-danger">*</span></label>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="block-content block-content-full text-end bg-body">
                            <button type="button" class="btn btn-sm btn-alt-secondary me-1" data-bs-dismiss="modal">Cancelar</button>
                            <button type="button" class="btn btn-sm btn-success" data-bs-dismiss="modal" wire:click="crearContacto">Continuar</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@section('scripts')
<script src="{{asset('assets/js/lib/jquery.min.js')}}"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="{{asset('assets/js/plugins/select2/js/select2.full.min.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>
<script>
    window.addEventListener('swal', event => {
        Swal.fire({
            title: event.detail.title,
            text: event.detail.text,
            icon: event.detail.type,
            timer: event.detail.timer,
            showConfirmButton: event.detail.showConfirmButton,
        });
    });
</script>

<script>

    document.addEventListener('DOMContentLoaded', function () {
        $(document).ready(function() {

            @for($i = 0; $i <= sizeof($imeis)-1; $i++)
            $('#dispositivo_select{{$i}}').select2();
            $('#dispositivo_select{{$i}}').on('change', function (e) {
                var data = $('#dispositivo_select{{$i}}').select2("val");
                @this.set('id_dispositivo.{{$i}}', data);
            });
            @endfor

            @for($i = 0; $i <= sizeof($imeis)-1; $i++)
            $('#dispositivo_select2{{$i}}').select2();
            $('#dispositivo_select2{{$i}}').on('change', function (e) {
                var data = $('#dispositivo_select2{{$i}}').select2("val");
                @this.set('dispositivo_select.{{$i}}', data);
            });
            @endfor

            var signaturePad = new SignaturePad(document.getElementById('signature'), {
                backgroundColor: 'rgba(255, 255, 255, 0)',
                penColor: 'rgb(0, 49, 247)'
            });
            var saveButton = document.getElementById('guardarFirma');

            $("#clear").click(function() {
                signaturePad.clear();
            });

            saveButton.addEventListener('click', function (event) {
                @this.set('firma', signaturePad.toDataURL(), true);
            });
        });
    });
</script>
@endsection