@extends('layouts.owner')

@section('title', 'Editar Profissional — Lined')
@section('page-title', 'Editar Profissional')
@section('page-subtitle', $professional->name)

@section('content')

    @if(session('error'))
        <div class="mb-6 px-4 sm:px-5 py-4 rounded-xl bg-red-500/10 border border-red-500/20 text-red-400 text-sm break-words">
            {{ session('error') }}
        </div>
    @endif

    <form method="POST" action="{{ route('owner.professionals.update', $professional->idprofessional) }}" id="professional-form" onsubmit="handleSubmit()">
        @csrf

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

            {{-- Coluna principal --}}
            <div class="lg:col-span-2 flex flex-col gap-5 min-w-0">

                <div class="rounded-2xl border border-white/8 bg-white/3 p-5 sm:p-6">
                    <h3 class="font-heading font-bold text-white text-base mb-5 sm:mb-6">Dados pessoais</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">E-mail</label>
                            <div class="px-4 py-3 rounded-xl bg-black/20 border border-white/8 text-gray-400 text-sm">
                                {{ $professional->email }}
                            </div>
                        </div>

                        <div class="flex flex-col gap-1.5">
                            <label class="text-sm font-medium text-gray-300">Nome completo <span class="text-red-400 ml-0.5">*</span></label>
                            <input type="text" name="name" value="{{ old('name', $professional->name) }}" required
                                placeholder="Ex: João Silva"
                                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">
                            <label class="text-sm font-medium text-gray-300">Telefone</label>
                            <x-phone-input id="phone-input" name="phone" :required="false"
                                :value="old('phone', preg_replace('/\D/', '', $professional->phone ?? ''))"
                                placeholder="(00) 00000-0000"
                                input-class="w-full px-4 py-3 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none focus:border-brand-green/50 transition-colors" />
                        </div>

                        <div class="flex flex-col gap-1.5">
                            <label class="text-sm font-medium text-gray-300">CPF / Identificador</label>
                            <input type="text" id="cpf-input" name="identifier" inputmode="numeric" maxlength="14" value="{{ old('identifier', $professional->identifier) }}"
                                placeholder="000.000.000-00"
                                class="px-4 py-3 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none focus:border-brand-green/50 transition-colors">
                        </div>

                    </div>
                </div>

                {{-- Serviços --}}
                <div class="rounded-2xl border border-white/8 bg-white/3 p-5 sm:p-6">
                    <h3 class="font-heading font-bold text-white text-base mb-1">Serviços</h3>
                    <p class="text-gray-500 text-xs mb-4">Selecione os serviços que este profissional realiza</p>
                    @php $selectedSvc = array_map('intval', old('services', $selectedServices)); @endphp
                    @if(count($services) > 0)
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                            @foreach($services as $service)
                                @php $sv = (object)(array) $service; @endphp
                                <label class="flex items-center gap-3 px-4 py-3 rounded-xl border border-white/8 bg-black/20 hover:border-brand-green/30 hover:bg-brand-green/5 transition-all cursor-pointer group has-[:checked]:border-brand-green/40 has-[:checked]:bg-brand-green/8">
                                    <input type="checkbox" name="services[]" value="{{ $sv->idservice }}"
                                        {{ in_array((int)$sv->idservice, $selectedSvc) ? 'checked' : '' }}
                                        class="w-4 h-4 accent-brand-green shrink-0 rounded">
                                    <span class="text-gray-300 text-sm group-has-[:checked]:text-white transition-colors min-w-0 break-words">{{ $sv->name }}</span>
                                </label>
                            @endforeach
                        </div>
                    @else
                        <p class="text-gray-500 text-xs">Nenhum serviço disponível para esta filial.</p>
                    @endif
                </div>

            </div>

            {{-- Coluna lateral --}}
            <div class="flex flex-col gap-5 min-w-0">

                {{-- Ações --}}
                <div class="rounded-2xl border border-white/8 bg-white/3 p-5 sm:p-6">
                    <h3 class="font-heading font-bold text-white text-base mb-5 sm: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">Salvar alterações</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.professionals.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 phoneInput = document.getElementById('phone-input');

    const cpfInput = document.getElementById('cpf-input');

    function formatCpf(value) {
        const d = value.replace(/\D/g, '').slice(0, 11);
        if (d.length <= 3) return d;
        if (d.length <= 6) return `${d.slice(0,3)}.${d.slice(3)}`;
        if (d.length <= 9) return `${d.slice(0,3)}.${d.slice(3,6)}.${d.slice(6)}`;
        return `${d.slice(0,3)}.${d.slice(3,6)}.${d.slice(6,9)}-${d.slice(9)}`;
    }

    cpfInput.addEventListener('input', function () {
        const start = this.selectionStart;
        const prevLen = this.value.length;
        this.value = formatCpf(this.value);
        const diff = this.value.length - prevLen;
        this.setSelectionRange(start + diff, start + diff);
    });
    cpfInput.value = formatCpf(cpfInput.value);

    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() {
        if (window.PhoneInput) phoneInput.value = window.PhoneInput.digits('phone-input');
        cpfInput.value = cpfInput.value.replace(/\D/g, '');
        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