@extends ('layouts/template')

@section('content')

<div class="p-3 mcp-theme-1">
    <div class="card">

        <div class="card-header px-2 py-1 d-flex align-items-center">
            <strong class="">
                <i class="fas fa-user"></i>
                Text Shortcuts
            </strong>
        </div>
        <div class="card-body p-3">

            <div class="d-flex align-items-baseline" tab-links="">
                <a class="tab-link-active" href="#" tab-link="personal">Personal Text Shortcuts</a>
                <a class="" href="#" tab-link="global">Global Text Shortcuts</a>
            </div>

            <!-- personal shortcuts -->
            <div tab-key="personal" class="cm-tab">
                <div class="d-flex align-items-baseline">
                    <div class="py-3 font-weight-bold font-size-14">Personal Text Shortcuts</div>
                    <span class="mx-2 text-secondary">|</span>
                    <div moe wide class="mr-2">
                        <a start show>Add</a>
                        <form url="/api/proTextShortcut/create">
                            <input type="hidden" name="proUid" value="{{$pro->uid}}">
                            <p><b>Add Personal Shortcut</b></p>
                            <div class="mb-2">
                                Pro: <b>{{$pro->displayName()}}</b>
                            </div>
                            <div class="mb-2">
                                <input type="text" class="form-control form-control-sm" name="shortcut" placeholder="Shortcut *" required>
                            </div>
                            <div class="mb-2">
                                <textarea type="text" rows="10" class="form-control form-control-sm" name="text" placeholder="Content *" required></textarea>
                            </div>
                            <div class="form-group m-0">
                                <button submit class="btn btn-primary btn-sm mr-2">Submit</button>
                                <button cancel class="btn btn-default border btn-sm mr-2">Cancel</button>
                            </div>
                        </form>
                    </div>
                </div>
                @if($personalShortcuts && count($personalShortcuts))
                    <table class="table table-sm table-striped table-hover table-bordered p-0 m-0">
                        <thead class="bg-light">
                        <tr>
                            <th class="px-3 border-0 width-200px">Pro</th>
                            <th class="border-0 width-200px">Shortcut</th>
                            <th class="border-0">Text</th>
                            <th class="border-0 width-200px">&nbsp;</th>
                        </tr>
                        <tr>
                            <th class="p-0 border-top border-bottom-0">
                                @if($performer->pro->pro_type === 'ADMIN')
                                    <input type="text" class="form-control form-control-sm min-width-unset rounded-0 border-0" stag-table-filter placeholder="Filter">
                                @endif
                            </th>
                            <th class="p-0 border-top border-bottom-0 width-200px">
                                <input type="text" class="form-control form-control-sm min-width-unset rounded-0 border-0" stag-table-filter placeholder="Filter">
                            </th>
                            <th class="p-0 border-top border-bottom-0">
                                <input type="text" class="form-control form-control-sm min-width-unset rounded-0 border-0" stag-table-filter placeholder="Filter">
                            </th>
                            <th class="p-0 border-top border-bottom-0 width-200px"></th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($personalShortcuts as $textShortcut)
                            <tr>
                                <td class="px-3 text-nowrap">
                                    @if($textShortcut->name_first || $textShortcut->name_last)
                                        {{ $textShortcut->name_first ? $textShortcut->name_first : '' }}
                                        {{ $textShortcut->name_last ? $textShortcut->name_last : '' }}
                                    @endif
                                </td>
                                <td>{{ $textShortcut->shortcut }}</td>
                                <td><pre class="max-width-700px my-0" style="white-space: break-spaces;">{{ $textShortcut->text }}</pre></td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div moe large relative class="mr-3">
                                            <a start show>
                                                <i class="fa fa-pencil-alt"></i>
                                            </a>
                                            <form url="/api/proTextShortcut/update" right>
                                                <input type="hidden" name="uid" value="{{$textShortcut->uid}}">
                                                <div class="mb-2">
                                                    <input type="text" class="form-control form-control-sm" name="shortcut"
                                                           value="{{$textShortcut->shortcut}}"
                                                           placeholder="Shortcut *">
                                                </div>
                                                <div class="mb-2">
                                                <textarea type="text" rows="10" class="form-control form-control-sm" name="text"
                                                          placeholder="Content *">{{$textShortcut->text}}</textarea>
                                                </div>
                                                <div class="form-group m-0">
                                                    <button submit class="btn btn-primary btn-sm mr-2">Submit</button>
                                                    <button cancel class="btn btn-default border btn-sm mr-2">Cancel</button>
                                                </div>
                                            </form>
                                        </div>
                                        <div moe relative wide class="mr-2">
                                            <a start show class="text-danger">
                                                <i class="fa fa-trash-alt"></i>
                                            </a>
                                            <form url="/api/proTextShortcut/remove" right>
                                                <input type="hidden" name="uid" value="{{$textShortcut->uid}}">
                                                <p>
                                                    Are you sure you want to remove this shortcut?
                                                </p>
                                                <div class="form-group m-0">
                                                    <button submit class="btn btn-danger btn-sm mr-2">Yes</button>
                                                    <button cancel class="btn btn-default border btn-sm mr-2">No</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                @else
                    <div class="px-3 py-3 text-secondary">No personal shortcuts</div>
                @endif
            </div>

            <!-- global shortcuts -->
            <div tab-key="global" class="cm-tab d-none">
                <div class="d-flex align-items-baseline">
                    <div class="py-3 font-weight-bold font-size-14">Global Text Shortcuts</div>
                    @if($performer->pro->pro_type === 'ADMIN')
                        <span class="mx-2 text-secondary">|</span>
                        <div moe wide class="mr-2">
                            <a start show>Add</a>
                            <form url="/api/proTextShortcut/create">
                                <p><b>Add Global Shortcut</b></p>
                                <div class="mb-2">
                                    <input type="text" class="form-control form-control-sm" name="shortcut" placeholder="Shortcut *" required>
                                </div>
                                <div class="mb-2">
                                    <textarea type="text" rows="10" class="form-control form-control-sm" name="text" placeholder="Content *" required></textarea>
                                </div>
                                <div class="form-group m-0">
                                    <button submit class="btn btn-primary btn-sm mr-2">Submit</button>
                                    <button cancel class="btn btn-default border btn-sm mr-2">Cancel</button>
                                </div>
                            </form>
                        </div>
                    @endif
                </div>
                @if($globalTextShortcuts && count($globalTextShortcuts))
                    <table class="table table-condensed table-hover table-bordered p-0 m-0">
                        <thead class="bg-light">
                        <tr>
                            <th class="border-0 width-200px">Shortcut</th>
                            <th class="border-0">Text</th>
                            @if($performer->pro->pro_type === 'ADMIN')
                                <th class="border-0 width-200px">&nbsp;</th>
                            @endif
                        </tr>
                        <tr>
                            <th class="p-0 border-top border-bottom-0 width-200px">
                                <input type="text" class="form-control form-control-sm min-width-unset rounded-0 border-0" stag-table-filter placeholder="Filter">
                            </th>
                            <th class="p-0 border-top border-bottom-0">
                                <input type="text" class="form-control form-control-sm min-width-unset rounded-0 border-0" stag-table-filter placeholder="Filter">
                            </th>
                            @if($performer->pro->pro_type === 'ADMIN')
                                <th class="p-0 border-top border-bottom-0 width-200px"></th>
                            @endif
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($globalTextShortcuts as $textShortcut)
                            <tr>
                                <td>{{ $textShortcut->shortcut }}</td>
                                <td><pre class="max-width-700px my-0" style="white-space: break-spaces;">{{ $textShortcut->text }}</pre></td>
                                @if($performer->pro->pro_type === 'ADMIN')
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div moe large relative class="mr-3">
                                                <a start show>
                                                    <i class="fa fa-pencil-alt"></i>
                                                </a>
                                                <form url="/api/proTextShortcut/update" right>
                                                    <input type="hidden" name="uid" value="{{$textShortcut->uid}}">
                                                    <div class="mb-2">
                                                        <input type="text" class="form-control form-control-sm" name="shortcut"
                                                               value="{{$textShortcut->shortcut}}"
                                                               placeholder="Shortcut *">
                                                    </div>
                                                    <div class="mb-2">
                                                    <textarea type="text" rows="10" class="form-control form-control-sm" name="text"
                                                              placeholder="Content *">{{$textShortcut->text}}</textarea>
                                                    </div>
                                                    <div class="form-group m-0">
                                                        <button submit class="btn btn-primary btn-sm mr-2">Submit</button>
                                                        <button cancel class="btn btn-default border btn-sm mr-2">Cancel</button>
                                                    </div>
                                                </form>
                                            </div>
                                            <div moe relative wide class="mr-2">
                                                <a start show class="text-danger">
                                                    <i class="fa fa-trash-alt"></i>
                                                </a>
                                                <form url="/api/proTextShortcut/remove" right>
                                                    <input type="hidden" name="uid" value="{{$textShortcut->uid}}">
                                                    <p>
                                                        Are you sure you want to remove this shortcut?
                                                    </p>
                                                    <div class="form-group m-0">
                                                        <button submit class="btn btn-danger btn-sm mr-2">Yes</button>
                                                        <button cancel class="btn btn-default border btn-sm mr-2">No</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </td>
                                @endif
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                @else
                    <div class="px-3 py-3 text-secondary">No global shortcuts</div>
                @endif
            </div>
        </div>
    </div>
</div>

@endsection
