@extends('layout.app')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
@section('left-menu')
    @parent<ul>
        <a href="/wyjazdy"><li>Przeglądaj<img src="/img/left_menu_icon/more.png"></li></a>
    </ul>
@stop

@section('center-area')
    @parent
    <form method="POST" action="/wyjazdy" id="dynamic_form">
        {{ csrf_field() }}
        <div class="form-group row">
            <div class="col-auto">
                <label for="date">Data wyjazdu: </label>
                <input type="datetime-local" id="operationDate" name="operationDate" class="form-control">
            </div>
        </div>

        <div class="form-group">
            <label for="location">Miejsce akcji:</label>
            <input type="text" class="form-control" id="operationLocation" name="operationLocation">
        </div>

        <div class="form-group">
            <label for="location">Cel wyjazdu:</label>
            <input type="text" class="form-control" id="operationTarget" name="operationTarget">
        </div>

        <div class="form-group">
            <label for="location">Rodzaj zagrożenia:</label>
            <input type="text" class="form-control" id="operationDangerType" name="operationDangerType">
        </div>

        <div class="form-group">
            <label for="location">Opis akcji:</label>
            <textarea class="form-control" id="'operationDescription" name="operationDescription" placeholder="Opis akcji..."></textarea>
        </div>

        <div class="form-group row">
            <div class="col-auto">
                <label for="location">Dowodzący:</label>
                <select name="operationLeader" class="form-control">
                    <option value="">--- Wybierz dowódcę ---</option>
                    @foreach ($fireFighters as $fireFighter)
                        @if(Illuminate\Support\Facades\Input::old('operationLeader') == $fireFighter->id)
                            <option value="{{$fireFighter->id}}" selected>{{ $fireFighter->name }} {{$fireFighter->surname }}</option>
                        @else
                            <option value="{{$fireFighter->id}}">{{ $fireFighter->name }} {{$fireFighter->surname }}</option>
                        @endif
                    @endforeach
                </select>
            </div>
        </div>


        <div class=form-group">
            <div id="drivers">

            </div>
            </br>
            <button type="button" name="add" id="add" class="btn btn-success">Dodaj Pojazd</button>
        </div>

        </br>

        <div class="form-group">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Imię i Nazwisko</th>
                        <th scope="col">Obecność</th>
                        <th scope="col">Transport własny</th>
                    </tr>
                </thead>

                <tbody>
                    @php
                        $i = 0;
                    @endphp
                    @foreach($fireFighters as $fireFighterChecklist)
                        <tr>
                            <th scope="row">{{$i+1}}</th>
                            <td>{{ $fireFighterChecklist->name }} {{$fireFighterChecklist->surname }}</td>
                            <td><input type="checkbox" name="attendance[{{$i}}]" value="{{$fireFighterChecklist->id}}"></td>
                            <td><input type="checkbox" name="transport[{{$i}}]" value="{{$i}}"></td>
                        </tr>
                        @php
                            $i++;
                        @endphp
                    @endforeach
                </tbody>
            </table>
        </div>

        <div class="form-group">
            <button style="cursor:pointer" type="submit" class="btn btn-primary">Zapisz</button>
        </div>

        @include('inc.formerrors')
    </form>
@stop

<script>
    $(document).ready(function(){

        var count = 1;

        dynamic_field(count);

        function dynamic_field(number)
        {

            html = '<div id="singleDriver">';
            html += '<div class="row align-items-end">';
            html += '<div class="col-auto">';
            html += '<label for="location">Kierowca:</label>';
            html += '<select name="operationDriver[]" class="form-control">';
            html += '<option value="">--- Wybierz kierowcę ---</option>';
            html += '@foreach ($fireFighters as $fireFighter)';
            html += '<option value="{{$fireFighter->id}}">{{ $fireFighter->name }} {{$fireFighter->surname }}</option>';
            html += '@endforeach';
            html += '</select>';
            html += '</div>';
            html += '<div class="col-auto">';
            html += '<label for="location">Pojazd:</label>';
            html += '<select name="operationVehicle[]" class="form-control">';
            html += '<option value="">--- Wybierz pojazd ---</option>';
            html += '@foreach ($vehicles as $vehicle)';
            html += '<option value="{{$vehicle->id}}">{{ $vehicle->name }} {{$vehicle->codename }} {{$vehicle->registrationNumber }}</option>';
            html += '@endforeach';
            html += '</select>';
            html += '</div>';
            html += '<div class="col-auto">';
            html += '<button type="button" name="remove" id="" class="btn btn-danger remove form-control">Usuń</button>';
            html += '</div>';
            html += '</div>';
            html += '</div>';

            $('#drivers').append(html);

        }

        $(document).on('click', '#add', function(){
            count++;
            dynamic_field(count);
        });

        $(document).on('click', '.remove', function(){
            count--;

            swal.fire({
                html: "Czy na pewno chcesz usunąć pojazd?",// this will output "Error 422: Unprocessable Entity"
                width: 'auto',
                confirmButtonText: 'Tak',
                cancelButtonText: 'Nie',
                showCancelButton: true,
            }).then((result) => {
                if (result.value) {
                    $(this).closest("#singleDriver").remove();
                }
            });
        });


    });
</script>