@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="row text-center">
    <div class="col-4">Name: {{$report->muestra}}</div>
    <div class="col-4">Trademark: {{$report->marca}}</div>
    <div class="col-4">Model: {{$report->modelo}}</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>Name</th>
                        <th>Trademark</th>
                        <th>Model</th>
                        {{--<th class="collapsing">Status</th>
                        <th class="collapsing">Actions</th>--}}
                    </tr>
                </thead>
                <tbody>
                    @foreach ($report->groups as $group)
                    <tr>
                        <td>{{$group->name}}</td>
                        <td>{{$group->marca}}</td>
                        <td>{{$group->modelo}}</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 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
                    
                    
                </tbody> 
            </table>
        </div>
    </div>
    <div class="ui divider"></div>
    <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>
</div>
@include('International_Customer_Portal.Recorts.new_groups')
<script>
    let item = 1;
    $(document).ready(function(){
        $('.new_upload_report_modal').click(function(){
            $('#create_groups_modal').modal('show');
        });

        $('#plus-grupo').click(function(){
            
            $('#contenedor-grupo').append(
                `<div class="row mt-3" id='item_${item}'>
                    <div class="col-4">

                        <label for="grupo_nombre_${item}" class="">Name</label>
                        <input type="text" class="form-control articulo" id="grupo_nombre_${item}" name="grupos[grupo_${item}][name]" value="">
                    
                    </div>
                
                    <div class="col-4">

                    <label for="grupo_marca_${item}" class="">Trademark</label>
                    <input type="text" class="form-control articulo" id="grupo_marca_${item}" name="grupos[grupo_${item}][marca]" value="">

                    </div>
                    <div class="col-3">

                    <label for="accesorio_model${item}" class="">Model</label>
                    <input type="text" class="form-control articulo" id="accesorio_model${item}" name="grupos[grupo_${item}][modelo]" value="">

                    </div>
                    <div class="col-1">
                        <div class="ui tiny icon buttons">
                            <a class="ui button red minus">
                                <i class="minus icon"></i>
                            </a>
                        </div>

                    </div>
                    
                                
                                <div class="card-body">
                                    <div class="form-group row">
                                        <div class="col-6">
                                            <label for="Camara humedad" class="">Image left</label>
                                    
                                            <div class="custom-file">
                                                <input type="file" class="custom-file-input" id="image_left" name="grupos_img[grupo_${item}][image_left]" accept=".jpg" required>
                                                <label class="custom-file-label" for="pdf_report">Upload image left (.jpg)</label>
                                            </div>
                                        </div>

                                        <div class="col-6">
                                            <label for="Camara humedad" class="">Image right</label>
                                    
                                            <div class="custom-file">
                                                <input type="file" class="custom-file-input" id="image_right" name="grupos_img[grupo_${item}][image_right]" accept=".jpg" required>
                                                <label class="custom-file-label" for="pdf_report">Upload image right (.jpg)</label>
                                            </div>
                                        </div>
                                        
                                    </div>

                                    <div class="form-group row">
                                        <div class="col-6">
                                            <label for="Camara humedad" class="">Image On</label>
                                    
                                            <div class="custom-file">
                                                <input type="file" class="custom-file-input" id="image_on" name="grupos_img[grupo_${item}][image_on]" accept=".jpg" required>
                                                <label class="custom-file-label" for="pdf_report">Upload image On (.jpg)</label>
                                            </div>
                                        </div>

                                        <div class="col-6">
                                            <label for="Camara humedad" class="">Image Under</label>
                                    
                                            <div class="custom-file">
                                                <input type="file" class="custom-file-input" id="image_under" name="grupos_img[grupo_${item}][image_under]" accept=".jpg" required>
                                                <label class="custom-file-label" for="pdf_report">Upload image Under (.jpg)</label>
                                            </div>
                                        </div>
                                        
                                    </div>

                                    <div class="form-group row">
                                        <div class="col-6">
                                            <label for="Camara humedad" class="">Image In front of</label>
                                    
                                            <div class="custom-file">
                                                <input type="file" class="custom-file-input" id="image_in_front_of" name="grupos_img[grupo_${item}][image_in_front_of]" accept=".jpg" required>
                                                <label class="custom-file-label" for="pdf_report">Upload image In front of (.jpg)</label>
                                            </div>
                                        </div>

                                        <div class="col-6">
                                            <label for="Camara humedad" class="">Image Behind</label>
                                    
                                            <div class="custom-file">
                                                <input type="file" class="custom-file-input" id="image_behind" name="grupos_img[grupo_${item}][image_behind]" accept=".jpg" required>
                                                <label class="custom-file-label" for="pdf_report">Upload image Behind (.jpg)</label>
                                            </div>
                                        </div>
                                        
                                    </div>
                                </div>
                </div>`
            );
            item++;
            $('.minus').click(function(){
                let id = $(this).parent().parent().parent().attr('id');
                $('#'+id).remove('');
            });

            $(".custom-file-input").on("change", function() {
                var ext = $('.custom-file-input').val().split('.').pop().toLowerCase();
                var fileName = $(this).val().split("\\").pop();
                $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
            
            });

        });
    });
</script>
    
@endsection