@extends('layouts.app')

@section('content')
<section class="read">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1>Respuestas comunicación</h1>
            </div>
            <div class="col-12 col-md-3 nav-container">
                <div class="seed-all card-action">
                    <span class="count" id="peaks-count"></span>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"/></svg>
                    <p class="name-item">Todos los sms comunicaciones</p>
                </div>
                <div class="create card-action" onclick="open_form_ability()">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>
                    <p class="name-item">Crear sms</p>
                </div>
                <!-- Add communication form -->
                <div class="add-form communications">
                    <div class="card-form">
                        <form id="add-communication">
                            <span class="close" onclick="close_add_form()"></span>
                            <div class="message"></div>
                            <textarea id="communication" class="response-input" placeholder="Agrega la respuesta" required></textarea>
                            @if($segments)
                                <div class="form-group row mb-4">
                                    <p class="related-name">Asignar a segmentos</p>
                                    @foreach($segments as $segment)
                                        <label class="col-6 col-md-4 col-lg-3 mb-2">
                                            <input type="checkbox" name="segments[]" value="{{ $segment->id }}">
                                            {{ $segment->segment_name }}
                                        </label>
                                    @endforeach
                                </div>
                            @endif
                            @if($customer_types)
                                <div class="form-group row mb-4">
                                    <p class="related-name">Asignar a tipo de cliente</p>
                                    @foreach($customer_types as $customer_type)
                                        <label class="col-6 col-md-4 col-lg-3 mb-2">
                                            <input type="checkbox" name="customer_types[]" value="{{ $customer_type->id }}">
                                            {{ $customer_type->type_name }}
                                        </label>
                                    @endforeach
                                </div>
                            @endif
                            @if($abilities)
                                <div class="form-group row mb-4">
                                    <p class="related-name">Asignar a capacidades</p>
                                    @foreach($abilities as $ability)
                                        <label class="col-6 col-md-4 col-lg-3 mb-2">
                                            <input type="checkbox" name="abilities[]" value="{{ $ability->id }}">
                                            {{ $ability->ability_name }}
                                        </label>
                                    @endforeach
                                </div>
                            @endif
                            @if($moments)
                                <div class="form-group row mb-4">
                                    <p class="related-name">Asignar a Momentos de consumo</p>
                                    @foreach($moments as $moment)
                                        <label class="col-6 col-md-4 col-lg-3 mb-2">
                                            <input type="checkbox" name="moments[]" value="{{ $moment->id }}">
                                            {{ $moment->moment_name }}
                                        </label>
                                    @endforeach
                                </div>
                            @endif
                            @if($peaks)
                                <div class="form-group row mb-4">
                                    <p class="related-name">Asignar a picos de consumo</p>
                                    @foreach($peaks as $peak)
                                        <label class="col-6 col-md-4 col-lg-3 mb-2">
                                            <input type="checkbox" name="peaks[]" value="{{ $peak->id }}">
                                            {{ $peak->peak_name }}
                                        </label>
                                    @endforeach
                                </div>
                            @endif
                            <button type="submit">Agregar</button>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-9">
                <div class="actions">
                    <div id="ability-action">
                        <table>
                            <thead>
                                    <tr class="row">
                                        <th class="col-1">ID</th>
                                        <th class="col-8">Capacidad</th>
                                        <th class="col-3">Actions</th>
                                    </tr>
                            </thead>
                            <tbody id="lists"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script src="{{ asset('js/communication.js') }}" defer></script>
@endsection