@extends('layouts.admin')

@section('title', 'Entregas')

@section('content')
<div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-3">
    <div>
        <h1 class="h3 mb-1">Órdenes de entrega</h1>
        <p class="text-secondary mb-0">Programación y seguimiento de entregas</p>
    </div>
    <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#modalScheduleDelivery">
        <i class="bi bi-plus-lg"></i> Programar entrega
    </button>
</div>

<form method="GET" action="{{ route('deliveries.index') }}" class="d-flex flex-wrap align-items-center gap-2 mb-3">
    <input class="form-control form-control-sm" type="search" name="q" value="{{ $q ?? '' }}"
        placeholder="Cliente, Nº entrega o pedido…" style="max-width:240px" autocomplete="off">
    <input class="form-control form-control-sm" type="date" name="date" value="{{ $date ?? '' }}" style="max-width:150px" title="Fecha programada">
    <button class="btn btn-sm btn-outline-secondary" type="submit"><i class="bi bi-search"></i></button>
    @if(($q ?? '') !== '' || ($date ?? '') !== '')
        <a class="btn btn-sm btn-link text-secondary px-1" href="{{ route('deliveries.index') }}">Limpiar</a>
    @endif
</form>

<div class="card">
    <div class="table-responsive">
        <table class="table align-middle mb-0">
            <thead>
                <tr>
                    <th>Número</th>
                    <th>Pedido</th>
                    <th>Cliente</th>
                    <th>Programada</th>
                    <th>Repartidor</th>
                    <th>Estado</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @forelse($deliveries as $d)
                    <tr>
                        <td>{{ $d->number }}</td>
                        <td>{{ $d->order->number }}</td>
                        <td>{{ $d->client->business_name }}</td>
                        <td>{{ $d->scheduled_at->format('d/m/Y H:i') }}</td>
                        <td>{{ $d->driverLabel() }}</td>
                        <td><span class="badge text-bg-secondary">{{ $d->statusLabel() }}</span></td>
                        <td class="text-nowrap text-end">
                            <a class="btn btn-sm btn-outline-primary" href="{{ route('deliveries.show', $d) }}">Ver</a>
                            @if($d->status->value !== 'DELIVERED')
                                <a class="btn btn-sm btn-outline-secondary" href="{{ route('deliveries.edit', $d) }}">Editar</a>
                            @endif
                            @if(in_array($d->status->value, ['SCHEDULED', 'ASSIGNED', 'IN_TRANSIT']))
                                <a class="btn btn-sm btn-success" href="{{ route('deliveries.complete.form', $d) }}">Completar</a>
                                <form class="d-inline" method="POST" action="{{ route('deliveries.fail', $d) }}">
                                    @csrf
                                    <input type="hidden" name="notes" value="Entrega no completada">
                                    <button class="btn btn-sm btn-outline-warning" type="submit" onclick="return confirm('¿Marcar entrega fallida?')">Fallida</button>
                                </form>
                                <form class="d-inline" method="POST" action="{{ route('deliveries.destroy', $d) }}">
                                    @csrf @method('DELETE')
                                    <button class="btn btn-sm btn-outline-danger" type="submit" onclick="return confirm('¿Eliminar entrega?')">Eliminar</button>
                                </form>
                            @endif
                            @if($d->status->value === 'DELIVERED' || $d->order?->status?->value === 'DELIVERED')
                                @if($d->evidence_path)
                                    <a class="btn btn-sm btn-outline-primary" href="{{ route('deliveries.evidence', $d) }}" target="_blank">Evidencia</a>
                                @endif
                                @if(auth()->user()->hasPermission('billing.emit')
                                    && \App\Services\ElectronicBilling\BillingSettings::enabled())
                                    @if($d->order?->electronicInvoice)
                                        <a class="btn btn-sm btn-outline-secondary" href="{{ route('billing.show', $d->order->electronicInvoice) }}">Ver factura</a>
                                    @elseif($d->order?->canEmitInvoice())
                                        <a class="btn btn-sm btn-outline-primary" href="{{ route('billing.orders.emit.preview', $d->order) }}">Facturar</a>
                                    @elseif($reason = $d->order?->invoiceBlockReason())
                                        <span class="small text-secondary d-inline-block" title="{{ $reason }}">{{ \Illuminate\Support\Str::limit($reason, 42) }}</span>
                                    @endif
                                @endif
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="text-center py-5 text-secondary">
                            @if(($q ?? '') !== '' || ($date ?? '') !== '')
                                No hay entregas con ese criterio.
                            @else
                                No hay entregas programadas.
                            @endif
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($deliveries->hasPages())
        <div class="card-footer">{{ $deliveries->links() }}</div>
    @endif
</div>

<div class="modal fade" id="modalScheduleDelivery" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <form class="modal-content" method="POST" action="{{ route('deliveries.store') }}">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Programar entrega</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Pedido confirmado</label>
                        <div
                            class="searchable"
                            id="deliveryOrderSearch"
                            data-name="order_id"
                            data-required="1"
                            data-placeholder="Escriba para buscar pedido…"
                            data-options="{{ json_encode($orderOptions) }}"
                        ></div>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Fecha programada</label>
                        <input class="form-control" type="datetime-local" name="scheduled_at" required>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Repartidor</label>
                        <div
                            class="searchable"
                            data-name="delivery_user_id"
                            data-placeholder="Buscar repartidor…"
                            data-options="{{ json_encode($driverOptions) }}"
                        ></div>
                    </div>
                    <div class="col-md-8">
                        <label class="form-label">Dirección</label>
                        <textarea class="form-control" name="delivery_address" id="delivery_address" required></textarea>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Latitud</label>
                        <input class="form-control" name="latitude" id="delivery_lat">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Longitud</label>
                        <input class="form-control" name="longitude" id="delivery_lng">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Vehículo</label>
                        <input class="form-control" name="vehicle">
                    </div>
                    <div class="col-12">
                        <label class="form-label">Observaciones</label>
                        <textarea class="form-control" name="notes"></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" type="submit">Programar</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.getElementById('deliveryOrderSearch')?.addEventListener('searchable:change', (e) => {
    const opt = e.detail.option;
    if (!opt) return;
    document.getElementById('delivery_address').value = opt.address || '';
    document.getElementById('delivery_lat').value = opt.latitude ?? '';
    document.getElementById('delivery_lng').value = opt.longitude ?? '';
});
</script>
@endpush