@include('Admin.layouts.app')
@include('Admin.layouts.sidebar')
@section('title', 'Sub Admin')
<style>
    /* Loader container styles */
    #loader-container {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.7);
        z-index: 9999;
    }

    /* Loader styles */
    #loader {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 4px solid #f3f3f3;
        border-top: 4px solid #3498db;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        animation: spin 2s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
         <!-- Begin Page Content -->
         <div class="container-fluid">

<!-- Page Heading -->
<h1 class="h3 mb-2 text-gray-800">Add Sub Admin</h1>
<!-- DataTales Example -->
<div class="card shadow mb-4">
     <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary"><a href="{{route('admin.subadmins')}}"><i class="fa fa-chevron-left"></i></a>Add Sub Admin</h6>
    </div> 
  
    <div class="card-body">
      @if(Session::has('success'))
    <div class="alert alert-success">
    {{Session::get('success')}}
    </div>
    @endif

   
       <form method="post" action="{{route('admin.subadmin.add')}}" enctype="multipart/form-data" >@csrf 
       <div class="row">
       <div class="col-sm-6">
       <div class="form-group">
    <label for="exampleFormControlInput1">Name</label>
    <input type="text" class="form-control" name="name"  id="name" value="{{ old('name') }}" placeholder="Enter Name" required>
  </div>
</div>
<div class="col-sm-6">
       <div class="form-group">
    <label for="exampleFormControlInput1">Email</label>
    <input type="email" class="form-control" name="email"  id="email" placeholder="Enter Email" value="{{ old('email') }}" required>
  </div>
  @error('email')
        <span class="text-danger">{{ $message }}</span>
    @enderror
</div>     

<div class="col-sm-6">
       <div class="form-group">
    <label for="exampleFormControlInput1">Phone</label>
    <input type="tel" id="phone" class="form-control" name="phone" placeholder="Enter the rest of the number" value="{{ old('phone') }}" required>
    <script>
            const phoneInput = document.getElementById("phone");
            
            // Set the initial value of the input field to "966"
            phoneInput.value = "966";
            
            // Listen for the "input" event to prevent removing "966"
            phoneInput.addEventListener("input", function() {
                if (!phoneInput.value.startsWith("966")) {
                    phoneInput.value = "966";
                }
            });
        </script>
    <!-- <input type="text" class="form-control" name="phone"  id="exampleFormControlInput1" placeholder="Rider Phone" required> -->
  </div>
  @error('phone')
        <span class="text-danger">{{ $message }}</span>
    @enderror
</div>   


<div class="container mt-5">
    <div class="row">
        <div class="col-md-4">
            <h4>Provide Page Access:</h4>
            <ul id="page-list" class="list-group">
                @foreach($pages as $page)
                <li class="list-group-item" data-page-id="{{$page->id}}">{{$page->name}}</li>
               @endforeach
                <!-- Add more pages here -->
            </ul>
        </div>
        <div class="col-md-8">
            <h4>Accessed Pages:</h4>
            <div id="selected-pages" class="border p-3">
                <!-- Selected pages will be displayed here -->
            </div>
        </div>
    </div>
</div>

<div class="col-lg-12 mt-3">
       <div class="form-group">
        <button  id="submit-button" class="btn-gazna" style="height:50px;font-size:14px;" type="button">Add</button>
</div>
</div>
</div>
</form>
    </div>
</div>

</div>
<!-- /.container-fluid -->
    </div>
    <!-- Add a loader element to your HTML -->
    <div id="loader-container">
    <div id="loader"></div>
</div>
    <!-- End of Main Content -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function() {
 // Store selected pages and their IDs
 const selectedPages = new Map();

// Handle page selection
$('#page-list li').click(function() {
    const page = $(this).text();
    const pageId = $(this).data('page-id');
    if (selectedPages.has(pageId)) {
        selectedPages.delete(pageId);
        $(this).removeClass('active');
    } else {
        selectedPages.set(pageId, page);
        $(this).addClass('active');
    }
    updateSelectedPages();
});

// Update the selected pages box
function updateSelectedPages() {
    const selectedPagesArray = Array.from(selectedPages.values());
    $('#selected-pages').html(selectedPagesArray.join('<br>'));
}
        // Handle button click to send data to the controller
        $('#submit-button').click(function(e) {
            e.preventDefault();
              // Show the loader during the AJAX request
      
            // Convert the Map to an array of objects for sending to the controller
            const pagesToSend = Array.from(selectedPages.keys());
            console.log({pagesToSend});
            const name = $('#name').val();
            const email = $('#email').val();
            const phone = $('#phone').val();
            // Send data to the Laravel controller using AJAX
            $.ajaxSetup({
 headers: {
 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
 }
 });
 $(document).on('ajaxStart', function() {
    $('#loader-container').show();
});

$(document).on('ajaxStop', function() {
    $('#loader-container').hide();
});
            $.ajax({
                url: "{{route('admin.subadmin.add')}}", // Update this URL with the actual route
                type: 'POST',
                data: { pages: pagesToSend ,name:name,email:email,phone:phone},
                success: function(response) {
                     // Reload the page
                    // Handle the response from the controller if needed
                    // console.log(response.errors.email);
             if(response.success){
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: 'Sub Admin has been added Successfully.',
                    }).then(function(){
                        window.location.href = "{{route('admin.subadmins')}}";
                    });
                
                }else if(response.errors.email){
                    Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text:response.errors.email ,
                });
                }
                else if(response.errors.phone){
                    Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text:response.errors.phone ,
                });
                }  else if(response.errors.name){
                    Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text:response.errors.name,
                });
                }
                },
                error: function(error) {

                  
                    Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'An error occurred while adding sub admin.',
                });
                }
            });
        });
    });
</script>

</body>
</html>








@include('Admin.layouts.footer')
@include('Admin.layouts.modal')