@php
    $types = \App\Support\CrmCalendar::types();
    $select = 'mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500';
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">
        <x-page-header :title="__('Calendar')">
            <a href="{{ route('crm.commercial-calendar') }}" wire:navigate>
                <x-secondary-button type="button">
                    <x-icon name="calendar" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('Commercial calendar') }}
                </x-secondary-button>
            </a>
            @if ($canCreate)
                <x-button type="button" wire:click="createMeeting">
                    <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('New meeting') }}
                </x-button>
            @endif
        </x-page-header>

        <section class="grid grid-cols-2 gap-4 lg:grid-cols-4">
            @foreach ($cards as $m)
                <a href="{{ $m['href'] }}" wire:navigate class="block">
                    <x-card class="group relative flex h-full flex-col overflow-hidden p-5 ring-slate-200/70 transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-300/40">
                        <div class="flex items-start justify-between gap-2">
                            <p class="truncate text-[11px] font-semibold uppercase tracking-wider text-slate-400" title="{{ $m['label'] }}">{{ $m['label'] }}</p>
                            <span class="flex items-center justify-center rounded-xl text-white shadow-sm ring-1 ring-white/40" style="height: 2rem; width: 2rem; background: linear-gradient(135deg, {{ $m['accent'] }}, {{ $m['accent'] }}bb)">
                                <x-icon :name="$m['icon']" class="h-4 w-4" />
                            </span>
                        </div>
                        <p class="mt-3 font-bold leading-none tracking-tight text-slate-900 tabular-nums" style="font-size: 19px;">{{ number_format($m['value']) }}</p>
                        <span class="mt-2.5 inline-flex w-fit items-center gap-1 rounded-full bg-slate-100 px-2 py-1 text-[11px] font-semibold text-slate-500">{{ $m['sub'] }}</span>
                    </x-card>
                </a>
            @endforeach
        </section>

        <x-card class="p-4 sm:p-5">
            <div class="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
                <div>
                    <p class="text-xs font-semibold uppercase tracking-wider text-slate-400">{{ __('Show') }}</p>
                    <div class="mt-2 flex flex-wrap gap-1.5">
                        @foreach (\App\Services\Crm\Calendar\CalendarFeed::LAYERS as $key => $layer)
                            @php
                                $on = in_array($key, $layers, true);
                                $type = $types[$layer['types'][0]];
                            @endphp
                            <button type="button" wire:click="toggleLayer('{{ $key }}')" aria-pressed="{{ $on ? 'true' : 'false' }}"
                                class="inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition {{ $on ? 'border-slate-300 bg-white text-slate-800 shadow-sm' : 'border-dashed border-slate-200 bg-slate-50 text-slate-400 line-through' }}">
                                <span class="inline-block h-2.5 w-2.5 shrink-0 rounded-full" style="background-color: {{ $on ? $type['color'] : '#cbd5e1' }}"></span>
                                <x-icon :name="$type['icon']" class="h-3 w-3" />
                                {{ __($layer['label']) }}
                            </button>
                        @endforeach
                    </div>
                </div>
                @if ($seesTeam)
                    <div class="flex w-fit shrink-0 items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-xs font-medium">
                        <button type="button" wire:click="setScope('mine')" class="rounded-lg px-3 py-1.5 transition {{ $scope !== 'team' ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">{{ __('My calendar') }}</button>
                        <button type="button" wire:click="setScope('team')" class="rounded-lg px-3 py-1.5 transition {{ $scope === 'team' ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">{{ __('Team') }}</button>
                    </div>
                @endif
            </div>
            <p class="mt-3 text-xs text-slate-500">
                {{ __('Times are :zone time.', ['zone' => str_replace('_', ' ', \Illuminate\Support\Str::afterLast(\App\Support\CrmCalendar::timezone(), '/'))]) }}
                {{ __('Commercial entries marked "Unconfirmed" have a date nobody has checked yet. Campaigns, content and renewals are changed on their own pages.') }}
            </p>
        </x-card>

        <x-crm.calendar :events="$events" editable :selectable="$canCreate" name="main"
            on-click="openEntry" on-drop="moveEntry" on-select="newEntry" on-range="loadRange" />
    </div>

    {{-- Meeting --}}
    <x-dialog-modal wire:model.live="showMeeting" maxWidth="2xl">
        <x-slot name="title">
            {{ $meetingId ? __('Meeting') : __('New meeting') }}
        </x-slot>

        <x-slot name="content">
            <fieldset @disabled(! $canEditMeeting) class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div class="sm:col-span-2">
                    <x-label for="m-title" value="{{ __('What is the meeting?') }}" />
                    <x-input id="m-title" type="text" class="mt-1 block w-full" wire:model="mTitle" placeholder="{{ __('e.g. Requirements meeting with procurement') }}" />
                    <x-input-error for="mTitle" class="mt-2" />
                </div>
                <div>
                    <x-label for="m-date" value="{{ __('Date') }}" />
                    <x-input id="m-date" type="date" class="mt-1 block w-full" wire:model="mDate" />
                    <x-input-error for="mDate" class="mt-2" />
                </div>
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <x-label for="m-start" value="{{ __('From') }}" />
                        <x-input id="m-start" type="time" class="mt-1 block w-full" wire:model="mStart" />
                        <x-input-error for="mStart" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="m-end" value="{{ __('To') }}" />
                        <x-input id="m-end" type="time" class="mt-1 block w-full" wire:model="mEnd" />
                        <x-input-error for="mEnd" class="mt-2" />
                    </div>
                </div>
                <div class="sm:col-span-2">
                    <x-label for="m-opportunity" value="{{ __('Opportunity (optional)') }}" />
                    <select id="m-opportunity" wire:model.live="mOpportunityId" class="{{ $select }}">
                        <option value="">{{ __('None') }}</option>
                        @foreach ($opportunities as $opportunity)
                            <option value="{{ $opportunity->id }}">{{ $opportunity->title }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="mOpportunityId" class="mt-2" />
                </div>
                @if (! $mOpportunityId)
                    <div>
                        <x-label for="m-organisation" value="{{ __('Organisation (optional)') }}" />
                        <select id="m-organisation" wire:model.live="mCustomerId" class="{{ $select }}">
                            <option value="">{{ __('None') }}</option>
                            @foreach ($organisations as $organisation)
                                <option value="{{ $organisation->id }}">{{ $organisation->name }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="mCustomerId" class="mt-2" />
                    </div>
                @endif
                <div>
                    <x-label for="m-contact" value="{{ __('Client contact') }}" />
                    <select id="m-contact" wire:model="mContactId" class="{{ $select }}">
                        <option value="">{{ $contacts->isEmpty() ? __('Choose an organisation first') : __('None') }}</option>
                        @foreach ($contacts as $contact)
                            <option value="{{ $contact->id }}">{{ $contact->name }}{{ $contact->title ? ', '.$contact->title : '' }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="mContactId" class="mt-2" />
                </div>
                <div>
                    <x-label for="m-owner" value="{{ __('Organiser') }}" />
                    <select id="m-owner" wire:model="mOwnerId" class="{{ $select }}">
                        <option value="">{{ __('Choose…') }}</option>
                        @foreach ($members as $member)
                            <option value="{{ $member->id }}">{{ $member->name }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="mOwnerId" class="mt-2" />
                </div>
                <div>
                    <x-label for="m-location" value="{{ __('Where') }}" />
                    <x-input id="m-location" type="text" class="mt-1 block w-full" wire:model="mLocation" placeholder="{{ __('Client office, our office, or a video link') }}" />
                    <x-input-error for="mLocation" class="mt-2" />
                </div>
                <div class="sm:col-span-2">
                    <x-label for="m-description" value="{{ __('Agenda') }}" />
                    <textarea id="m-description" rows="2" wire:model="mDescription" class="{{ $select }}"></textarea>
                </div>
            </fieldset>
        </x-slot>

        <x-slot name="footer">
            <div class="flex w-full flex-wrap items-center justify-between gap-3">
                <div class="flex items-center gap-3">
                    @if ($meeting && $canEditMeeting && $meeting->status !== 'cancelled')
                        <button type="button" wire:click="cancelMeeting" wire:confirm="{{ __('Cancel this meeting?') }}" class="text-sm font-medium text-rose-600 hover:text-rose-800">{{ __('Cancel meeting') }}</button>
                    @endif
                    @if ($meeting)
                        <button type="button" wire:click="writeNote" class="inline-flex items-center gap-1 text-sm font-medium text-indigo-600 hover:text-indigo-800">
                            <x-icon name="document-text" class="h-4 w-4" />
                            {{ $meetingNote ? __('Open meeting note') : __('Write meeting note') }}
                        </button>
                    @endif
                </div>
                <div class="flex items-center gap-3">
                    <x-secondary-button wire:click="closeMeeting" wire:loading.attr="disabled">{{ __('Close') }}</x-secondary-button>
                    @if ($canEditMeeting)
                        <x-button wire:click="saveMeeting" wire:loading.attr="disabled" wire:target="saveMeeting">
                            <span wire:loading.remove wire:target="saveMeeting">{{ __('Save meeting') }}</span>
                            <span wire:loading wire:target="saveMeeting">{{ __('Saving…') }}</span>
                        </x-button>
                    @endif
                </div>
            </div>
        </x-slot>
    </x-dialog-modal>

    {{-- A task dropped on a new date --}}
    <x-dialog-modal wire:model.live="showReschedule" maxWidth="md">
        <x-slot name="title">{{ __('Reschedule task') }}</x-slot>
        <x-slot name="content">
            <p class="text-sm text-slate-600">
                {{ __('Move it to :date?', ['date' => $moveStart !== '' ? \Illuminate\Support\Carbon::parse($moveStart)->format($moveAllDay ? 'D j M Y' : 'D j M Y, H:i') : '']) }}
            </p>
            <div class="mt-4">
                <x-label for="move-reason" value="{{ __('Why is the date moving?') }}" />
                <x-input id="move-reason" type="text" class="mt-1 block w-full" wire:model="moveReason" placeholder="{{ __('e.g. Client is travelling until Thursday') }}" />
                <x-input-error for="moveReason" class="mt-2" />
            </div>
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button wire:click="$set('showReschedule', false)">{{ __('Keep the date') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="confirmTaskMove" wire:loading.attr="disabled" wire:target="confirmTaskMove">
                <span wire:loading.remove wire:target="confirmTaskMove">{{ __('Reschedule') }}</span>
                <span wire:loading wire:target="confirmTaskMove">{{ __('Saving…') }}</span>
            </x-button>
        </x-slot>
    </x-dialog-modal>
</div>