@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;
        flex-wrap: wrap;
        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>{{ Lang::get('messages.zones.title_16') }}
        </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>{{ Lang::get('messages.zones.title_17') }}
        </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="getZonesChilds({{ $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">{{ Lang::get('messages.zones.title_18') }}</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">{{ Lang::get('messages.zones.title_19') }}</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">{{ Lang::get('messages.zones.title_20') }}</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">{{ Lang::get('messages.zones.title_21') }}</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 ">
                    {{ Lang::get('messages.zones.title_22') }} <a href="{{ url('/zones/export') }}"> {{ Lang::get('messages.zones.title_23') }}</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">{{ Lang::get('messages.importing') }}</i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

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