@php
    $offset = ($orders->currentPage() - 1) * $orders->perPage();
@endphp

<table class="table table-bordered table-striped text-center">
    <thead>
        <form method="GET"
            action="{{ route('contract.search.orders', ['id' => $contract->id, 'customerId' => $contract->customer->id]) }}">
            @csrf
            <tr>
                <th scope="col">#</th>
                <th scope="col">Folio</th>
                <th scope="col">
                    {{ __('order.data.customer') }}
                    @if (!isset($customer))
                        <div class="input-group input-group-sm">
                            <input type="text" class="form-control" id="search-customer"
                                placeholder="Filtrar por cliente" name="customer"">
                            <button class="btn btn-primary" type="submit">
                                <i class="bi bi-search"></i></button>
                        </div>
                    @endif
                </th>
                <th scope="col">{{ __('order.data.start_time') }}
                    <div class="input-group input-group-sm">
                        <input type="time" class="form-control" id="search-time" name="time"
                            placeholder="Filtrar por hora programada">
                        <button class="btn btn-primary" type="submit">
                            <i class="bi bi-search"></i></button>
                    </div>
                </th>
                <th scope="col">{{ __('order.data.programmed_date') }}
                    <div class="input-group input-group-sm">
                        <input type="text" class="form-control" id="search-date" name="date" value="" />
                        <button class="btn btn-primary" type="submit"><i class="bi bi-search"></i></button>
                    </div>
                </th>
                <th scope="col">Tipo</th>
                <th scope="col">{{ __('order.data.service') }}
                    <div class="input-group input-group-sm">
                        <input type="text" class="form-control" id="search-service" name="service"
                            placeholder="Filtrar por servicio">
                        <button class="btn btn-primary" type="submit">
                            <i class="bi bi-search"></i></button>
                    </div>
                </th>
                <th scope="col">Tecnicos</th>
                <th scope="col" style="width: 10%">{{ __('order.data.status') }}
                    <div class="input-group input-group-sm">
                        <select class="form-select form-select-sm" id="search-status" name="status">
                            @foreach ($order_status as $status)
                                <option value="{{ $status->id }}">{{ $status->name }}</option>
                            @endforeach
                        </select>
                        <button class="btn btn-primary" type="submit">
                            <i class="bi bi-search"></i></button>
                    </div>
                </th>
                <th>Firmado por</th>
                <th>Frima</th>
                <th scope="col">{{ __('buttons.actions') }}</th>
            </tr>
        </form>
    </thead>
    <tbody>
        @foreach ($orders as $index => $order)
            @php
                // Asegurarte que la cadena tiene el prefijo correcto
                $signature =
                    strpos($order->customer_signature, 'data:image') === 0
                        ? $order->customer_signature
                        : 'data:image/png;base64,' . $order->customer_signature;
                        
    $statusColors = [
        1 => 'text-warning',      // Amarillo (ej: Pendiente)
        2 => 'text-primary',      // Azul (ej: En Proceso)
        3 => 'text-primary',      // Azul (ej: En Revisión)
        4 => 'text-info',         // Celeste (ej: En Camino)
        5 => 'text-success',       // Verde (ej: Completado)
        'default' => 'text-danger' // Rojo (ej: Cancelado/Error)
    ];
            @endphp

            <tr id="order-{{ $order->id }}">
                <th scope="row">{{ $offset + $index + 1 }}</th>
                <th scope="row" class="text-decoration-underline">{{ $order->folio }}</th>
                <td>{{ $order->customer->name }}</td>
                <td>{{ $order->start_time }}</td>
                <td>{{ $order->programmed_date }}</td>
                <td>{{ $order->contract_id > 0 ? 'MIP' : 'Seguimiento' }}</td>
                <td>
                    @foreach ($order->services as $service)
                        {{ $service->name }} <br>
                    @endforeach
                </td>

<td class="fw-bold {{ $statusColors[$order->status_id] ?? $statusColors['default'] }}">
    {{ $order->status->name ?? '' }}
</td>
                <td>
                    @foreach ($order->getNameTechnicians() as $technician)
                        {{ $technician->name }} <br>
                    @endforeach
                </td>
                <td>{{ $order->signature_name ?? 'Sin firma' }}</td>
                <td> <img class="border" style="width: 75px;" src="{{ $signature }}" alt="img_firma"> </td>
                <td>
                    <div class="btn-group btn-group-sm">
                        <a class="btn
                        btn-info"
                            href="{{ route('order.show', ['id' => $order->id, 'section' => 1]) }}">
                            <i class="bi bi-eye-fill"></i> {{ __('buttons.show') }}
                        </a>
                        @can('write_order')
                            <button class="btn btn-warning " data-order="{{ $order }}"
                                onclick="openModal(this)">
                                <i class="bi bi-pencil-square"></i> {{ __('buttons.signature') }}
                            </button>
                            <a class="btn btn-secondary " href="{{ route('order.edit', ['id' => $order->id]) }}">
                                <i class="bi bi-pencil-square"></i> {{ __('buttons.edit') }}
                            </a>
                            <a class="btn btn-dark " href="{{ route('report.review', ['id' => $order->id]) }}">
                                <i class="bi bi-file-pdf-fill"></i> {{ __('buttons.report') }}
                            </a>
                            
                            @if ($order->status && $order->status->id != 6)
                                <a href="{{ route('order.destroy', ['id' => $order->id]) }}" class="btn btn-danger "
                                    onclick="return confirm('{{ __('messages.are_you_sure') }}')">
                                    <i class="bi bi-x-lg"></i> {{ __('buttons.cancel') }}
                                </a>
                            @endif
                        @endcan
                    </div>
                </td>
            </tr>
        @endforeach
    </tbody>
</table>

@include('order.modals.signature')


<script>
    $(function() {
        $('#search-date').daterangepicker({
            opens: 'left',
            locale: {
                format: 'DD/MM/YYYY' // Cambiar el formato aquí
            },
            ranges: {
                'Hoy': [moment(), moment()],
                'Esta semana': [moment().startOf('week'), moment().endOf('week')],
                'Últimos 7 días': [moment().subtract(6, 'days'), moment()],
                'Este mes': [moment().startOf('month'), moment().endOf('month')],
                'Últimos 30 días': [moment().subtract(29, 'days'), moment()],
                'Este año': [moment().startOf('year'), moment().endOf('year')],
            },
            alwaysShowCalendars: true,
            autoUpdateInput: false,
        });
    });

    $('#search-date').on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format('DD/MM/YYYY'));
    });
</script>