@extends('admin.layouts.app')

@section('content')
<div class="row">
    <div class="col-xl-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
            <h4 class="mb-sm-0">{{ __('admin/teams.list_title') }}</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="javascript: void(0);">{{ __('admin/teams.breadcrumb_team') }}</a></li>
                    <li class="breadcrumb-item active">{{ __('admin/teams.list') }}</li>
                </ol>
            </div>
        </div>

        <!-- menu bar -->
        @canany(['teams.create', 'teams.delete'])
        <div class="col-lg-12 sticky-menu-bar">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex align-items-center flex-wrap gap-2">
                        @can('teams.create')
                        <div class="flex-grow-1">
                            <a href="{{ route('admin.teams.create') }}" class="btn btn-info add-btn">
                                <i class="ri-add-fill me-1 align-bottom"></i> {{ __('admin/teams.add_member') }}
                            </a>
                        </div>
                        @endcan
                        @can('teams.delete')
                        <div class="flex-shrink-0">
                            <div class="hstack text-nowrap gap-2">
                                <button class="btn btn-soft-danger material-shadow-none" id="remove-actions" onclick="deleteMultiple()" style="display: none;">
                                    <i class="ri-delete-bin-2-line"></i> {{ __('admin/teams.delete_selected') }}
                                </button>
                            </div>
                        </div>
                        @endcan
                    </div>
                </div>
            </div>
        </div>
        @endcanany

        <div class="col-xl-12">
            <div class="card">
                <div class="card-header align-items-center d-flex">
                    <h4 class="card-title mb-0 flex-grow-1">{{ __('admin/teams.list_title') }}</h4>
                </div>

                <div class="card-body border-bottom">
                    <form method="GET" action="{{ route('admin.teams.index') }}" class="row g-3">
                        <div class="col-md-4">
                            <div class="search-box">
                                <input type="text" name="search" class="form-control search"
                                    placeholder="{{ __('admin/teams.search_placeholder') }}"
                                    value="{{ request('search') }}">
                                <i class="ri-search-line search-icon"></i>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <select name="status" class="form-select">
                                <option value="">{{ __('admin/teams.all_status') }}</option>
                                <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>{{ __('admin/teams.active') }}</option>
                                <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>{{ __('admin/teams.inactive') }}</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select name="per_page" class="form-select">
                                <option value="15" {{ $perPage == '15' ? 'selected' : '' }}>15 {{ __('admin/teams.per_page') }}</option>
                                <option value="25" {{ $perPage == '25' ? 'selected' : '' }}>25 {{ __('admin/teams.per_page') }}</option>
                                <option value="50" {{ $perPage == '50' ? 'selected' : '' }}>50 {{ __('admin/teams.per_page') }}</option>
                                <option value="100" {{ $perPage == '100' ? 'selected' : '' }}>100 {{ __('admin/teams.per_page') }}</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <button type="submit" class="btn btn-primary w-100">
                                <i class="ri-equalizer-fill me-1"></i> {{ __('admin/teams.filter') }}
                            </button>
                        </div>
                        <div class="col-md-2">
                            <a href="{{ route('admin.teams.index') }}" class="btn btn-light w-100">
                                <i class="ri-refresh-line me-1"></i> {{ __('admin/teams.reset') }}
                            </a>
                        </div>
                    </form>
                </div>

                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div class="text-muted">
                            {{ __('admin/teams.showing_results', [
                                'from' => $teams->firstItem() ?? 0,
                                'to' => $teams->lastItem() ?? 0,
                                'total' => $teams->total()
                            ]) }}
                            @if(request('search'))
                            {{ __('admin/teams.for_search', ['search' => '<strong>'.request('search').'</strong>']) }}
                            @endif
                        </div>
                        @if($teams->hasPages())
                        <div class="text-muted">
                            {{ __('admin/teams.page_info', [
                                'current' => $teams->currentPage(),
                                'last' => $teams->lastPage()
                            ]) }}
                        </div>
                        @endif
                    </div>

                    <div class="table-responsive table-card">
                        <table class="table align-middle table-nowrap table-hover mb-0 mt-3">
                            <thead class="table-light">
                                <tr>
                                    @can('teams.delete')
                                    <th scope="col" style="width: 50px;">
                                        <div class="form-check">
                                            <input class="form-check-input fs-15" type="checkbox" id="checkAll" value="option">
                                        </div>
                                    </th>
                                    @endcan
                                    <th scope="col">
                                        <a href="{{ request()->fullUrlWithQuery(['sort' => 'id', 'direction' => request('direction') == 'asc' ? 'desc' : 'asc']) }}"
                                            class="text-decoration-none text-dark">
                                            {{ __('admin/teams.id') }}
                                            @if(request('sort') == 'id')
                                            <i class="ri-arrow-{{ request('direction') == 'asc' ? 'up' : 'down' }}-s-line"></i>
                                            @endif
                                        </a>
                                    </th>
                                    <th scope="col">
                                        <a href="{{ request()->fullUrlWithQuery(['sort' => 'firstname', 'direction' => request('direction') == 'asc' ? 'desc' : 'asc']) }}"
                                            class="text-decoration-none text-dark">
                                            {{ __('admin/teams.firstname') }}
                                            @if(request('sort') == 'firstname')
                                            <i class="ri-arrow-{{ request('direction') == 'asc' ? 'up' : 'down' }}-s-line"></i>
                                            @endif
                                        </a>
                                    </th>
                                    <th scope="col">
                                        <a href="{{ request()->fullUrlWithQuery(['sort' => 'lastname', 'direction' => request('direction') == 'asc' ? 'desc' : 'asc']) }}"
                                            class="text-decoration-none text-dark">
                                            {{ __('admin/teams.lastname') }}
                                            @if(request('sort') == 'lastname')
                                            <i class="ri-arrow-{{ request('direction') == 'asc' ? 'up' : 'down' }}-s-line"></i>
                                            @endif
                                        </a>
                                    </th>
                                    <th scope="col">{{ __('admin/teams.title') }}</th>
                                    <th scope="col" class="text-center">
                                        <a href="{{ request()->fullUrlWithQuery(['sort' => 'order', 'direction' => request('direction') == 'asc' ? 'desc' : 'asc']) }}"
                                            class="text-decoration-none text-dark">
                                            {{ __('admin/teams.order') }}
                                            @if(request('sort') == 'order')
                                            <i class="ri-arrow-{{ request('direction') == 'asc' ? 'up' : 'down' }}-s-line"></i>
                                            @endif
                                        </a>
                                    </th>
                                    <th scope="col">
                                        <a href="{{ request()->fullUrlWithQuery(['sort' => 'created_at', 'direction' => request('direction') == 'asc' ? 'desc' : 'asc']) }}"
                                            class="text-decoration-none text-dark">
                                            {{ __('admin/teams.created_at') }}
                                            @if(request('sort') == 'created_at')
                                            <i class="ri-arrow-{{ request('direction') == 'asc' ? 'up' : 'down' }}-s-line"></i>
                                            @endif
                                        </a>
                                    </th>
                                    <th scope="col">{{ __('admin/teams.status') }}</th>
                                    <th scope="col" class="text-end">{{ __('admin/teams.actions') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($teams as $team)
                                <tr>
                                    @can('teams.delete')
                                    <th scope="row">
                                        <div class="form-check">
                                            <input class="form-check-input fs-15" type="checkbox" name="chk_child" value="{{ $team->id }}">
                                        </div>
                                    </th>
                                    @endcan
                                    <td><span class="fw-medium">{{ $team->id }}</span></td>
                                    <td>
                                        <h6 class="mb-1">{{ $team->firstname }}</h6>
                                    </td>
                                    <td>{{ $team->lastname }}</td>
                                    <td>
                                        @if($team->title)
                                        <span class="badge bg-info-subtle text-info">{{ $team->title }}</span>
                                        @else
                                        <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        <span class="badge bg-primary-subtle text-primary">{{ $team->order }}</span>
                                    </td>
                                    <td>{{ $team->created_at->format('d/m/Y') }}</td>
                                    <td>
                                        @if($team->is_active)
                                        <span class="badge bg-success-subtle text-success">{{ __('admin/teams.active') }}</span>
                                        @else
                                        <span class="badge bg-danger-subtle text-danger">{{ __('admin/teams.inactive') }}</span>
                                        @endif
                                    </td>
                                    <td class="text-end">
                                        <div class="gap-1 d-flex justify-content-md-end">
                                            @can('teams.view')
                                            <span data-bs-toggle="tooltip" data-bs-placement="top" title="{{ __('admin/teams.view') }}">
                                                <a class="btn btn-icon bg-info-subtle text-info" href="{{ route('admin.teams.show', $team->id) }}">
                                                    <i class="ri-eye-line"></i>
                                                </a>
                                            </span>
                                            @endcan
                                            @can('teams.edit')
                                            <span data-bs-toggle="tooltip" data-bs-placement="top" title="{{ __('admin/teams.edit') }}">
                                                <a class="btn btn-icon bg-primary-subtle text-primary" href="{{ route('admin.teams.edit', $team->id) }}">
                                                    <i class="ri-pencil-line"></i>
                                                </a>
                                            </span>
                                            @endcan
                                            @can('teams.delete')
                                            <span data-bs-toggle="tooltip" data-bs-placement="top" title="{{ __('admin/teams.delete') }}">
                                                <button class="open-delete-modal btn btn-icon bg-danger-subtle text-danger"
                                                    data-bs-toggle="modal"
                                                    href="#deleteRecordModal"
                                                    data-delete-url="{{ route('admin.teams.destroy', $team->id) }}"
                                                    data-item-name="{{ $team->full_name }}"
                                                    data-item-type="{{ __('admin/teams.this_member') }}"
                                                    id="delete-record-{{ $team->id }}">
                                                    <i class="ri-delete-bin-line align-bottom"></i>
                                                </button>
                                            </span>
                                            @endcan
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="20" class="text-center py-4">
                                        <div class="d-flex flex-column align-items-center">
                                            <i class="ri-search-line fs-1 text-muted mb-3"></i>
                                            <h5 class="text-muted">{{ __('admin/teams.no_members') }}</h5>
                                            @if(request('search') || request('status'))
                                            <p class="text-muted mb-3">{{ __('admin/teams.try_search') }}</p>
                                            <a href="{{ route('admin.teams.index') }}" class="btn btn-primary">
                                                <i class="ri-refresh-line me-1"></i> {{ __('admin/teams.reset_filters') }}
                                            </a>
                                            @else
                                            <p class="text-muted mb-3">{{ __('admin/teams.create_first') }}</p>
                                            <a href="{{ route('admin.teams.create') }}" class="btn btn-primary">
                                                <i class="ri-add-line me-1"></i> {{ __('admin/teams.create_member') }}
                                            </a>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

                @if($teams->hasPages())
                <div class="card-footer">
                    <div class="d-flex justify-content-center mt-4">
                        {!! $teams->withQueryString()->links('pagination::bootstrap-5') !!}
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

<x-admin.delete-modal
    item-type="{{ __('admin/teams.this_member') }}"
    confirm-text="{{ __('admin/teams.delete_confirm') }}"
    delete-text="{{ __('admin/teams.delete') }}" />

<x-admin.toast-messages />    

@endsection

@push('script')
<script>
    $(document).ready(function() {
        ischeckboxcheck();

        $('#checkAll').on('click', function() {
            var isChecked = this.checked;
            $('input[name="chk_child"]').each(function() {
                this.checked = isChecked;
                if (isChecked) {
                    $(this).closest("tr").addClass("table-active");
                } else {
                    $(this).closest("tr").removeClass("table-active");
                }
            });
            updateRemoveButton();
        });

        $('select[name="per_page"]').on('change', function() {
            $(this).closest('form').submit();
        });
    });

    function ischeckboxcheck() {
        Array.from(document.getElementsByName("chk_child")).forEach(function(checkbox) {
            checkbox.addEventListener("change", function(e) {
                if (checkbox.checked) {
                    e.target.closest("tr").classList.add("table-active");
                } else {
                    e.target.closest("tr").classList.remove("table-active");
                }
                updateCheckAllState();
                updateRemoveButton();
            });
        });
    }

    function updateCheckAllState() {
        var totalCheckboxes = document.querySelectorAll('input[name="chk_child"]').length;
        var checkedCheckboxes = document.querySelectorAll('input[name="chk_child"]:checked').length;
        var checkAllBox = document.getElementById('checkAll');

        if (checkAllBox) {
            checkAllBox.checked = totalCheckboxes === checkedCheckboxes && totalCheckboxes > 0;
            checkAllBox.indeterminate = checkedCheckboxes > 0 && checkedCheckboxes < totalCheckboxes;
        }
    }

    function updateRemoveButton() {
        var checkedCount = document.querySelectorAll('input[name="chk_child"]:checked').length;
        var removeButton = document.getElementById('remove-actions');

        if (removeButton) {
            removeButton.style.display = checkedCount > 0 ? "block" : "none";
        }
    }

    $('#deleteRecordModal').on('hidden.bs.modal', function() {
        var modal = $(this);
        modal.find('form').find('input[name="ids[]"]').remove();
        modal.find('.modal-body p').text('{{ __("admin/teams.delete_confirm") }}');
        modal.find('#item-name-text-deleteRecordModal').text('');
        modal.find('#item-type-text-deleteRecordModal').text('');
    });

    function deleteMultiple() {
        var selectedIds = [];
        var selectedNames = [];

        document.querySelectorAll('input[name="chk_child"]:checked').forEach(function(checkbox) {
            selectedIds.push(checkbox.value);
            var row = checkbox.closest('tr');
            var firstname = row.cells[3].textContent.trim();
            var lastname = row.cells[4].textContent.trim();
            selectedNames.push(firstname + ' ' + lastname);
        });

        if (selectedIds.length === 0) {
            alert('{{ __("admin/teams.select_at_least_one") }}');
            return;
        }

        var modal = $('#deleteRecordModal');
        if (modal.length) {
            var itemText = selectedIds.length + ' {{ __("admin/teams.members_count") }}';
            var confirmText = '{{ __("admin/teams.delete_multiple_confirm") }}' + selectedIds.length + ' {{ __("admin/teams.members") }}';

            modal.find('#item-name-text-deleteRecordModal').text(selectedNames.join(', '));
            modal.find('#item-type-text-deleteRecordModal').text(itemText);
            modal.find('.modal-body p').text(confirmText);
            modal.find('form').attr('action', '{{ route("admin.teams.destroy-multiple") }}');
            modal.find('form').attr('method', 'POST');

            modal.find('form').find('input[name="ids[]"]').remove();
            selectedIds.forEach(function(id) {
                var input = $('<input>').attr({
                    type: 'hidden',
                    name: 'ids[]',
                    value: id
                });
                modal.find('form').append(input);
            });

            modal.modal('show');
        }
    }
</script>
@endpush