@extends('admin.layouts.app')
<style>
    .swal-text {
        font-size: 16px;
        color: #333;
        margin-bottom: 10px;
    }

    .swal-list-container {
        max-height: 300px;
        overflow-y: auto;
        padding: 10px;
    }

    .swal-checkbox {
        margin-right: 10px;
        transform: scale(1.2);
    }

    .swal-org-name {
        font-size: 14px;
        color: #555;
    }

    .swal-popup {
        border-radius: 10px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }

    .swal-title {
        font-size: 18px;
        color: #4CAF50;
        font-weight: bold;
    }

    .swal-content {
        font-size: 14px;
        line-height: 1.6;
    }

    .swal-confirm-btn {
        background-color: #4CAF50;
        border-color: #4CAF50;
        color: white;
    }

    .swal-cancel-btn {
        background-color: #d33;
        border-color: #d33;
        color: white;
    }

    .list-group-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        margin-bottom: 5px;
        border: 1px solid #ddd;
        border-radius: 5px;
        background-color: #f9f9f9;
    }

    .list-group-item:hover {
        background-color: #f1f1f1;
    }
</style>
@push('title')
    <title>Organizations</title>
@endpush

@push('banner')
@endpush
@section('content')
@include('admin.layouts.include.message')

<div class="row justify-content-center">
  
    <div class="col-md-12">
        <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="card-title">Organizations</h4>
                        </div>
                        {{--  <div class="col-md-6">
                            <form class="" action="" method="get">
                                <div class="card-header">
                                    <div class="card-title">
                                        <button type="button" onclick="window.location.href='{{ route('users.index') }}'"
                                            class="btn btn-default btn-primary mr-2">Reset</button>
                                    </div>
                                    <div class=" mr-4">
                                        <div class="input-group input-group" style="width: 250px;">
                                            <input value="{{ Request::get('keyword') }}" type="text" name="keyword"
                                                class="form-control float-right" placeholder="Search">
                                            <div class="input-group-append">
                                                <button type="submit" class="btn btn-default ">
                                                    <i class="fas fa-search"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>  --}}
                        <div class="col-md-6">
                            <div class="text-right mb-2">
                                <!-- Add export buttons -->
                                <a href="{{ route('organizations.create') }}" class="btn btn-primary"><i class="bi bi-plus"></i>
                                    Create Organization</a>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive">
                        @if ($organizations->isNotEmpty())
                            <table class="table-striped table" id="tblExport">
                                <thead class="thead-dark">
                                    <tr>
                                        <th>#</th>
                                        <th>Name</th>
                                        <th>Short Name</th>
                                        <th>Office / Institute</th> 
                                        <th>Approved</th> 
                                        <th class="no-print">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($organizations as $organization)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td>{{ $organization->name }}</td>
                                            <td>{{ $organization->short_name }}</td>
                    
                                            {{-- Office / Institute column --}}
                                            <td>
                                                @if ($organization->office == 1)
                                                    <span class="badge bg-info text-dark">Office</span>
                                                  
                                                @elseif ($organization->institude == 1)
                                                    <span class="badge bg-success">Institute</span>
                                                @else
                                                    <span class="badge bg-secondary">N/A</span>
                                                @endif
                                            </td>         
                                            <td>
                                                @if ($organization->is_approved == 1)
                                                    <span class="badge bg-success">Approved</span>
                                                @else
                                                    <button type="button"
                                                            class="btn btn-warning btn-sm approve-btn"
                                                            data-id="{{ $organization->id }}">
                                                        Pending
                                                    </button>
                                                @endif
                                            </td>
                                                       
                    
                                            <td class="no-print">
                                                <a href="{{ route('organizations.edit', ['id' => $organization->id]) }}" class="btn btn-sm btn-primary">
                                                    <i class="bi bi-pencil"></i>
                                                </a>
                                                <a href="#" onclick="deleteOrganization({{ $organization->id }})" class="btn btn-sm btn-danger">
                                                    <i class="bi bi-trash"></i>
                                                </a>
                                                {{--  @if ($organization->is_approved == 1)  --}}
                                                <a href="#" onclick="openMergeModal({{ $organization->id }})"  id="merge-btn-{{ $organization->id }}" class="btn btn-sm btn-warning {{ $organization->is_approved == 1 ? '' : 'd-none' }}">
                                                    <i class="bi bi-arrow-repeat"></i> Merge
                                                </a>
                                            {{--  @endif                                              --}}
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        @else
                            <div class="alert alert-info" role="alert">
                                No records found.
                            </div>
                        @endif
                    </div>
                    
                    
                    <div class="pagination">
                         {{ $organizations->appends(request()->except('page'))->links('pagination::bootstrap-4') }}
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('customJs')
<script>
    function deleteOrganization(id) {
        var url = "{{ route('organizations.delete', 'ID') }}";
        var newUrl = url.replace('ID', id);
    
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: newUrl,
                    type: 'post',
                    data: {},
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        Swal.fire(
                            'Deleted!',
                            'The organization has been deleted.',
                            'success'
                        ).then(() => {
                            window.location.href = "{{ route('organizations.index') }}";
                        });
                    },
                    error: function(xhr, status, error) {
                        Swal.fire(
                            'Error!',
                            'Something went wrong while deleting.',
                            'error'
                        );
                    }
                });
            }
        });
    }
    
    $('.approve-btn').on('click', function () {
        const button = $(this);
        const orgId = button.data('id');
    
        Swal.fire({
            title: 'Are you sure?',
            text: "You want to approve this organization?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#198754',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, approve it!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '{{ route('organizations.approved') }}', 
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        id: orgId 
                    },
                    success: function (response) {
                        Swal.fire(
                            'Approved!',
                            'Organization has been approved.',
                            'success'
                        );
                        button.replaceWith('<span class="badge bg-success">Approved</span>');
                        $('#merge-btn-' + orgId).removeClass('d-none');
                    },
                    error: function () {
                        Swal.fire(
                            'Error!',
                            'Failed to approve. Please try again.',
                            'error'
                        );
                    }
                });
            }
        });
    });
    function openMergeModal(organizationId) {
        $.ajax({
            url: '/admin/organizations/merge/' + organizationId,
            method: 'GET',
            success: function (response) {
                console.log(response); 
                if (response.success) {
                    const organization = response.organization;
                    const similarOrganizations = Object.values(response.similarOrganizations);                     
                    console.log('Similar Organizations:', similarOrganizations);        
                    Swal.fire({
                        title: `Merge Organizations: ${organization.name}`,
                        html: `
                            <p class="swal-text">Select organizations with similar names to merge:</p>
                            <div class="swal-list-container">
                                <ul class="list-group" id="relatedOrganizationsList">
                                    ${similarOrganizations.map(org => `
                                        <li class="list-group-item">
                                            <input type="checkbox" name="ids[]" value="${org.id}" class="form-check-input swal-checkbox">
                                            <span class="swal-org-name">${org.name}</span>
                                        </li>
                                    `).join('')}
                                </ul>
                            </div>
                        `,
                        showCancelButton: true,
                        confirmButtonText: 'Merge',
                        cancelButtonText: 'Cancel',
                        cancelButtonColor: '#d33',
                        confirmButtonColor: '#4CAF50',
                        width: '600px',
                        padding: '25px',
                        background: '#f7f7f7',
                        customClass: {
                            popup: 'swal-popup',
                            title: 'swal-title',
                            content: 'swal-content',
                            confirmButton: 'swal-confirm-btn',
                            cancelButton: 'swal-cancel-btn'
                        },
                        preConfirm: () => {
                            const selectedIds = [];
                            $('input[name="ids[]"]:checked').each(function () {
                                selectedIds.push($(this).val());
                            });        
                            if (selectedIds.length < 2) {
                                Swal.showValidationMessage('Please select at least two organizations to merge.');
                                return false;
                            }        
                            mergeOrganizations(selectedIds, organizationId);
                        }
                    });
                } else {
                    Swal.fire('Error!', 'Unable to fetch related organizations.', 'error');
                }
            },
            error: function () {
                Swal.fire('Error!', 'Something went wrong while fetching related organizations.', 'error');
            }
        });
        
    }
    
    
    // Function to handle merging of organizations
    function mergeOrganizations(organizationIds, mergeId) {
        $.ajax({
            url: '/admin/organizations/all-merge',
            method: 'GET',
            data: {
                _token: '{{ csrf_token() }}',  
                ids: organizationIds,
                mergeId: mergeId 
            },
            success: function (response) {
                if (response.success) {
                    Swal.fire('Success!', 'Organizations merged successfully.', 'success').then(() => {
                        location.reload(); 
                    });
                } else {
                    Swal.fire('Error!', 'Failed to merge organizations. Please try again.', 'error');
                }
            },
            error: function () {
                Swal.fire('Error!', 'An error occurred while merging the organizations.', 'error');
            }
        });
    }    
</script>
@endsection