@extends('fragments.public.publicInternationalFullTemplate')
@section('titulo')
    Report Details
@endsection
@section('contenido')
@php
    if (! session('id_portal_user')) {
        header('location: /portal_de_clientes');
        die();
    }
@endphp
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet">

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
  
<style>
    .bs4-order-tracking {
        margin-bottom: 30px;
        overflow: hidden;
        color: #878788;
        padding-left: 0px;
        margin-top: 30px
    }

    .bs4-order-tracking li {
        list-style-type: none;
        font-size: 13px;
        width: 33%;
        float: left;
        position: relative;
        font-weight: 400;
        color: #878788;
        text-align: center
    }

    .bs4-order-tracking li:first-child:before {
        margin-left: 15px !important;
        padding-left: 11px !important;
        text-align: left !important
    }

    .bs4-order-tracking li:last-child:before {
        margin-right: 5px !important;
        padding-right: 11px !important;
        text-align: right !important
    }

    .bs4-order-tracking li>div {
        color: #fff;
        width: 30px;
        text-align: center;
        line-height: 30px;
        display: block;
        font-size: 12px;
        background: #878788;
        border-radius: 50%;
        margin: auto
    }

    .bs4-order-tracking li:after {
        content: '';
        width: 150%;
        height: 3px;
        background: #878788;
        position: absolute;
        left: 0%;
        right: 0%;
        top: 15px;
        z-index: -1
    }

    .bs4-order-tracking li:first-child:after {
        left: 50%
    }

    .bs4-order-tracking li:last-child:after {
        left: 0% !important;
        width: 0% !important
    }

    .bs4-order-tracking li.active {
        /*font-weight: bold;*/
        color: #28a745;
    }

    .bs4-order-tracking li.active>div {
        background: #28a745;
    }

    .bs4-order-tracking li.active:after {
        background: #28a745;
    }

    .card-timeline {
        background-color: #fff;
        z-index: 0
    }
</style>
<style>
    .progress-shipping {
      list-style: none;
      padding-left: 0;
      display: flex;
      justify-content: space-between;
      position: relative;
    }
    .progress-shipping li {
      display: flex;
      align-items: center;
      flex-direction: column;
      text-align: center;
    }
    .progress-shipping li .circle {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #ccc;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;
    }
    .progress-shipping li .circle i {
      color: #fff;
    }
    .progress-shipping li .line {
      flex: 1;
      border-top: 2px solid #007bff; /* color azul */
      margin: 0 10px;
      position: absolute;
      top: 20px; /* Ajustar según el tamaño del círculo */
      z-index: -1; /* Asegurar que la línea esté detrás de los círculos */
    }
  </style>
<div class="sx-content col-lg-12 text-left mt-5 pt-5">
    <div class="ui big breadcrumb">
        <div class="section">International Customer Portal</div>
        <i class="right chevron icon divider"></i>
        <div class="section">Reports</div>
        <i class="right chevron icon divider"></i>
        <div class="active section">Report Number: {{$report_data->numero_informe}}</div>
    </div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12">
    @if(session()->has('success'))
        <div class="alert alert-success text-center alert-dismissible" role="alert">
            <strong>{{ session()->get('success') }}</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
    @endif
    @if(session()->has('warning'))
        <div class="alert alert-warning text-center alert-dismissible" role="alert">
            <strong>{{ session()->get('warning') }}</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
    @endif
    @if(session()->has('error'))
        <div class="alert alert-danger text-center alert-dismissible" role="alert">
            <strong>{{ session()->get('error') }}</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
    @endif
    @if (count($errors) > 0)
    <div class="alert alert-danger alert-dismissible" role="alert">
        <strong>¡Error!</strong> Revise los campos obligatorios.<br><br>
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <ul>
        @foreach ($errors->all() as $error)
        <li>{{ $error }}</li>
        @endforeach
        </ul>
    </div>
    @endif
</div>
{{--<div class="ui divider"></div>--}}
<div class="col-lg-12 mt-3">
    <div class="container mt-5">
        <ul class="progress-shipping">
            @foreach ($cat_estatus as $item)
                <li>
                    <div class="circle {{ $item->activo == 1 ? 'bg-primary' : 'bg-secondary' }}">
                    <i class="fas fa-check"></i>
                    </div>
                    <div>{{$item->estatus_en}}</div>
                </li> 
            @endforeach
        
        </ul>
    </div>
    
    <div class="content">
        <h4>Sample details:</h4>
        <div class="card">
            <div class="card-body">
                <div class="row">
                    
                    <div class="col-md-4">
                        <p><strong>INTERNATIONAL STANDAR: </strong>
                            @if (isset($report_data->datos_estandar_internacional->nombre))
                                {{$report_data->datos_estandar_internacional->nombre}}
                            @endif
                        </p>
                    </div>
                    <div class="col-md-4">
                        <p><strong>STANDAR FORM (MX): </strong>{{--$report_data->datos_norma->nombre--}}</p>
                    </div>
                    
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <p><strong>SAMPLE: </strong>{{$report_data->muestra}}</p>
                    </div>
                    <div class="col-md-4">
                        <p><strong>BRAND: </strong>{{$report_data->marca}}</p>
                    </div>
                    <div class="col-md-4">
                        <p><strong>MODEL: </strong>{{$report_data->modelo}}</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <p><strong>DATE OF ENTRY: </strong>{{$report_data->fecha_entrada ? date("Y-m-d",strtotime($report_data->fecha_entrada)) : '' }}</p>
                    </div>
                    <div class="col-md-4">
                        <p><strong>DATE OF COMPLETION: </strong>{{$report_data->fecha_termino ? date("Y-m-d",strtotime($report_data->fecha_termino)) : '' }}</p>
                    </div>
                    <div class="col-md-4">
                        <p><strong>ISSUE DATE: </strong>{{$report_data->fecha_emision? date("Y-m-d",strtotime($report_data->fecha_emision)) : '' }}</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <p><strong>CONSISTS OF: </strong>{{$report_data->accesorios}}</p>
                    </div>
                    <div class="col-md-4">
                        {{--<p><strong>OBSERVACIONES: </strong>{{$report_data->observaciones_muestra}}</p>--}}
                    </div>
                </div>
                <br>
                <div class="progress">
                    <div 
                    @if ($progress_bar == 100)
                        class="progress-bar progress-bar-striped progress-bar-animated bg-success"
                        @else
                        class="progress-bar progress-bar-striped progress-bar-animated"
                    @endif 
                    role="progressbar" aria-valuenow="{{$progress_bar}}" aria-valuemin="0" aria-valuemax="100" style="width: {{$progress_bar}}%">{{$progress_bar}}%</div>
                </div>
            </div>
        </div>
    </div>
    <br>
    
    <div class="sx-autorender">
        <div class="sx-scroll-x">
            <table class="ui celled table unstackable">
                <thead>
                    <tr>
                        <th>Report</th>
                        <th class="collapsing">Status</th>
                        <th class="">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Test Report</td>
                        <td>
                            
                            @if ($report_data->estatus == 2)
                                <span class="btn btn-success">Available</span>
                                @else
                                <span class="btn btn-danger">Not available</span>
                            @endif
                        </td>
                        <td class="text-center">
                            <form action={{url('informe_general_linea_de_pruebas_international_report')}} method="post">
                                {{csrf_field()}}
                                <input type="hidden" id="id_international_portal_report" name="id_international_portal_report" value="{{$report_data->id_international_portal_report}}">
                                <input type="hidden" id="idioma_reporte" name="idioma_reporte" value="eng_">
                                
                                <button 
                                @if ($report_data->estatus != 2)
                                    disabled
                                @endif
                                id="{{$report_data->id_international_portal_report}}" class="ui button blue fluid" type="submit">
                                    <span class="d-none spinner spinner-border spinner-border-sm" id="spinner" role="status" aria-hidden="true"></span>
                                    Test Report
                                    <i class="ui download icon"></i> 
                                </button>
                            </form>
                        </td>
                    </tr>
                    <tr>
                        <td>Informe de resultados</td>
                        <td>
                            
                            @if ($report_data->estatus == 2)
                                <span class="btn btn-success">Available</span>
                                @else
                                <span class="btn btn-danger">Not available</span>
                            @endif
                        </td>
                        <td class="text-center">
                            <form action={{url('informe_general_linea_de_pruebas_international_report')}} method="post">
                                {{csrf_field()}}
                                <input type="hidden" id="id_international_portal_report" name="id_international_portal_report" value="{{$report_data->id_international_portal_report}}">
                                <input type="hidden" id="idioma_reporte" name="idioma_reporte" value="es">
                                
                                <button 
                                @if ($report_data->estatus != 2)
                                    disabled
                                @endif
                                id="{{$report_data->id_international_portal_report}}" class="ui button blue fluid" type="submit">
                                    <span class="d-none spinner spinner-border spinner-border-sm" id="spinner" role="status" aria-hidden="true"></span>
                                    Informe de resultados
                                    <i class="ui download icon"></i> 
                                </button>
                            </form>
                        </td>
                    </tr>
                    
                    
                </tbody>
            </table>
        </div>
    </div>
    
    <br>
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-6">
            {{--<input type="submit" value="Guardar" class="ui button primary">--}}
            <a href="{{url('international_customers_portal/customer/reports')}}" class="ui button gray">Atrás</a>
        </div>
    </div>
    <br><br>
</div>
{{--
<footer>
    <div class="fixed-bottom">
        <div class="text-center">
            <p>SEATSA &#174; | <a href="https://www.seatsa.com.mx">www.seatsa.com.mx</a> | Todos los derechos reservados.</p>
        </div>
    </div>
</footer>
--}}


@endsection