<div class="row">
    <div class="col-xs-12">
        <div class="box box-danger mb0">
            <div class="row">
                <div class="col-xs-12">
                    <div class="pull-left">
                        <button class="btn btn-success" style="margin: 10px 0 0 10px;" data-toggle="modal"
                                data-target="#addModal">Dodaj zgłoszenie szkolenia &nbsp <i class="fa fa-plus"></i></button>
                    </div>
                </div>
            </div>
            <div class="box-body table-responsive table-fixed-height">
                <table id="ZFSTable" class="table hover-rows custom-table FullTable" data-start-sort="1"
                       data-start-sort-direction="desc" data-start-height="70vh" data-start-filter="1"
                       data-order='[[ 1, "asc" ]]'>
                    <thead>
                    <tr class="text-uppercase">
                        <th style="max-width: 8.333333%;">ID</th>
                        <th style="max-width: 50%;">Tytuł</th>
                        <th style="max-width: 8.333333%;">Data rozpoczęcia</th>
                        <th style="max-width: 8.333333%;">Data zakończenia</th>
                        <th data-orderable="false" class="text-center" style="max-width: 16.666667%">Akcje</th>
                    </tr>
                    </thead>
                    <tbody>
                    <?php foreach ($listaSzkolen as $key => $wniosekZFS): ?>
                        <tr>
                            <td><?php echo ($key+1) . '.'; ?></td>
                            <td><?php echo $wniosekZFS['bNazwisko']; ?> <?php echo $wniosekZFS['bImie']; ?></td>
                            <td><?php $date = preg_replace('/T/', " ", $wniosekZFS['bDataRozpoczecia']);
                                echo (new \DateTime($date))->format('Y-m-d'); ?></td>
                            <td><?php $date = preg_replace('/T/', " ", $wniosekZFS['bDataZakonczenia']);
                                echo (new \DateTime($date))->format('Y-m-d'); ?></td>
                            <td class="text-right table-actions" data-orderable="false">
                                <button title="Pogląd" class="btn btn-success"
                                        onclick="editData('<?php echo $wniosekZFS['bGid']; ?>', true)">
                                    <i class="fa fa-eye"></i>
                                </button>
                                <?php if (isset($wniosekZFS['bCzyMozeEdytowac']) && $wniosekZFS['bCzyMozeEdytowac'] == 'true') : ?>
                                    <button title="Edytuj" class="btn btn-primary"
                                            onclick="editData('<?php echo $wniosekZFS['bGid']; ?>')">
                                        <i class="fa fa-pencil"></i>
                                    </button>
                                <?php endif; ?>
                                <?php if (isset($wniosekZFS['bCzyMozeUsunac']) && $wniosekZFS['bCzyMozeUsunac'] == 'true') : ?>
                                    <button title="Usun" class="btn btn-danger" data-toggle="modal"
                                            data-target="#delModal"
                                            onclick="$('#addGidUsun').val('<?php echo $wniosekZFS['bGid']; ?>')">
                                        <i class="fa fa-remove"></i>
                                    </button>
                                <?php endif; ?>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h5 class="alert alert-danger" style="display: none;" id="addError"></h5>
                <h5 class="alert alert-success" style="display: none;" id="addSuccess"></h5>
                <h4 class="text-center"><b>Dodaj zgłoszenie szkolenia</b></h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="row form-group">
                            <div class="col-xs-4 text-right"><label>Tytuł szkolenia:</label></div>
                            <div class="col-xs-6 text-left">
                                <input class="form-control" type="text" id="Tytul">
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-xs-4 text-right"><label>Data rozpoczęcia:</label>
                            </div>
                            <div class="col-xs-6 text-left">
                                <input type="date" class="form-control" id="DataRozpoczecia"
                                       value="<?php echo date('Y-m-d'); ?>">
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-xs-4 text-right"><label>Data zakończenia:</label>
                            </div>
                            <div class="col-xs-6 text-left">
                                <input type="date" class="form-control" id="DataZakonczenia"
                                       value="<?php echo date('Y-m-d'); ?>">
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-xs-4 text-right"><label>Rodzaj Dokumentu:</label></div>
                            <div class="col-xs-6 text-left">
                                <select class="form-control" id="RodzajDokumentuKod">
                                    <option value=""></option>
                                    <?php foreach ($rodzajDokumentu as $k => $v): ?>
                                        <option value="<?php echo $k; ?>"><?php echo $v['opis']; ?></option>
                                    <?php endforeach; ?>
                                </select>
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-xs-4 text-right"><label>Dokument:</label></div>
                            <div class="col-xs-6 text-left">
                                <input class="form-control" type="file" id="Dokument">
                                <img src="" id="DokumentPreview" style="display: none; max-width: 100%; max-height: 200px; margin-top: 10px;"
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <input type="hidden" class="form-control" id="addRodzajEdycji" value="Dodawanie">
                <input type="hidden" class="form-control" id="DokumentBase64" value="">
                <input type="hidden" class="form-control" id="addGid" value="">
                <div class="col-xs-12">
                    <button type="button" id="sendReq" onclick="sendData()" class="btn btn-secondary">
                        Dodaj zgłoszenie szkolenia
                    </button>
                    <button type="button" onclick="resetInput()" class="btn btn-danger" data-dismiss="modal">
                        Wróć
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="addModal">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Usuń wniosek ZFS</h4>
            </div>
            <div class="modal-body">
                Czy napewno chcesz USUNĄĆ wniosek ZFS?
            </div>
            <div class="modal-footer">
                <input type="hidden" class="form-control" id="addGidUsun" value="">
                <button type="button" onclick="removeData()" class="btn btn-danger">Usuń</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Anuluj</button>
            </div>
        </div>
    </div>
</div>

<div class="row more-info-container">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-header">
                <h2 class="box-title">Informacje dodatkowe</h2>
            </div>
            <div class="box-body" id="more-info-container">

            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        $('.page-name:first-of-type').html('<?php echo $pageName; ?>');

        initiateDataTable();
    })

    function sendData() {
        const data = {
            'bGid': $('#addGid').val(),
            'bTytul': $('#Tytul').val(),
            'bDataRozpoczecia': $('#DataRozpoczecia').val(),
            'bDataZakonczenia': $('#DataZakonczenia').val(),
            'bRodzajDokumentuKod': $('#RodzajDokumentuKod').val(),
            'bDokument': $('#DokumentBase64').val(),
            'bRodzajEdycji': $('#addRodzajEdycji').val()
        }

        $.ajax({
            url: '<?php echo $this->Url->build(['action' => 'dodajZgloszenieSzkolenia']); ?>',
            type: 'POST',
            data: data,
            success: function (data) {
                const response = JSON.parse(data);
                if (response.error) {
                    $('#addSuccess').hide();
                    $('#addError').show();
                    $('#addError').html(response.error);
                    return;
                }
                if (response.message === 'Pomyślnie dodano zgłoszenie szkolenia. ' || response.message === 'Pomyślnie zmodyfikowano zgłoszenie szkolenia. ') {
                    $('#addError').hide();
                    $('#addSuccess').show();
                    $('#addSuccess').html(response.message);
                    $('#addModal').modal('hide');
                    $('.modal-backdrop').remove();
                }
                reloadZgloszenia();
            }
        });
    }

    function editData(gid, view = false) {
        $('#addError').hide();
        $('#addSuccess').hide();
        $.ajax({
            url: '<?php echo $this->Url->build(['action' => 'dajZgloszenieSzkolenia']); ?>' + '/' + gid,
            type: 'GET',
            success: function (data) {
                const response = JSON.parse(data);
                console.log(response);

                $('#addGid').val(response.bGid);
                $('#Tytul').val(response.bTytul);
                $('#DataRozpoczecia').val(response.bDataRozpoczecia.slice(0, 10));
                $('#DataZakonczenia').val(response.bDataZakonczenia.slice(0, 10));
                $('#RodzajDokumentuKod').val(response.bRodzajDokumentuKod);

                if (view) {
                    $('#Tytul').attr('disabled', 'disabled');
                    $('#DataRozpoczecia').attr('disabled', 'disabled');
                    $('#DataZakonczenia').attr('disabled', 'disabled');
                    $('#RodzajDokumentuKod').attr('disabled', 'disabled');
                    $('#Dokument').hide();
                    $('#DokumentPreview').attr('src', 'data:image;base64,' + response.bDokument);
                    $('#DokumentPreview').show();
                }

                $('#addRodzajEdycji').val('Edycja');

                $('#addModal').modal('show');
            }
        });
    }

    function resetInput() {
        $('#addGid').val('');
        $('#Tytul').val('');
        $('#DataRozpoczecia').val('');
        $('#DataZakonczenia').val('');
        $('#RodzajDokumentuKod').val('');
        $('#Dokument').val('');
        $('#DokumentBase64').val('');
        $('#addRodzajEdycji').val('Dodawanie');
        $('#Tytul').removeAttr('disabled');
        $('#DataRozpoczecia').removeAttr('disabled');
        $('#DataZakonczenia').removeAttr('disabled');
        $('#RodzajDokumentuKod').removeAttr('disabled');
        $('#Dokument').removeAttr('disabled');
    }

    function removeData() {
        let gid = $('#addGidUsun').val();
        $.ajax({
            url: '<?php echo $this->Url->build(['action' => 'usunZgloszenieSzkolenia']); ?>' + '/' + gid,
            type: 'GET',
            success: function (data) {
                const response = JSON.parse(data);
                if (response.error) {
                    $('#addError').show();
                    $('#addSuccess').hide();
                    $('#addError').html(response.error);
                }
                $('#addModal').modal('hide');
                $('.modal-backdrop').remove();
                if (response.message === 'Pomyślnie usunięto zgłoszenie szkolenia. ') {
                    reloadZgloszenia();
                }
            }
        });
    }

    function reloadZgloszenia() {
        const link = document.querySelector('.zfs-tiles a[data-active="1"]');

        // Sprawdzenie, czy element istnieje
        if (link) {
            link.click();
        } else {
            console.log('Link do Zgłoszenia nie został znaleziony.');
        }
    }

    function toBase64(fileBlob, callback) {
        const reader = new FileReader();
        reader.onloadend = function() {
            // Wynik zawarty jest w `reader.result` jako base64
            callback(reader.result);
        }
        reader.readAsDataURL(fileBlob);
    }

    // Wywołanie funkcji dla elementu o id "Dokument"
    $('#Dokument').on('change', function(event) {
        const file = event.target.files[0]; // Pobranie pierwszego wybranego pliku
        if (file) {
            toBase64(file, function(base64Data) {
                // Tutaj możesz użyć uzyskanych danych w formacie base64
                var pureBase64 = base64Data.split(',')[1];
                $('#DokumentBase64').val(pureBase64);
            });
        } else {
            console.log('Brak wybranego pliku.');
        }
    });


</script>

<?php echo $this->element('alert_close'); ?>
