<?php

use App\Models\BlockedTime;
use Livewire\Attributes\Validate;
use Livewire\Volt\Component;

new class extends Component
{
    public bool $showBlockModal = false;

    #[Validate('required|date|after_or_equal:today')]
    public string $blockDate = '';

    #[Validate('required')]
    public string $blockStartTime = '';

    #[Validate('required|after:blockStartTime')]
    public string $blockEndTime = '';

    public string $blockReason = '';

    public function openBlockModal(): void
    {
        $this->blockDate = today()->format('Y-m-d');
        $this->blockStartTime = '09:00';
        $this->blockEndTime = '10:00';
        $this->blockReason = '';
        $this->resetValidation();
        $this->showBlockModal = true;
    }

    public function closeBlockModal(): void
    {
        $this->showBlockModal = false;
        $this->reset(['blockDate', 'blockStartTime', 'blockEndTime', 'blockReason']);
        $this->resetValidation();
    }

    public function blockTimeSlot(): void
    {
        $this->validate();

        BlockedTime::create([
            'block_date' => $this->blockDate,
            'start_time' => $this->blockStartTime,
            'end_time' => $this->blockEndTime,
            'reason' => $this->blockReason ?: null,
        ]);

        $this->closeBlockModal();
        session()->flash('block_success', __('widgets.time_slot_blocked'));
    }
}; ?>

<div>
    <div class="flex flex-wrap gap-3">
        <flux:button href="{{ route('admin.clients.individual.create') }}" variant="primary" icon="user-plus" wire:navigate>
            {{ __('widgets.create_client') }}
        </flux:button>
        <flux:button href="{{ route('admin.posts.create') }}" icon="document-plus" wire:navigate>
            {{ __('widgets.create_post') }}
        </flux:button>
        <flux:button href="{{ route('admin.users.export') }}" icon="arrow-down-tray" wire:navigate>
            {{ __('widgets.export_users') }}
        </flux:button>
        <flux:button wire:click="openBlockModal" icon="clock">
            {{ __('widgets.block_time_slot') }}
        </flux:button>
        <flux:button href="{{ route('admin.reports.monthly') }}" icon="document-chart-bar" wire:navigate>
            {{ __('widgets.monthly_report') }}
        </flux:button>
    </div>

    @if (session('block_success'))
        <div class="mt-4">
            <flux:callout variant="success" icon="check-circle">
                {{ session('block_success') }}
            </flux:callout>
        </div>
    @endif

    <flux:modal wire:model="showBlockModal" class="w-full max-w-md">
        <div class="space-y-6">
            <flux:heading size="lg">{{ __('widgets.block_time_slot') }}</flux:heading>

            <form wire:submit="blockTimeSlot" class="space-y-4">
                <flux:field>
                    <flux:label>{{ __('widgets.date') }}</flux:label>
                    <flux:input type="date" wire:model="blockDate" min="{{ today()->format('Y-m-d') }}" />
                    <flux:error name="blockDate" />
                </flux:field>

                <div class="grid grid-cols-2 gap-4">
                    <flux:field>
                        <flux:label>{{ __('widgets.start_time') }}</flux:label>
                        <flux:input type="time" wire:model="blockStartTime" />
                        <flux:error name="blockStartTime" />
                    </flux:field>

                    <flux:field>
                        <flux:label>{{ __('widgets.end_time') }}</flux:label>
                        <flux:input type="time" wire:model="blockEndTime" />
                        <flux:error name="blockEndTime" />
                    </flux:field>
                </div>

                <flux:field>
                    <flux:label>{{ __('widgets.reason') }} ({{ __('common.optional') }})</flux:label>
                    <flux:textarea wire:model="blockReason" rows="2" />
                </flux:field>

                <div class="flex justify-end gap-3 pt-4">
                    <flux:button type="button" wire:click="closeBlockModal">
                        {{ __('common.cancel') }}
                    </flux:button>
                    <flux:button type="submit" variant="primary">
                        {{ __('widgets.block_slot') }}
                    </flux:button>
                </div>
            </form>
        </div>
    </flux:modal>
</div>
