@extends('layout')
@section('content')
    <!-- begin::main content -->
    <style>
  /* Styles for tabs */
  .tab {
    display: inline-block;
    padding: 12px 26px;
    cursor: pointer;

    background-color: #E6EAED;
    margin-right: -4px; /* Remove spacing between tabs */
  }

  /* Style for highlighted tab */
  .tab.active {
    background-color: white;
  }

  /* Content area style */
  .tab-content {

    padding: 20px;
    border-radius: 0 0 5px 5px;
    display: none; /* Hide all content areas by default */
  }

  /* Show active content area */
  .tab-content.active {
    display: block;
  }
  .form-group {
    margin-bottom: 1rem;
    margin-bottom: 30px !important;
}
.form-group input, .form-group select{
    height:42px;
    padding-top:10px 25px !important;
}
.form-group label, .tab{
    font-size:13px !important;
}
.company-save-btn{
    position:fixed;
    bottom:0;left:250px;
    background-color:white;
    border-top:1px solid #ccc;
}
.inner-border{
    border:-2px solid #ddd !important;
}
@media only screen and (max-width: 768px) {
    .company-save-btn{
    position:fixed;
    bottom:0;left:0px;
    background-color:white;
    border-top:1px solid #ccc;
}
}
</style>

    <main class="main-content px-0">

        <div class="container">

            <!-- begin::page header -->
            <div class="page-header m-0 border-0">
                <h3> {{__('message.create')}} Link </h3>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ asset('dashboard') }}">{{__('message.dashboard')}}</a></li>
                        <li class="breadcrumb-item" aria-current="page"><a href="{{ asset('share-links') }}">Links</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{__('message.add')}}</li>
                    </ol>
                </nav>
            </div>
            <!-- end::page header -->

            <div class="row pb-5">
                <div class="col-md-12">

                    <x-flashMessage />
                    <div class="card border-0 py-5">

                        <div class="card-body py-0">
                        @php

                            $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";


                            $host = $_SERVER['HTTP_HOST'];


                            $uri = $_SERVER['REQUEST_URI'];

                            $name = $users->name;
                            $modified_name = "";
                            if (strpos($name, ' ') !== false)
                            {
                                $modified_name = str_replace(' ', '_', $name);
                            }
                            else
                            {

                                $modified_name = $name;
                            }


                        @endphp
                                <span id="show_message"></span>
                            <form action="#" id="test_form" method="post">
                                <div class="row">
                                    <div class="col-md-6 py-3 pt-5">
                                        @csrf
                                        <div class="form-group d-flex justify-content-between align-items-center ">
                                            <label for="name" class="col-md-4"> Link For</label>
                                            <div class="col-md-8 px-0">
                                                <input type="text" required class="form-control end_point" name="slug" id="slug" >
                                                @if ($errors->has('slug'))
                                                    <div class="error">
                                                        {{ $errors->first('slug') }}
                                                    </div>
                                                @endif
                                            </div>


                                        </div>
                                        <div class="form-group d-flex justify-content-between align-items-center ">
                                            <label for="name" class="col-md-8">Link : {{"https://leadai.co.in/".$modified_name}}</label>
                                            <div class="col-md-4 px-0">
                                                <input type="text" class="form-control url-input" name="url" id="url" >
                                                @if ($errors->has('url'))
                                                    <div class="error">
                                                        {{ $errors->first('url') }}
                                                    </div>
                                                @endif
                                            </div>


                                        </div>
                                        <div class="form-group d-flex justify-content-between align-items-center ">
                                            <label for="name" class="col-md-4"> Select Branch</label>
                                            <div class="col-md-8 px-0">
                                                <select required class="form-control " name="branch_id" id="branch_id" >
                                                    <option selected disabled>--SELECT--</option>
                                                    @foreach($branches as $branch)
                                                        <option value="{{$branch->id}}">{{$branch->name}}</option>
                                                    @endforeach
                                                </select>
                                                @if ($errors->has('branch_id'))
                                                    <div class="error">
                                                        {{ $errors->first('branch_id') }}
                                                    </div>
                                                @endif
                                            </div>


                                        </div>
                                        <input type="hidden" class="form-control" name="full_url" id="full_url" >

                                    </div>


                                </div>
                                <input class="mb-3"  type="checkbox"  id="products" value="1"> Products
                                <input  class="mb-3" type="checkbox" id="sources"  value="1"> Sources
                                <input  class="mb-3" type="checkbox" id="profile_image"  value="1"> Profile Image
                                <div class="col-md-6" id="input_wrapper"></div>
                                <button id="save_btn" class="btn btn-success">Save</button>
                                <button id="add_btn" class="btn btn-primary">Add Row</button>


                                    {{-- <div class="py-5" style="z-index:50;position:absolute" >
                                        <div class="py-3 px-5 w-100 company-save-btn " >
                                            <button type="submit" class="btn btn-success-lux"><i class="fa fa-check"></i>&nbsp {{__('message.save')}}</button>
                                        </div>
                                    </div> --}}


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


                    {{-- <form id="test_form">
                        <div class="col-sm-12 col-md-12 col-lg-12">
                          <div id="input_wrapper"></div>
                          <button id="save_btn" class="btn btn-success">Save</button>
                          <button id="add_btn" class="btn btn-primary">Add Row</button>
                        </div>
                      </form> --}}



                </div>

            </div>

        </div>

    </main>
    <!-- end::main content -->
@endsection
@push('footer-script')
    <!-- begin::select2 -->
    <link rel="stylesheet" href="{{ asset('public/admin/vendors/select2/css/select2.min.css') }}" type="text/css">
    <script src="{{ asset('public/admin/vendors/select2/js/select2.min.js') }}"></script>
    <!-- end::select2 -->
    <script>

        $(document).ready(function() {
            $('#js-example-basic-roles').select2({});
            $('select').select2({});

            $(".end_point").on("input",function(){
                var end_point = $(this).val();
                $(".url-input").val("/"+end_point);

                var full_url = "{{asset('/').$modified_name}}";
                var full_url = full_url+"/"+end_point;
                $("#full_url").val(full_url);
            });

        });



        // add form


        $(document).ready(function() {
	var x = 0;
	$('#save_btn').show();

	$('#add_btn').click(function(e) {
  	e.preventDefault();
    appendRow(); // appen dnew element to form
    x++; // increment counter for form
    $('#save_btn').show(); // show save button for form
  });

	$('#input_wrapper').on('click', '.deleteBtn', function(e) {
  	e.preventDefault();
    var id = e.currentTarget.id; // set the id based on the event 'e'
    $('div[id='+id+']').remove(); //find div based on id and remove
    x--; // decrement the counter for form.

    if (x === 0) {
    	$('#save_btn').hide(); // hides the save button if counter is equal to zero
    }
  });

  $('#save_btn').click(function(e) {
  	e.preventDefault();

    var full_url = $('#full_url').val();
    var slug = $('#slug').val();
    var branch_id = $('#branch_id').val();

    const isCheckedProducts = $("#products").is(":checked");
    const isCheckedSources = $("#sources").is(":checked");
    const isCheckedProfileImage = $("#profile_image").is(":checked");


    var formData = $('#test_form').serializeObject(); // serialize the form
    var obj; //obj can be use to send to ajax call
    if(Array.isArray(formData.fn)) {
    	for(var i = 0; i < formData.fn.length; i++) {
      	obj = {};
        // set the obj for submittion
        obj.firstName = formData.fn[i];
        obj.lastName = formData.ln[i];
        // This object could be push into an array
        // console.log('object from form array ', obj);
      };
    } else {
    	obj = {};
      obj.firstName = formData.fn;
      obj.lastName = formData.ln;
    //   console.log('single obj from form ', obj);
    }


    $.ajax({

        type: "post",
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        data: {
            "formData": formData,
            "full_url":full_url,
            "isCheckedProducts":isCheckedProducts,
            "isCheckedSources":isCheckedSources,
            "isCheckedProfileImage":isCheckedProfileImage,
            "slug":slug,
            "branch_id":branch_id
        },
        url: "{{ asset('add-share-links') }}",
        dataType: "html",
        beforeSend:function()
        {
            $('#save_btn').attr("disabled",true);
            $('#save_btn').html("Wait...");
        },
        success: function(result)
        {
            $('#save_btn').attr("disabled",false);
            $('#save_btn').html("Save");
            console.log(result);

            var allData = JSON.parse(result);
            if(allData.message=="success")
            {
                $('#show_message').html(allData.data)
                setTimeout(function () {

                    location.reload();
                 }, 2500);


            }
            else
            {
                console.log("failed");
            }
        },
        error:function(xhr,error,status)
        {
            console.log(xhr);
        }

    });

    // console.log('object from form formData ', formData);
  });

  function appendRow() {
    $('#input_wrapper').append(
        '<div id="'+x+'" class="form-group" style="display:flex;">' +
          '<div>' +
            '<input type="text" id="'+x+'" class="form-control" name="fn" placeholder="Label"/>' +
          '</div>' +
          '<div>'+
          '<select class="form-control" id="'+x+'" name="ln"><option value="text">Textbox</option><option value="textarea">Textarea</option></select> &nbsp;&nbsp;'+
          '</div>' +
          '<div>'+
            '<button id="'+x+'" class="btn btn-danger pt-3  pb-2 deleteBtn"><i class="fa fa-trash fa-lg pb-1"></i></button>' +
          '</div>' +
      	'</div>');
  }

});

$.fn.serializeObject = function(asString) {
   var o = {};
   var a = this.serializeArray();
   $.each(a, function() {

       if($('#' + this.name).hasClass('date')) {
           this.value = new Date(this.value).setHours(12);
       }

       if (o[this.name] !== undefined) {
           if (!o[this.name].push) {
               o[this.name] = [o[this.name]];
           }
           o[this.name].push(this.value || '');
       } else {
           o[this.name] = this.value || '';
       }
   });
   if (asString) {
       return JSON.stringify(o);
   }
   return o;
};




    </script>
@endpush