@extends('layouts.app')

@section('content')
<section class="read">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1>Capacidades</h1>
            </div>
            <div class="col-12 col-md-3 nav-container">
                <div class="seed-all card-action">
                    <span class="count" id="ability-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">Todas las capacidades</p>
                </div>
                <div class="create-ability 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 capacidad</p>
                </div>
                <!-- Add ability form -->
                <div class="add-form">
                    <div class="card-form">
                        <form id="add-ability">
                            <span class="close" onclick="close_add_ability()"></span>
                            <div class="message"></div>
                            <input type="text" name="type_name" id="ability-name" class="the-name" placeholder="Capacidad" required>
                            <div class="row justify-content-center mb-3">
                                <p class="description-text">Seleccione el tipo de cliente a asociar</p>
                                @foreach($customer_types as $type)
                                    <label class="col-12 col-md-3 customer-type">
                                        <input type="checkbox" name="customer_types[]" value="{{ $type->id }}">
                                        {{ $type->type_name }}
                                    </label>
                                @endforeach
                            </div>
                            <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>
                                        <th scope="col">ID</th>
                                        <th scope="col">Capacidad</th>
                                    </tr>
                            </thead>
                            <tbody id="ability-lists"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script src="{{ asset('js/abilities.js') }}" defer></script>
@endsection