@extends('layouts.app')
@php
    $editando = isset($solicitacao);
    $titulo = $editando ? 'Editar Solicitação ' . $solicitacao->numero_solicitacao : 'Nova Solicitação de Transporte';
@endphp
@section('title', $titulo)
@section('page_title', $titulo)

@section('content')
<div class="py-6 max-w-5xl" x-data="solicitacaoForm()">

    <form method="POST"
          action="{{ $editando ? route('cliente.solicitacoes.update', $solicitacao) : route('cliente.solicitacoes.store') }}"
          x-ref="formPrincipal">
        @csrf
        @if($editando) @method('PUT') @endif

        {{-- Cabeçalho da solicitação --}}
        <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 text-gray-700 uppercase tracking-wide" style="color:#0A1E3D;">Dados gerais</h2>

            <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', $solicitacao->pedido_cliente ?? '') }}"
                           placeholder="Ex.: PO 4500123456 / OS 98765" maxlength="100"
                           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', $solicitacao->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', $solicitacao->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>

        {{-- Tabela de itens (igual ao e-mail da Vallourec) --}}
        <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"
                                            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="">NA</option>
                                        @foreach($plataformas as $p)
                                            <option value="{{ $p->id }}">{{ $p->codigo ?? $p->nome }}</option>
                                        @endforeach
                                        <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, Equipamentos elétricos..."
                                           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 de ação --}}
        <div class="flex items-center gap-3">
            <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 Rascunho
            </button>
            <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>
                Enviar Solicitação
            </button>
            <a href="{{ route('cliente.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>

@php
// Monta os itens iniciais para o Alpine.js
$itensIniciais = [];
if (old('itens')) {
    foreach (old('itens') as $k => $i) {
        $itensIniciais[] = array_merge(['id' => $k + 1], $i);
    }
} elseif (isset($solicitacao) && $solicitacao->itens->count()) {
    foreach ($solicitacao->itens as $k => $i) {
        $itensIniciais[] = [
            'id'              => $k + 1,
            'origem_id'       => (string)($i->origem_id ?? ''),
            'destino_id'      => (string)($i->destino_id ?? ''),
            'plataforma_id'   => (string)($i->plataforma_id ?? ''),
            'origem_texto'    => $i->origem_texto ?? '',
            'destino_texto'   => $i->destino_texto ?? '',
            'sonda_texto'     => $i->sonda_texto ?? '',
            'data_coleta'     => $i->data_coleta ? $i->data_coleta->format('Y-m-d') : '',
            'hora_coleta'     => $i->hora_coleta ?? '',
            'quantidade'      => $i->quantidade ?? 1,
            'carga_descricao' => $i->carga_descricao ?? '',
            'carga_peso_ton'  => $i->carga_peso_ton ?? '',
        ];
    }
} else {
    $itensIniciais = [[
        '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

<script>
function solicitacaoForm() {
    return {
        hoje: @json(now()->format('Y-m-d')),
        horaMinima: @json(now()->format('H:i')),
        nextId: 1000,
        itens: @json($itensIniciais),
        destinos: @js($destinos->map(fn ($d) => ['id' => $d->id, 'label' => $d->sigla ?? $d->nome])->values()),
        destinosDisponiveis(item) {
            return this.destinos.filter(destino => String(destino.id) !== String(item.origem_id));
        },
        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