@extends('layouts.idara.panel')


@section('content')

@include('backend.partials.import')

@include('backend.partials.features')

<section>

    <div class="card mt-4">
        <h5 class="card-header">Ajouter une coordonnées</h5>
        <div class="card-body">
            
            @if (count($errors) > 0)
                <div class="alert alert-danger">
                    <strong>Whoops!</strong> Some problems with your input.<br><br>
                    <ul>
                        @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
                @endif

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

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


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



                        <option disabled selected hidden>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="" class="form-control" name="coordonnees" placeholder="" required>


                </div>


                <div class="form-group  mt-4" id="hiddenDivInput">

                    <label><strong>Adresse</strong> </label>
                    
                    <input id="hiddenDivInput" type="" class="form-control" name="details" placeholder="Cité..." >


                </div>




                <div style="margin-top:10px" class="mb-4">
                    <a  class="btn" target="blank" href="https://www.google.com/maps/place/Alger/@36.7391355,3.0692907,12z/data=!3m1!4b1!4m6!3m5!1s0x128fb26977ea659f:0x4231102d38a36f49!8m2!3d36.753768!4d3.0587561!16zL20vMHJ0dg" 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=Type]").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: 0000000000"
                    , 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: 021 ..."
                    



                });

            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: "text"
                    , class: "some-other-class form-control"

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




                });

            else
                $input.removeAttr("class").attr({
                    type: "url"
                    , 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";
            document.getElementById("hiddenDivInput").style.visibility = "visible";


        } else {
            document.getElementById("hiddenDiv").style.visibility = "hidden";
            document.getElementById("hiddenDivInput").style.visibility = "hidden";

        }


    }

</script>

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

    }

    input {

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

    }

</style>

@endsection