@extends('blocks.modal', ['modalName' => "stats-codes-details-modal"])

@section('modal-header')
    <div class="mdl-grid">
        <div class="mdl-cell mdl-cell--12-col" style="text-align: left;">
            <h4 class="mdl-color-text--indigo">Szczegóły - <strong id="stats-codes-username"></strong></h4>
        </div>
    </div>
@overwrite

@section('modal-content')
    <div class="mdl-grid">
        <div class="mdl-cell mdl-cell--12-col">
            <h4 style="padding:1em; padding-top:0;">Wygenerowane kody rabatowe</h4>
            <table class="codes-table mdl-data-table mdl-js-data-table mdl-shadow--2dp">
                <thead>
                <tr>
                    <th>Nazwa drużyny</th>
                    <th>Data wykorzystania</th>
                    <th>Zniżka</th>
                    <th>Kod</th>
                </tr>
                </thead>
                <tbody id="codesTable">
                </tbody>
            </table>
        </div>
    </div>
@overwrite

@section('modal-scripts')
    <style>
        #stats-codes-details-modal .modal-dialog {
            width: intrinsic;           /* Safari/WebKit uses a non-standard name */
            width: -moz-max-content;    /* Firefox/Gecko */
            width: -webkit-max-content;
            min-width: 300px; max-width: 1200px; }
        #stats-codes-details-modal .modal-footer { display: none !important; }
        .codes-table td, .codes-table th{
            padding: 0 3em;
            text-align: center !important;
        }
    </style>
    <script>

        function setDetailData(data){

            $("#stats-codes-username").html(data.username);
            const table = $("#codesTable");
            table.html("");

            $.each(data.events, (i, event)=>{
                const html = $.parseHTML(codeTemplate(event));
                table.append(html);
            });
        }

        const codeTemplate = (code) => {
               return `<tr>
                        <td>${code.team_name}</td>
                        <td>${code.date}</td>
                        <td>${code.discount}</td>
                        <td>${code.code}</td>
                    </tr>`;
        }
    </script>
@overwrite