@php
    foreach ($services as $service) {
        $selected_services[] = [
            'id' => $service->id,
            'name' => $service->name,
            'type' => [$service->serviceType->name],
            'line' => [$service->businessLine->name],
        ];
    }
@endphp
<form id="contract-form" class="form" method="POST" action="{{ route('contract.store') }}" enctype="multipart/form-data">
    @csrf

    <input type="hidden" name="url_customer" id="url-customer" value="{{ route('order.search.customer') }}" />
    <input type="hidden" name="url_service_filter" id="url-service-filter"
        value="{{ route('order.search.service', ['type' => 0]) }}" />
    <input type="hidden" name="url_service_input" id="url-service-input"
        value="{{ route('order.search.service', ['type' => 1]) }}" />
    <input type="hidden" name="url_selected_service" id="url-selected-service"
        value="{{ route('ajax.contract.service') }}" />

    <div id="service-contract-form" class="row">
        <div class="alert alert-success" role="alert">
            <div class="d-flex justify-content-between">
                <h4 class="alert-heading">Cliente seleccionado</h4>
            </div>
            <ul>
                <li class="text-break fw-bold">Cliente: <span class="fw-normal">{{ $contract->customer->name }}</span>
                </li>
                <li class="text-break fw-bold">Teléfono: <span
                        class="fw-normal">{{ $contract->customer->phone }}</span></li>
                <li class="text-break fw-bold">Dirección: <span
                        class="fw-normal">{{ $contract->customer->address }}</span></li>
            </ul>
        </div>

        <div class="row" id="duration">
            <h5 class="border-bottom pb-1 fw-bold">
                {{ __('contract.title.duration') }}
            </h5>
            <div class="form-text text-danger m-0 mb-1" id="basic-addon4">
                * En caso de haber seleccionado un contrato, se toman como intervalo de fechas para las ordenes.
            </div>
            <div class="col-3 mb-3">
                <label for="client" class="form-label is-required">
                    {{ __('contract.data.start_date') }}
                </label>
                <input type="date" class="form-control" name="startdate"
                    id="startdate" value="{{ Carbon\Carbon::parse($contract->enddate)->addDay()->format('Y-m-d') }}" oninput="set_endDate()" required />
            </div>

            <div class="col-3 mb-3">
                <label for="client" class="form-label">
                    {{ __('contract.data.end_date') }}
                </label>
                <input type="date" class="form-control" name="enddate"
                    id="enddate" value="{{ Carbon\Carbon::parse($contract->enddate)->addYear()->format('Y-m-d') }}" />
            </div>
        </div>

        <div class="row mb-3">
            <h5 class="border-bottom pb-1 mb-1 fw-bold">
                {{ __('contract.title.set_services') }}
            </h5>
            <div class="form-text text-danger m-0" id="basic-addon4">
                * Selecciona al menos 1 servicio.
            </div>
            <div class="form-text text-danger m-0" id="basic-addon4">
                * En caso de que no aparezca deberas crearlo.
            </div>
            <div class="form-text text-danger m-0" id="basic-addon4">
                * Para añadir días, solo se permite la primera letra en
                mayúscula: (L) Lunes, (M) Martes, (Mi) Miércoles, (J) Jueves,
                (V) Viernes, (S) Sábado, (D) Domingo.
            </div>
            <div class="col-12 p-0 m-0 mb-1">
                <a href="{{ route('service.create') }}" id="form_service_button" class="btn btn-link"
                    target="_blank">
                    {{ __('service.button.create') }}
                </a>
            </div>

            <div class="col-12">
                <h6 class="pb-1 mb-1 fw-bold">
                    {{ __('contract.title.find_service') }}
                </h6>
                <div class="input-group mb-3">
                    <input type="search" class="form-control"
                        id="search-service-input" name="search_service_input" placeholder="Nombre del servicio" />
                    <button class="btn btn-primary btn-sm" type="button" id="btn-search-service"
                        onclick="searchService()">
                        <i class="bi bi-search"></i> {{ __('buttons.search') }}
                    </button>
                </div>
            </div>

            <div class="col-12">
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th class="text-center" scope="col">#</th>
                            <th class="text-center" scope="col">
                                Nombre
                            </th>
                            <th class="text-center col-2" scope="col">
                                Fechas generadas
                            </th>
                            <th class="text-center" scope="col">
                                {{ __('buttons.actions') }}
                            </th>
                        </tr>
                    </thead>
                    <tbody id="selected-services"></tbody>
                </table>
            </div>
        </div>

        <div class="row">
            <h5 class="border-bottom pb-1 fw-bold">
                {{ __('contract.title.set_technicians') }}
            </h5>
            <div class="form-text text-danger mb-2" id="basic-addon4">
                * Selecciona al menos 1 técnico.
            </div>
            <div class="col-12 mb-3">
                <ul class="list-group">
                    <li class="list-group-item bg-dark text-white">
                        Selecciona los técnicos disponibles que realizarán el
                        servicio:
                    </li>
                    @if ($technicians->isEmpty())
                        <li class="list-group-item"></li>
                    @endif
                    <li class="list-group-item">
                        <div class="form-check">
                            <input class="technician form-check-input me-1" type="checkbox" value="0"
                                id="technician-0" onchange="set_technicians()" />
                            <label class="form-check-label fw-bold" for="firstCheckbox">
                                Todos los técnicos
                            </label>
                        </div>
                    </li>

                    @foreach ($technicians as $technician)
                        <li class="list-group-item">
                            <div class="form-check">
                                <input class="technician form-check-input me-1" type="checkbox"
                                    value="{{ $technician->id }}" id="technician-{{ $technician->id }}"
                                    onchange="setTechnician()"
                                    {{ $contract->hasTechnician($technician->id) ? 'checked' : '' }} />
                                <label class="form-check-label" for="technician-{{ $technician->id }}">
                                    {{ $technician->user->name }}
                                </label>
                            </div>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
    <button type="button" class="btn btn-primary my-3" onclick="submitContract()">
        {{ __('buttons.renew') }}
    </button>
    <input type="hidden" id="customer-id" name="customer_id" value="{{ $contract->customer_id }}" />
    <input type="hidden" id="contract-data" name="contract_data" value="[]" />
    <input type="hidden" name="technicians" id="technicians"
        value="{{ json_encode($contract->technicians->pluck('id')->toArray()) }}" />
</form>

<script>
    var execution_frecuencies = @json($exec_frecuencies);
    var contracts = @json($contracts);
    var contract_services = @json($contract->services);
    var orders = @json($orders);
    var intervals = @json($intervals);
    var services = @json($services);

    const stored_services = @json($selected_services);
    const new_client_account = false;

    $(document).ready(function() {
        console.log(orders)
        showStoreService();
    });

    function showStoreService() {
        stored_services.forEach(service => {
            selected_services.push({
                id: service.id,
                prefix: service.prefix,
                name: service.name,
                type: service.type,
                line: service.line,
                cost: service.cost,
            });
        });

        createServicesList()
    }
</script>