@extends('layouts.idara.panel')


@section('content')

@include('backend.partials.import')

@include('backend.partials.features')

<section>

    <div class="card">
        <h5 class="card-header">Ajouter une coordonnées</h5>
        <div class="card-body">

            <form action="{{url('contacts')}}" method="post" enctype="multipart/form-data">
                @csrf

                <div class="form-group Coordonnee " id="Coordonnee">


                    <label class="" for="exampleFormControlInput1"><strong>de coordonnées :</strong> </label>
                    <br>
                    <select onchange="optionCheck()" class="form-control" name="coorType" id="coorType" class="coordonnee" aria-describedby="validationServer04Feedback" style=" margin-bottom: 40px;" required>



                        <option>Vueillez selectionner une coordonnées</option>




                        @foreach ($coorTypes as $coorType)

                        @if($contactNull ==null)


                        <option value="{{ $coorType->id }}" {{ old('coorType') == $coorType->id  ? 'selected' : '' }}>{{ $coorType->type }}</option>
                        @elseif($contactNull !==null)

                        <option value="{{ $coorType->id }}" {{ old('coorType') == $coorType->id   ? 'selected' : '' }} {{$coorType->id== '3' ? 'disabled' : '' }}>{{ $coorType->type }}</option>


                        @endif

                        @endforeach


                    </select>


                </div>


                <div class="form-group  t_val">

                    <label><strong>Coordonnée</strong> </label>
                    <input type="text" class="form-control" name="coordonnees" placeholder="text" required>


                </div>


                <div style="margin-top:10px">
                    <a type="submit" class="btn" target="blank" href="https://www.google.com/maps/search/gg+maps+alger/@36.6968581,2.9521356,11z/data=!3m1!4b1" id="hiddenDiv" style=" background:yellow; border:1px; visibility:hidden;">

                        Clickez Ici <i class="fa-solid fa-map-location-dot"></i> </a></div>




                <div class="form-group add">
                    <button type="submit" class="btn btn-primary" value="Ajouter">Ajouter</button>

                </div>
            </form>
        </div>
    </div>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
    $(document).ready(function() {

        $("select[name=coorType]").on("change", function() {

            $value = $(this).val();
            $input = $(".t_val input");


            if ($value == 1)
                $input.removeAttr("class").attr({
                    type: "tel"
                    , class: "some-other-class form-control"

                    , placeholder: "Ex: 00-00-00-00-00"
                    , pattern: "[0-9]{2}[0-9]{2}[0-9]{2}[0-9]{2}[0-9]{2}"


                });
            else if ($value == 2)

                $input.removeAttr("class").attr({
                    type: "tel"
                    , class: "some-other-class form-control"

                    , placeholder: "Ex: 00-00-00-00-00"
                    , pattern: "[0-9]{2}[0-9]{2}[0-9]{2}[0-9]{2}[0-9]{2}"



                });

            else if ($value == 3)

                $input.removeAttr("class").attr({
                    type: "email"
                    , class: "some-other-class form-control"

                    , placeholder: "Ex: xxxx@gmail.com"

                });
            else if ($value == 4)

                $input.removeAttr("class").attr({
                    type: "url"
                    , class: "some-other-class form-control"

                    , placeholder: "https://goo.gl/maps/RpEVLKrSv549xcxb9"




                });

            else
                $input.removeAttr("class").attr({
                    type: "text"
                    , class: "some-other-class form-control"

                    , placeholder: "Ex: https://www.xxxxxx.net/"




                });




        })

    })

    function optionCheck() {
        var option = document.getElementById("coorType").value;




        if (option == 4) {
            document.getElementById("hiddenDiv").style.visibility = "visible";
        } else {
            document.getElementById("hiddenDiv").style.visibility = "hidden";
        }


    }

</script>

<style>
    label {
        margin-bottom: 20px;

    }

    input {

        width: 100%;
        border-radius: 3px;

    }

</style>

@endsection