@extends('layouts.app')
@section('title', 'Nova Solicitação (em nome de cliente)')
@section('page_title', 'Nova Solicitação — em nome de cliente')

@section('content')
@php
    $itensIniciais = old('itens')
        ? collect(old('itens'))->values()->map(fn($i, $k) => array_merge(['id' => $k + 1], $i))->all()
        : [[
            'id'              => 1,
            'origem_id'       => '',
            'destino_id'      => '',
            'plataforma_id'   => '',
            'origem_texto'    => '',
            'destino_texto'   => '',
            'sonda_texto'     => '',
            'data_coleta'     => '',
            'hora_coleta'     => '07:00',
            'quantidade'      => 1,
            'carga_descricao' => '',
            'carga_peso_ton'  => '',
        ]];
@endphp

<div class="py-6 max-w-5xl" x-data="solicitacaoAdminForm()">

    <form method="POST" action="{{ route('operador.solicitacoes.nova.store') }}">
        @csrf

        {{-- ── Dados do cliente / solicitante ───────────────────────── --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6 space-y-4">
            <h2 class="text-sm font-semibold uppercase tracking-wide border-b border-gray-100 pb-2" style="color:#0A1E3D;">
                Cliente &amp; Solicitante
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                {{-- Cliente --}}
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1">Cliente *</label>
                    <select name="cliente_id" required x-model="clienteId" x-on:change="trocarCliente()"
                            class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                        <option value="">— selecione o cliente —</option>
                        @foreach($clientes as $c)
                            <option value="{{ $c->id }}"
                                    data-contato="{{ $c->contato_nome }}"
                                    data-email="{{ $c->email }}"
                                    data-telefone="{{ $c->telefone }}"
                                    {{ old('cliente_id') == $c->id ? 'selected' : '' }}>
                                {{ $c->nome_fantasia ?: $c->razao_social }}
                            </option>
                        @endforeach
                    </select>
                    @error('cliente_id')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>

                {{-- Nome do Solicitante --}}
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1">Nome do Solicitante *</label>
                    <input type="text" name="solicitante_nome"
                           value="{{ old('solicitante_nome') }}"
                           x-model="solicitanteNome"
                           required
                           placeholder="Nome de quem fez o pedido"
                           class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                    @error('solicitante_nome')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>

                {{-- E-mail do Solicitante --}}
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1">E-mail do Solicitante</label>
                    <input type="email" name="solicitante_email"
                           value="{{ old('solicitante_email') }}"
                           x-model="solicitanteEmail"
                           placeholder="email@empresa.com"
                           class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                    @error('solicitante_email')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>

                {{-- Telefone do Solicitante --}}
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1">Telefone do Solicitante</label>
                    <input type="text" name="solicitante_telefone"
                           value="{{ old('solicitante_telefone') }}"
                           x-model="solicitanteTelefone"
                           placeholder="(31) 9 9999-9999"
                           class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                </div>
            </div>

            {{-- Pedido / Assunto / Observações --}}
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1">Pedido / OS do Cliente</label>
                    <input type="text" name="pedido_cliente" value="{{ old('pedido_cliente') }}" maxlength="100"
                           placeholder="Ex.: PO 4500123456 / OS 98765"
                           class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                    @error('pedido_cliente')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1">Assunto / Referência</label>
                    <input type="text" name="assunto" value="{{ old('assunto') }}"
                           placeholder="Ex.: semana 19/mai"
                           class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1">Observações gerais</label>
                    <input type="text" name="observacoes" value="{{ old('observacoes') }}"
                           placeholder="Observações complementares..."
                           class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                </div>
            </div>
        </div>

        {{-- ── Itens de transporte ─────────────────────────────────── --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-sm font-semibold uppercase tracking-wide" style="color:#0A1E3D;">Itens de Transporte</h2>
                <button type="button" x-on:click="addItem()"
                        class="inline-flex items-center gap-1 text-xs font-medium px-3 py-1.5 rounded-md border transition"
                        style="border-color:#F26522;color:#F26522;"
                        onmouseover="this.style.background='#fff5f0'" onmouseout="this.style.background='transparent'">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                    </svg>
                    Adicionar Linha
                </button>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full text-sm">
                    <thead>
                        <tr class="border-b border-gray-200 text-xs font-semibold text-gray-500 uppercase">
                            <th class="pb-2 pr-3 text-left w-36">Origem</th>
                            <th class="pb-2 pr-3 text-left w-36">Destino</th>
                            <th class="pb-2 pr-3 text-left w-28">Sonda / NA</th>
                            <th class="pb-2 pr-3 text-left w-32">Data</th>
                            <th class="pb-2 pr-3 text-left w-24">Horário</th>
                            <th class="pb-2 pr-3 text-left w-16">Qtd</th>
                            <th class="pb-2 pr-3 text-left" style="min-width:180px;">Descrição da Carga <span class="text-red-500">*</span></th>
                            <th class="pb-2 pr-3 text-left w-28">Peso (ton) <span class="text-red-500">*</span></th>
                            <th class="pb-2 text-left w-8"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <template x-for="(item, index) in itens" :key="item.id">
                            <tr class="border-b border-gray-100 hover:bg-gray-50">
                                {{-- ORIGEM --}}
                                <td class="py-1.5 pr-3">
                                    <select :name="`itens[${index}][origem_id]`"
                                            x-model="item.origem_id"
                                            x-on:change="if (String(item.destino_id) === String(item.origem_id)) item.destino_id = ''"
                                            class="w-full border border-gray-300 rounded px-2 py-1.5 text-xs focus:outline-none focus:ring-1 focus:ring-orange-400">
                                        <option value="">-- Origem --</option>
                                        @foreach($origens as $o)
                                            <option value="{{ $o->id }}">{{ $o->sigla ?? $o->nome }}</option>
                                        @endforeach
                                        <option value="__outro__">Outro...</option>
                                    </select>
                                    <input type="text" :name="`itens[${index}][origem_texto]`"
                                           x-show="item.origem_id === '__outro__'"
                                           x-model="item.origem_texto"
                                           placeholder="Digite a origem..."
                                           class="mt-1 w-full border border-gray-300 rounded px-2 py-1.5 text-xs focus:outline-none focus:ring-1 focus:ring-orange-400">
                                </td>
                                {{-- DESTINO --}}
                                <td class="py-1.5 pr-3">
                                    <select :name="`itens[${index}][destino_id]`"
                                            x-model="item.destino_id"
                                            class="w-full border border-gray-300 rounded px-2 py-1.5 text-xs focus:outline-none focus:ring-1 focus:ring-orange-400">
                                        <option value="">-- Destino --</option>
                                        <template x-for="destino in destinosDisponiveis(item)" :key="destino.id">
                                            <option :value="String(destino.id)" x-text="destino.label"></option>
                                        </template>
                                        <option value="__outro__">Outro...</option>
                                    </select>
                                    <input type="text" :name="`itens[${index}][destino_texto]`"
                                           x-show="item.destino_id === '__outro__'"
                                           x-model="item.destino_texto"
                                           placeholder="Digite o destino..."
                                           class="mt-1 w-full border border-gray-300 rounded px-2 py-1.5 text-xs focus:outline-none focus:ring-1 focus:ring-orange-400">
                                </td>
                                {{-- SONDA --}}
                                <td class="py-1.5 pr-3">
                                    <select :name="`itens[${index}][plataforma_id]`"
                                            x-model="item.plataforma_id"
                                            :disabled="!clienteId"
                                            class="w-full border border-gray-300 rounded px-2 py-1.5 text-xs focus:outline-none focus:ring-1 focus:ring-orange-400 disabled:bg-gray-100 disabled:text-gray-400">
                                        <option value="">NA</option>
                                        <template x-for="p in plataformasCliente()" :key="p.id">
                                            <option :value="String(p.id)" x-text="p.label"></option>
                                        </template>
                                        <option value="__outro__">Outro...</option>
                                    </select>
                                    <input type="text" :name="`itens[${index}][sonda_texto]`"
                                           x-show="item.plataforma_id === '__outro__'"
                                           x-model="item.sonda_texto"
                                           placeholder="Código da sonda..."
                                           class="mt-1 w-full border border-gray-300 rounded px-2 py-1.5 text-xs focus:outline-none focus:ring-1 focus:ring-orange-400">
                                </td>
                                {{-- DATA --}}
                                <td class="py-1.5 pr-3">
                                    <input type="date" :name="`itens[${index}][data_coleta]`"
                                           x-model="item.data_coleta"
                                           :min="hoje"
                                           class="w-full border border-gray-300 rounded px-2 py-1.5 text-xs focus:outline-none focus:ring-1 focus:ring-orange-400" required>
                                </td>
                                {{-- HORA --}}
                                <td class="py-1.5 pr-3">
                                    <input type="time" :name="`itens[${index}][hora_coleta]`"
                                           x-model="item.hora_coleta"
                                           :min="item.data_coleta === hoje ? horaMinima : null"
                                           class="w-full border border-gray-300 rounded px-2 py-1.5 text-xs focus:outline-none focus:ring-1 focus:ring-orange-400">
                                </td>
                                {{-- QTD --}}
                                <td class="py-1.5 pr-3">
                                    <input type="number" :name="`itens[${index}][quantidade]`"
                                           x-model="item.quantidade"
                                           min="1" max="99"
                                           class="w-full border border-gray-300 rounded px-2 py-1.5 text-xs text-center focus:outline-none focus:ring-1 focus:ring-orange-400">
                                </td>
                                {{-- DESCRIÇÃO DA CARGA --}}
                                <td class="py-1.5 pr-3">
                                    <input type="text" :name="`itens[${index}][carga_descricao]`"
                                           x-model="item.carga_descricao"
                                           placeholder="Ex.: Tubos de aço 10m..."
                                           required
                                           class="w-full border border-gray-300 rounded px-2 py-1.5 text-xs focus:outline-none focus:ring-1 focus:ring-orange-400">
                                </td>
                                {{-- PESO (ton) --}}
                                <td class="py-1.5 pr-3">
                                    <input type="number" :name="`itens[${index}][carga_peso_ton]`"
                                           x-model="item.carga_peso_ton"
                                           step="0.001" min="0.001" max="999"
                                           placeholder="27.000"
                                           required
                                           class="w-full border border-gray-300 rounded px-2 py-1.5 text-xs text-right focus:outline-none focus:ring-1 focus:ring-orange-400">
                                </td>
                                {{-- REMOVER --}}
                                <td class="py-1.5 text-center">
                                    <button type="button" x-on:click="removeItem(index)"
                                            x-show="itens.length > 1"
                                            class="text-red-400 hover:text-red-600 transition p-1 rounded">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                        </svg>
                                    </button>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
            <p class="text-xs text-gray-400 mt-3">Dica: use "Outro..." nas listas para digitar uma origem/destino não cadastrado.</p>
        </div>

        {{-- ── Botões ──────────────────────────────────────────────── --}}
        <div class="flex items-center gap-3">
            <button type="submit" name="action" value="enviar"
                    class="inline-flex items-center px-5 py-2.5 rounded-lg text-white text-sm font-medium transition"
                    style="background:#F26522;" onmouseover="this.style.opacity='.88'" onmouseout="this.style.opacity='1'">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
                </svg>
                Criar e Enviar para Análise
            </button>
            <button type="submit" name="action" value="rascunho"
                    class="inline-flex items-center px-5 py-2.5 rounded-lg border border-gray-400 text-gray-700 hover:bg-gray-100 text-sm font-medium transition">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/>
                </svg>
                Salvar como Rascunho
            </button>
            <a href="{{ route('operador.solicitacoes.index') }}"
               class="inline-flex items-center px-4 py-2.5 rounded-lg text-gray-500 text-sm hover:text-gray-700 transition">
                Cancelar
            </a>
        </div>

    </form>
</div>

<script>
function solicitacaoAdminForm() {
    // Mapa de dados de contato dos clientes (preenchidos via data-attributes do option)
    return {
        hoje: @json(now()->format('Y-m-d')),
        horaMinima: @json(now()->format('H:i')),
        nextId: 1000,
        clienteId: '{{ old('cliente_id', '') }}',
        plataformasPorCliente: @json($plataformasPorCliente),
        destinos: @js($destinos->map(fn ($d) => ['id' => $d->id, 'label' => $d->sigla ?? $d->nome])->values()),
        solicitanteNome:     '{{ old('solicitante_nome', '') }}',
        solicitanteEmail:    '{{ old('solicitante_email', '') }}',
        solicitanteTelefone: '{{ old('solicitante_telefone', '') }}',
        itens: @json($itensIniciais),

        plataformasCliente() {
            return this.plataformasPorCliente[String(this.clienteId)] || [];
        },

        destinosDisponiveis(item) {
            return this.destinos.filter(destino => String(destino.id) !== String(item.origem_id));
        },

        trocarCliente() {
            this.preencherSolicitante();
            const permitidas = new Set(this.plataformasCliente().map(p => String(p.id)));
            this.itens.forEach(item => {
                if (item.plataforma_id && (item.plataforma_id === '__outro__' || !permitidas.has(String(item.plataforma_id)))) {
                    item.plataforma_id = '';
                    item.sonda_texto = '';
                }
            });
        },

        preencherSolicitante() {
            const sel = document.querySelector(`select[name="cliente_id"]`);
            const opt = sel?.options[sel.selectedIndex];
            if (!opt || !opt.value) return;
            // Só preenche se os campos estiverem vazios (não sobrescreve edições manuais)
            if (!this.solicitanteNome)     this.solicitanteNome     = opt.dataset.contato    || '';
            if (!this.solicitanteEmail)    this.solicitanteEmail    = opt.dataset.email       || '';
            if (!this.solicitanteTelefone) this.solicitanteTelefone = opt.dataset.telefone    || '';
        },

        addItem() {
            this.nextId++;
            this.itens.push({
                id: this.nextId,
                origem_id: '', destino_id: '', plataforma_id: '',
                origem_texto: '', destino_texto: '', sonda_texto: '',
                data_coleta: '', hora_coleta: '07:00',
                quantidade: 1,
                carga_descricao: '', carga_peso_ton: '',
            });
        },

        removeItem(index) {
            if (this.itens.length > 1) this.itens.splice(index, 1);
        },
    };
}
</script>
@endsection