@extends('adminlte::page')

@section('title', 'Verificación de Monturas')

@section('content_header')
    <h1>Verificación de Monturas</h1>
@stop

@section('content')
    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-body">
                    <form action="{{route('inventory.verifyframes.searchframe',$verifyframe->id_verify_frame)}}" method="POST" class="form-search-frames" id="form-search-frames" onsubmit="return false;">
                        @csrf
                        <div class="row">
                            <div class="col-xl-4 col-lg-4">
                                <span>Código de Montura</span>
                                <input type="search" name="code" class="form-control">
                            </div>
                            <div class="col-xl-4 col-lg-4">
                                <span>Código QR</span>
                                <input type="search" name="qrcode" class="form-control" autofocus>
                            </div>
                            <div class="col-xl-2 col-lg-2">
                                <br>
                                <input type="submit" value="Buscar" class="btn btn-success">
                            </div>

                            <div class="col-xl-2 col-lg-2">
                                <div class="text-right">
                                    {{$branch->name}}
                                </div>
                            </div>

                        </div>
                        

                    </form>
                    
            </div>
            </div>
        </div>
        <div class="col-xl-3">
            <div class="card">
                <div class="card-header">Última montura revisada</div>
                <div class="card-body" id="reviewed-frame">
                    
                </div>
            </div>
        </div>
        <div class="col-xl-3">
            <div class="card">
                <div class="card-header">Monturas Totales</div>
                <div class="card-body">
                    <div class="text-center h1" id="total_frames">0</div>
                </div>
            </div>
            
        </div>
        <div class="col-xl-3">
            <div class="card">
                <div class="card-header">Monturas Revisadas</div>
                <div class="card-body">
                    <div class="text-center h1" id="total_frames_reviewed">0</div>
                </div>
                <div class="card-footer text-muted">
                   <a href="{{route('inventory.verifyframes.reviewed', $verifyframe->id_verify_frame)}}" class="btn btn-secondary" target="_blank">Ver Monturas revisadas</a>
                </div>
            </div>
        </div>
        <div class="col-xl-3">
            <div class="card">
                <div class="card-header">Monturas Pendientes</div>
                <div class="card-body">
                    <div class="text-center h1" id="total_frames_pending">0</div>
                </div>
                <div class="card-footer text-muted">
                    <a href="{{route('inventory.verifyframes.pending', $verifyframe->id_verify_frame)}}" class="btn btn-secondary" target="_blank">Ver Monturas pendientes</a>
                 </div>
            </div>
        </div>

    </div>
@stop

@section('css')

@stop

@section('js')
<script>
$(document).ready(function(){
    $("#form-search-frames").submit(function(e){
        e.preventDefault();
        searchFrame();
    });
    searchFrame();
});
function searchFrame(){
    let url = $("#form-search-frames").attr("action");
    params = $("#form-search-frames").serializeArray();
    $("#reviewed-frame").html('');
    let code = $("[name=code]").val();
    let qrcode = $("[name=qrcode]").val();
    if(code != "") {
        $("[name=code]").val('').focus();
    }
    if(qrcode != "") {
        $("[name=qrcode]").val('').focus();
    }

    $.post(url,params,function(dataresponse){
        $("#total_frames").html(dataresponse.total_frames);
        $("#total_frames_reviewed").html(dataresponse.total_frames_reviewed);
        $("#total_frames_pending").html(dataresponse.total_frames_pending);
        $("#total_frames").html(dataresponse.total_frames);

        if(dataresponse.status == 1){
            let data = '';

                data = `<table class="table table-bordered">
                            <tr>
                                <td>Marca</td><td>${dataresponse.data_frame.brand}</td>
                            </tr>
                            <tr>
                                <td>Tipo de Montura</td><td>${dataresponse.data_frame.frame_type}</td>
                            </tr>
                            <tr>
                                <td>Tamaño</td><td>${dataresponse.data_frame.size}</td>
                            </tr>
                            <tr>
                                <td>Color</td><td>${dataresponse.data_frame.color}</td>
                            </tr>
                            <tr>
                                <td>Imágen</td><td>${dataresponse.data_frame.image}</td>
                            </tr>
                        
                        </table>`;
            $("#reviewed-frame").html(data);
        }else if(dataresponse.status == 2){
            let data = '';
            if(dataresponse.message != ""){
                data= `<div class="alert alert-warning">${dataresponse.message}</div>`;
            }
            $("#reviewed-frame").html(data);
        }else{
            let data = '';
            if(dataresponse.message != ""){
                data= `<div class="alert alert-danger">${dataresponse.message}</div>`;
            }
            $("#reviewed-frame").html(data);
        }

    },"json");
}
</script>
@stop