@extends('adminlte::page')

@section('title', 'VER SOLICITUD')

@section('content_header')
    <h1 class="m-0 text-dark">VER SOLICITUD</h1>
@stop

@section('content')
    <div class="card uper">
        <div class="card-header">
            <div class="row">
                <div class="col-md-6">
                    <a href="{{ route('reporte-fallas.index') }}" class="btn btn-warning">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8"/>
                        </svg>
                        REGRESAR
                    </a>
                </div>
            </div>
        </div>
        <div class="card-body">
            @include('alerts.errors')
            @include('alerts.success')
            <br />
            @if ( in_array($solicitud->estado, [
                App\Models\SolicitudUsuarioCliente::ESTADO_PENDIENTE,
            ]) )
                <div class="row">
                    @can(App\Constants\PermisosConstants::ATENDER_REPORTE_FALLAS)
                    <form id="form_atender_{{ $solicitud->id }}" action="{{ route('reporte-fallas.atendeer', ['id' => $solicitud->id]) }}" method="POST">
                        @csrf
                        @method('post')
                        <button type="button" class="btn btn-primary" style="margin-left: 2px" onclick="preAtender({{ $solicitud->id }});">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-compass-fill" viewBox="0 0 16 16">
                                <path d="M15.5 8.516a7.5 7.5 0 1 1-9.462-7.24A1 1 0 0 1 7 0h2a1 1 0 0 1 .962 1.276 7.5 7.5 0 0 1 5.538 7.24m-3.61-3.905L6.94 7.439 4.11 12.39l4.95-2.828 2.828-4.95z"/>
                            </svg>
                            Atender
                        </button>
                    </form>
                    @endcan
                </div>
                <br />
            @endif
            @if ( in_array($solicitud->estado, [
                App\Models\SolicitudUsuarioCliente::ESTADO_ATENDIDO,
            ]) )
                @can(App\Constants\PermisosConstants::ATENDER_REPORTE_FALLAS)
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <form id="form_marcar_resuelto_{{ $solicitud->id }}" action="{{ route('reporte-fallas.resolver', ['id' => $solicitud->id]) }}" method="POST">
                                @csrf
                                @method('post')
                                <input type="hidden" name="comentario_atencion" id="input_hidden_form_resolver_comentario_atencion">
                                <button type="button" class="btn btn-success" style="margin-left: 2px" onclick="preMarcarComoResuelta({{ $solicitud->id }});">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                                        <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/>
                                    </svg>
                                    Marcar como "Resuelto"
                                </button>
                            </form>
                            <br />&nbsp;&nbsp;
                            <form id="form_marcar_sin_resolver_{{ $solicitud->id }}" action="{{ route('reporte-fallas.sin-resolver', ['id' => $solicitud->id] ) }}" method="POST">
                                @csrf
                                @method('post')
                                <input type="hidden" name="comentario_atencion" id="input_hidden_form_sin_resolver_comentario_atencion">
                                <button type="button" class="btn btn-danger" style="margin-left: 2px" onclick="preMarcarComoSinResolver({{ $solicitud->id }});">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
                                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
                                        <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
                                    </svg>
                                    Marcar como "Sin Resolver"
                                </button>
                            </form>
                        </div>
                        <div class="row">
                            <div class="form-group col-12 {{ $errors->has('comentario_atencion') ? ' has-danger' : '' }}">
                                <label for="input_comentario_atencion" class="col-form-label">Comentario final: *</label>
                                <input class="form-control form-control-alternative"
                                        type="text"
                                        id="input_comentario_atencion"
                                        value="{{ old('comentario_atencion' , $solicitud ? $solicitud->comentario_atencion : '') }}"
                                        maxlength="255"
                                        onkeyup="actualizarCamposOcultosFormularios()"
                                    />
                                @include('alerts.feedback', ['field' => 'comentario_atencion'])
                            </div>
                        </div>
                    </div>
                </div>
                @endcan
            @endif
            @include('pages.reporte-fallas.partials.include_form_reporte_fallas', [
                'data' => $solicitud,
                'visualizar' => true
            ])
            <hr />
        </div>
    </div>
@stop

@section('js')
    <script type="text/javascript" defer>
        let input_comentario_atencion = document.getElementById("input_comentario_atencion");
        let input_hidden_form_resolver_comentario_atencion = document.getElementById("input_hidden_form_resolver_comentario_atencion");
        let input_hidden_form_sin_resolver_comentario_atencion = document.getElementById("input_hidden_form_sin_resolver_comentario_atencion");

        $(document).ready(function() {
            actualizarCamposOcultosFormularios();
        });// -------------------- fin document ready --------------------

        function actualizarCamposOcultosFormularios(){
            input_hidden_form_resolver_comentario_atencion.value = input_comentario_atencion.value;
            input_hidden_form_sin_resolver_comentario_atencion.value = input_comentario_atencion.value;
        }

        function preAtender(id){
            event.preventDefault();
            swal({
                title: "¿Estás seguro de atender esta solicitud?",
                text: "Una vez iniciado no se podrá revertir este proceso.",
                icon: "warning",
                buttons: true,
                dangerMode: true
            })
                .then((permitirEliminar) => {
                    if (permitirEliminar) {
                        swal("La solicitud ha iniciado a atenderse.", {
                            icon: "success",
                        });
                        document.getElementById('form_atender_' + id).submit();
                    } else {
                        event.preventDefault();
                        swal("Operación cancelada.");
                    }
                });
        }

        function preMarcarComoResuelta(id){
            event.preventDefault();

            if ( input_comentario_atencion.value === "" ){
                mostrarAlerta("Por favor indice un comentario final", 3);
                return;
            }

            swal({
                title: "¿Estás seguro de marcar como resuelta?",
                text: "Una vez marcada como resuelta no se podrá revertir este proceso.",
                icon: "warning",
                buttons: true,
                dangerMode: true
            })
                .then((permitirEliminar) => {
                    if (permitirEliminar) {
                        swal("La solicitud sera marcada como resuelta.", {
                            icon: "success",
                        });
                        document.getElementById('form_marcar_resuelto_' + id).submit();
                    } else {
                        event.preventDefault();
                        swal("Operación cancelada.");
                    }
                });
        }

        function preMarcarComoSinResolver(id){
            event.preventDefault();

            if ( input_comentario_atencion.value === "" ){
                mostrarAlerta("Por favor indice un comentario final", 3);
                return;
            }

            swal({
                title: "¿Estás seguro de marcar como sin resolver?",
                text: "Una vez marcada como sin resolver no se podrá revertir este proceso.",
                icon: "warning",
                buttons: true,
                dangerMode: true
            })
                .then((permitirEliminar) => {
                    if (permitirEliminar) {
                        swal("La solicitud será marcada como no resuelta.", {
                            icon: "success",
                        });
                        document.getElementById('form_marcar_sin_resolver_' + id).submit();
                    } else {
                        event.preventDefault();
                        swal("Operación cancelada.");
                    }
                });
        }
    </script>
@stop