@php
    $blank = ['id' => null, 'url' => '', 'type' => '', 'exe_name' => '', 'exe_number' => ''];
    $initial = $errors->any()
        ? ['id' => old('_id') ? (int) old('_id') : null, 'url' => old('url', ''), 'type' => old('type', ''), 'exe_name' => old('exe_name', ''), 'exe_number' => old('exe_number', '')]
        : $blank;
@endphp
<x-layouts.app title="Bitly links" subtitle="Short links per SMS campaign, inserted into bulk-SMS templates as {link}."
               :breadcrumbs="['Leads & Messaging' => null, 'Bitly links' => null]">
    <x-slot:actions>
        <button type="button" class="btn btn-brand" x-data @click="$dispatch('bitly-new')"><x-heroicon-m-plus class="h-4 w-4" /> Add link</button>
    </x-slot:actions>
    <div x-data="{
            form: @js($initial),
            blank: @js($blank),
            storeUrl: @js(route('bitly.store')),
            updateUrl: @js(route('bitly.update', ['bitly' => '__ID__'])),
            open(link) { this.form = Object.assign({}, this.blank, link || {}); this.$dispatch('open-modal', 'bitly-form') },
            get action() { return this.form.id ? this.updateUrl.replace('__ID__', this.form.id) : this.storeUrl },
         }" @bitly-new.window="open()">

        @include('sms.partials.tabs')

        <x-card :padded="false">
            <div class="border-b border-ink-100 p-4 dark:border-ink-800">
                <x-filter-bar placeholder="Search campaign, link, executive…" />
            </div>

            @if ($links->isEmpty())
                <x-empty-state title="No bitly links" icon="heroicon-o-link" message="Add the short link of each campaign so it can be used in SMS templates.">
                    <button type="button" class="btn btn-brand" @click="open()"><x-heroicon-m-plus class="h-4 w-4" /> Add link</button>
                </x-empty-state>
            @else
                <div class="table-wrap">
                    <table class="table">
                        <thead>
                            <tr>
                                <th><x-sort-link column="type" label="Campaign" /></th>
                                <th><x-sort-link column="url" label="Short link" /></th>
                                <th><x-sort-link column="exe_name" label="Executive" /></th>
                                <th class="text-right">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-ink-100 dark:divide-ink-800">
                            @foreach ($links as $link)
                                <tr>
                                    <td class="font-medium text-ink-900 dark:text-white">{{ $link->type ?: '—' }}</td>
                                    <td>
                                        <div class="flex items-center gap-2" x-data="{ copied: false }">
                                            <a href="{{ $link->url }}" target="_blank" rel="noopener noreferrer nofollow" class="font-mono text-sm text-sky-700 hover:underline dark:text-sky-400">{{ $link->url }}</a>
                                            <button type="button" class="btn-icon" title="Copy link"
                                                    @click="navigator.clipboard?.writeText(@js((string) $link->url)).then(() => { copied = true; setTimeout(() => copied = false, 1500) })">
                                                <x-heroicon-o-clipboard-document class="h-4 w-4" x-show="!copied" />
                                                <x-heroicon-o-check class="h-4 w-4 text-emerald-600" x-show="copied" x-cloak />
                                            </button>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="text-ink-800 dark:text-ink-200">{{ $link->exe_name ?: '—' }}</div>
                                        @if ($link->exe_number)<div class="text-xs text-ink-500 tabular-nums">{{ $link->exe_number }}</div>@endif
                                    </td>
                                    <td class="text-right">
                                        <div class="inline-flex items-center gap-1">
                                            <button type="button" class="btn-icon" title="Edit"
                                                    @click="open(@js(['id' => $link->id, 'url' => (string) $link->url, 'type' => (string) $link->type, 'exe_name' => (string) $link->exe_name, 'exe_number' => (string) $link->exe_number]))">
                                                <x-heroicon-o-pencil-square class="h-4 w-4" />
                                            </button>
                                            <form method="POST" action="{{ route('bitly.destroy', $link->id) }}" x-data="confirmSubmit('Delete the link for {{ addslashes((string) $link->type) }}?')" @submit="submit">
                                                @csrf @method('DELETE')
                                                <button class="btn-icon hover:!bg-rose-50 hover:!text-rose-600" title="Delete"><x-heroicon-o-trash class="h-4 w-4" /></button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <x-pagination-bar :paginator="$links" />
            @endif
        </x-card>

        <x-modal name="bitly-form" maxWidth="md" :show="$errors->any()">
            <h3 class="mb-4 text-base font-semibold text-ink-900 dark:text-white" x-text="form.id ? 'Edit bitly link' : 'Add bitly link'"></h3>
            <form method="POST" :action="action" id="bitly-form" class="space-y-4">
                @csrf
                <input type="hidden" name="_method" value="PUT" :disabled="!form.id">
                <input type="hidden" name="_id" :value="form.id ?? ''">
                <div>
                    <label for="bitly-type" class="form-label">Campaign <span class="text-rose-500">*</span></label>
                    <input id="bitly-type" name="type" x-model="form.type" required maxlength="200" class="form-input uppercase" placeholder="CARLOAN_SURAT">
                    @error('type')<p class="form-error">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label for="bitly-url" class="form-label">Short link <span class="text-rose-500">*</span></label>
                    <input id="bitly-url" name="url" type="url" x-model="form.url" required maxlength="200" class="form-input font-mono" placeholder="https://bit.ly/…">
                    @error('url')<p class="form-error">{{ $message }}</p>@enderror
                </div>
                <div class="grid gap-4 sm:grid-cols-2">
                    <div>
                        <label for="bitly-exe" class="form-label">Executive</label>
                        <input id="bitly-exe" name="exe_name" x-model="form.exe_name" maxlength="200" class="form-input">
                        @error('exe_name')<p class="form-error">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="bitly-num" class="form-label">Executive mobile</label>
                        <input id="bitly-num" name="exe_number" x-model="form.exe_number" inputmode="tel" maxlength="12" class="form-input">
                        @error('exe_number')<p class="form-error">{{ $message }}</p>@enderror
                    </div>
                </div>
            </form>
            <x-slot:footer>
                <button type="button" class="btn btn-secondary" @click="$dispatch('close-modal', 'bitly-form')">Cancel</button>
                <button form="bitly-form" class="btn btn-brand"><x-heroicon-m-check class="h-4 w-4" /> Save</button>
            </x-slot:footer>
        </x-modal>
    </div>
</x-layouts.app>