@extends('layouts.app')

@section('content')
    <div class="container py-4">
        <div class="row justify-content-center">
            <div class="card w-100">
                <div class="card-header h2">Nowy scenariusz</div>
                <div class="card-body overflow-auto">
                    <div class="scenarioMenu d-flex flex-wrap justify-content-center">
                        <label class="btn btn-dark my-2">
                            Główne
                            <input type="radio" value="main" name="scenarioMenu">
                        </label>
                        <label class="btn btn-light my-2">
                            Odpowiedzi
                            <input type="radio" value="answers" name="scenarioMenu">
                        </label>
                        <label class="btn btn-light my-2">
                            Materiały
                            <input type="radio" value="materials" name="scenarioMenu">
                        </label>
                        <label class="btn btn-light my-2">
                            Kluczowa wskazówka
                            <input type="radio" value="key_tip" name="scenarioMenu">
                        </label>
                        <label class="btn btn-light my-2">
                            Wszystkie scenariusze
                            <input type="radio" value="allScenarios" name="scenarioMenu">
                        </label>
                    </div>

                    <form id="scenario_form" class="mt-5 px-2" method="POST" action="{{ route('new_scenario') }}">
                        @csrf
                        <input name="idscen" type="hidden" value="0">
                        <div class="choosen main">
                            <div class="d-flex flex-wrap justify-content-around align-items-center">
                                <div style="min-width: 100px;" class="mt-3">
                                    <input type="text" name="title" placeholder="Tytuł" class="form-control"
                                        aria-label="Tytuł">
                                    <div class="input-group mt-2">
                                        <div class="input-group-prepend">
                                            <input name="price" step="0.01" class="form-control" type="number"
                                                placeholder="Kwota" aria-label="Kwota">
                                            <span class="input-group-text" id="inputGroupPrepend3">zł</span>
                                        </div>
                                    </div>
                                    <label class="d-none mt-3" id="paymentCode">
                                        Kod do płatności:
                                        <input class="form-control" readonly type="text" value=""
                                            name="paymentCode">
                                    </label>
                                </div>
                                <div id="discount-container" style="min-width: 100px;" class="mt-4">
                                    <span style="font-size: 1.2em;">Rabat</span>
                                    <table id="discount-table" style="font-size: 0.75em;"
                                        class="table-bordered table table-sm text-center">
                                        <tr>
                                            <th rowspan="2" style="width: 75px;">Liczba biletów (szt.)</th>
                                            <th rowspan="2">3</th>
                                            <th rowspan="2">4</th>
                                            <th rowspan="2">5</th>
                                            <th rowspan="2">6</th>
                                            <th rowspan="2">7</th>
                                            <th rowspan="2">8</th>
                                            <th rowspan="3" class="pt-3">
                                                <span style="position: relative; top:-5px;">9 -</span>
                                                <span style="font-size: 2em;">&#8734;</span>
                                            </th>
                                        </tr>
                                        <tr></tr>
                                        <tr>
                                            <th rowspan="2">% rabatu</th>
                                            <td rowspan="2">-10%</td>
                                            <td rowspan="2">-10%</td>
                                            <td rowspan="2">-15%</td>
                                            <td rowspan="2">-15%</td>
                                            <td rowspan="2">-20%</td>
                                            <td rowspan="2">-20%</td>
                                        </tr>
                                        <tr>
                                            <td rowspan="3">Zawsze <br>-20%</td>
                                        </tr>
                                        <tr>
                                            <th rowspan="2">Cena po<br>rabacie (zł)</th>
                                            <td rowspan="2">-</td>
                                            <td rowspan="2">-</td>
                                            <td rowspan="2">-</td>
                                            <td rowspan="2">-</td>
                                            <td rowspan="2">-</td>
                                            <td rowspan="2">-</td>
                                        </tr>
                                    </table>
                                </div>
                                <div style="min-width: 100px;" class="ml-2 mt-3">
                                    <div class="custom-control custom-checkbox">
                                        <input id="ch2" type="checkbox" name="share" class="custom-control-input">
                                        <label for="ch2" class="custom-control-label">
                                            Udostępnij do gry
                                        </label>
                                    </div>
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" name="division" class="custom-control-input"
                                            id="ch1">
                                        <label class="custom-control-label mt-2" for="ch1">
                                            Włącz podział na jedno/wielo osobowe drużyny
                                        </label>
                                    </div>
                                    <div class="mt-2 custom-control custom-checkbox">
                                        <input id="ch3" type="checkbox" name="paymentShare"
                                            class="custom-control-input">
                                        <label for="ch3" class="custom-control-label">
                                            Udostępnij do płatności
                                        </label>
                                    </div>
                                    <div class="mt-2 custom-control custom-checkbox">
                                        <input id="ch4" type="checkbox" checked="checked" name="discount"
                                            class="custom-control-input">
                                        <label for="ch4" class="custom-control-label">
                                            Aktywuj zniżkę przy zakupie wielu biletów
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <label class="ml-4 mt-3">
                                Podaj link do google sheets w celu wysyłania odpowiedzi podczas gry:
                                <input type="text" class="form-control" name='external_google_sheet_link'>
                            </label>
                            <hr class="mt-4 mb-4">
                            <div class="mt-5">
                                <h3>Informacje do strony z płatnościami</h3>
                                <div class="mt-5 flex-wrap d-flex justify-content-between align-items-center">
                                    <div class="d-inline">
                                        <label>
                                            Start śledztwa
                                            <input class="form-control" type="datetime-local" name="startDate">
                                        </label>
                                        <br>
                                        <label class="mt-2">
                                            Link do wydarzenia na Facebook'u
                                            <input class="form-control" name="fb_link">
                                        </label>
                                    </div>

                                    <div class="d-inline" style="min-width: 210px; width:35%;">
                                        <label class="w-100">
                                            Nagrody
                                            <input class="form-control" name="awards" maxlength="255" />
                                        </label>
                                        <br>
                                        <label class="w-100">
                                            Gramy w miastach:
                                            <input class="form-control" name="play_in_city" maxlength="255" />
                                        </label>
                                    </div>
                                    <label>
                                        Wstępna historia
                                        <textarea cols="40" rows="4" class="form-control" name="paymentHistory"></textarea>
                                    </label>
                                </div>
                                <div class="mt-5">
                                    <span class="h5">
                                        Dodaj niestandardowe zdjęcie które będzie widoczne przy dokonywaniu płatności:
                                    </span>
                                    <div id="dropimgPayment" class="mt-3">
                                        <img alt="send" class="upImg" src="{{ asset('images/up.png') }}"><br>Wybierz
                                        zdjęcie
                                    </div>
                                    <input class="d-none" type="file" name="fileinPayment" id="fileinPayment">
                                    <input type="hidden" id="paymentPhotoInput" name="paymentPhoto">
                                    <img id="paymentPhoto" src="" alt="Obrazek płatności">
                                </div>
                            </div>
                            <br>
                            <hr class="mt-5 mb-5">
                            <h5>Powiadomienia w trakcie gry</h5>
                            <div class="mt-4 notification d-flex flex-wrap justify-content-around">
                                <textarea class="mt-2 form-control" name="notifi[0]" rows="3" maxlength="170"
                                    aria-label="Powiadomienie 1 runda" cols="28" placeholder="Koniec rundy 1"></textarea>
                                <textarea class="mt-2 form-control" name="notifi[1]" rows="3" maxlength="170"
                                    aria-label="Powiadomienie 2 runda" cols="28" placeholder="Koniec rundy 2"></textarea>
                                <textarea class="mt-2 form-control" name="notifi[2]" rows="3" maxlength="170"
                                    aria-label="Powiadomienie 3 runda" cols="28" placeholder="Koniec rundy 3"></textarea>
                            </div>
                            <div class="h5 mt-4 mb-5">
                                <p>Info - Jeśli powiadomienie pozostanie puste, wówczas prowadzący dostaną możliwość
                                    wypełnienia tekstu powiadomienia, jeśli i prowadzący nie wypełni tego pola, wtedy
                                    zostanie ustawiony domyślny tekst powiadomienia:</p>
                                <p class="text-center">
                                    Wykonałeś kawał dobrej roboty detektywie! Śledztwo zostanie wznowione po krótkiej
                                    przerwie.
                                </p>
                            </div>
                        </div>
                        <div class="choosen answers">
                            <table class="w-100 text-center">
                                <tr>
                                    <td colspan="3" class="text-left h5">Nagłówki</td>
                                </tr>
                                <tr>
                                    <td><input name="perpetratorTitle" class="form-control" type="text"
                                            maxlength="20" value="Sprawca"></td>
                                    <td><input name="methodTitle" class="form-control" type="text" maxlength="20"
                                            value="Metoda przestępstwa"></td>
                                    <td><input name="motiveTitle" class="form-control" type="text" maxlength="20"
                                            value="Motyw"></td>
                                </tr>
                                <tr>
                                    <td colspan="3">
                                        <p>&nbsp;</p>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="3" class="text-left h5">Prawidłowe odpowiedzi</td>
                                </tr>
                                <tr class="prawidlowe">
                                    <td>
                                        <p class="p-0 m-0">Sprawca</p>
                                        <input class="form-control" type="text" maxlength="250" name="sprawca[0]">
                                    </td>
                                    <td>
                                        <p class="p-0 m-0">Metoda</p>
                                        <input class="form-control" type="text" maxlength="250" name="metoda[0]">
                                    </td>
                                    <td>
                                        <p class="p-0 m-0">Motyw</p>
                                        <input class="form-control" type="text" maxlength="250" name="motyw[0]">
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="3" class="text-left h5">Pozostałe</td>
                                </tr>
                                @for ($i = 1; $i < 6; $i++)
                                    @php($placeholder = '')
                                    @if ($i >= 4)
                                        @php($placeholder = 'Opcjonalnie')
                                    @endif
                                    <tr>
                                        <td><input placeholder="{{ $placeholder }}" class="form-control" type="text"
                                                maxlength="250" name="sprawca[{{ $i }}]"></td>
                                        <td><input placeholder="{{ $placeholder }}" class="form-control" type="text"
                                                maxlength="250" name="metoda[{{ $i }}]"></td>
                                        <td><input placeholder="{{ $placeholder }}" class="form-control" type="text"
                                                maxlength="250" name="motyw[{{ $i }}]"></td>
                                    </tr>
                                @endfor
                            </table>
                        </div>
                        <div class="choosen materials">
                            <div class="d-flex justify-content-around">
                                <textarea rows="5" class="form-control mx-3" aria-label="Początkowa historia" name="begin_history"
                                    placeholder="Historia przed rozpoczęciem gry"></textarea>
                                <textarea rows="5" class="form-control mx-3" aria-label="Końcowa historia" name="end_history"
                                    placeholder="Historia po zakończeniu gry"></textarea>
                            </div>
                            <div class="mt-5 text-center">
                                <h5 class="text-center">Opisy postaci</h5>
                                <div id="dropimg">
                                    <img alt="send" class="upImg" src="{{ asset('images/up.png') }}"><br>Wybierz
                                    zdjęcie
                                </div>
                                <input class="d-none" type="file" name="filein" id="filein">

                                <h5 id="ofiara">Ofiara</h5>
                                <div class="ofiara">
                                    <p class="px-2 d-flex justify-content-between">
                                        <input aria-label="Imię i nazwisko postaci" class="form-control form-control-sm"
                                            type="text" placeholder="Imię i nazwisko postaci" name="name[0]">
                                        <input aria-label="Kim była" class="mx-2 form-control form-control-sm kimbyla"
                                            type="text" placeholder="Kim była?" name="whoWas[0]">
                                        <input aria-label="Wiek" class="form-control form-control-sm wiek" type="number"
                                            name="age[0]" placeholder="Wiek" id="wiek0">
                                    </p>
                                    <div class="imgcontainer" id="image0"></div>
                                    <textarea aria-label="Opis ofiary" class="form-control" placeholder="Opis postaci" name="description[0]"></textarea>
                                </div>

                                <h5 class="mt-5" id="podejrzani">Podejrzani</h5>
                                <div class="mt-4 d-flex flex-wrap justify-content-between">
                                    @for ($i = 1; $i < 7; $i++)
                                        <div class="mt-3 postac">
                                            <p class="px-2 d-flex justify-content-between">
                                                <input aria-label="Imię i nazwisko postaci"
                                                    class="form-control form-control-sm" type="text"
                                                    placeholder="Imię i nazwisko postaci"
                                                    name="name[{{ $i }}]">
                                                <input aria-label="Kim była"
                                                    class="mx-2 kimbyla form-control form-control-sm" type="text"
                                                    placeholder="Kim była?" name="whoWas[{{ $i }}]">
                                                <input aria-label="Wiek" class="form-control form-control-sm wiek"
                                                    type="number" placeholder="Wiek" name="age[{{ $i }}]">
                                            </p>
                                            <div class="imgcontainer" id="image{{ $i }}"></div>
                                            <textarea class="form-control" aria-label="Opis podejrzanego" placeholder="Opis postaci"
                                                name="description[{{ $i }}]"></textarea>
                                            <div class="mt-2 custom-control custom-checkbox">
                                                <input id="is-perpetrator{{$i}}" type="checkbox" name='isPerpetrator[{{$i}}]' class="custom-control-input">
                                                <label for="is-perpetrator{{$i}}" class="custom-control-label">
                                                    Sprawca
                                                </label>
                                            </div>
                                        </div>
                                    @endfor
                                </div>
                            </div>
                        </div>
                        <div class="choosen key_tip text-center">
                            <table class="key-tip-table table w-100 text-left">
                                <tr>
                                    <th colspan="4">
                                        <h4>Runda 1</h4>
                                    </th>
                                    <th></th>
                                </tr>
                                <tr data-round="0" data-type="perpetrator">
                                    <td class="pl-3">
                                        <h5>Sprawca</h5>
                                    </td>
                                    <td>
                                        <div class="dropimg">
                                            <img alt="send" class="upImg"
                                                src="{{ asset('images/up.png') }}"><br>Wybierz zdjęcie
                                        </div>
                                        <input class="d-none keyTipInput" type="file">
                                    </td>
                                    <td class="key-tip-container"></td>
                                    <td class="key-tip-container"></td>
                                    <td class="key-tip-container"></td>
                                </tr>
                                <tr data-round="0" data-type="method">
                                    <td class="pl-3">
                                        <h5>Metoda</h5>
                                    </td>
                                    <td>
                                        <div class="dropimg">
                                            <img alt="send" class="upImg"
                                                src="{{ asset('images/up.png') }}"><br>Wybierz zdjęcie
                                        </div>
                                        <input class="d-none keyTipInput" type="file">
                                    </td>
                                    <td class="key-tip-container"></td>
                                    <td class="key-tip-container"></td>
                                    <td class="key-tip-container"></td>
                                </tr>
                                <tr>
                                    <td colspan="5">&nbsp;</td>
                                </tr>
                                <tr>
                                    <th colspan="4">
                                        <h4>Runda 2</h4>
                                    </th>
                                    <th></th>
                                </tr>
                                <tr data-round="1" data-type="perpetrator">
                                    <td class="pl-3">
                                        <h5>Sprawca</h5>
                                    </td>
                                    <td>
                                        <div class="dropimg">
                                            <img alt="send" class="upImg"
                                                src="{{ asset('images/up.png') }}"><br>Wybierz zdjęcie
                                        </div>
                                        <input class="d-none keyTipInput" type="file" name="keyTipImg[]">
                                    </td>
                                    <td class="key-tip-container"></td>
                                    <td class="key-tip-container" colspan="2"></td>
                                </tr>
                                <tr data-round="1" data-type="method">
                                    <td class="pl-3">
                                        <h5>Metoda</h5>
                                    </td>
                                    <td>
                                        <div class="dropimg">
                                            <img alt="send" class="upImg"
                                                src="{{ asset('images/up.png') }}"><br>Wybierz zdjęcie
                                        </div>
                                        <input class="d-none keyTipInput" type="file" name="keyTipImg[]">
                                    </td>
                                    <td class="key-tip-container"></td>
                                    <td class="key-tip-container" colspan="2"></td>
                                </tr>
                            </table>
                        </div>
                        <br>
                        <div class="choosen materials key_tip main answers text-right mt-5 mr-4">
                            <div id="loaderImage" class="mt-5 lds-ring">
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <div id="error" class="text-danger d-inline mt-5 mr-4 h4"></div>
                            <input type="submit" value="Zapisz scenariusz" class="btn btn-success">
                        </div>


                    </form>
                    <div class="choosen allScenarios text-center">
                        <table id="scenarios" class="table text-center table-striped w-100">
                            <thead class="thead-dark">
                                <tr>
                                    <th class="w-50">Tytuł</th>
                                    <th>Widoczny dla prowadzących</th>
                                    <th>Udostępniony do płatności</th>
                                    <th>Konfiguracja MailerLite</th>
                                    <th></th>
                                    <th style="width:100px;"></th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                        <div id="scenLoader" class="mt-5 lds-ring">
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('style')
    <style>
        @media (min-width: 1200px) {
            .container {
                max-width: 1400px;
            }
        }

        .key-tip-preview {
            max-height: 130px;
            max-width: 130px;
        }

        .key-tip-table td {
            min-width: 20vw;
            position: relative;
            vertical-align: middle;
        }

        .key-tip-table td:first-child {
            min-width: 5vw;
        }

        .allScenarios thead th {
            position: sticky;
            top: 0;
            height: 37px;
            z-index: 1;
        }

        .allScenarios tbody td {
            cursor: pointer;
            transition-duration: 0.2s;
        }

        .allScenarios tbody tr:hover td {
            background-color: #2d995baa;
        }

        #ofiara,
        #podejrzani,
        .postac,
        .ofiara {
            display: none;
        }

        .ofiara {
            width: 90%;
            max-width: 800px;
            margin: 0 auto;
        }

        #opis0 {
            float: none;
            margin: 0 auto 0 5%;
        }

        #dropimg,
        #dropimgPayment,
        .dropimg {
            position: relative;
            border: 2px solid #7a7a7a;
            border-radius: 5px;
            height: 70px;
            width: 270px;
            text-align: center;
            background-color: rgba(255, 255, 255, 0.85);
            cursor: pointer;
            color: black;
            text-shadow: none;
            box-sizing: border-box;
            font-size: 14px;
            padding: 8px;
            margin: 5% auto;
        }

        .prawidlowe input {
            border: 2px solid #2fa360;
        }

        .answers table {
            border-collapse: separate;
            border-spacing: 1em 2em;
        }

        .notification textarea {
            max-width: 300px;
        }

        .scenarioMenu input {
            display: none;
        }

        .scenarioMenu label {
            margin: 0 2%;
            padding: 0.375rem 1.5rem;
            border: 1px solid #777;
        }

        .upImg {
            width: 55px;
            float: left;
            margin-left: 20px;
            margin-top: 5px;
        }

        .imgcontainer {
            text-align: center;
            float: left;
            width: 130px;
            height: 130px;
            margin: 0 auto;
            position: relative;
        }

        .mainimg {
            margin: 0 auto;
            width: 100%;
            max-width: 130px;
            max-height: 130px;
        }

        .trash-container {
            opacity: 0;
            -webkit-transition: opacity 500ms, visibility 500ms;
            transition: opacity 500ms, visibility 500ms;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            width: 100%;
            max-width: 130px;
            max-height: 130px;
            background-color: rgba(255, 255, 255, 0.45);
            transition-duration: 0.33s;
        }

        .mainimg:hover+.trash-container,
        .trash-container:hover {
            opacity: 1;
        }

        .trash-container img {
            cursor: pointer;
            position: absolute;
            left: 27%;
            top: 27%;
            opacity: 0.8;
            max-width: 55px;
        }

        .imgcontainer+textarea {
            width: 65%;
            height: 120px;
            margin-top: 0;
            display: inline-block;
        }

        .kimbyla {
            max-width: 200px;
        }

        input.wiek {
            width: 80px;
        }

        .postac {
            min-width: 45%;
        }

        #paymentPhoto {
            display: none;
            width: 250px;
            height: auto;
            margin: 0 auto;
        }

        .okSign {
            color: #2fa360;
            font-size: 1.5em;
        }

        .notOkSign {
            color: #e42026;
            font-size: 1.5em;
        }

        .loaderImageMailer {
            width: 30px !important;
            height: 30px !important;
            margin: 0 auto;
            display: none;
        }

        .loaderImageMailer div {
            width: 28px;
            height: 28px;
            margin: 3px;
            border: 3px solid #000;
            border-color: #000 transparent transparent transparent;
        }

        #discount-table td,
        #discount-table th {
            vertical-align: middle !important;
        }
    </style>
@endsection

@section('scripts')
    <script type="text/javascript" src="{{ asset('js/pc_scenario.js?update=1') }}"></script>
    <script type="text/javascript">
        //payment photo
        $(() => {
            const dropContainer = $("#dropimgPayment");
            const token = $('meta[name="csrf-token"]').attr('content');

            $('#fileinPayment').on('change', (e) => {
                let uploadLink = '/photo?paymentPhoto=1';
                imgGlobalUpload(e, dropContainer, uploadLink, $("#paymentPhotoInput"), $("#paymentPhoto"));
            });
            $(document).on('click', '#dropimgPayment', function() {
                $("#fileinPayment").click();
            });
        });

        function imgGlobalUpload(event, dropContainer, uploadLink, photoInput, photoPreview = null, ) {
            let co = event.target.value.split('\\');
            dropContainer.html(co[co.length - 1] + "<p> </p>Wysyłanie...");

            let files = event.target.files;
            let data = new FormData();

            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                if (!file.type.match('image.*')) {
                    dropContainer.html("<br>Wybierz zdjęcie o formacie jpg lub png");
                } else if (file.size > 5300000) {
                    dropContainer.html("<br>Plik jest za duży, maks 5Mb");
                } else {
                    data.append('file', file, file.name);

                    const xhr = new XMLHttpRequest();

                    xhr.open('POST', uploadLink, true);
                    xhr.setRequestHeader('x-csrf-token', token);
                    xhr.send(data);
                    xhr.onload = function() {
                        const response = JSON.parse(xhr.responseText);

                        if (xhr.status === 200 && response.status[0] === 'ok') {
                            dropContainer.html(
                                "Zdjęcie zostało pomyślnie wysłane!<br>Kliknij aby dodać kolejne");

                            const split = response.status[1].split('/');
                            const imgName = split[split.length - 1];
                            const dirName = split[split.length - 2];
                            if (photoPreview) {
                                photoPreview.attr('src', `images/${dirName}/${imgName}`).css('display',
                                    'inherit');
                            }
                            photoInput.val(imgName);

                        } else if (response.status === 'type_err') {
                            dropContainer.html("Dozwolone formaty to jpg oraz png, wybierz inny plik");
                        } else {
                            dropContainer.html(
                                "Coś poszło nie tak, spróbuj zmniejszyć rozdzielczość lub wybierz inne zdjęcie"
                            );
                        }
                    };
                }
            }
        }
    </script>
    <script type="text/javascript">
        const keyTipTemplate = (round, type, img = '', val = '', correct = 0) => {
            const uid = uuidv4();
            const index = $(`input.tip-${type}-${round}`).length;

            return `<img class='key-tip-preview' src='${img}' alt=''>
                        <input class="tip-${type}-${round}" type='hidden' value='${val}' name='keyTipImg[${type}][${round}][${index}]' />
                        <div class='trash-container'><img class='delete' alt='Trash' src='images/trash.png'></div>
                        <div class="mt-2 custom-control custom-checkbox">
                            <input id="${uid}" ${correct ? 'checked' : ''} type="checkbox" name='keyTip[${type}][${round}][${index}]' class="custom-control-input">
                            <label for="${uid}" class="custom-control-label">
                                Ważna dla sprawy
                            </label>
                        </div>`;
        };

        function uuidv4() {
            return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
                (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
            );
        }

        $(() => {


            $(document).on('click', '.dropimg', function(e) {
                const dropContainer = $(e.target);
                const input = dropContainer.closest('td').find('input[type="file"]');

                input.click();
            });

            $(document).on('change', '.keyTipInput', function(e) {
                const tr = $(e.target).closest('tr');
                const dropContainer = tr.find('.dropimg');
                const uploadLink = '/photo';
                let preview;
                let input;
                const round = tr.data('round');
                const type = tr.data('type');
                const tds = tr.children('td');

                tds.each(function(index) {
                    const content = $(this).html();

                    if (content.length === 0) {
                        const image = keyTipTemplate(round, type);
                        $(this).html(image);
                        preview = $(this).children('img');
                        input = $(this).children('input');
                        return false;
                    }
                });

                if (preview && input) {
                    imgGlobalUpload(e, dropContainer, uploadLink, input, preview);
                } else {
                    dropContainer.html("<br>Dodano już maksymalną ilość zdjęć");
                }
            });

        });
    </script>

    <script type="text/javascript">
        let fotki = [];
        let dropContainer;
        let token;
        //materials photos
        $(function() {
            token = $('meta[name="csrf-token"]').attr('content');
            dropContainer = $("#dropimg");

            $(document).on("click", ".delete", function() {
                let numerphoto = parseInt(this.id.substr(6));

                if(!numerphoto){
                    $(this).closest('td').html('');
                    return false;
                }

                if ($("input[name='idscen']").val() === "0") {
                    $.ajax({
                        type: "DELETE",
                        url: `photo/${fotki[numerphoto]}`,
                        cache: false,
                        headers: {
                            'X-CSRF-TOKEN': token,
                        },
                        success: function() {
                            succes_delete_photo(numerphoto);
                        }
                    });
                } else {
                    succes_delete_photo(numerphoto);
                }
            });

            function succes_delete_photo(numerphoto) {
                if (dropContainer.html() === "Dodano już wszystkie zdjęcia")
                    dropContainer.html(
                        '<img alt="send" class="upImg" src="images/up.png"><br>Wybierz zdjęcie</div>');

                $(`#image${numerphoto}`).html("");
                if ($(`textarea[name='description[${numerphoto}]']`).val().trim().length < 5) {
                    $(`.postac:eq(${numerphoto-1})`).fadeOut();

                    if (numerphoto === 0)
                        $("#ofiara").fadeOut();
                }
                fotki[numerphoto] = undefined;
            }

            $(document).on('click', '#dropimg', function() {
                $("#filein").click();
            });

            $(document).on('drop dragover', function(e) {
                e.preventDefault();
            });

            //call a function to handle file upload on select file
            $('#filein').on('change', imgUpload);
        });

        function imgUpload(event) {
            let ktore = 0;
            let ilefot = 0;
            for (let i = 0; i < 7; i++) {
                if (fotki[i] == null) {
                    ktore = i;
                    break;
                } else {
                    ilefot++;
                }
            }
            if (ilefot > 6) {
                dropContainer.html("Dodano już wszystkie zdjęcia");
                return false;
            }
            let co = event.target.value.split('\\');
            dropContainer.html(co[co.length - 1] + "<p> </p>Wysyłanie...");

            let files = event.target.files;
            let data = new FormData();

            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                if (!file.type.match('image.*')) {
                    dropContainer.html("<br>Wybierz zdjęcie o formacie jpg lub png");
                } else if (file.size > 5300000) {
                    dropContainer.html("<br>Plik jest za duży, maks 5Mb");
                } else {
                    data.append('file', file, file.name);

                    const xhr = new XMLHttpRequest();

                    xhr.open('POST', '/photo', true);
                    xhr.setRequestHeader('x-csrf-token', token);
                    xhr.send(data);
                    xhr.onload = function() {
                        const response = JSON.parse(xhr.responseText);

                        if (xhr.status === 200 && response.status[0] === 'ok') {
                            dropContainer.html("Zdjęcie zostało pomyślnie wysłane!<br>Kliknij aby dodać kolejne");

                            if (ktore === 0) {
                                $("#ofiara, .ofiara").fadeIn();
                            } else if (ktore > 0) {
                                $("#podejrzani").fadeIn();
                                $(`.postac:eq(${ktore-1})`).fadeIn();
                            }

                            const split = response.status[1].split('/');
                            fotki[ktore] = split[split.length - 1];
                            const imgCont = $("#image" + ktore);
                            imgCont.html(
                                `<img alt='zdjęcie postaci' class='mainimg' src='images/scenarios-photo/${fotki[ktore]}'>`
                            );
                            imgCont.append(`<input type='hidden' name='photo[${ktore}]' value='${fotki[ktore]}'>`);
                            imgCont.append("<div class='trash-container'><img class='delete' alt='Trash' id='delete" +
                                ktore + "' src='images/trash.png'></div>");
                        } else if (response.status === 'type_err') {
                            dropContainer.html("Dozwolone formaty to jpg oraz png, wybierz inny plik");
                        } else {
                            dropContainer.html(
                                "Coś poszło nie tak, spróbuj zmniejszyć rozdzielczość lub wybierz inne zdjęcie");
                        }
                    };
                }
            }
        }
    </script>
@endsection