<link href="/select2/select2.min.css" rel="stylesheet" />
<script src="/select2/select2.min.js"></script>

<style>
    .select2-container {
        width: 100% !important;
    }
</style>

<div class="">
    <div class="d-flex align-items-center pb-2">
        <p class="font-weight-bold text-secondary m-0 font-size-14">Handouts</p>
        <span class="mx-2 text-secondary">|</span>
        <div moe>
            <a start show class="">Add</a>
            <form url="/api/handoutClient/create" id="handoutForm" style="width: 500px;">
                <input type="hidden" name="clientUid" value="{{ $patient->uid }}">
                @if(@$note)
                <input type="hidden" name="noteUid" value="{{ $note->uid }}">
                @endif
                <div id="handoutSelectComponent" v-cloak class="mb-2">
                    <input type="hidden" name="handoutUid" :value="selectedHandoutUid" />
                    <input type="search" v-model="search" class="form-control" placeholder="Search Handout" @keyup="filterHandouts" />
                    <div class="mt-3" style="max-height: 430px;overflow-y: auto;overflow-x:hidden;">
                        <div class="row" style="max-height:300px;">
                            <div v-for="handout in handoutsList" class="col-md-4 mb-2 handout" :class="selectedHandoutUid == handout.uid ? 'selected':''" @click="selectedHandoutUid = handout.uid">
                                <a class="d-flex flex-column h-100 border rounded p-2 handout-detail c-pointer pdf-viewer-trigger" native target="_blank" :href="'/api/handout/download/'+handout.uid" title="View">
                                    <i v-if="selectedHandoutUid == handout.uid" class="fas fa-check-circle"></i>
                                    <img :src="'/api/handout/download-thumbnail/'+handout.uid" :alt="handout.display_name" onerror="if (this.src != '/img/pdf.png') this.src = '/img/pdf.png';">
                                    <h6 class="mt-auto pt-1 mb-0 text-center">@{{ handout.display_name }}</h6>
                                </a>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="d-flex align-items-center">
                    <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
                    <button class="btn btn-sm btn-default mr-2 border" on-handout-close cancel>Cancel</button>
                </div>
            </form>
        </div>
    </div>
    <table class="table table-striped table-sm table-bordered m-0">
        <thead class="bg-light">
            <tr>
                <th></th>
                <th class="border-0 text-secondary">Internal Name</th>
                <th class="border-0 text-secondary">Display Name</th>
                <th class="border-0 text-secondary">View</th>
                <th class="border-0 text-secondary w-50">Shareable Link</th>
                <th class="border-0 text-secondary"></th>
            </tr>
        </thead>
        <tbody>
            @foreach($clientHandouts as $clientHandout)
            <?php $downloadLink = config('app.url') . "/guest/handout/" . $clientHandout->uid; ?>
            <tr>
                <td>
                    <img width="50" src="/api/handout/download-thumbnail/{{ $clientHandout->handout->uid }}" alt="{{$clientHandout->handout->display_name}}" onerror="if (this.src != '/img/pdf.png') this.src = '/img/pdf.png';">
                </td>
                <td>{{$clientHandout->handout->internal_name}}</td>
                <td>{{$clientHandout->handout->display_name}}</td>
                <td>
                    <a class="pdf-viewer-trigger" native target="_blank" href="/api/handout/download/{{ $clientHandout->handout->uid }}" title="View">View</a>
                </td>
                <td><b class="click-to-copy">{{ $downloadLink }}</b></td>
                <td>
                    <div moe="" relative="">
                        <a start="" show="" href="#">SMS Link</a>
                        <form url="/api/clientSms/createOutgoing" right="" class="mcp-theme-1">
                            <input type="hidden" name="uid" value="d5de7592-14f1-4df8-aed3-988b1e50afb2">
                            <div class="mb-2">
                                <label for="" class="text-sm text-secondary mb-1">Cell Number</label>
                                <input type="text" class="form-control form-control-sm" name="cellNumber" value="{{ $patient->cell_number }}">
                            </div>
                            <div class="mb-2">
                                <label for="" class="text-sm text-secondary mb-1">Message</label>
                                <textarea type="text" rows="10" class="form-control form-control-sm" name="message">Dear {{$patient->displayName()}}, Access the handout ({{$clientHandout->handout->display_name}}) at the following link: <a href="{{$downloadLink}}">{{$downloadLink}}</a></textarea>
                            </div>
                            <div class="d-flex align-items-center">
                                <button class="btn btn-sm btn-primary mr-2" submit="">Send</button>
                                <button class="btn btn-sm btn-default mr-2 border" cancel="">
                                    Cancel
                                </button>
                            </div>
                        </form>
                    </div>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>
<script>
    var handoutSelectComponent = new Vue({
        el: '#handoutSelectComponent',
        data: {
            handouts: <?= json_encode($handouts) ?>,
            handoutsList: [],
            selectedHandoutUid: null,
            search: null,
            preview: null
        },
        methods: {
            togglePreview: function(handoutUid) {
                this.preview = handoutUid;
                if (!handoutUid) {

                }
            },
            filterHandouts: function(evt) {
                var self = this;
                self.search = evt.target.value;

                var obj = $.extend({}, {
                    handouts: self.handouts
                });
                var handoutsList = obj.handouts;

                if (!self.search.length) {
                    self.handoutsList = handoutsList;
                    return;
                }

                var data = [];
                for (var i = 0; i < handoutsList.length; i++) {
                    var handout = handoutsList[i];
                    if (handout.display_name.toLowerCase().includes(self.search.toLowerCase())) {
                        data.push(handout);
                    }
                }
                self.handoutsList = data;

            },
            onClose: function() {
              var self = this;
              $('[on-handout-close]').click(function(){
                self.selectedHandoutUid = null;
                self.search = null;
                self.handoutsList = self.handouts;
                $('[stag-popup-key="pdf-viewer"]').removeClass('show');
              });
            },
            init: function() {
                this.handoutsList = this.handouts;
                this.onClose();
            }
        },
        mounted: function() {
            this.init();

        }
    });
</script>
