@extends('layouts.app')
@section('content')
    <div class="container-fluid">
        <div class="row border-bottom p-3 mb-4">
            <a href="{{ route('quality.customers') }}" 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">{{ $customer->name }}</h1>
        </div>

        <ul class="list-group list-group-horizontal d-flex justify-content-center mb-3">
            <li class="list-group-item d-flex justify-content-between align-items-center shadow">
                <a href="{{ route('quality.orders', ['id' => $customer->id]) }}">
                    Ordenes de servicio
                </a>
                <span class="badge text-bg-warning rounded-pill ms-2">{{ $customer->countOrdersbyStatus(1) }}</span>
                <span class="badge text-bg-primary rounded-pill ms-2">{{ $customer->countOrdersbyStatus(3) }}</span>
                <span class="badge text-bg-success rounded-pill ms-2">{{ $customer->countOrdersbyStatus(5) }}</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center shadow">
                <a href="{{ route('quality.analytics', ['id' => $customer->id]) }}">
                    Analíticas
                </a>
                <span class="badge text-bg-success rounded-pill ms-2">{{ $customer->orders()->where('status_id', 5)->count() }}</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center  shadow">
                <a href="{{ route('quality.contracts', ['id' => $customer->id]) }}"> Contracto </a>
                <span class="badge text-bg-secondary rounded-pill ms-2">{{ $customer->contracts->count() }}</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center  shadow">
                <a href="{{ route('customer.edit', ['id' => $customer->id, 'type' => 2, 'section' => 8]) }}"> Planos
                </a>
                <span class="badge text-bg-secondary rounded-pill ms-2">{{ $customer->floorplans->count() }}</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center  shadow">
                <a href="{{ route('quality.zones', ['id' => $customer->id]) }}"> Zonas </a>
                <span class="badge text-bg-secondary rounded-pill ms-2">{{ $customer->applicationAreas->count() }}</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center  shadow">
                <a href="{{ route('quality.devices', ['id' => $customer->id]) }}"> Dispositivos </a>
                <span class="badge text-bg-secondary rounded-pill ms-2">{{ $count_devices }}</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center shadow">
                <a href="{{ route('customer.edit', ['id' => $customer->id, 'type' => 1, 'section' => 6]) }}">Archivos</a>
                <span
                    class="badge text-bg-secondary rounded-pill ms-2">{{ $customer->files->where('path', '!=', null)->count() }}</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center shadow">
                <a href="{{ route('quality.opportunity-area', ['id' => $customer->id]) }}">Areas de oportunidad</a>
                <span class="badge text-bg-secondary rounded-pill ms-2">{{ $opportunity_areas->count() }}</span>
            </li>
        </ul>

        <div class="p-3">
            <div class="mb-3">
                <button class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#technicalModal">
                    <i class="bi bi-person-fill-gear"></i> Reasignación de técnicos
                </button>
            </div>

            <div class="table-responsive">
                <table class="table table-bordered table-striped text-center caption-top">
                    <caption class="border bg-secondary-subtle p-2 fw-bold text-dark">
                        Pendientes
                    </caption>
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col"> Actividad </th>
                            <th scope="col"> Fecha </th>
                            <th scope="col"> Acciones </th>
                        </tr>
                    </thead>
                    <tbody>

                        @forelse ($pendings as $index => $pending)
                            <tr>
                                <th scope="row">{{ ++$index }}</th>
                                <td>{{ $pending['content'] }}</td>
                                <td>{{ $pending['date'] }}</td>
                                <td>
                                    @can('write_customer')
                                        <a href="{{ $pending['type'] == 'contract' ? route('contract.edit', ['id' => $pending['id']]) : ($pending['type'] == 'order' ? route('order.edit', ['id' => $pending['id']]) : route('customer.edit', ['id' => $pending['id'], 'type' => 1, 'section' => 6])) }}"
                                            class="btn btn-secondary btn-sm">
                                            <i class="bi bi-pencil-square"></i> {{ __('buttons.edit') }}
                                        </a>
                                    @endcan
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td class="text-danger fw-bold" colspan="4">No hay pendientes por el momento.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>


        <!-- Modal -->
        <div class="modal fade" id="technicalModal" tabindex="-1" aria-labelledby="technicalModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-scrollable">
                <form class="modal-content" method="POST"
                    action="{{ route('quality.update.technician', ['id' => $customer->id]) }}">
                    @csrf
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="technicalModalLabel">Reasignación de técnicos</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="date" class="form-label is-required">Rango de fechas</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="date-range" name="date_range" value=""
                                    required />
                                <button class="btn btn-success" type="button" onclick="searchOrders()"> <i
                                        class="bi bi-search"></i> </button>
                            </div>
                        </div>

                        <div class="mb-3">
                            <ul class="list-group" id="technicians-list">
                                <li class="list-group-item text-danger">Sin coincidencias</li>
                            </ul>
                        </div>

                        <input type="hidden" id="technicians" name="technicians" />
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary"
                            onclick="submitForm()">{{ __('buttons.accept') }}</button>
                        <button type="button" class="btn btn-danger"
                            data-bs-dismiss="modal">{{ __('buttons.cancel') }}</button>
                    </div>
                </form>
            </div>
        </div>


        <script>
            var technician_to_change = [];

            $(document).ready(function() {
                $(".card").hover(function() {
                    $(this).addClass("animate__animated animate__pulse");
                }, function() {
                    $(this).removeClass("animate__animated animate__pulse");
                });
            });

            function submitForm() {
                $('#technicians').val(
                    JSON.stringify(technician_to_change)
                );
            }

            function searchOrders() {
                const date_range = $('#date-range').val();
                var formData = new FormData();
                var csrfToken = $('meta[name="csrf-token"]').attr("content");
                var html = '';
                formData.append('date_range', date_range);

                $.ajax({
                    url: "{{ route('quality.ajax.search.technicians', ['id' => $customer->id]) }}",
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    headers: {
                        "X-CSRF-TOKEN": csrfToken,
                    },
                    success: function(response) {
                        console.log(response);
                        const technicians = response.data.technicians;
                        const all_technicians = response.data.all_technicians;

                        if (all_technicians.length == 0) {
                            html = `<li class="list-group-item text-danger">Sin coincidencias</li>`;
                            return;
                        } else {
                            technician_to_change = technicians.map(technician => technician.id);
                            all_technicians.forEach(technician => {
                                html += `
                                    <li class="list-group-item">
                                        <input class="form-check-input border-secondary me-1" type="checkbox" value="${technician.id}" ${technician_to_change.includes(technician.id) ? 'checked' : ''}  onchange="setTechnician(this)">
                                        <label class="form-check-label">${technician.name}</label>
                                    </li>
                                `;
                            });
                        }
                        $('#technicians-list').html(html);
                    },
                    error: function(error) {},
                });
            }

            function setTechnician(element) {
                value = parseInt(element.value);
                isChecked = element.checked;
                if (isChecked) {
                    technician_to_change.includes(value) || technician_to_change.push(value);
                } else {
                    technician_to_change = technician_to_change.filter(id => id != value);
                }
            }

            $(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