@extends('layouts.app')
@section('content')
    @php
        $spanish_status = [
            'active' => 'Activo',
            'completed' => 'Completado',
            'canceled' => 'Cancelado',
        ];

        $spanish_timetypes = [
            'days' => 'Dias',
            'weeks' => 'Semanas',
            'months' => 'Meses',
        ];
    @endphp

    <style>
        .modal-blur {
            backdrop-filter: blur(5px);
            background-color: rgba(0, 0, 0, 0.3);
        }
    </style>

    <div class="container-fluid p-3">
        <div class="card mb-4 shadow-sm">
            <div class="card-header bg-secondary text-white">
                <h6 class="mb-0 fw-bold"><i class="bi bi-funnel me-2"></i>Filtros de Búsqueda</h6>
            </div>
            <div class="card-body">
                <form action="{{ route('crm.tracking.search') }}" method="GET">
                    <div class="row">
                        <!-- Campo Nombre -->
                        <div class="col-6 mb-2">
                            <label for="name" class="form-label">Nombre</label>
                            <div class="input-group input-group-sm">
                                <span class="input-group-text"><i class="bi bi-person"></i></span>
                                <input type="text" class="form-control" id="name" name="name"
                                    placeholder="Buscar por nombre" value="{{ request('name') }}">
                            </div>
                        </div>

                        <div class="col-auto mb-2">
                            <label for="name" class="form-label">Tipo</label>
                            <select class="form-select form-select-sm" id="service-type" name="service_type_id">
                                <option value="" {{ request('service_type_id') == '' ? 'selected' : '' }}>Sin opción
                                </option>
                                <option value="1" {{ request('service_type_id') == '1' ? 'selected' : '' }}>Doméstico
                                </option>
                                <option value="2" {{ request('service_type_id') == '2' ? 'selected' : '' }}>Comercial
                                </option>
                                <option value="3" {{ request('service_type_id') == '3' ? 'selected' : '' }}>
                                    Industrial/Planta</option>
                            </select>
                        </div>

                        <div class="col-auto mb-2">
                            <label for="name" class="form-label">Rango de fechas</label>
                            <input type="text" class="form-control form-control-sm" id="date-range" name="date"
                                value="{{ request('date') }}" />
                        </div>

                        <input type="hidden" name="view" value="trackings" />
                    </div>

                    <!-- Botones -->
                    <button type="submit" class="btn btn-primary btn-sm">
                        <i class="bi bi-search me-1"></i> Buscar
                    </button>
                </form>
            </div>
        </div>

        <div class="mb-2">
            <a href="{{ route('crm.tracking.create', ['customerId' => 0, 'serviceId' => 0]) }}" class="btn btn-primary btn-sm">Nuevo seguimiento</a>
        </div>

        <div class="table-responsive">
            <table class="table table-sm table-bordered">
                <thead>
                    <tr>
                        <th>Cliente</th>
                        <th>Orden</th>
                        <th>Servicio</th>
                        <th>Título</th>
                        <th>Descripción</th>
                        <th>Próxima Fecha</th>
                        <th>Rango</th>
                        <th>Estado</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($trackings as $tracking)
                        @php
                            $range = json_decode($tracking->range);
                        @endphp
                        <tr>
                            <td>{{ $tracking->customer->name ?? '-' }}</td>
                            <td>{{ $tracking->order->folio ?? '-' }}</td>
                            <td>{{ $tracking->service->name ?? '-' }}</td>
                            <td>{{ $tracking->title }}</td>
                            <td>{{ Str::limit($tracking->description, 100) }}</td>
                            <td>{{ $tracking->next_date }}</td>
                            <td>
    @if($range && $range->frequency && $range->frequency_type && isset($spanish_timetypes[$range->frequency_type]))
        Cada {{ $range->frequency }} {{ $spanish_timetypes[$range->frequency_type] }}
    @else
        -
    @endif
</td>
                            <td
                                class="fw-bold
                                    {{ $tracking->status == 'active'
                                        ? 'text-success'
                                        : ($tracking->status == 'completed'
                                            ? 'text-primary'
                                            : ($tracking->status == 'canceled'
                                                ? 'text-danger'
                                                : 'text-secondary')) }}">
                                {{ $spanish_status[$tracking->status] }}
                            </td>
                            <td>
                                <div class="btn-group" role="group" aria-label="Basic example">
                                    <a href="{{ route('crm.tracking.edit', ['id' => $tracking->id]) }}"
                                        class="btn btn-sm btn-secondary">
                                        Editar
                                    </a>
                                    @if ($tracking->status != 'canceled')
                                        <a href="{{ route('crm.tracking.auto', ['id' => $tracking->id]) }}"
                                            class="btn btn-warning btn-sm"
                                            onclick="return confirm('La reprogramación se realiza entorno a la frecuencia configurada, ¿Estas seguro de continuar?')">
                                            Reprogramar</a>
                                        <button class="btn btn-sm btn-primary"
                                            onclick="completedModal({{ $tracking->id }})">
                                            Completar
                                        </button>
                                        <button class="btn btn-sm btn-danger" onclick="cancelModal({{ $tracking->id }})">
                                            Cancelar
                                        </button>
                                    @endif
                                    <a href="{{ route('crm.tracking.destroy', ['id' => $tracking->id]) }}" class="btn btn-outline-danger btn-sm" onclick="return confirm('¿Estas seguro de eliminarlo?')"><i class="bi bi-trash-fill"></i></a>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        @include('dashboard.crm.tracking.modals.complete')
        @include('dashboard.crm.tracking.modals.cancel')
    </div>

    <script>
        $(function() {
            $('#date-range').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,
            });
        });

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