@extends('layout.backend')
@section('title', ($region->id ? 'Editar' : 'Nova') . ' Região')

@section('scripts')
    @parent
	@vite(['resources/js/create-regions.js'])
@endsection

@section('content')

<x-form.header.button-bar>
    <x-form.header.button-back :route="route('regions.index')" />
</x-form.header.button-bar>

<x-form.body
    :title="($region->id ? 'Editar' : 'Nova') . ' Região'"
    icon="fa-map-marker-alt"
    :form-action="$region->id ? route('regions.update', ['region' => $region->id]) : route('regions.store')"
    :form-method="$region->id ? 'PUT' : 'POST'"
    :item="$region"
    :files="true">

    {!! Form::hidden('id', $region->id, ['id' => 'idregion']) !!}

    {{-- ── Dados da Região ── --}}
    <x-form.section heading="Dados da Região" margins="mt-0 mb-2 px-2 pb-1" />

    <x-form.text name="name" :required="true" class="col-sm-8 col-md-9">
        Nome da Região
    </x-form.text>

    {{-- Campo color: x-form.text não suporta type="color" --}}
    <div class="my-1 form-group col-sm-4 col-md-3">
        <label for="color" class="col-12 p-0 mb-0 col-form-label">Cor no mapa</label>
        <div class="col-12 p-0">
            <input type="color" name="color" id="color"
                value="{{ old('color', $region->color) }}"
                class="form-control">
        </div>
    </div>

    <x-form.text name="description" class="col-md-12 col-lg-6">
        Descrição
    </x-form.text>

    {{-- ── Contato ── --}}
    <x-form.section heading="Contato" />

    <x-form.textarea name="address" :rows="5" class="col-md-12 col-lg-6">
        Endereço para cartão de visitas
    </x-form.textarea>

    <x-form.control-group class="col-sm-12 col-lg-8 px-3 py-2 mx-0 mt-3 mb-1 alert-warning">
        <x-form.text name="email" class="col-sm-12 col-md-6">
            E-mail da região
        </x-form.text>

        <x-form.text name="hlc_phone" mask="phone" class="col-sm-6 col-md-3">
            Telefone Colih região
        </x-form.text>

        <x-form.text name="pvg_phone" mask="phone" class="col-sm-6 col-md-3">
            Telefone GVP região
        </x-form.text>

        <div class="col-12 small mt-1">
            Se informados, os números regionais serão exibidos no plantão ao invés do número geral.
            Se estiverem em branco aqui e no número geral, será usado o número pessoal do membro.
        </div>
    </x-form.control-group>

    {{-- ── WhatsApp ── --}}
    <x-form.section heading="WhatsApp" />

    @php
        $whatsappConnected = ($whatsappStatus ?? 'close') === 'open';
        $whatsappDisabled = !$whatsappConnected ? ['disabled' => 'disabled'] : [];
    @endphp

    <x-form.select name="whatsapp_group_hlc" placeholder="Selecione o grupo"
        class="col-sm-6"
        :items="$whatsappGroups"
        :control-properties="$whatsappDisabled">
        Grupo WhatsApp Colih
    </x-form.select>

    <x-form.select name="whatsapp_group_gvp" placeholder="Selecione o grupo"
        class="col-sm-6"
        :items="$whatsappGroups"
        :control-properties="$whatsappDisabled">
        Grupo WhatsApp GVP
    </x-form.select>

    @if(!$whatsappConnected)
        <div class="col-12 small text-muted mt-1 px-2">
            <i class="fa fa-info-circle"></i> Conecte o WhatsApp nas configurações para poder selecionar grupos.
        </div>
    @endif

    {{-- ── Entrega de Material ── --}}
    <x-form.section heading="Entrega de Material" />

    <x-form.textarea name="delivery_address" :rows="3" class="col-md-12 col-lg-6">
        Endereço de entrega de material
    </x-form.textarea>

    {{-- ── Plantão ── --}}
    <x-form.section heading="Plantão" />

    <x-form.select name="oncall" :items="[0 => 'Não', 1 => 'Sim']"
        control-class="disableSelect2"
        class="col-sm-3 col-md-4 col-lg-3">
        Tem Plantão?
    </x-form.select>

    <div id="divOncall" class="col-12 col-sm-9 col-md {{ $region->oncall ? '' : 'd-none' }}">
        <div class="form-row">
            <x-form.select name="pvg_qty" :items="$qtyOncallSelect" class="col">
                Qtd. plantonistas GVP
            </x-form.select>
            <x-form.select name="hlc_qty" :items="$qtyOncallSelect" class="col">
                Qtd. plantonistas Colih
            </x-form.select>
        </div>
    </div>

    {{-- ── Mapa KML (só no edit) ──────────────────────────────── --}}
    @if($region->id)
        <x-form.control-group class="col-12 px-3 py-2 mx-0 mt-4 mb-1">
            <div class="col-12 font-weight-bold">Mapa personalizado</div>

            @if($isMultiRegionCity)
                <div class="col-sm-12 col-md-12 col-lg-12 mt-3">
                    <div id="divMap" class="col-12 {{ !$region->kml ? 'd-none' : '' }}">
                        <label class="col-12 col-6 p-0">Território da região</label>
                        <style type="text/css">
                            #map { width: 50%; height: 400px; }
                        </style>
                        @if($region->kml)
                            <div id="map"
                                data-appname='{{ $map['appname'] }}'
                                data-mapkey='{{ $map['mapkey'] }}'
                                data-mapid='{{ $map['mapid'] }}'
                                data-lat='{{ $map['lat'] }}'
                                data-lon='{{ $map['lon'] }}'>
                            </div>
                        @endif
                        <div id="divDestroyKml" class="{{ !$region->kml ? 'd-none' : '' }} my-3">
                            <span id="destroyKml"
                                data-url="{{ route('regions.destroyKml', ['id' => $region->id]) }}"
                                class="btn btn-info">
                                Excluir arquivo KML enviado
                            </span>
                        </div>
                    </div>

                    <div id="divKml" class="col-12 {{ $region->kml ? 'd-none' : '' }}">
                        <x-form.file-import
                            no-form="true"
                            title="Este recurso é útil para Colihs metropolitanas que dividem um único município em mais de uma região."
                            file-type=".kml,.kmz"
                            :route="route('congregations.importcreate')">
                            Antes de usar este recurso, gere um arquivo KML com os limites da região.<br/>
                            Um passo a passo para criar o arquivo KML está <a href="https://www.youtube.com/watch?v=n2TZf13OEU0" target="_blank">aqui</a>.
                            <div class="w-100 mt-2"></div>
                            Após gerar o arquivo, clique em <em>Selecione o arquivo</em> abaixo e aponte para onde o
                            arquivo foi gravado, daí clique em <strong>Salvar</strong>.
                        </x-form.file-import>
                        <div class="w-100 pt-3"></div>
                    </div>
                </div>
            @else
                <div class="col-12 my-2 mx-2">
                    <i class="fas fa-exclamation-triangle"></i>
                    Não é possível definir um mapa personalizado para esta região, porque nenhuma cidade aparece em mais de uma região. <br/>
                    <em>Exemplo: Se a cidade de São Paulo consta da região Norte e Sul, é possível definir um mapa personalizado para cada região</em>
                </div>
            @endif
        </x-form.control-group>
    @endif

</x-form.body>

{{-- ── Cidades (só no edit) ── --}}
@if($region->id)
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-city mr-1"></i> Cidades da Região
            </h6>
        </div>
        <div class="card-body">
            <div class="form-row align-items-end">
                <div class="col-sm-5 col-md-4 col-lg-3 mt-2">
                    <label class="col-12 p-0 mb-1 small font-weight-bold">Estado</label>
                    {!! Form::select("state_id", $states, $state, ['class' => "form-control", 'id' => 'choose-states']) !!}
                </div>
                <div class="col-sm-7 col-md-5 col-lg-4 mt-2">
                    <label class="col-12 p-0 mb-1 small font-weight-bold">Cidade</label>
                    {!! Form::select("city_id", $cities, null, ['class' => "form-control", 'id' => 'cities']) !!}
                </div>
                <div class="col-sm-auto mt-2">
                    {!! Form::button('<i class="fas fa-plus mr-1"></i> ADICIONAR', ['class' => 'btn btn-info', 'id' => 'add-city-region']) !!}
                </div>
            </div>

            <div class="table-responsive mt-4">
                @if(isset($region->cities) && $region->cities->count() > 0)
                <table class="table table-sm table-hover mb-0" id="list-cities">
                    <thead class="thead-light">
                        <tr>
                            <th>Estado</th>
                            <th>Cidade</th>
                            <th class="text-center" style="width:60px"></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($region->cities as $regioncity)
                        <tr id="tr{{ $regioncity->city_id }}">
                            <td>{{ $regioncity->state->state }}</td>
                            <td>{{ $regioncity->city->city }}</td>
                            <td class="text-center">
                                <a href="#deleteCityRegionModal"
                                    class="delete-city-region city-exists text-danger"
                                    data-regioncity-id="{{ $regioncity->id }}"
                                    data-city-id="{{ $regioncity->city_id }}"
                                    data-toggle="modal"
                                    data-placement="top" data-tooltip="tooltip" title="Remover cidade">
                                    <i class="fa fa-trash"></i>
                                </a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                @else
                <table class="table table-sm table-hover mb-0 d-none" id="list-cities">
                    <thead class="thead-light">
                        <tr>
                            <th>Estado</th>
                            <th>Cidade</th>
                            <th class="text-center" style="width:60px"></th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
                <div class="text-center text-muted py-4" id="list-cities-empty">
                    <i class="fas fa-city fa-2x mb-2"></i>
                    <p class="mb-0">Nenhuma cidade adicionada. Selecione estado e cidade acima e clique em <strong>ADICIONAR</strong>.</p>
                </div>
                @endif
            </div>
        </div>
    </div>
@endif

@include('components.delete.city-region')
@endsection