@extends('Templates.PlantillaFull',['PaginaTitulo' => 'Detalle de sucursal','PaginaUrl' =>
'/detalle-sucursal','Padre'
=> '1'])

@section('Contenido')
    <div class="card">
        <div class="card-status-top bg-success"></div>
        <div class="card-body">
            <div class="row row-0">
                <div class="col-12">
                    <div class="row">
                        @foreach ($detalle as $det)
                            {{-- nombre --}}
                            <div class="col-8 mt-3">

                                <div class="form-group">

                                    <label class="form-label d-inline-block" style="position: relative; top: -3px"><svg
                                            xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-home"
                                            width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
                                            stroke="currentColor" fill="none" stroke-linecap="round"
                                            stroke-linejoin="round">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                            <polyline points="5 12 3 12 12 3 21 12 19 12"></polyline>
                                            <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path>
                                            <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"></path>
                                        </svg>&nbsp;</label>
                                    <h1 class="d-inline-block font-weight-normal">Sucursal:</h1>
                                    <h1 class="d-inline-block">{{ $det->SUCU_NOMBRE }}
                                        @if ($det->SUCU_ESTADO == 0)
                                            <span style="font-size: 10px; margin-top: 5px; margin-left: 10px" class="badge bg-dark float-end">Inactivo</span>
                                        @else
                                            <span style="font-size: 10px; margin-top: 5px; margin-left: 10px" class="badge bg-success float-end">Activo</span>
                                        @endif
                                    </h1>
                                </div>
                            </div>
                            {{-- estado --}}
                            <div class="col-4 mt-3 mr-4">
                                <button data-bs-toggle="tooltip" title="Haga clic para regresar" class="btn btn-transaparent float-end" style="position: relative; top: -10px; border: 0;" onclick="history.back();">
                                    <i class="fas fa-times fa-lg"></i>&nbsp;
                                </button>
                            </div>

                            <div class="row col-12 col-md-8">
                                {{-- direccion --}}
                                <div class="col-12" style="margin-top: -6px; margin-bottom: 4px">

                                    <div class="form-group">
                                        <label style="font-size: 13px;"
                                            class="form-label text-muted">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ $det->SUCU_DIRECCION . '. ' . $det->MUNI_NOMBRE . ', ' . $det->DEPA_NOMBRE . '. ' . $det->PAIS_NOMBRE }}</label>
                                    </div>
                                </div>

                                <div class="col-12 row" style="margin-top: -3px;">
                                    <div class="col-12 row">
                                        {{-- TELEFONO --}}
                                        <div class="col-6">
                                            <div class="form-group">
                                                <label class="form-label"><svg xmlns="http://www.w3.org/2000/svg"
                                                        class="icon icon-tabler icon-tabler-phone-check" width="24"
                                                        height="24" viewBox="0 0 24 24" stroke-width="2"
                                                        stroke="currentColor" fill="none" stroke-linecap="round"
                                                        stroke-linejoin="round">
                                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                        <path
                                                            d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2">
                                                        </path>
                                                        <path d="M15 6l2 2l4 -4"></path>
                                                    </svg>&nbsp;<b>Teléfono: </b> {{ $det->SUCU_TEL }}</label>
                                            </div>
                                        </div>

                                        {{-- RADIO --}}
                                        <div class="col-6">
                                            <div class="form-group">
                                                <label class="form-label"><svg xmlns="http://www.w3.org/2000/svg"
                                                        class="icon icon-tabler icon-tabler-world-latitude" width="24"
                                                        height="24" viewBox="0 0 24 24" stroke-width="2"
                                                        stroke="currentColor" fill="none" stroke-linecap="round"
                                                        stroke-linejoin="round">
                                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                        <circle cx="12" cy="12" r="9"></circle>
                                                        <line x1="4.6" y1="7" x2="19.4" y2="7"></line>
                                                        <line x1="3" y1="12" x2="21" y2="12"></line>
                                                        <line x1="4.6" y1="17" x2="19.4" y2="17"></line>
                                                    </svg>&nbsp;<b>Radio (Km): </b>{{ $det->SUCU_PUNTOFIJO }}</label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-12 row" style="margin-top: -17px">
                                        {{-- CORREO --}}
                                        <div class="col-6 mt-3">
                                            <div class="form-group">
                                                <label class="form-label"><svg xmlns="http://www.w3.org/2000/svg"
                                                        class="icon icon-tabler icon-tabler-at" width="24" height="24"
                                                        viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
                                                        fill="none" stroke-linecap="round" stroke-linejoin="round">
                                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                        <circle cx="12" cy="12" r="4"></circle>
                                                        <path d="M16 12v1.5a2.5 2.5 0 0 0 5 0v-1.5a9 9 0 1 0 -5.5 8.28">
                                                        </path>
                                                    </svg>&nbsp;<b>Correo electrónico: </b>{{ $det->SUCU_MAIL }}</label>
                                            </div>
                                        </div>
                                        {{-- PUNTO REF --}}
                                        <div class="col-6 mt-3">
                                            <div class="form-group">
                                                <label class="form-label"><svg xmlns="http://www.w3.org/2000/svg"
                                                        class="icon icon-tabler icon-tabler-viewfinder" width="24"
                                                        height="24" viewBox="0 0 24 24" stroke-width="2"
                                                        stroke="currentColor" fill="none" stroke-linecap="round"
                                                        stroke-linejoin="round">
                                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                        <circle cx="12" cy="12" r="9"></circle>
                                                        <line x1="12" y1="3" x2="12" y2="7"></line>
                                                        <line x1="12" y1="21" x2="12" y2="18"></line>
                                                        <line x1="3" y1="12" x2="7" y2="12"></line>
                                                        <line x1="21" y1="12" x2="18" y2="12"></line>
                                                        <line x1="12" y1="12" x2="12" y2="12.01"></line>
                                                    </svg>&nbsp;<b>Punto de referencia: </b><a
                                                        href="https://www.google.com/maps/?q={{ $det->SUCU_COORDENADAS }}"
                                                        target="_blank">{{ $det->SUCU_COORDENADAS }}</a></label>
                                                {{-- <label class="form-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> --}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row col-12 col-md-4">

                                <div class="col-12 col-md-6">
                                    <div class="card p-3">
                                        <div class="d-flex align-items-center">
                                            <span class="stamp stamp-md-n bg-success me-3 img-thumbnail">
                                                <i class="fas fa-paste text-white"></i>
                                            </span>
                                            <div>
                                                <h4 class="m-0"><a id=""
                                                        href="#">{{ $pedidosMes }}<small></small></a></h4>
                                                <small class="text-muted fontfamRubMiniCard">Pedidos del mes</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6">
                                    <div class="card p-3">
                                        <div class="d-flex align-items-center">
                                            <span class="stamp stamp-md-n bg-orange me-3 img-thumbnail">
                                                <i class="fas fa-utensils text-white"></i>
                                            </span>
                                            <div>
                                                <h4 class="m-0"><a id=""
                                                        href="#">{{ $cantidadRestaurantes }}<small></small></a></h4>
                                                <small class="text-muted fontfamRubMiniCard">Comercios activos</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-12">
        <div class="card">
            <div class="ribbon ribbon-top bg-yellow">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star" width="24" height="24"
                    viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
                    stroke-linejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <path
                        d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z">
                    </path>
                </svg>
            </div>
            <div class="card-body">

                <div class="col-md-12">
                    <ul class="nav nav-tabs" data-bs-toggle="tabs">
                        <li class="nav-item">
                            <a href="#tabs-categorias" class="nav-link active" data-bs-toggle="tab">
                                <i class="fas fa-boxes"></i>&nbsp; Asignar categorías
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#tabs-tarifas" class="nav-link" data-bs-toggle="tab">
                                <i class="fas fa-dollar-sign"></i>&nbsp; Tarifas
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#tabs-zonas" class="nav-link" data-bs-toggle="tab">
                                <i class="fas fa-map"></i>&nbsp;
                                Zonas
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#tabs-repartidores" class="nav-link" data-bs-toggle="tab">
                                <i class="fas fa-motorcycle"></i>&nbsp;
                                Repartidores
                            </a>
                        </li>
                    </ul>
                    <div class="card-body">
                        <div class="tab-content">
                            <div class="tab-pane active show" id="tabs-categorias">
                                {{-- @if (privilegio('Ver tarifas'))

                                @else
                                    <p class="text-muted">No tienes permiso</p>
                                @endif --}}
                                @include('sucursales.categorias-globales.index')
                            </div>
                            <div class="tab-pane" id="tabs-tarifas">
                                @if (privilegio('Ver tarifas'))
                                    @include('sucursales.tarifas.index')
                                @else
                                    <p class="text-muted">No tienes permiso</p>
                                @endif
                            </div>
                            <div class="tab-pane" id="tabs-zonas">
                                @if (privilegio('Ver zonas'))
                                    @include('sucursales.zonas.index')
                                @else
                                    <p class="text-muted">No tienes permiso</p>
                                @endif
                            </div>
                            <div class="tab-pane" id="tabs-repartidores">
                                @if (privilegio('Ver repartidores'))
                                    @include('sucursales.zonas-empleado.index')
                                @else
                                    <p class="text-muted">No tienes permiso</p>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection