@extends('fragments.public.publicInternationalFullTemplate')
@section('titulo')
    Portal de clientes
@endsection
@section('contenido')
@php
    if (! session('id_portal_user')) {
            header('location: /international_customers_portal');
            die();
    }
@endphp
<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="active section">Reports</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="row">
    <div class="col-lg-12 mb-1">
        <button class="ui button fluid primary new_upload_report_modal ">
            <i class="pencil icon"></i>Upload Report
        </button> 
    </div>
</div>
<div class="ui divider"></div>
<div class="col-lg-12 mt-3">
    <div class="sx-autorender">
        <div class="sx-scroll-x">
            <table id="reports_table" class="ui celled table unstackable data_table_automatic_search">
                <thead>
                    <tr>
                        <th>Report number</th>
                        <th>File</th>
                        <th>Registration date</th>
                        <th>Invoice company</th>
                        <th>Report company</th>
                        <th>Entry date</th>
                        <th>Estimated delivery date</th>
                        <th class="collapsing">Status</th>
                        <th class="collapsing">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($portal_user_reports as $report)
                    <tr>
                        <td>{{$report->numero_informe}}</td>
                        <td>{{$report->nombre_reporte}}</td>
                        <td>{{date("d-m-Y",strtotime($report->created_at))}}</td>
                      
                        <td>{{$report->company_name_invoice}}</td>
                        <td>{{$report->company_name_report}}</td>
                        <td>{{$report->fecha_entrada ? date("d-m-Y",strtotime($report->fecha_entrada)) : "Pending"}}</td>
                        <td>{{$report->fecha_emision ? date("d-m-Y",strtotime($report->fecha_emision)) : "Pending"}}</td>
                        <td>
                            @switch($report->estatus)
                                @case(0)
                                    <span class="btn btn-danger">Whitout data</span>
                                    @break
                                @case(1)
                                    <span class="btn btn-warning">In progress</span>
                                    @break
                                @case(2)
                                    <span class="btn btn-success">Ready</span>
                                    @break
                                @default
                                    
                            @endswitch
                            
                        </td>
                        <td >
                            <div class="ui tiny icon fluid buttons">
                                <a data-toggle="modal" data-target="#edit_files_modal" class="ui button green edit_files" data-id="{{$report->id_international_portal_report}}">
                                    <i class="pencil icon"></i>
                                </a>
                                <a class="ui button blue" 
                                href="{{url('international_customers_portal/groups/'.$report->id_international_portal_report)}}">
                                    <i class="object group icon"></i>
                                </a>
                                <a class="ui button orange" 
                                href="{{url('international_customers_portal/customer/reports/details/'.$report->id_international_portal_report)}}">
                                    <i class="arrow right icon"></i>
                                </a>
                            </div>
                        </td>   
                    </tr>
                    @endforeach
                    
                    {{--
                    @foreach ($datos_muestras as $dato_muestra)
                    <tr>
                        <td>{{$dato_muestra->numero_informe ? $dato_muestra->numero_informe : '(En proceso)' }}</td>
                        <td>{{$dato_muestra->modelo_muestra}}</td>
                        <td>{{$dato_muestra->nombre_cliente_factura}}</td>
                        <td>{{$dato_muestra->nombre_cliente_informe}}</td>
                        <td>
                            @php
                                $estatus_proceso = 0;
                            @endphp
                            @if ($dato_muestra->id_linea_prueba_reporte != NULL)
                                @php
                                    $estatus_proceso = 4;
                                @endphp
                                @if ($dato_muestra->estatus_cobranza == "Pagado")
                                    @php
                                        $estatus_proceso = 5;
                                    @endphp
                                @endif
                            @endif
                            
                            @switch($estatus_proceso)
                                @case(4)
                                    <span class="btn btn-warning">En proceso</span>
                                    @break
                                @case(5)
                                    <span class="btn btn-success">Finalizado</span>
                                    @break
                                @default
                                <span class="btn btn-warning">En proceso</span>
                            @endswitch
                        </td>
                        <td>
                            @switch($dato_muestra->estatus_cobranza)
                                @case("Pagado")
                                    <span class="btn btn-success">Pago recibido</span>
                                    @break
                                @case("Sin Pago")
                                    <span class="btn btn-danger">Sin Pago</span>
                                    @break
                                @default
                                <span class="btn btn-danger">Sin Pago</span>
                            @endswitch
                        </td>
                        <td >
                            <div class="ui tiny icon fluid buttons">
                                <a class="ui button orange" 
                                href="{{url('portal_de_clientes/cliente/informes/detalles/'.$dato_muestra->id_muestra.'')}}">
                                    <i class="arrow right icon"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                    --}}
                </tbody> 
            </table>
        </div>
    </div>
    
</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>
--}}

<style type="text/css">
    .stepwizard-step p {
        margin-top: 10px;
    }

    .stepwizard-row {
        display: table-row;
    }

    .stepwizard {
        display: table;
        width: 100%;
        position: relative;
    }

    /*.stepwizard-step button[disabled] {
        opacity: 1 !important;
        filter: alpha(opacity=100) !important;
    }**/

    .stepwizard-row:before {
        top: 14px;
        bottom: 0;
        position: absolute;
        content: " ";
        width: 100%;
        height: 1px;
        background-color: #ccc;
        z-order: 0;

    }

    .stepwizard-step {
        display: table-cell;
        text-align: center;
        position: relative;
    }

    .btn-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.428571429;
    border-radius: 15px;
    }
</style>
@include('International_Customer_Portal.Modals.edit_files_modal')
@include('International_Customer_Portal.create_upload_report_modal')
<script>
    $(document).ready(function () {
        $('.edit_files').click(function (e) { 
            id_international_portal_report = $(this).data('id');
            $('#id_international_portal_report_file').val(id_international_portal_report);
            
            $.ajax({

                url:"{{ route('programacion_arm.get_int_port_report_files') }}",
                method:"POST",
                data:{
                    'id_international_portal_report': id_international_portal_report, 
                    '_token': _token = $('input[name="_token"]').val()
                },
                success:function(response){
                    
                    files_tbody = "";
                    if (response.files.length > 0) {
                        $.each(response.files, function (key, value) { 
                            console.log(value);
                            url_file = "/customer_invoice_files/"+value.file;
                            switch (value.status) {
                                case 0:
                                    status = "Rechazado";
                                    status_color = "danger";
                                    status_color_text = "text-white";
                                    break;
                                case 1:
                                    status = "Pendiente";
                                    status_color = "warning";
                                    status_color_text = "text-dark";
                                    break;
                                case 2:
                                    status = "Aprobado";
                                    status_color = "success";
                                    status_color_text = "text-white";
                                    break;
                                
                                default:
                                    status = "Pendiente";
                                    status_color = "warning";
                                    status_color_text = "text-dark";
                                    break;
                            }

                            if (value.status == 0) {
                                input_file_html = `<div class="custom-file">
                                    <input type="file" class="custom-file-input" id="input_file_${value.id_int_portal_report_file}" name="${value.type}">
                                    <label class="custom-file-label" for="input_file_${value.id_int_portal_report_file}">Choose file</label>
                                </div>`;
                            }else{
                                input_file_html = `<a target="_blank" href="${url_file}">${value.file}</a>`;
                            }
                            files_tbody += `
                            <tr>
                                <td>
                                    <h5><span class="badge badge-pill badge-primary">${value.type}</span></h5>
                                </td>
                                <td>
                                    ${input_file_html}
                                </td>
                                <td>
                                    <h5><a id="file_${value.id_int_portal_report_file}" data-id="${value.id_int_portal_report_file}" data-status="1" class="badge badge-${status_color} file_status ${status_color_text}">${status}</a></h5>
                                </td>
                            </tr>`;  
                        });
                        
                    
                    }else{
                        files_tbody = `
                        <tr class="text-center">
                            <td colspan="3">There is no files</td>
                        </tr>`;
                        
                    }

                    $('#tbody_files').html(files_tbody);
                }
            });
            
        });
    });
    $(document).on('change','.custom-file-input',function(){
        var fileName = $(this).val().split("\\").pop();
        $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
    });
</script>
<script>
    $(document).ready(function(){
        $('.new_upload_report_modal').click(function(){
            $('#create_upload_report_modal').modal('show');
            readButtons('create_upload_report_modal')
            
        });

        
    });

    readButtons = function(type_accion){
            let navListItems = $('div#'+type_accion+' div.setup-panel div a'),
            allWells = $('div#'+type_accion+' .setup-content'),
            allNextBtn = $('div#'+type_accion+' .nextBtn');
            allBackBtn = $('div#'+type_accion+' .backBtn');

            navListItems.click(function (e) {
                e.preventDefault();
                var $target = $($(this).attr('href')),
                    $item = $(this);

                if (!$item.hasClass('disabled')) {
                    navListItems.removeClass('btn-primary').addClass('btn-default');
                    $item.addClass('btn-primary').removeClass('disabled');
                    allWells.hide();
                    $target.show();
                    //$target.find('input:eq(0)').focus();
                }
            });

            allNextBtn.click(function(){
                var curStep = $(this).closest("div#"+type_accion+" .setup-content"),
                    curStepBtn = curStep.attr("id"),
                    nextStepWizard = $('div#'+type_accion+' div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
                    curInputs = curStep.find("input[type='text'],input[type='url']"),
                    isValid = true;

                $(".form-group").removeClass("has-error");
                    navListItems.addClass('disabled');
                    nextStepWizard.removeAttr('disabled').removeClass('disabled').trigger('click');
            });

            allBackBtn.click(function(){
                var curStep = $(this).closest("div#"+type_accion+" .setup-content"),
                    curStepBtn = curStep.attr("id"),
                    nextStepWizard = $('div#'+type_accion+' div.setup-panel div a[href="#' + curStepBtn + '"]').parent().prev().children("a"),
                    curInputs = curStep.find("input[type='text'],input[type='url']"),
                    isValid = true;

                $(".form-group").removeClass("has-error");
                    navListItems.addClass('disabled');
                    nextStepWizard.removeAttr('disabled').removeClass('disabled').trigger('click');
            });

            $('div.setup-panel div a.btn-primary').trigger('click'); 
        } 
</script>
    
@endsection