@section('extra-css')
<style>
    .m-r-10{
        margin-right: 10px !important;
        margin-top: 10px !important;
        padding: 5px;
        display: inline-block;
    }
    .pos-r{
        position: relative !important;
    }
    .image_seat{
        width: 30px !important;
    }
    .image_seat_example{
        width: 30px !important;
    }
    .name_seat{
        position: absolute;
        left: 10px;
        bottom: 0;
    }
    .m-b-10{
        margin-bottom: 10px !important;
    }
    .cursor{
        cursor: pointer;
    }
    .container_image{
        position: relative;
    }
    .float-left{
        float: left;
    }
    .d-c{
        display: contents;
    }

    .label_letter {
        position: absolute;
        left: 10px;
        margin-bottom: 20px;
    }

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

    .d-i-t {
        /* margin-right: 10px !important; */
        margin-top: 10px !important;
        /* padding: 5px; */
        min-width:35px;
        display: inline-grid;
    }

    .text-center{
        text-align: center;
    }

    .small_price{
        position: absolute !important;
        top: 30px !important;
        right: 15px !important;
        font-size: 100% !important;
        font-weight: bold !important;
    }
    .m-t-5{
        margin-top: 5px;
    }
    .bg-seat-selected {
       filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);
    }

    .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50px;
        background-color: #fff;
    }

    .buttonBuy{
        margin-top: 8px;
        margin-right: 20px;
    }

    .container_total{
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        margin-right: 10px;
        font-weight: bold;
        font-size: 20px;
    }
    .display-contents{
        display: contents;
    }
    .m-r-20{
        margin-right: 20px;
    }
</style>
@endsection
@extends('modules.head') @section('contenido')

<h3 class="displayFlex-2 cursor">
    <a class="ruta" onclick="activeEvent()" id="event_name">Evento</a>
    <div class="displayNone" id="breadcrumbs_stadium">
        <span class="separador-ruta">|</span>
        <a class="ruta" onclick="activeZone()">Tribuna</a>
    </div>
    <div class="displayNone" id="breadcrumbs_zone">
        <span class="separador-ruta">|</span>
        <a class="ruta" onclick="activeSubzone()">Sector</a>
    </div>
    <div class="displayNone" id="breadcrumbs_subzone">
        <span class="separador-ruta">|</span>
        <a class="ruta" onclick="activeSubzone2()">Silla</a>
    </div>
</h3>
<div class="container_image displayNone" id="container_image_seat">
    <div class="d-c">
        <img class="image_seat_example" src="{{ asset('img/seat_available.png') }}" alt="">
        <span>Disponible</span>
    </div>
    <div class="d-c">
        <img class="image_seat_example" src="{{ asset('img/seat_courtesy.png') }}" alt="">
        <span>Cortesía</span>
    </div>
    <div class="d-c">
        <img class="image_seat_example" src="{{ asset('img/seat_suscription.png') }}" alt="">
        <span>Abonado</span>
    </div>
    <div class="d-c">
        <img class="image_seat_example" src="{{ asset('img/seat_not_available.png') }}" alt="">
        <span>Vendida</span>
    </div>
    <div class="d-c">
        <img class="image_seat_example" src="{{ asset('img/seat_block.png') }}" alt="">
        <span>Bloqueada</span>
    </div>
    <div class="d-c">
        <img class="image_seat_example" src="{{ asset('img/seat_distancing.png') }}" alt="">
        <span>Distanciamiento</span>
    </div>
</div>
<input type="text" class="form-control displayNone" id="current_zone" name="current_zone" disabled>
<input type="text" class="form-control displayNone" id="current_subzone" name="current_subzone" disabled>

<div class="text-center" id="container_event">
    <div class="form-group col-md-12">
        <label for="event_id">Partido</label>
        <select class="form-control" id="event_id" name="event_id">
            <option value="0" disabled selected>@lang('messages.select')</option>
            @forelse ($events as $event)
                <option value="{{$event->id}}">{{$event->name}}</option>
            @empty
                <option value="0">No hay partidos</option>
            @endforelse
        </select>
    </div>
</div>
<div class="box text-center background_magazine displayNone" id="container_stadium">
    <img src="{{ asset('img/estadio.png') }}" usemap="#image-map-stadium">

    <map name="image-map-stadium">
        <area target="" alt="occidental" title="occidental" onclick="openZone(2,'Occidental')" href="javascript:void(0)" coords="285,545,233,631,284,660,321,673,360,684,400,693,441,698,483,703,561,701,605,694,645,687,684,676,720,662,775,632,745,579,724,543,676,564,615,583,556,597,486,598,420,592,355,575" shape="poly">
        <area target="" alt="oriental" title="oriental" onclick="openZone(3,'Oriental')" href="javascript:void(0)" coords="206,117,268,206,325,180,359,166,391,157,419,152,451,147,486,146,520,145,552,148,582,150,613,159,648,167,676,178,734,207,799,115,768,87,731,64,694,47,652,32,612,22,571,13,485,10,399,19,316,43,243,85" shape="poly">
        <area target="" alt="norte" title="norte" onclick="openZone(4,'Norte')" href="javascript:void(0)" coords="202,121,266,210,224,255,193,312,190,337,214,336,218,395,188,400,204,458,240,512,281,542,227,626,179,589,154,555,132,515,119,474,111,433,102,409,74,410,61,347,107,340,119,273,133,232,151,190" shape="poly">
        <area target="" alt="sur" title="sur" onclick="openZone(5,'Sur')" href="javascript:void(0)" coords="741,211,802,120,829,147,859,195,885,267,893,310,919,311,924,372,901,375,897,414,891,458,873,506,855,552,828,586,779,626,727,543,745,528,764,515,781,490,802,463,817,430,823,398,814,326,804,284,787,253" shape="poly">
    </map>
</div>

<div class="box text-center background_magazine displayNone" id="container_2">
    <img src="{{ asset('img/occidental.png') }}" usemap="#image-map-occidental">

    <map name="image-map-occidental">
        <area onclick="openSubzone(36,'Baja 1')" href="javascript:void(0)" target="" alt="occi_baja_1" title="occi_baja_1" coords="891,336,916,323,880,266,859,278" shape="poly">
        <area onclick="openSubzone(37,'Baja 2')" href="javascript:void(0)" target="" alt="occi_baja_2" title="occi_baja_2" coords="885,339,833,361,805,300,852,279" shape="poly">
        <area onclick="openSubzone(38,'Baja 3')" href="javascript:void(0)" target="" alt="occi_baja_3" title="occi_baja_3" coords="828,364,776,383,753,319,800,302" shape="poly">
        <area onclick="openSubzone(39,'Baja 4')" href="javascript:void(0)" target="" alt="occi_baja_4" title="occi_baja_4" coords="770,383,714,398,697,335,745,321" shape="poly">
        <area onclick="openSubzone(40,'Baja 5')" href="javascript:void(0)" target="" alt="occi_baja_5" title="occi_baja_5" coords="709,400,652,410,641,345,691,337" shape="poly">
        <area onclick="openSubzone(41,'Baja 6')" href="javascript:void(0)" target="" alt="occi_baja_6" title="occi_baja_6" coords="590,420,646,413,635,349,583,354" shape="poly">
        <area onclick="openSubzone(42,'Baja 7')" href="javascript:void(0)" target="" alt="occi_baja_7" title="occi_baja_7" coords="525,358,577,355,584,421,529,424" shape="poly">
        <area onclick="openSubzone(43,'Baja 8')" href="javascript:void(0)" target="" alt="occi_baja_8" title="occi_baja_8" coords="465,423,522,424,520,359,468,357" shape="poly">
        <area onclick="openSubzone(44,'Baja 9')" href="javascript:void(0)" target="" alt="occi_baja_9" title="occi_baja_9" coords="403,421,459,424,462,357,412,354" shape="poly">
        <area onclick="openSubzone(45,'Baja 10')" href="javascript:void(0)" target="" alt="occi_baja_10" title="occi_baja_10" coords="341,414,396,419,404,355,354,346" shape="poly">
        <area onclick="openSubzone(46,'Baja 11')" href="javascript:void(0)" target="" alt="occi_baja_11" title="occi_baja_11" coords="278,402,333,411,347,345,299,336" shape="poly">
        <area onclick="openSubzone(47,'Baja 12')" href="javascript:void(0)" target="" alt="occi_baja_12" title="occi_baja_12" coords="220,382,273,399,290,334,243,321" shape="poly">
        <area onclick="openSubzone(48,'Baja 13')" href="javascript:void(0)" target="" alt="occi_baja_13" title="occi_baja_13" coords="161,363,212,381,234,319,190,304" shape="poly">
        <area onclick="openSubzone(49,'Baja 14')" href="javascript:void(0)" target="" alt="occi_baja_14" title="occi_baja_14" coords="104,339,153,360,181,301,138,282" shape="poly">
        <area onclick="openSubzone(50,'Baja 15')" href="javascript:void(0)" target="" alt="occi_baja_15" title="occi_baja_15" coords="73,322,96,335,131,278,110,266" shape="poly">
        <area onclick="openSubzone(51,'Alta 1')" href="javascript:void(0)" target="" alt="occi_alta_1" title="occi_alta_1" coords="895,344,920,330,973,408,941,430" shape="poly">
        <area onclick="openSubzone(52,'Alta 2')" href="javascript:void(0)" target="" alt="occi_alta_2" title="occi_alta_2" coords="838,369,889,347,934,430,877,457" shape="poly">
        <area onclick="openSubzone(53,'Alta 3')" href="javascript:void(0)" target="" alt="occi_alta_3" title="occi_alta_3" coords="777,389,830,370,871,460,809,479" shape="poly">
        <area onclick="openSubzone(54,'Alta 4')" href="javascript:void(0)" target="" alt="occi_alta_4" title="occi_alta_4" coords="742,496,803,480,772,390,718,406" shape="poly">
        <area onclick="openSubzone(55,'Alta 5')" href="javascript:void(0)" target="" alt="occi_alta_5" title="occi_alta_5" coords="656,418,673,510,737,498,710,410" shape="poly">
        <area onclick="openSubzone(56,'Alta 6')" href="javascript:void(0)" target="" alt="occi_alta_6" title="occi_alta_6" coords="592,426,595,443,651,434,648,419" shape="poly">
        <area onclick="openSubzone(57,'Alta 7')" href="javascript:void(0)" target="" alt="occi_alta_7" title="occi_alta_7" coords="530,431,530,447,587,443,584,425" shape="poly">
        <area onclick="openSubzone(58,'Alta 8')" href="javascript:void(0)" target="" alt="occi_alta_8" title="occi_alta_8" coords="465,433,465,449,523,447,523,430" shape="poly">
        <area onclick="openSubzone(59,'Alta 9')" href="javascript:void(0)" target="" alt="occi_alta_9" title="occi_alta_9" coords="402,429,400,444,458,448,458,432" shape="poly">
        <area onclick="openSubzone(60,'Alta 10')" href="javascript:void(0)" target="" alt="occi_alta_10" title="occi_alta_10" coords="341,421,339,434,393,443,393,426" shape="poly">
        <area onclick="openSubzone(61,'Alta 11')" href="javascript:void(0)" target="" alt="occi_alta_11" title="occi_alta_11" coords="277,408,332,418,315,513,253,499" shape="poly">
        <area onclick="openSubzone(62,'Alta 12')" href="javascript:void(0)" target="" alt="occi_alta_12" title="occi_alta_12" coords="217,391,270,406,247,499,185,481" shape="poly">
        <area onclick="openSubzone(63,'Alta 13')" href="javascript:void(0)" target="" alt="occi_alta_13" title="occi_alta_13" coords="156,371,211,387,176,479,119,459" shape="poly">
        <area onclick="openSubzone(64,'Alta 14')" href="javascript:void(0)" target="" alt="occi_alta_14" title="occi_alta_14" coords="100,346,151,368,111,455,54,429" shape="poly">
        <area onclick="openSubzone(65,'Alta 15')" href="javascript:void(0)" target="" alt="occi_alta_15" title="occi_alta_15" coords="68,331,93,343,45,426,19,408" shape="poly">
        <area onclick="openSubzone(66,'Vip 1')" href="javascript:void(0)" target="" alt="occi_vip_1" title="occi_vip_1" coords="594,449,652,440,666,511,603,521" shape="poly">
        <area onclick="openSubzone(67,'Vip 2')" href="javascript:void(0)" target="" alt="occi_vip_2" title="occi_vip_2" coords="528,455,530,490,592,484,588,451" shape="poly">
        <area onclick="openSubzone(68,'Vip 3')" href="javascript:void(0)" target="" alt="occi_vip_3" title="occi_vip_3" coords="465,459,464,487,523,489,522,457" shape="poly">
        <area onclick="openSubzone(69,'Vip 4')" href="javascript:void(0)" target="" alt="occi_vip_4" title="occi_vip_4" coords="399,453,395,482,453,488,456,457" shape="poly">
        <area onclick="openSubzone(70,'Vip 5')" href="javascript:void(0)" target="" alt="occi_vip_5" title="occi_vip_5" coords="336,441,394,449,385,524,324,514" shape="poly">
        <area onclick="openSubzone(71,'Vvip 1')" href="javascript:void(0)" target="" alt="occi_vvip_1" title="occi_vvip_1" coords="591,489,597,531,534,532,531,495" shape="poly">
        <area onclick="openSubzone(72,'Vvip 2')" href="javascript:void(0)" target="" alt="occi_vvip_2" title="occi_vvip_2" coords="463,498,463,529,523,527,523,499" shape="poly">
        <area onclick="openSubzone(73,'Vvip 3')" href="javascript:void(0)" target="" alt="occi_vvip_3" title="occi_vvip_3" coords="395,492,393,528,454,533,454,497" shape="poly">
    </map>
</div>

<div class="box text-center background_magazine displayNone" id="container_3">
    <img src="{{ asset('img/oriental.png') }}" usemap="#image-map-oriental">

    <map name="image-map-oriental">
        <area onclick="openSubzone(6,'Alta 1')"  href="javascript:void(0)" target="" alt="orie_alta_1" title="orie_alta_1" coords="11,388,65,466,112,431,64,338" shape="poly">
        <area onclick="openSubzone(7,'Alta 2')"  href="javascript:void(0)" target="" alt="orie_alta_2" title="orie_alta_2" coords="74,335,118,421,165,401,124,301" shape="poly">
        <area onclick="openSubzone(8,'Alta 3')"  href="javascript:void(0)" target="" alt="orie_alta_3" title="orie_alta_3" coords="133,298,173,395,221,377,185,269" shape="poly">
        <area onclick="openSubzone(9,'Alta 4')"  href="javascript:void(0)" target="" alt="orie_alta_4" title="orie_alta_4" coords="197,268,231,369,279,356,252,247" shape="poly">
        <area onclick="openSubzone(10,'Alta 5')" href="javascript:void(0)" target="" alt="orie_alta_5" title="orie_alta_5" coords="262,246,289,353,336,342,317,228" shape="poly">
        <area onclick="openSubzone(11,'Alta 6')" href="javascript:void(0)" target="" alt="orie_alta_6" title="orie_alta_6" coords="330,229,349,339,401,332,389,216" shape="poly">
        <area onclick="openSubzone(12,'Alta 7')" href="javascript:void(0)" target="" alt="orie_alta_7" title="orie_alta_7" coords="397,217,409,330,461,327,458,209" shape="poly">
        <area onclick="openSubzone(13,'Alta 8')" href="javascript:void(0)" target="" alt="orie_alta_8" title="orie_alta_8" coords="468,212,472,329,526,329,525,214" shape="poly">
        <area onclick="openSubzone(14,'Alta 9')" href="javascript:void(0)" target="" alt="orie_alta_9" title="orie_alta_9" coords="539,214,534,327,588,333,599,217" shape="poly">
        <area onclick="openSubzone(15,'Alta 10')" href="javascript:void(0)" target="" alt="orie_alta_10" title="orie_alta_10" coords="609,219,596,329,645,337,667,225" shape="poly">
        <area onclick="openSubzone(16,'Alta 11')" href="javascript:void(0)" target="" alt="orie_alta_11" title="orie_alta_11" coords="678,231,658,338,705,351,735,242" shape="poly">
        <area onclick="openSubzone(17,'Alta 12')" href="javascript:void(0)" target="" alt="orie_alta_12" title="orie_alta_12" coords="745,251,714,353,766,368,800,266" shape="poly">
        <area onclick="openSubzone(18,'Alta 13')" href="javascript:void(0)" target="" alt="orie_alta_13" title="orie_alta_13" coords="810,275,775,372,822,390,864,294" shape="poly">
        <area onclick="openSubzone(19,'Alta 14')" href="javascript:void(0)" target="" alt="orie_alta_14" title="orie_alta_14" coords="874,307,833,393,880,417,924,334" shape="poly">
        <area onclick="openSubzone(20,'Alta 15')" href="javascript:void(0)" target="" alt="orie_alta_15" title="orie_alta_15" coords="932,343,888,422,937,459,985,382" shape="poly">
        <area onclick="openSubzone(21,'Baja 1')" href="javascript:void(0)" target="" alt="orie_baja_1" title="orie_baja_1" coords="70,480,113,545,155,525,113,449" shape="poly">
        <area onclick="openSubzone(22,'Baja 2')" href="javascript:void(0)" target="" alt="orie_baja_2" title="orie_baja_2" coords="119,441,163,520,202,500,167,415" shape="poly">
        <area onclick="openSubzone(23,'Baja 3')" href="javascript:void(0)" target="" alt="orie_baja_3" title="orie_baja_3" coords="175,413,211,499,255,482,223,391" shape="poly">
        <area onclick="openSubzone(24,'Baja 4')" href="javascript:void(0)" target="" alt="orie_baja_4" title="orie_baja_4" coords="230,388,259,481,307,469,283,374" shape="poly">
        <area onclick="openSubzone(25,'Baja 5')" href="javascript:void(0)" target="" alt="orie_baja_5" title="orie_baja_5" coords="288,371,312,464,356,453,342,360" shape="poly">
        <area onclick="openSubzone(26,'Baja 6')" href="javascript:void(0)" target="" alt="orie_baja_6" title="orie_baja_6" coords="349,358,364,452,415,449,401,351" shape="poly">
        <area onclick="openSubzone(27,'Baja 7')" href="javascript:void(0)" target="" alt="orie_baja_7" title="orie_baja_7" coords="408,349,420,446,467,444,462,347" shape="poly">
        <area onclick="openSubzone(28,'Baja 8')" href="javascript:void(0)" target="" alt="orie_baja_8" title="orie_baja_8" coords="468,342,474,441,521,443,522,344" shape="poly">
        <area onclick="openSubzone(29,'Baja 9')" href="javascript:void(0)" target="" alt="orie_baja_9" title="orie_baja_9" coords="531,346,528,442,574,446,585,348" shape="poly">
        <area onclick="openSubzone(30,'Baja 10')" href="javascript:void(0)" target="" alt="orie_baja_10" title="orie_baja_10" coords="593,349,583,445,629,453,646,357" shape="poly">
        <area onclick="openSubzone(31,'Baja 11')" href="javascript:void(0)" target="" alt="orie_baja_11" title="orie_baja_11" coords="655,360,638,452,679,465,705,368" shape="poly">
        <area onclick="openSubzone(32,'Baja 12')" href="javascript:void(0)" target="" alt="orie_baja_12" title="orie_baja_12" coords="714,372,763,386,732,480,691,464" shape="poly">
        <area onclick="openSubzone(33,'Baja 13')" href="javascript:void(0)" target="" alt="orie_baja_13" title="orie_baja_13" coords="776,387,742,480,783,499,819,409" shape="poly">
        <area onclick="openSubzone(34,'Baja 14')" href="javascript:void(0)" target="" alt="orie_baja_14" title="orie_baja_14" coords="829,412,796,500,831,520,874,439" shape="poly">
        <area onclick="openSubzone(35,'Baja 15')" href="javascript:void(0)" target="" alt="orie_baja_15" title="orie_baja_15" coords="884,440,931,474,881,549,844,523" shape="poly">
    </map>
</div>

<div class="box text-center background_magazine displayNone" id="container_4">
    <img src="{{ asset('img/norte.png') }}" usemap="#image-map-norte">

    <map name="image-map-norte">
        <area onclick="openSubzone(74,'Alta 1')" href="javascript:void(0)" target="" alt="nort_alta_1" title="nort_alta_1" coords="14,466,113,527,128,499,35,433" shape="poly">
        <area onclick="openSubzone(75,'Alta 2')" href="javascript:void(0)" target="" alt="nort_alta_2" title="nort_alta_2" coords="39,428,134,493,172,448,89,372" shape="poly">
        <area onclick="openSubzone(76,'Alta 3')" href="javascript:void(0)" target="" alt="nort_alta_3" title="nort_alta_3" coords="98,366,176,443,222,403,160,324" shape="poly">
        <area onclick="openSubzone(77,'Alta 4')" href="javascript:void(0)" target="" alt="nort_alta_4" title="nort_alta_4" coords="166,318,227,398,278,365,234,292" shape="poly">
        <area onclick="openSubzone(78,'Alta 5')" href="javascript:void(0)" target="" alt="nort_alta_5" title="nort_alta_5" coords="240,286,285,362,340,337,310,269" shape="poly">
        <area onclick="openSubzone(79,'Alta 6')" href="javascript:void(0)" target="" alt="nort_alta_6" title="nort_alta_6" coords="320,265,346,336,404,320,388,252" shape="poly">
        <area onclick="openSubzone(80,'Alta 7')" href="javascript:void(0)" target="" alt="nort_alta_7" title="nort_alta_7" coords="399,252,409,316,469,308,466,243" shape="poly">
        <area onclick="openSubzone(81,'Alta 8')" href="javascript:void(0)" target="" alt="nort_alta_8" title="nort_alta_8" coords="473,245,541,243,536,309,476,308" shape="poly">
        <area onclick="openSubzone(82,'Alta 9')" href="javascript:void(0)" target="" alt="nort_alta_9" title="nort_alta_9" coords="552,244,617,257,603,323,544,310" shape="poly">
        <area onclick="openSubzone(83,'Alta 10')" href="javascript:void(0)" target="" alt="nort_alta_10" title="nort_alta_10" coords="628,259,695,271,667,344,611,323" shape="poly">
        <area onclick="openSubzone(84,'Alta 11')" href="javascript:void(0)" target="" alt="nort_alta_11" title="nort_alta_11" coords="704,273,675,346,727,374,770,299" shape="poly">
        <area onclick="openSubzone(85,'Alta 12')" href="javascript:void(0)" target="" alt="nort_alta_12" title="nort_alta_12" coords="778,303,734,379,781,411,844,334" shape="poly">
        <area onclick="openSubzone(86,'Alta 13')" href="javascript:void(0)" target="" alt="nort_alta_13" title="nort_alta_13" coords="857,338,786,417,831,461,920,381" shape="poly">
        <area onclick="openSubzone(87,'Alta 14')" href="javascript:void(0)" target="" alt="nort_alta_14" title="nort_alta_14" coords="838,464,875,512,984,437,928,385" shape="poly">
        <area onclick="openSubzone(88,'Baja 1')" href="javascript:void(0)" target="" alt="nort_baja_1" title="nort_baja_1" coords="120,531,135,506,189,546,179,568" shape="poly">
        <area onclick="openSubzone(89,'Baja 2')" href="javascript:void(0)" target="" alt="nort_baja_2" title="nort_baja_2" coords="141,500,196,540,231,498,182,446" shape="poly">
        <area onclick="openSubzone(90,'Baja 3')" href="javascript:void(0)" target="" alt="nort_baja_3" title="nort_baja_3" coords="189,443,236,490,278,454,237,402" shape="poly">
        <area onclick="openSubzone(91,'Baja 4')" href="javascript:void(0)" target="" alt="nort_baja_4" title="nort_baja_4" coords="246,394,286,452,333,422,302,362" shape="poly">
        <area onclick="openSubzone(92,'Baja 5')" href="javascript:void(0)" target="" alt="nort_baja_5" title="nort_baja_5" coords="310,359,340,422,391,400,372,334" shape="poly">
        <area onclick="openSubzone(93,'Baja 6')" href="javascript:void(0)" target="" alt="nort_baja_6" title="nort_baja_6" coords="380,333,397,399,452,389,444,317" shape="poly">
        <area onclick="openSubzone(94,'Baja 7')" href="javascript:void(0)" target="" alt="nort_baja_7" title="nort_baja_7" coords="452,318,459,388,476,389,473,332,482,332,480,316" shape="poly">
        <area onclick="openSubzone(95,'Baja 8')" href="javascript:void(0)" target="" alt="nort_baja_8" title="nort_baja_8" coords="489,314,490,332,524,332,525,316" shape="poly">
        <area onclick="openSubzone(96,'Baja 9')" href="javascript:void(0)" target="" alt="nort_baja_9" title="nort_baja_9" coords="532,316,531,331,540,332,532,391,553,391,563,321" shape="poly">
        <area onclick="openSubzone(97,'Baja 10')" href="javascript:void(0)" target="" alt="nort_baja_10" title="nort_baja_10" coords="571,325,635,338,612,405,559,391" shape="poly">
        <area onclick="openSubzone(98,'Baja 11')" href="javascript:void(0)" target="" alt="nort_baja_11" title="nort_baja_11" coords="642,343,702,368,670,430,620,407" shape="poly">
        <area onclick="openSubzone(99,'Baja 12')" href="javascript:void(0)" target="" alt="nort_baja_12" title="nort_baja_12" coords="711,374,766,408,724,464,677,431" shape="poly">
        <area onclick="openSubzone(100,'Baja 13')" href="javascript:void(0)" target="" alt="nort_baja_13" title="nort_baja_13" coords="773,412,819,458,768,506,728,468" shape="poly">
        <area onclick="openSubzone(101,'Baja 14')" href="javascript:void(0)" target="" alt="nort_baja_14" title="nort_baja_14" coords="827,461,865,517,809,552,773,510" shape="poly">
    </map>
</div>

<div class="box text-center background_magazine displayNone" id="container_5">
    <img src="{{ asset('img/sur.png') }}" usemap="#image-map-sur">

    <map name="image-map-sur">
        <area onclick="openSubzone(102,'Baja 1')" href="javascript:void(0)" target="" alt="sur_baja_1" title="sur_baja_1" coords="780,289,828,330,866,280,812,248" shape="poly">
        <area onclick="openSubzone(103,'Baja 2')" href="javascript:void(0)" target="" alt="sur_baja_2" title="sur_baja_2" coords="734,329,775,375,822,335,771,293" shape="poly">
        <area onclick="openSubzone(104,'Baja 3')" href="javascript:void(0)" target="" alt="sur_baja_3" title="sur_baja_3" coords="684,359,714,415,768,383,725,334" shape="poly">
        <area onclick="openSubzone(105,'Baja 4')" href="javascript:void(0)" target="" alt="sur_baja_4" title="sur_baja_4" coords="626,385,647,444,708,422,673,368" shape="poly">
        <area onclick="openSubzone(106,'Baja 5')" href="javascript:void(0)" target="" alt="sur_baja_5" title="sur_baja_5" coords="566,403,613,390,637,450,577,464" shape="poly">
        <area onclick="openSubzone(107,'Baja 6')" href="javascript:void(0)" target="" alt="sur_baja_6" title="sur_baja_6" coords="555,404,567,467,538,470,536,460,547,458,536,406" shape="poly">
        <area onclick="openSubzone(108,'Baja 7')" href="javascript:void(0)" target="" alt="sur_baja_7" title="sur_baja_7" coords="495,460,494,474,530,472,529,459" shape="poly">
        <area onclick="openSubzone(109,'Baja 8')" href="javascript:void(0)" target="" alt="sur_baja_8" title="sur_baja_8" coords="480,407,478,461,485,458,485,474,457,471,463,407" shape="poly">
        <area onclick="openSubzone(110,'Baja 9')" href="javascript:void(0)" target="" alt="sur_baja_9" title="sur_baja_9" coords="402,398,454,405,449,472,386,459" shape="poly">
        <area onclick="openSubzone(111,'Baja 10')" href="javascript:void(0)" target="" alt="sur_baja_10" title="sur_baja_10" coords="345,379,393,396,377,458,315,436" shape="poly">
        <area onclick="openSubzone(112,'Baja 11')" href="javascript:void(0)" target="" alt="sur_baja_11" title="sur_baja_11" coords="288,349,334,376,305,433,251,402" shape="poly">
        <area onclick="openSubzone(113,'Baja 12')" href="javascript:void(0)" target="" alt="sur_baja_12" title="sur_baja_12" coords="280,344,241,399,190,361,239,313" shape="poly">
        <area onclick="openSubzone(114,'Baja 13')" href="javascript:void(0)" target="" alt="sur_baja_13" title="sur_baja_13" coords="184,354,230,306,199,273,144,308" shape="poly">
        <area onclick="openSubzone(115,'Baja 14')" href="javascript:void(0)" target="" alt="sur_baja_14" title="sur_baja_14" coords="178,240,190,261,136,297,122,276" shape="poly">
        <area onclick="openSubzone(116,'Alta 1')" href="javascript:void(0)" target="" alt="sur_alta_1" title="sur_alta_1" coords="878,287,990,352,931,405,843,331" shape="poly">
        <area onclick="openSubzone(117,'Alta 2')" href="javascript:void(0)" target="" alt="sur_alta_2" title="sur_alta_2" coords="834,334,796,376,860,447,921,406" shape="poly">
        <area onclick="openSubzone(118,'Alta 3')" href="javascript:void(0)" target="" alt="sur_alta_3" title="sur_alta_3" coords="786,379,739,414,784,480,852,453" shape="poly">
        <area onclick="openSubzone(119,'Alta 4')" href="javascript:void(0)" target="" alt="sur_alta_4" title="sur_alta_4" coords="732,417,681,443,710,508,777,486" shape="poly">
        <area onclick="openSubzone(120,'Alta 5')" href="javascript:void(0)" target="" alt="sur_alta_5" title="sur_alta_5" coords="669,448,702,512,631,526,616,467" shape="poly">
        <area onclick="openSubzone(121,'Alta 6')" href="javascript:void(0)" target="" alt="sur_alta_6" title="sur_alta_6" coords="608,468,550,479,558,541,625,528" shape="poly">
        <area onclick="openSubzone(122,'Alta 7')" href="javascript:void(0)" target="" alt="sur_alta_7" title="sur_alta_7" coords="538,480,549,543,480,544,482,482" shape="poly">
        <area onclick="openSubzone(123,'Alta 8')" href="javascript:void(0)" target="" alt="sur_alta_8" title="sur_alta_8" coords="472,483,473,545,401,535,416,477" shape="poly">
        <area onclick="openSubzone(124,'Alta 9')" href="javascript:void(0)" target="" alt="sur_alta_9" title="sur_alta_9" coords="406,475,394,537,325,525,349,461" shape="poly">
        <area onclick="openSubzone(125,'Alta 10')" href="javascript:void(0)" target="" alt="sur_alta_10" title="sur_alta_10" coords="344,457,316,525,249,508,288,434" shape="poly">
        <area onclick="openSubzone(126,'Alta 11')" href="javascript:void(0)" target="" alt="sur_alta_11" title="sur_alta_11" coords="281,431,239,502,173,477,231,403" shape="poly">
        <area onclick="openSubzone(127,'Alta 12')" href="javascript:void(0)" target="" alt="sur_alta_12" title="sur_alta_12" coords="225,395,164,473,103,433,180,361" shape="poly">
        <area onclick="openSubzone(128,'Alta 13')" href="javascript:void(0)" target="" alt="sur_alta_13" title="sur_alta_13" coords="174,353,93,429,45,377,135,311" shape="poly">
        <area onclick="openSubzone(129,'Alta 14')" href="javascript:void(0)" target="" alt="sur_alta_14" title="sur_alta_14" coords="112,281,130,305,38,370,18,341" shape="poly">
    </map>
</div>

<div class="box text-center background_magazine displayNone" id="body_seat">

</div>

<div class="modal fade" id="modal_sell_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">Selecciona tipo de boleta</h4>
            </div>
            <div class="modal-body">
                <div class="box-body">
                    <form method="POST" id="form_sell_seat">
                        @include('tickets.form')
                        <button onClick="addSeat()" type="button" class="btn btnBox pull-right ">Agregar</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal_buy_tickets">
    <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">Formulario venta de boletas</h4>
            </div>
            <div class="modal-body">
                <div class="box-body">
                    <ul class="nav nav-pills nav-justified" id="myTab" role="tablist">
                        <li class="nav-item active">
                          <a class="nav-link" id="add-tab" data-toggle="tab" href="#add" role="tab">Usuario</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" id="shoping-tab" data-toggle="tab" href="#shoping" role="tab">Listado</a>
                        </li>
                    </ul>
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade active in" id="add" role="tabpanel" aria-labelledby="add-tab">
                            <form method="POST" id="form_sell_checkout">
                                @include('tickets.form-checkout')
                            </form>
                        </div>
                        <div class="tab-pane fade" id="shoping" role="tabpanel" aria-labelledby="shoping-tab">
                            <div class="list-group m-t-5" id="list_tickets">

                            </div>
                            <div class="row mx-md-n5 container_total">
                                <div class="col px-md-5 display-contents">Total: <div class="p-3 border bg-light m-r-20" id="total_price"></div></div>
                                <button type="submit" onClick="create()" id="btn-create" class="btn btnBox pull-right ">{{ __('messages.create') }}</button>
                                <button type="button" class="btn btnBox pull-right displayNone" id="spinnerButton">
                                    <i class="fa fa-spinner fa-spin"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<footer class="footer displayNone" id="div_footer">
    <button onClick="buyTickets()" type="button" class="btn btnBox pull-right buttonBuy">Proceder con el pago</button>
</footer>
@endsection
<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('js/tickets.js') }}"></script>