@extends('layouts.app')

@section('content')
<section class="read-customer">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1>Tipo de presentación</h1>
            </div>
            <div class="col-12 col-md-3 customer-type-nav">
                <div class="seed-all-presentation card-action" onclick="get_preentations()">
                    <span class="count" id="presentation-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 presentaciones</p>
                </div>
                <div class="create-presentation card-action" onclick="open_form_segment()">
                    <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 presentación</p>
                </div>
                <!-- Add presentation form -->
                <div class="add-presentation-form">
                    <div class="card-form">
                        <form id="add-presentation">
                            <span class="close" onclick="close_add_presentation()"></span>
                            <div class="message"></div>
                            <input type="text" name="type_name" id="type-name" placeholder="Nombre de la presentación" required>
                            <div class="row justify-content-center mb-3">
                                <p class="description-text">Seleccione los segmentos a asociar</p>
                                @foreach($segments as $segment)
                                    <label class="col-12 col-md-4 segment-item">
                                        <input type="checkbox" name="segments[]" alt="{{$segment->id}}" id="segment-{{$segment->id}}" value="{{$segment->id}}">
                                        {{$segment->segment_name}}
                                    </label>
                                @endforeach
                            </div>
                            <button type="submit">Agregar</button>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-9">
                <div id="presentations-action">
                    <table>
                        <thead>
                                <tr>
                                    <th scope="col">ID</th>
                                    <th scope="col">Presentación</th>
                                </tr>
                        </thead>
                        <tbody id="presentation-lists"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>
<script src="{{ asset('js/presentations.js') }}" defer></script>
@endsection