@extends('layouts.dashboard')
<style>
    .email-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 5px 10px;
      border: 1px solid #ccc;
      margin: 5px 0;
      border-radius: 4px;
      background: #f9f9f9;
    }
    .email-item button {
      background: #ff4d4d;
      color: white;
      border: none;
      padding: 5px 10px;
      border-radius: 4px;
      cursor: pointer;
    }
    .email-item button:hover {
      background: #e60000;
    }
  </style>
@section('content')
    <div class="breadcrumbs">
        <div class="col-sm-4">
            <div class="page-header float-left">
                <div class="page-title">
                    <h1>Add Emails</h1>
                </div>
            </div>
        </div>
    </div>

    <div class="content mt-3">

        @if (Session::has('message'))
            <div class="col-sm-12">
                <div class="alert  {{ Session::get('alert-class', 'alert-info') }} alert-dismissible fade show"
                    role="alert">
                    {{ Session::get('message') }}
                </div>
            </div>
        @endif

        <div class="animated fadeIn">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header"><strong></strong>
                            <button type="button" class="btn btn-outline-primary btn-sm float-right">
                                <a href="{{ route('global-parameter.index') }}"  class="text-dark"> <i class="fa fa-backward"></i>&nbsp; Back </a></button>
                        </div>
                        <div class="card-body card-block">
                            @php $route = route('global-parameter.add-email-config'); @endphp
                            @include('admin.global-parameters._form',['merchants'=>$merchants])
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@push('scripts')

<script>
   $(document).ready(function () {
      const emailData = []; // To store all email addresses

      // Add email on pressing Enter
      $('#emailInput').on('keypress', function (e) {
        if (e.key === 'Enter') {
          e.preventDefault();
          const email = $(this).val().trim();

          // Validate email
          const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
          if (email && emailRegex.test(email)) {
            // Check for duplicate emails
            if (emailData.includes(email)) {
              alert('This email is already in the list.');
              return;
            }

            // Add email to list and array
            emailData.push(email);
            const emailItem = `
              <div class="email-item" data-email="${email}">
                <span>${email}</span>
                <button class="delete-btn"><i class="fa fa-trash"></i></button>
              </div>
            `;
            $('#emailList').append(emailItem);

            // Update hidden input value
            updateHiddenInput();

            $(this).val(''); // Clear the input
          } else {
            alert('Please enter a valid email address');
          }
        }
      });

      // Delete email
      $('#emailList').on('click', '.delete-btn', function () {
        const emailDiv = $(this).closest('.email-item');
        const email = emailDiv.data('email');

        // Remove email from array and DOM
        emailData.splice(emailData.indexOf(email), 1);
        emailDiv.remove();

        // Update hidden input value
        updateHiddenInput();
      });

      // Update the hidden input value
      function updateHiddenInput() {
        $('#emails').val(JSON.stringify(emailData));
      }
    });
  </script>

@endpush