@extends('layouts.app')

@section('content')
    <div class="container pt-0 pb-5">
        <div class="row justify-content-center">
            <div class="col-sm-12 col-md-8">
                <form enctype="multipart/form-data" method="POST" action="{{ route('store-net') }}">
                    @csrf
                    <div class="card">
                        <div class="card-header">{{__('home.locate_net')}}</div>
                        <div class="card-body">
                            <div class="row">
                                <div class="form-group col-md-6 col-sm-12">
                                    <label class="col-form-label" for="name">{{__('home.net_name')}}</label>
                                    <!--<input type="text" class="form-control" name="name" value="{{ old('name') }}" placeholder="{{__('home.net_name_help')}}" required>-->
                                    <select class="custom-select" name="name" id="name">
                                        <option>Lost Fishing Gear<option>
                                        <option>Shipwreck<option>
                                        <option>Container<option>
                                        <option>Rock<option>
                                        <option>Other Obstacle<option>
                                    </select>
                                </div>
                                <div class="form-group col-md-6 col-sm-12">
                                        <label class="col-form-label" for="depth">{{__('home.net_depth')}} *</label>
                                        <input type="number" class="form-control" name="depth" value="{{ old('depth') }}" placeholder="{{__('home.net_depth_help')}}" required>
                                    </div>
                                <div class="form-group col-12">
                                    <label class="col-form-label" for="description">{{__('home.net_description')}}</label>
                                    <input type="text" class="form-control" name="description" value="{{ old('description') }}" placeholder="{{__('home.net_description_help')}}">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <legend>{{__('home.fao_zone')}}</legend>
                                </div>
                                <div class="form-group col-md-4 col-sm-12">
                                    <label class="col-form-label" for="area">{{__('home.area')}}</label>
                                    <select class="custom-select" name="area" id="area">
                                         <option value=""></option>
                                        @foreach ($areas as $area)
                                            <option value="{{$area->id}}" data-desc="{{$area->description}}">{{$area->name}} - {{$area->description}}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group col-md-4 col-sm-12">
                                    <label class="col-form-label" for="subarea">{{__('home.subarea')}}</label>
                                    <select class="custom-select"  name="subarea" id="subarea" data-route="{{ route('get-subareas') }}">
                                    </select>
                                </div>

                                <div class="form-group col-md-4 col-sm-12">
                                    <label class="col-form-label" for="division">{{__('home.division')}}</label>
                                    <select class="custom-select" name="division" id="division" data-route="{{ route('get-divisions') }}" required>
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <legend>
                                        {{__('home.coords')}}

                                        <button id="btn-location" type="button" class="btn btn-sm btn-warning"><i class="fas fa-map-marked-alt"></i> {{__('home.get_location')}}</button>
                                    </legend>
                                </div>
                                <div class="col-12">
                                     <!-- DMS -->
                                     <div class="custom-control custom-radio custom-control-inline">
                                        <input type="radio" id="coord-type-hex" name="coord-type" class="custom-control-input" value="hex" checked>
                                        <label class="custom-control-label" for="coord-type-hex">{{__('home.hexadecimals')}}</label>
                                    </div>

                                    <!-- decimales -->
                                    <div class="custom-control custom-radio custom-control-inline">
                                        <input type="radio" id="coord-type-dec" name="coord-type" class="custom-control-input" value="dec" >
                                        <label class="custom-control-label" for="coord-type-dec">{{__('home.decimals')}}</label>
                                    </div>

                                </div>
                            </div>
                            <div class="row py-2" id="hex-coords">
                                <div class="form-group col-12">
                                    <table>
                                        <thead>
                                            <tr>
                                                <td></td>
                                                <td>{{__('home.degrees')}}</td>
                                                <td>{{__('home.minutes')}}</td>
                                                <td>{{__('home.seconds')}}</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>{{__('home.latitude')}}</td>
                                                <td><input id="lat-degrees" type="number" step="1" class="degrees-input form-control" name="lat-degrees" value="" ></td>
                                                <td><input id="lat-minutes" type="number" step="1" class="degrees-input form-control" name="lat-minutes" value="" ></td>
                                                <td><input id="lat-seconds" type="number" step="0.01" class="degrees-input form-control" name="lat-seconds" value="" ></td>
                                            </tr>
                                            <tr>
                                                <td>{{__('home.longitude')}}</td>
                                                <td><input id="long-degrees" type="number" step="1" class="degrees-input form-control" name="long-degrees" value="" ></td>
                                                <td><input id="long-minutes" type="number" step="1" class="degrees-input form-control" name="long-minutes" value="" ></td>
                                                <td><input id="long-seconds" type="number" step="0.01" class="degrees-input form-control" name="long-seconds" value="" ></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div class="row py-2" id="dec-coords">
                                <div class="form-group col-md-6 col-sm-12">
                                    <label class="col-form-label" for="lat">{{__('home.latitude')}}</label>
                                    <input id="lat" name="lat" type="number" step="0.00000001"  class="form-control dec-input @error('lat') is-invalid @enderror" value="{{ old('lat') }}" required>
                                    @error('lat')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="form-group col-md-6 col-sm-12">
                                    <label class="col-form-label" for="long">{{__('home.longitude')}}</label>
                                    <input id="long" name="long" type="number" step="0.00000001"  class="form-control dec-input @error('long') is-invalid @enderror" value="{{ old('long') }}" required>
                                    @error('long')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12 text-right">

                                </div>
                            </div>
                        </div>

                        <div class="card-footer">
                            <div class="row">
                                <div class="col-12 text-right">
                                    <button type="submit" class="btn btn-primary"><i class="fas fa-plus-circle"></i> {{__('home.add_net')}}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('javascript')
    <script>
        $(document).ready(function() {
            getSubareas();

            $('#hex-coords').show();
            $('#dec-coords').hide();
            $('[name="coord-type"').change(function() {
                if (this.value == 'dec') {
                    $('#hex-coords').hide();
                    $('#dec-coords').show();
                }
                else {
                    $('#hex-coords').show();
                    $('#dec-coords').hide();
                }
            });

            $( ".degrees-input" ).change(function() {
                setDegCoord();
            });

            $( ".dec-input" ).change(function() {
                setHexCoord();
            });

            $('#area').change(function() {
                getSubareas();
            });

            $('#subarea').change(function() {
                getDivisions();
            });
        });

        $('#btn-location').click(function() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    var latval = position.coords.latitude.toFixed(8);
                    var lngval = position.coords.longitude.toFixed(8);
                    $('#lat').val(latval);
                    $('#long').val(lngval);
                    setHexCoord();
                }, function() {
                    alert("No se puede localizar");
                });
            } else {
                alert("Tu dispositivo no permite localización");
            }
        });

        function setHexCoord() {
            var point = new GeoPoint(parseFloat($('#long').val()), parseFloat($('#lat').val()));

            var longArray = point.getLonDeg().split(" ");
            $('#long-degrees').val(longArray[0]);
            $('#long-minutes').val(longArray[1]);
            $('#long-seconds').val(longArray[2]);

            var latArray = point.getLatDeg().split(" ");
            $('#lat-degrees').val(latArray[0]);
            $('#lat-minutes').val(latArray[1]);
            $('#lat-seconds').val(latArray[2]);
        }

        function setDegCoord() {
            var longString = $('#long-degrees').val() + "° " + $('#long-minutes').val() + "' " + $('#long-seconds').val() + '"';
            var latString = $('#lat-degrees').val() + "° " + $('#lat-minutes').val() + "' " + $('#lat-seconds').val() + '"';

            var point = new GeoPoint(longString, latString);

            $('#long').val(point.getLonDec().toFixed(8));
            $('#lat').val(point.getLatDec().toFixed(8));
        }

        function getSubareas() {
            var route = document.getElementById('subarea').getAttribute('data-route');
            var e = document.getElementById('area');

            var areaId = e.options[e.selectedIndex].value;

            if(areaId == '') {
                $('#subarea').html('');
                $('#division').html('');
            } else {
                $.get(route,{ area_id: areaId },function(match){
                    var select = document.getElementById('subarea');
                    select.options.length = 0;

                    $.each(match,function(i,val){
                        var option = new Option(val.name + ' - ' + val.description, val.id);
                        option.setAttribute("data-desc", val.description);
                        select.options[select.options.length] = option;
                    });

                    select.selectedIndex = 0;

                    getDivisions();
                });
            }
        }

        function getDivisions(){
            var route = document.getElementById('division').getAttribute('data-route');
            //comprobar si no esta coghiendo un valor x defecto
            var e = document.getElementById('subarea');
            var subareaId = e.options[e.selectedIndex].value;

            $.get(route,{subarea_id:subareaId},function(match){

                var select = document.getElementById("division");
                select.options.length = 0;

                $.each(match,function(i,val){
                    var option = new Option(val.name, val.id);
                    select.options[select.options.length] = option;
                });

                select.selectedIndex = 0;
            });
        }

    </script>
@endpush