@extends('layouts.app')
@section('content')
    <div class="container-fluid">
        <div class="row border-bottom p-3 mb-2">
            <a href="{{ route('quality.customer', ['id' => $customer->id]) }}" class="col-auto btn-primary p-0">
                <i class="bi bi-arrow-left m-3 fs-4"></i>
            </a>
            <h1 class="col-auto fs-2 fw-bold m-0 fw-bold">{{ $customer->name }}</h1>
        </div>

        <!-- Barra de búsqueda y filtros -->
        <div class="card mb-4 shadow-sm">
            <div class="card-header bg-dark text-white">
                <h5 class="mb-0">Filtrar Órdenes</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('quality.orders.search', ['id' => $customer->id]) }}" method="GET">
                    <div class="row g-3 align-items-end">

                        <!-- Filtro por fecha -->
                        <div class="col-md-3">
                            <label for="date_range" class="form-label">Rango de fechas</label>
                            <input type="text" class="form-control date-range-picker" id="date_range" name="date"
                                value="{{ request('date') }}" placeholder="Selecciona un rango">
                        </div>

                        <!-- Filtro por servicio -->
                        <div class="col-md-2">
                            <label for="service" class="form-label">Servicio</label>
                            <input type="text" class="form-control" id="service" name="service"
                                value="{{ request('service') }}" placeholder="Filtrar por servicio">
                        </div>

                        <!-- Filtro por estado -->
                        <div class="col-md-2">
                            <label for="status" class="form-label">Estado</label>
                            <select class="form-select" id="status" name="status">
                                <option value="">Todos</option>
                                @foreach ($order_status as $status)
                                    <option value="{{ $status->id }}" 
                                        {{ request('status') == $status->id ? 'selected' : '' }}>
                                        {{ $status->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Botones de acción -->
                        <div class="col-md-2 d-flex justify-content-end gap-2 mt-3 h-100">
                            <button type="submit" class="btn btn-primary btn-sm">
                                <i class="bi bi-funnel-fill"></i> Filtrar
                            </button>
                            <a href="{{ route('quality.orders', ['id' => $customer->id]) }}" class="btn btn-secondary btn-sm">
                                <i class="bi bi-arrow-counterclockwise"></i> Limpiar
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div class="container-fluid">
            @include('messages.alert')
            <div class="table-responsive">
                @include('dashboard.quality.order.table')
            </div>
            {{ $orders->links('pagination::bootstrap-5') }}
        </div>
    </div>

    <!-- Incluir DateRangePicker -->
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script>
        $(document).ready(function() {
            $('input[name="date"]').daterangepicker({
                locale: {
                    format: 'DD/MM/YYYY',
                    applyLabel: 'Aplicar',
                    cancelLabel: 'Cancelar',
                    fromLabel: 'Desde',
                    toLabel: 'Hasta',
                    customRangeLabel: 'Personalizado',
                },
                opens: 'left',
                autoUpdateInput: false
            });

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