@extends('layout.app')

<title>Add Edit Delete Table Row Example using JQuery - ItSolutionStuff.com</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<meta name="csrf-token" content="{{ csrf_token() }}">

@section('left-menu')
    @parent
    <ul>
        <a href="sprzet/add"><li>Dodaj<img src="/img/left_menu_icon/add.png"></li></a>
        <li>Edytuj<img src="/img/left_menu_icon/edit.png"></li>
        <li>Usuń<img src="/img/left_menu_icon/delete.png"></li>
    </ul>
@stop

@section('center-area')
    @parent

    @if( auth()->check())
        @if( auth()->user()->fireStationID == NULL)
            Jednostka nie istnieje
        @else
            <p align='center'>
            <form method="POST" action="/szkolenia">
                {{ csrf_field() }}
                <div class="form-group">
                    <label for="name">Nazwa Szkolenia/Badana:</label>
                    <input type="text" class="form-control" id="name" name="name" value="{{ old('name') }} ">
                </div>

                <div class="form-group">
                    <button style="cursor:pointer" type="submit" class="btn btn-primary">Dodaj</button>
                </div>
                @include('inc.formerrors')
            </form>
            <table class='firefighterViewTable'>
                <tr class='table-header'>
                    <td>Nazwa Szkolenia</td>
                    <td>Ilość z ukończonym</td>
                    <td>Akcje</td>
                @foreach($trainings as $training)
                    <tr id="{{$training->id}}">

                            <td id="name{{ $training->id }}">{{ $training->trainingName }}</td>
                            <td id="amount{{ $training->id }}">5</td>
                            <td><input type="button" onclick="showMoreInformation('{{$training->id}}')" id="more{{$training->id}}" value="Więcej">
                                <button class="btn btn-info" type="submit" onclick="renameTraining('{{$training->id}}')" id="{{$training->id}}">Zmień nazwę</button>
                            <a href="{{ URL::asset('szkolenia/addTrainingsFireFighters/'.$training->id) }}"><input type="button" onclick="" value="Zarządzaj"></a>
                            </td>
                                <td>
                                <form action="{{ route('trainings.destroy', $training->id)}}" method="post">
                                    {{ csrf_field() }}
                                    @method('DELETE')
                                    <button class="btn btn-danger" type="submit">Usuń</button>
                                </form>
                            </td>

                    </tr>
                    <tr id="moreInformation{{$training->id}}" style="visibility:collapse;" bgcolor="#C0C0C0">
                        <td colspan="3">
                        <table>

                            <thead>
                                    <td>Imię i Nazwisko</td>
                                    <td>Ważne od:</td>
                                    <td>Ważne do:</td>
                            </thead>

                            <tbody>
                                @foreach($fireFighters[$training->id] as $fireFighter)
                                    @if($fireFighter->dateOfComplete != null and  $fireFighter->dateOfExpiry != null)
                                        <tr id="{{$fireFighter->userID}}">
                                            <td>{{$fireFighter->name}} {{$fireFighter->surname}}</td>
                                            <td>{{$fireFighter->dateOfComplete}}</td>
                                            <td>{{$fireFighter->dateOfExpiry}}</td>
                                        </tr>
                                    @endif
                                @endforeach
                            </tbody>
                        </table>
                        </td>
                    </tr>
                @endforeach
            </table>
            </p>

        @endif
    @else
        Brak autoryzacji
    @endif

@stop

<script>
    function showMoreInformation(operationID){
        if( $('#more'+operationID).val() == "Więcej"){
            $('#more'+operationID).val("Ukryj");
            $("#moreInformation"+operationID).css('visibility', 'visible');
        } else{
            $('#more'+operationID).val("Więcej");
            $("#moreInformation"+operationID).css('visibility', 'collapse');
        }

    }

    function renameTraining(trainingID){
        swal.fire({
            title: "Podaj nową nazwę",
            width: 'auto',
            input: 'text',
            confirmButtonText: 'Tak',
            cancelButtonText: 'Anuluj',
            showCancelButton: true,
            inputValidator: (value) => {
                if (!value) {
                    return 'To pole nie może zostać puste'
                }
            }
        }).then((result) => {
                if(result.value){
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });

                    $.ajax({
                        type: 'post',
                        url: '/szkolenia/rename',
                        data: {
                            'trainingID': trainingID,
                            'trainingName': result.value,
                        },
                        success: function(data) {
                            $('.btn-info', '#'+trainingID).parents("tr").find("td:eq(0)").html(result.value);
                        }
                    });

                }
            }
        )
    }
</script>