@php
$required = " <sup style='color:red'>*</sup>";
@endphp
<div @can('content.preekrooster.edit') class="editable"@endcan>{!! $content->content !!}</div>
<table id="yearselector">
    <tr>
        <td><a href="{{$year-1}}"><button>&lsaquo;</button></a></td>
        <td id="currentyear">{{$year}}</td>
        <td><a href="{{$year+1}}"><button>&rsaquo;</button></a></td>
    </tr>
</table>
@can('diensten.create')
    <button id="createSundays">Alle zondagen aanmaken</button>
@endcan
<table id="dienstentable">
    <thead>
    <tr>
        <th>Datum</th>
        <th>Tijd</th>
        <th>Voorganger</th>
        <th>Bijzonderheden</th>
        <th>Beamist</th>
    </tr>
    </thead>
    <tbody>
    @foreach($diensten as $dienst)
        @if($dienst->zichtbaar == 0)
            @cannot('diensten.edit.details')
                @php continue; @endphp
            @endcannot
        @endif

        <tr>
            <td>
                @can('diensten.edit.details')
                    <input dienstid="{{$dienst->id}}" name="datum" type="date" value="{{$dienst->datum}}">
                @else
                    {{date("d-m-Y",strtotime($dienst->datum))}}
                @endcan
            </td>
            <td>
                @can('diensten.edit.details')
                    <input dienstid="{{$dienst->id}}" name="tijd" type="time" value="{{date("H:i",strtotime($dienst->tijd))}}">
                @else
                    {{date("H:i",strtotime($dienst->tijd))}}
                @endcan
            </td>
            <td>
                @can('diensten.edit.details')
                    <input dienstid="{{$dienst->id}}" name="voorganger" type="text" maxlength="255" value="{{$dienst->voorganger}}">
                @else
                    {{$dienst->voorganger}}
                @endcan
            </td>
            <td>
                @can('diensten.edit.details')
                    <input dienstid="{{$dienst->id}}" name="bijzonderheden" type="text" maxlength="255" value="{{$dienst->bijzonderheden}}">
                @else
                    {{$dienst->bijzonderheden}}
                @endcan
            </td>
            <td>
                @can('diensten.edit.beamist')
                    <select name="beamist" dienstid="{{$dienst->id}}">
                        @if(!$dienst->beamist)
                            <option selected hidden></option>
                        @endif
                        @foreach($beamisten as $id => $name)
                            <option value="{{$id}}"@if($dienst->beamist == $id) selected @endif>{{$name}}</option>
                        @endforeach
                    </select>
                @else
                    @if($dienst->beamist){{$beamisten[$dienst->beamist]}}@endif
                @endcan
            </td>
        </tr>
    @endforeach
    </tbody>
</table>
@can('diensten.create')
    <h2>Dienst toevoegen</h2>
    <table id="new">
        <tbody>
        <tr>
            <td>Datum{!!$required !!}</td>
            <td><input type="date" name="datum" value="@php date("Y-m-d",strtotime("next Sunday")) @endphp" required></td>
        </tr>
        <tr>
            <td>Tijd{!!$required !!}</td>
            <td><input type="time" name="tijd" value="09:30" required></td>
        </tr>
        <tr>
            <td>Voorganger</td>
            <td><input type="text" name="voorganger" maxlength="255" placeholder="Voorganger"></td>
        </tr>
        <tr>
            <td>Bijzonderheden</td>
            <td><input type="text" name="bijzonderheden" maxlength="255" placeholder="bv. Heilig Avondmaal"></td>
        </tr>
        <tr>
            <td>Beamist</td>
            <td>
                <select name="beamist">
                    <option selected hidden></option>
                    @foreach($beamisten as $id => $name)
                        <option value="{{$id}}">{{$name}}</option>
                    @endforeach
                </select>
            </td>
        </tr>
        <tr>
            <td>Zichtbaar</td>
            <td><input type="checkbox" name="zichtbaar" value="1" id="newvis"><label for="newvis">Zichtbaar</label></td>
        </tr>
        <tr>
            <td></td>
            <td><button id="save">Opslaan</button></td>
        </tr>
        </tbody>
    </table>
<script>
    $("#newvis").on('change',function() {
        let label = $("label[for=newvis]");
        $(this).is(":checked") ?
            label.html('Zichtbaar') :
            label.html('Onzichtbaar');
    })

    $("button#save").on('click', function() {
        const datum = $('#new input[name=datum]').val();
        const tijd = $('#new input[name=tijd]').val();
        const vg = $('#new input[name=voorganger]').val();
        const bijz = $('#new input[name=bijzonderheden]').val();
        const beamist = $('#new select[name=beamist] option:selected').val();
        const vis = $('#new input[name=zichtbaar]').is(':checked')

        $.ajax({
            url: '/diensten/new',
            data: {
                'datum': datum,
                'tijd': tijd,
                'voorganger': vg,
                'bijzonderheden': bijz,
                'beamist': beamist,
                'zichtbaar': vis,
            },
            success: function(data) {
                if (data === "true" && vis === true) {
                    $("#dienstentable").append('<tr>' +
                        '<td>'+datum+'</td>' +
                        '<td>'+tijd+'</td>' +
                        '<td>'+vg+'</td>' +
                        '<td>'+bijz+'</td>' +
                        '<td>'+beamist+'</td>')
                }
            }
        })
    })

    $("#createSundays").on('click', function() {
        $.ajax({
            url: '/diensten/bulkcreate',
            data: {'year': $("#currentyear").html()},
            success: function(data) {
                if (data === "true") {
                    window.refresh();
                }
            }
        })
    })
</script>
@endcan
@canany('diensten.edit.details|diensten.edit.beamist')
<script>
    $("#dienstentable input,#dienstentable select").on('change', function() {
        const field = $(this);
        const attrib = $(this).attr('name');
        const value = $(this).val();
        const id = $(this).attr('dienstid')

        $.ajax({
            url: '/diensten/mod',
            data: {
                'id': id,
                'field': attrib,
                'value': value,
            },
            success: function(data) {
                if(data === "true") {
                    modconfirm(field);
                }
            }
        })
    })
</script>
@endcanany