@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>Wróc<img src="/img/left_menu_icon/add.png"></li></a>
    </ul>
@stop

@section('center-area')
    @parent
    <form method="POST" action="/wyjazdy/edit" id="dynamic_form" >
        {{ csrf_field() }}

        <input type="hidden" class="form-control" name="operationID" value="{{ $operation->id }}">
        <div class="form-group row">
            <div class="col-auto">
               <label for="date">Data wyjazdu: </label>
                <input type="datetime-local" id="operationDate" name="operationDate" value="{{  \Carbon\Carbon::parse($operation->operationDate)->format('Y-m-d\TH:i') }}" 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" value="{{ $operation->location}}">
        </div>

        <div class="form-group">
            <label for="location" >Cel wyjazdu:</label>
            <input type="text" class="form-control" id="operationTarget" name="operationTarget" value="{{ $operation->target }}">
        </div>

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

        <div class="form-group">
            <label for="location">Opis akcji:</label>
            <textarea class="form-control" id="'operationDescription" name="operationDescription">{{ $operation->description }}</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)
                        <option value="{{$fireFighter->id}}" {{$fireFighter->id == $operation->commanderID ? 'selected' : ''}}>{{ $fireFighter->name }} {{$fireFighter->surname }}</option>
                    @endforeach
                </select>
            </div>
        </div>

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

            </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}}" {{$fireFighterChecklist->memberID != null ? 'checked' : ''}} ></td>
                            <td><input type="checkbox" name="transport[{{$i}}]" value="{{$i}}" {{$fireFighterChecklist->privateTransport == 1 ? 'checked' : ''}}></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;


        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>