@extends('system.administrator.config.index')

@section('css')
<style>
    .pac-container {
        z-index: 10000 !important;
    }
</style>
@endsection

@section('subcontent')
<div class="row mt-1 mr-3 ml-3">
    <div class="col p-0">
        @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{session('success')}}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        @endif
        @if(session('fail'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{session('fail')}}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        @endif
        <div class="card shadow">
            <div class="card-header border-0">
                <div class="row align-items-center">
                    <div class="col-8">
                        <h3 class="mb-0">Recargos por cambio de ciudad</h3>
                    </div>
                    <div class="col-4 text-right">
                        <!-- <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#modalCrearRegla">Añadir regla</button> -->
                    </div>
                </div>
            </div>
            <div class="card-body">
                <ul class="list-group">
                    <li class="list-group-item">
                        <form action="/administrator/configuracion/addCity" method="post">
                            @csrf
                            <div class="row align-items-center">
                                <div class="col">
                                    <div class="form-group mb-0">
                                        <label>Ciudad</label>
                                        <input required type="text" class="form-control" id="findCountry" name="city">
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="form-group mb-0">
                                        <label>Recargo</label>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">$</span>
                                            </div>
                                            <input required type="number" class="form-control" name="value" min="0">
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <button class="btn btn-success btn-block">Agregar</button>
                                </div>
                            </div>
                        </form>
                    </li>
                </ul>
                <div class="table-responsive mt-2">
                    <table class="table align-items-center table-flush">
                        <thead class="thead-light text-center">
                            <tr>
                                <th>Ciudad</th>
                                <th>Recargo</th>
                                <th>Estado</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody class="text-center">
                            @foreach($cities as $city)
                            <tr id="{{$city->id}}">
                                <td>{{$city->name}}</td>
                                <td>${{number_format($city->extra)}}</td>
                                <td>
                                    <span class="badge badge-{{Config::get('const.states')[$city->state]['type']}}">{{Config::get('const.states')[$city->state]['name']}}</span>
                                </td>
                                <td>
                                    <button type="button" class="btn btn-warning btn-icon-only btnEditCity">
                                        <span class="btn-inner--icon"><i class="fas fa-pencil-alt"></i></span>
                                    </button>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('modals')
<div class="modal fade" id="modalEditCity" tabindex="-1" role="dialog" aria-labelledby="modal-default" aria-hidden="true">
    <form action="/administrator/configuracion/city/edit" method="post">
        @csrf
        <input type="hidden" id="idCity" name="id">
        <div class="modal-dialog modal- modal-dialog-centered modal-" role="document">
            <div class="modal-content modal-sm">
                <div class="modal-header">
                    <h6 class="modal-title" id="modal-title-default">Editar ciudad</h6>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group mb-2">
                        <label>Ciudad</label>
                        <input type="text" class="form-control" id="findCountryEdit" name="city">
                    </div>
                    <div class="form-group mb-2">
                        <label>Recargo</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text">$</span>
                            </div>
                            <input type="number" class="form-control" name="value" min="0" id="editRecargo">
                        </div>
                    </div>
                    <div class="form-group mb-2">
                        <label>Estado</label>
                        <select name="state" class="form-control" id="editState">
                            <option value="1">Activo</option>
                            <option value="2">Inactivo</option>
                            <option value="3">Papelera</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">Guardar</button>
                    <button type="button" class="btn btn-link  ml-auto" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection


@section('js')
<script>
    function initMap() {

        autocompleteAddress = new google.maps.places.Autocomplete(
            document.getElementById('findCountry'), {
                types: ['(cities)'],
                componentRestrictions: {
                    country: "CO"
                },
                fields: ['address_component'],
            }
        );
        autocompleteAddress.addListener('place_changed', function() {
            let place = autocompleteAddress.getPlace()
            $('#findCountry').val(place.address_components[0].long_name)
        });

        autocompleteAddressEdit = new google.maps.places.Autocomplete(
            document.getElementById('findCountryEdit'), {
                types: ['(cities)'],
                componentRestrictions: {
                    country: "CO"
                },
                fields: ['address_component'],
            }
        );
        autocompleteAddressEdit.addListener('place_changed', function() {
            let place = autocompleteAddressEdit.getPlace()
            $('#findCountryEdit').val(place.address_components[0].long_name)
        });
    }

    $('.btnEditCity').on('click', function() {
        let id = $(this).parents('tr').attr('id')
        $.ajax({
            type: "get",
            url: "/administrator/configuracion/city/get",
            data: {
                id: id
            },
            dataType: "json",
            success: function(response) {
                console.log(response)
                $('#findCountryEdit').val(response.data.name)
                $('#idCity').val(response.data.id)
                $('#editRecargo').val(response.data.extra)
                $('#editState option[value=' + response.data.state + ']').attr('selected', true)
                $('#modalEditCity').modal()
            }
        });
    })
</script>
@endsection