@extends('layout.padrao')
@section('title', 'List - Destination Ports')

@section('content')

    <div class="col col-lg-12 col-sm-12 col-md-12">
        <h5>Search For:</h5>   
        <form class="form-inline w-100 search-listas-int" method="GET" action="{{ route('listCodeOfPort','CodeOfPort') }}">
        <input class="form-control mr-sm-2" type="search" placeholder="Search for Destination Port by: Port Code, Port Name or Country" name="CodeOfPort" style="margin-top:25px;margin-bottom:50px">   
            <button class="btn btn-primary " type="submit" style="margin-top:-25px">Search</button>
        </form>
    </div> 

@include('include.filtro_result')
    @if($errors->any())
        <div class="alert alert-danger">
        @foreach($errors->all() as $error)
            {{ $error }} <br>
        @endforeach
        </div>
    @endif 
    <!--Botão Novo-->
    @can('create', App\Usuario::class)
            @include('include.btn_adicionar',["btn" => "CodeOfPort"])
    @endcan
    <div class="wrapper">
        <div class="table-responsive tableMenor">
            @if(!Auth::user()->checkCharacteristics(['1', '2', '3']))
                <legend style="font-size: 10px;">*** Para Exclusão e Alteração da lista favor entrar em contato com o o suporte do Sistema <a href="mailto:csaprojetos@commodity.ch">csaprojetos@commodity.ch</a> . </legend>
            @endif
            <table class="table table-striped table-sm " data-form="deleteForm">   
                <thead> 
                    <tr>
                        <th>Operation</th>
                        <th>Register ID<th>
                        <th>Port Code</th>
                        <th>Port Name</th>
                        <th>Country</th>
                        <th>State</th>
                        <th>Type</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($codeofPort as $item)
                        <tr>
                            <td>
                                @if(Auth::user()->checkCharacteristics(['1', '2', '3']))
                                    @can('update', App\Usuario::class)                                       
                                        <a class="icone-padding {{$item->type}}" data-toggle="modal" data-target="#editcodeofPort" data-toggle="tooltip" data-placement="top" title="Edit">      
                                        <a class="icone-padding btnModal {{$item->type}}" data-catid="{{$item->id}}"data-code="{{$item->code}}" data-types="{{$item->type}}" data-place="{{$item->place}}" 
                                        data-country="{{$item->countryCode}}" data-state="{{$item->state_id}}" data-status="{{$item->status}}" data-toggle="modal" data-target="#editcodeofPort"data-toggle="tooltip" data-placement="top" title="Edit">
                                            <i class="fas fa-pencil-alt"></i>
                                        </a>                          
                                            
                                    @endcan
                                    @can('delete', App\Usuario::class)
                                        <a class="icone-padding" data-catid={{$item->id}} data-toggle="modal" data-target="#delete" data-toggle="tooltip" data-placement="top" title="Delete">
                                            <i class="fas fa-trash-alt"></i>
                                        </a>                                    
                                    @endcan
                                    @isset($extraActions)
                                        @foreach($extraActions as $extraAction)
                                            @if(isset($extraAction['department']))
                                                @if($extraAction['department'] == Auth::user()->departamento)
                                                    <a class="icone-padding" title="{{$extraAction['tooltip']}}" href="{{route($extraAction['iconRoute'], ['id' => $item->id, 'crud'=> ($extraAction['crud_type'] ?? null)])}}">
                                                    <i class="{{$extraAction['icon']}}"></i>
                                                    </a>
                                                @endif
                                            @else
                                                <a class="icone-padding" title="{{$extraAction['tooltip']}}" href="{{route($extraAction['iconRoute'], ['id' => $item->id])}}">
                                                <i class="{{$extraAction['icon']}}"></i>
                                                </a>
                                            @endif
                                        @endforeach
                                    @endisset
                                @endif
                            </td>
                            <td>
                                {{ $item->id }}

                            </td>
                            <td>
                            </td>
                            <td>
                                {{ $item->code}}

                            </td>
                            <td>
                                {{ $item->place}}
                            </td>
                            <td >
                                {{ $item->country }}
                            </td>
                            <td >
                                {{ $item->state->descricao ?? '-'}}
                            </td>
                            <td >
                                {{ $item->type }}
                            </td>
                            <td>
                                @if ((!empty($item->status))&&$item->status  == "Ativo")
                                    <i class="fas fa-check" style="color:green"></i>
                                @else
                                    <i class="fas fa-times-circle" style="color:red"></i>
                                @endif
                            </td>
                        </tr>

                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    <div align="center" class="d-flex justify-content-center">
        {{ $codeofPort->links() }}
    </div>

    <script>
        $(function () {
            $(".btnModal").click(function () {
                let selectedType    = $(this).attr('data-types');
                let selectedCountry = $(this).attr('data-country');
                let selectedState   = $(this).attr('data-state');
                
                selectedCountry = selectedCountry.replace(/\s+$/, '');
                console.log(selectedType);
                // $('#selectType option:eq("DOOR")').attr('selected', 'selected');
                document.getElementById('selectType').value = selectedType;
                let textToFind = selectedCountry;
                let dd = document.getElementById('selectCountry');   
                for (var i = 0; i < dd.options.length; i++) {
                    if (dd.options[i].value == textToFind) {
                        dd.selectedIndex = i;
                        carregarEstados(selectedCountry,selectedState);
                        break;
                    }
                }
            })
        });

        function carregarEstados(valueCountry,valueState) {
            if (valueCountry) {
                $.getJSON(`/states/show/${valueCountry}`, function(states) {
                const $stateSelect = $('.selectState').empty().append($('<option>', { value: '', text: '------------- Select State -------------' }));
                $.each(states, function(index, state) {
                    $stateSelect.append($('<option>').val(state.descricao).text(state.descricao));
                    
                    //selecionando a opção correta
                    valueState == state.id ? document.getElementById('idSelectState').value = state.descricao : '';
                });
                }).fail(function() {
                console.error('Oops! Something went wrong.');
                });

        }
        }


        $(document).on('input', '[name="country"]', function() {
        const valueCountry = $(this).val();
        
        carregarEstados(valueCountry,'');
        });
    </script>
        
    </div>
        @include('bibliotecas.floattheadOverflow')
        <!-- add Model -->
        @include('include.modal_adicionar_codeofport', ["formulario" => "CodeOfPort"])
        <!-- edit Model -->
        @include('include.modal_editar_codeofport', ["formulario" => "CodeOfPort"])
        <!-- Delete Model -->
        @include('include.modal_deletar', ["rota" => "CodeOfPort"])
@endsection