@extends('layouts.owner')

@section('title', 'Novo Serviço — Lined')
@section('page-title', 'Novo Serviço')
@section('page-subtitle', 'Criar um novo serviço')

@section('content')

    <form method="POST" action="{{ route('owner.services.store') }}" id="service-form" onsubmit="handleSubmit()">
        @csrf

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

            <div class="lg:col-span-2 flex flex-col gap-5">


                <div class="rounded-2xl border border-white/8 bg-white/3 p-6">
                    <h3 class="font-heading font-bold text-white text-base mb-6">Informações do serviço</h3>

                    <div class="flex flex-col gap-5">

                        <div class="flex flex-col gap-1.5">
                            <label class="text-sm font-medium text-gray-300">Nome <span
                                    class="text-red-400 ml-0.5">*</span></label>
                            <input type="text" name="name" value="{{ old('name') }}" required
                                placeholder="Ex: Corte de cabelo, Manicure..."
                                class="px-4 py-3 rounded-xl bg-black/30 border @error('name') border-red-500/60 @else border-white/10 @enderror text-white placeholder-gray-600 text-sm outline-none focus:border-brand-green/50 transition-colors">
                            @error('name')
                                <span class="text-red-400 text-xs">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="flex flex-col gap-1.5">
                            <div class="flex items-center justify-between">
                                <label class="text-sm font-medium text-gray-300">Descrição</label>
                                <span id="desc-counter" class="text-xs text-gray-500">0/500</span>
                            </div>
                            <textarea id="desc-textarea" name="description" rows="3" maxlength="500" placeholder="Descreva o serviço brevemente..."
                                class="px-4 py-3 rounded-xl bg-black/30 border @error('description') border-red-500/60 @else border-white/10 @enderror text-white placeholder-gray-600 text-sm outline-none focus:border-brand-green/50 transition-colors resize-none">{{ old('description') }}</textarea>
                            @error('description')
                                <span class="text-red-400 text-xs">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="grid grid-cols-2 gap-4">
                            <div class="flex flex-col gap-1.5">
                                <label class="text-sm font-medium text-gray-300">Preço (R$) <span
                                        class="text-red-400 ml-0.5">*</span></label>
                                <div class="relative">
                                    <span
                                        class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500 text-sm font-medium">R$</span>
                                    <input type="number" name="price" value="{{ old('price') }}" required min="0"
                                        step="0.01" placeholder="0,00"
                                        class="w-full pl-10 pr-4 py-3 rounded-xl bg-black/30 border @error('price') border-red-500/60 @else border-white/10 @enderror text-white placeholder-gray-600 text-sm outline-none focus:border-brand-green/50 transition-colors">
                                </div>
                                @error('price')
                                    <span class="text-red-400 text-xs">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="flex flex-col gap-1.5">
                                <label class="text-sm font-medium text-gray-300">Duração (min) <span
                                        class="text-red-400 ml-0.5">*</span></label>
                                <div class="relative">
                                    <span
                                        class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500 text-sm font-medium">min</span>
                                    <input type="number" name="period" value="{{ old('period') }}" required min="1"
                                        step="1" placeholder="30"
                                        class="w-full pl-12 pr-4 py-3 rounded-xl bg-black/30 border @error('period') border-red-500/60 @else border-white/10 @enderror text-white placeholder-gray-600 text-sm outline-none focus:border-brand-green/50 transition-colors">
                                </div>
                                @error('period')
                                    <span class="text-red-400 text-xs">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                    </div>
                </div>

            </div>

            <div class="flex flex-col gap-5">

                <div class="rounded-2xl border border-white/8 bg-white/3 p-6">
                    <h3 class="font-heading font-bold text-white text-base mb-6">Ações</h3>
                    <div class="flex flex-col gap-3">
                        <button id="submit-btn" type="submit"
                            class="w-full py-3 px-4 rounded-xl bg-brand-green text-white text-sm font-bold hover:bg-brand-green-dark hover:-translate-y-0.5 hover:shadow-lg hover:shadow-brand-green/25 transition-all duration-300 cursor-pointer border-0 shadow-[0_4px_16px_-4px_rgba(34,197,94,0.4)] flex items-center justify-center gap-2">
                            <span id="submit-text">Criar serviço</span>
                            <svg id="submit-spinner" class="hidden animate-spin size-4" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                                    stroke-width="4" />
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
                            </svg>
                        </button>
                        <a id="cancel-btn" href="{{ route('owner.services.index') }}" onclick="handleCancel(event)"
                            class="w-full py-3 px-4 rounded-xl bg-white/5 border border-white/10 text-white text-sm font-semibold text-center hover:bg-white/10 transition-all no-underline flex items-center justify-center gap-2">
                            <span id="cancel-text">Cancelar</span>
                            <svg id="cancel-spinner" class="hidden animate-spin size-4" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                                    stroke-width="4" />
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
                            </svg>
                        </a>
                    </div>
                </div>
            </div>

        </div>
    </form>

@endsection

@push('scripts')
    <script>
        const descTextarea = document.getElementById('desc-textarea');
        const descCounter  = document.getElementById('desc-counter');

        function updateCounter() {
            const len = descTextarea.value.length;
            descCounter.textContent = len + '/500';
            descCounter.className   = 'text-xs ' + (len >= 450 ? (len >= 500 ? 'text-red-400' : 'text-yellow-400') : 'text-gray-500');
        }

        descTextarea.addEventListener('input', updateCounter);
        updateCounter();

        function lockButtons() {
            const submitBtn = document.getElementById('submit-btn');
            const cancelBtn = document.getElementById('cancel-btn');
            submitBtn.disabled = true;
            submitBtn.classList.remove('hover:-translate-y-0.5', 'hover:shadow-lg', 'hover:shadow-brand-green/25',
                'cursor-pointer');
            submitBtn.classList.add('opacity-60', 'cursor-not-allowed');
            cancelBtn.style.pointerEvents = 'none';
            cancelBtn.classList.add('opacity-60', 'cursor-not-allowed');
        }

        function handleSubmit() {
            lockButtons();
            document.getElementById('submit-text').textContent = 'Salvando...';
            document.getElementById('submit-spinner').classList.remove('hidden');
        }

        function handleCancel(e) {
            e.preventDefault();
            lockButtons();
            document.getElementById('cancel-text').textContent = 'Cancelando...';
            document.getElementById('cancel-spinner').classList.remove('hidden');
            window.location.href = e.currentTarget.href;
        }
    </script>
@endpush