@section('extra-css')
<link rel="stylesheet" href="{{ asset('js/dist/css/adminlte-zones.min.css') }}">
<style>
    .card-header {
        padding: .75rem 1.25rem !important;
        margin-bottom: 0 !important;
        background-color: rgba(0,0,0,.03) !important;
        border-bottom: 1px solid rgba(0,0,0,.125) !important;
    }
    .padding-20{
        padding: 20px;
    }

    .container-seats{
        text-align: center;
        width: 100% !important;
    }

    .m-r-10{
        margin-right: 10px !important;
        margin-top: 10px !important;
        border: solid 1px #d3d3d3;
        padding: 5px;
        min-width:100px;
        display: inline-block;
    }

    .btn{
        border-radius: 3px !important;
    }

    .container-buttons{
        margin-left: 20px !important;
        margin-top: 5px !important;
    }

    .seat-inactive{
        background-color: gainsboro;
    }

    .label_letter {
        position: absolute;
        left: 10px;
    }

    .container_row {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .d-i-t {
        margin-right: 2px !important;
        margin-top: 10px !important;
        border: solid 1px #d3d3d3;
        padding: 5px;
        min-width:35px;
        display: inline-grid;
    }

    .text-center{
        text-align: center;
    }
    .auxiliar-button-seat{
        margin-right: 5px;
    }
    .margin-t-10{
        margin-top: 10px;
    }
    .label_export{
        margin: 10px;
        font-size: 11px;
    }
</style>
@endsection

@extends('modules.head')
@section('contenido')
<div class="box-header">
    <a class="auxiliar-black">
        <button class="btn btnAdd pull-right" data-toggle="modal" data-target="#modal_add_stadium" onclick="setFields()">
            <i style="margin-right:5px;" class="fa fa-plus"></i>Agregar tribuna
        </button>
    </a>
    <a class="auxiliar-black-seat">
        <button class="btn btnAdd pull-right auxiliar-button-seat" data-toggle="modal" data-target="#modal_import">
            <i style="margin-right:5px;" class="fa fa-cloud-upload"></i>Cargar sillas
        </button>
    </a>
</div>

<!-- List teams-->
<div class="box">
    @forelse ($zones as $zone)
        <div class="box-header with-border">
            <h3 class="box-title">{{ $zone->name }}</h3>
            <button type="button" class="btn btn-default" onclick="modalZone('{{base64_encode($zone)}}','add')"><i class="fa fa-plus"></i></button>
            <button type="button" class="btn btn-default" onclick="modalZone('{{base64_encode($zone)}}','edit')"><i class="fa fa-edit"></i></button>
            <button type="button" class="btn btn-default" onclick="clickDelete({{$zone->id}})"><i class="fa fa-trash"></i></button>
        </div>
        @foreach ($zone->childs as $child)
            <div class="accordion" id="accordion_zone_{{$child->id}}">
                <div class="card">
                    <div class="card-header" id="heading_{{$child->id}}">
                        <h2 class="mb-0 bacgroung-gray">
                        <button class="btn btn-link btn-block text-left"
                                type="button"
                                data-toggle="collapse"
                                data-target="#collapse_{{ $child->id }}"
                                aria-expanded="true"
                                aria-controls="collapse_{{ $child->id }}"
                                onclick="getZonesChlids({{ $child->id }}, {{ $child->is_saleable }})"
                                id="button_{{ $child->id }}">
                            {{ $child->name }}
                        </button>
                        </h2>
                    </div>

                    <div id="collapse_{{ $child->id }}" class="collapse" aria-labelledby="heading_{{$child->id}}" data-parent="#accordion_zone_{{$child->id}}">
                        <div class="container-buttons">
                            <button type="button" class="btn btn-default" onclick="modalZone('{{base64_encode($child)}}','add')"><i class="fa fa-plus"></i></button>
                            <button type="button" class="btn btn-default" onclick="modalZone('{{base64_encode($child)}}','edit')"><i class="fa fa-edit"></i></button>
                            <button type="button" class="btn btn-default" onclick="clickDelete({{$child->id}})"><i class="fa fa-trash"></i></button>
                        </div>
                        <div class="card-body padding-20" id="body_{{ $child->id }}">

                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    @empty
    <div class="box-header with-border">
        <h3 class="box-title">No hay tribunas creadas</h3>
    </div>
    @endforelse
</div>

<div class="modal fade" id="modal_add_stadium">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Fomulario tribuna</h4>
            </div>
            <div class="modal-body">
                <div class="box-body">
                    <form method="POST" id="form_create">
                        @include('zones.form')
                        @include('layouts.button_add')
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal_add_seat">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Fomulario silla</h4>
            </div>
            <div class="modal-body-seat">
                <div class="box-body">
                    <form method="POST" id="form_create_seat">
                        @include('zones.form_seat')
                        <button onClick="createSeat()" id="btn-create-seat" class="btn btnBox pull-right">{{ __('messages.create') }}</button>
                        <button onClick="deleteSeat()" type="button" id="btn-delete-seat" class="btn pull-right displayNone" style="margin-right: 10px; background-color: #da1a1a; color: white;">{{ __('messages.delete') }}</button>
                        <button type="button" class="btn btnBox pull-right displayNone" id="spinnerButtonSeat">
                            <i class="fa fa-spinner fa-spin"></i>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal_import">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Importar Sillas</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="form-group">
                            <label for="importSeats">{{ Lang::get('messages.screen_products_tag44')}} </label>
                            <input type="file" name="importSeats" id="importSeats" required>
                        </div>
                    </div>
                </div>
                <small id="passwordHelpBlock" class="ul-form__text form-text ">
                    Exportar plantilla <a href="{{ url('/zones/export') }}">aquí</a>
                </small>
                <div class="modal-footer margin-t-10">
                    <button type="button" class="btn btn-default pull-left"
                        data-dismiss="modal">{{ Lang::get('messages.screen_products_tag38')}}</button>
                    <button type="button" id="button-import" onclick="importFile()"
                        class="btn btn-primary">{{ Lang::get('messages.screen_products_tag41')}}</button>
                    <button type="button" class="btn btn-primary displayNone" id="spinner-button">
                        <i class="fa fa-spinner fa-spin"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection
<script src="{{ asset('js/zones.js') }}"></script>