@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>

         <!-- Begin Page Content -->
         <div class="container-fluid">

<!-- Page Heading -->
<h1 class="h3 mb-2 text-gray-800">Edit Sub Admin</h1>
<!-- DataTales Example -->
<div class="innerpagedetails 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>Edit Sub Admins</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.update')}}" enctype="multipart/form-data" >@csrf 
        <input type="hidden" name="user_id" id="user_id" value="{{$user->id}}">
       <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="{{ $user->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="exampleFormControlInput1" disabled placeholder="Enter Email" value="{{ $user->email }}" required>
  </div>

</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="{{ $user->phone }}" required>
  
    <!-- <input type="text" class="form-control" name="phone"  id="exampleFormControlInput1" placeholder="Rider Phone" required> -->
  </div>

</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)
                    @if ($accessiblePages->contains('page_id', $page->id))
                        <li class="list-group-item active" data-page-id="{{$page->id}}">{{$page->name}}</li>
                    @else
                        <li class="list-group-item" data-page-id="{{$page->id}}">{{$page->name}}</li>
                    @endif
                @endforeach
            </ul>
        </div>
        <div class="col-md-8">
            <h4>Accessed Pages:</h4>
            <div id="selected-pages" class="border p-3">
                <!-- Initially selected pages will be displayed here -->
                @foreach($accessiblePages as $page)
                    <div data-page-id="{{$page->pages->id}}">
                        {{$page->pages->name}}
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>


<div class="col-lg-12 mt-3">
       <div class="form-group">
        <button  class="btn-gazna" style="height:50px;font-size:14px;" type="button" id="submit-button">Update</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() {
   // Define a Map to store selected pages
const selectedPages = new Map();

// Initially selected pages from the HTML
$('#selected-pages div').each(function() {
    const pageId = $(this).data('page-id');
    const pageName = $(this).text();
    selectedPages.set(pageId, pageName);
});

// Handle page selection in the "Provide Page Access" section
$('#page-list li').click(function() {
    const page = $(this).text();
    const pageId = $(this).data('page-id');
    console.log({selectedPages});

    if (selectedPages.has(pageId)) {
        // If the page with the same pageId is already selected, remove it
        selectedPages.delete(pageId);
        // You may also want to remove it from the UI (if it was previously added)
        $('#selected-pages div[data-page-id="' + pageId + '"]').remove();
        $(this).removeClass('active');
    } else {
        // Add the page to the selectedPages Map
        selectedPages.set(pageId, page);
        $(this).addClass('active');
    }

    updateSelectedPages();
    // Update the server via AJAX

});



// 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 phone = $('#phone').val();
            const user_id = $('#user_id').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.update')}}", // Update this URL with the actual route
                type: 'POST',
                data: { pages: pagesToSend ,name:name,user_id:user_id,phone:phone},
                success: function(response) {
                   
                    // 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 updated 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>


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