@extends('layouts.app')

@section('sidebar')
@include('sidebar')
@stop
@section('content')
<div class="m-content">

    <div class="m-portlet m-portlet--full-height ">
        <div class="m-portlet__head">
            <div class="m-portlet__head-caption">
                
                <div class="m-portlet__head-title">
                    <h3 class="m-portlet__head-text">
                        {{$title}}
                    </h3>
                </div>

            </div>

            <div class="m-portlet__head-caption">
                

                <div class="m-portlet__head-title">
                    <h3 class="m-portlet__head-text">
                        <a href="/" class="btn btn-primary">Back To Home</a>
                    </h3>
                </div>
            </div>
        </div>
        <div class="m-portlet__body">

            <!--@if ($errors->any())-->
            <!--    <div style="color: red;">-->
            <!--        <strong>Validation Errors:</strong>-->
            <!--        <ul>-->
            <!--            @foreach ($errors->all() as $error)-->
            <!--                <li>{{ $error }}</li>-->
            <!--            @endforeach-->
            <!--        </ul>-->
            <!--    </div>-->
            <!--@endif-->
            
            @if(Session::has('success'))
                <div class="alert alert-success">
                    {!! Session::get('success') !!}
                </div>
            @endif

            @if(Session::has('error'))
                <div class="alert alert-danger">
                    {!! Session::get('error') !!}
                </div>
            @endif
            
            @if($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach($errors->all() as $err)
                            <li>{{ $err }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            
            @if(session('custom_errors'))
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach(session('custom_errors') as $key => $message)
                            <li>{{ $key }}: {{ $message }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            
           @if(session('matchUsers') && !empty(session('matchUsers')))
                <div class="form-group">
                    <label>Matched Subscribe Ids</label>
                    <textarea name="match_users" class="form-control" rows="10" readonly onclick="this.select();">{{ session('matchUsers') }}</textarea>
                </div>
            @endif

            
            
            
             <form class="m-form m-form--fit m-form--label-align-righ" method="post" action="{{ route('bulk.unsubscribe.copy.save') }}">
                @csrf
                <div class="form-group">
                    <textarea id="w3review" name="ac_details" class="form-control m-input" rows="30" cols="75">{{ old('ac_details') }}</textarea>
                </div>
        
                <div class="form-group">
                    <button type="submit" class="btn btn-primary" required>Submit</button>
                </div>
            </form>
    
        </div>

    </div>
</div>
@endsection

@section('script')
{{ Html::script('custom/datatables/datatables.bundle.js') }}
<script>
    // $(document).ready(function () {
    //     $('#unsubscribeForm').on('submit', function (e) {
    //         e.preventDefault();

    //         $('#error_ac_details').text('');
    //         $('#successMessage').addClass('d-none').text('');

    //         const formData = new FormData(this);

    //         $.ajax({
    //             url: "{{ route('bulk.unsubscribe.copy.save') }}",
    //             method: "POST",
    //             data: formData,
    //             processData: false,
    //             contentType: false,
    //             success: function (response) {
    //                     if (response.matchUsers) {
    //                         // Directly use response.matchUsers since it's already an object
                    
    //                         var matchUsers = response.matchUsers;  // No need for JSON.parse
                    
    //                         // Initialize or update DataTable
    //                         $('#matchUsersTable').DataTable({
    //                             data: matchUsers,
    //                             destroy: true,  // Destroy the previous DataTable instance
    //                             columns: [
    //                                 {
    //                                     data: 'externalAccount',
    //                                     render: function (data) {
    //                                         return `<input type="checkbox" class="account-checkbox" name="selected_accounts[]" value="${data}">`;
    //                                     }
    //                                 },
    //                                 { data: 'externalAccount' },
    //                                 { data: 'externalName', defaultContent: '-' },
    //                                 { data: 'equity', defaultContent: '-' },
    //                                 { data: 'refs.provider.name', defaultContent: '-' },
    //                                 { data: 'refs.server.name', defaultContent: '-' },
    //                             ]
    //                         });
                    
    //                         // Show the table after submission
    //                         $('#responseTable').show();  // Assuming your table container has this ID
    //                     }
    //                     $('#unsubscribeForm')[0].reset();
    //                 },
    //             error: function (xhr) {
    //                 if (xhr.responseJSON && xhr.responseJSON.errors) {
    //                     const errors = xhr.responseJSON.errors;
    //                     if (errors.ac_details) {
    //                         $('#error_ac_details').text(errors.ac_details);
    //                     }
    //                 } else if (xhr.responseJSON && xhr.responseJSON.custom_errors) {
    //                     let allErrors = Object.values(xhr.responseJSON.custom_errors).join(' | ');
    //                     $('#error_ac_details').text(allErrors);
    //                 } else {
    //                     $('#error_ac_details').text('An unexpected error occurred.');
    //                 }
    //             }
    //         });
    //     });
    // });
</script>

  <script>
    const checkboxes = document.querySelectorAll('.account-checkbox');
    const unfollowBtn = document.getElementById('unfollowBtn');
    const selectedCountEl = document.getElementById('selectedCount');
    const selectAllCheckbox = document.getElementById('selectAll');

    function toggleAllCheckboxes(checked) {
        checkboxes.forEach(cb => cb.checked = checked);
        updateUnfollowButton();
    }

    function updateUnfollowButton() {
        const selected = document.querySelectorAll('.account-checkbox:checked').length;
        selectedCountEl.textContent = selected;

        // Show/hide Unfollow button
        if (selected > 0) {
            unfollowBtn.classList.remove('d-none');
        } else {
            unfollowBtn.classList.add('d-none');
        }

        // Sync header checkbox if all/none are selected
        const total = checkboxes.length;
        if (selected === total) {
            selectAllCheckbox.checked = true;
        } else {
            selectAllCheckbox.checked = false;
        }
    }

    // Attach change listener to individual checkboxes
    checkboxes.forEach(cb => {
        cb.addEventListener('change', updateUnfollowButton);
    });
</script>

@endsection