@extends('layout.app')

@section('title', __('Organigramme'))

@push('styles')
<style>
    :root {
        --teal: #009a9c;
        --teal-dark: #007b7d;
        --teal-light: #e0f5f5;
    }

    /* ── Filtres ── */
    .organi-filters {
        background: #fff;
        border-radius: 10px;
        padding: 16px 20px;
        box-shadow: 0 2px 8px rgba(0,154,156,.12);
        margin-bottom: 24px;
    }
    .organi-filters .form-control,
    .organi-filters .custom-select {
        border-color: #cce8e8;
        font-size: 13px;
    }
    .organi-filters .form-control:focus,
    .organi-filters .custom-select:focus {
        border-color: var(--teal);
        box-shadow: 0 0 0 .2rem rgba(0,154,156,.2);
    }

    /* ── Boutons toolbar intégrés au btn-group ── */
    .btn-tool {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 10px;
        font-size: 13px;
        border: 1px solid var(--teal);
        background: #fff;
        color: var(--teal);
        cursor: pointer;
        transition: all .18s ease;
        line-height: 1;
        border-radius: 0;
        height: 38px;
    }
    .btn-tool:hover,
    .btn-tool:focus {
        background: var(--teal);
        color: #fff;
        outline: none;
    }
    .btn-group .btn-tool:last-child {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }

    /* ── Wrapper scrollable ── */
    #organi-wrapper {
        overflow-x: auto;
        overflow-y: auto;
        padding: 20px;
        min-height: 300px;
        background: #f7fefe;
        border-radius: 10px;
        box-shadow: inset 0 2px 6px rgba(0,154,156,.08);
        transition: border-radius .2s;
    }

    /* ── Fullscreen ── */
    #organi-wrapper.is-fullscreen {
        position: fixed !important;
        top: 0; left: 0;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 9999;
        border-radius: 0;
        padding: 30px;
        background: #f7fefe;
    }

    /* ── Arbre repliable ── */
    .org-level {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .org-row {
        display: flex;
        align-items: flex-start;
        gap: 0;
    }

    .org-indent {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 36px;
        flex-shrink: 0;
        position: relative;
    }
    .org-indent-v {
        width: 2px;
        background: #b2d8d8;
        flex: 1;
        min-height: 100%;
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        transform: translateX(-50%);
    }
    .org-indent-h {
        position: absolute;
        top: 22px;
        left: 50%;
        width: 18px;
        height: 2px;
        background: #b2d8d8;
    }

    /* ── Carte employé ── */
    .emp-card {
        background: #fff;
        border: 2px solid var(--teal-light);
        border-radius: 10px;
        padding: 8px 14px 8px 10px;
        cursor: pointer;
        transition: all .2s ease;
        position: relative;
        box-shadow: 0 2px 6px rgba(0,154,156,.08);
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 220px;
        max-width: 320px;
        user-select: none;
    }
    .emp-card:hover {
        border-color: var(--teal);
        box-shadow: 0 4px 14px rgba(0,154,156,.2);
    }
    .emp-card .emp-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--teal-light);
        color: var(--teal);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        border: 1.5px solid var(--teal);
        flex-shrink: 0;
    }
    .emp-card .emp-info {
        flex: 1;
        overflow: hidden;
    }
    .emp-card .emp-name {
        font-size: 13px;
        font-weight: 600;
        color: #2d3748;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .emp-card .emp-fonction {
        font-size: 11px;
        color: var(--teal-dark);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .emp-card .emp-org {
        font-size: 10px;
        color: #a0aec0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .emp-card .emp-toggle {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--teal-light);
        color: var(--teal);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        flex-shrink: 0;
        font-weight: bold;
        transition: transform .2s;
    }
    .emp-card.expanded .emp-toggle {
        transform: rotate(90deg);
    }
    .emp-card .emp-badge {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: 1.5px solid #fff;
        position: absolute;
        top: 6px;
        right: 6px;
    }
    .emp-card .emp-badge.active   { background: #38a169; }
    .emp-card .emp-badge.inactive { background: #e53e3e; }
    .emp-card .emp-count {
        font-size: 10px;
        color: var(--teal);
        background: var(--teal-light);
        border-radius: 10px;
        padding: 1px 6px;
        flex-shrink: 0;
    }

    /* Conteneur enfants (animé) */
    .org-children-wrap {
        overflow: hidden;
        transition: max-height .25s ease, opacity .2s ease;
        max-height: 0;
        opacity: 0;
    }
    .org-children-wrap.open {
        max-height: 99999px;
        opacity: 1;
    }

    .org-item {
        display: flex;
        flex-direction: column;
    }
    .org-item + .org-item {
        margin-top: 6px;
    }

    /* ── Empty state ── */
    .organi-empty {
        text-align: center;
        padding: 60px 20px;
        color: #a0aec0;
    }
    .organi-empty i { font-size: 48px; color: #cce8e8; margin-bottom: 12px; }

    /* ── Loader ── */
    #organi-loader {
        text-align: center;
        padding: 40px;
        color: var(--teal);
        display: none;
    }

    /* ── Modal ── */
    #modalFiche .modal-header {
        color: #000;
        border-radius: 0;
    }
    #modalFiche .modal-header .close { color: #000; }
    #modalFiche .modal-header .close:hover { opacity: 1; }
    #modalFiche .modal-body { padding: 0; }
    #modalFiche .card { margin-bottom: 0; box-shadow: none; border: none; }
    #modalFiche .card-header { border-radius: 0 !important; }

    .bg-teal-maq { background-color: var(--teal) !important; }
    .text-teal-maq { color: var(--teal) !important; }
    .teal-maq { color: var(--teal) !important; }
</style>
@endpush

@section('active_employes', 'active')
@section('data_col', '2-columns')
@section('body_class', '2-columns menu-collapsed')

@section('content')
<div class="app-content content">
    <div class="content-overlay"></div>
    <div class="content-wrapper">

        {{-- Header --}}
        <div class="content-header row mb-1">
            <div class="content-header-left col-md-6 col-12 breadcrumb-new">
                <h3 class="content-header-title mb-0 d-inline-block">{{ __('Organigramme') }}</h3>
                <div class="row breadcrumbs-top d-inline-block">
                    <div class="breadcrumb-wrapper col-12">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('employes.index') }}">{{ __('Employés') }}</a></li>
                            <li class="breadcrumb-item active">{{ __('Organigramme') }}</li>
                        </ol>
                    </div>
                </div>
            </div>
            <div class="content-header-right col-md-6 col-12">
                <div class="btn-group float-msm-right">
                    <button class="btn btn-teal-maq" id="btn-expand-all" title="{{ __('Tout déplier') }}">
                        <i class="fas fa-expand-arrows-alt"></i>
                    </button>
                    <button class="btn btn-teal-maq" id="btn-collapse-all" title="{{ __('Tout replier') }}">
                        <i class="fas fa-compress-arrows-alt"></i>
                    </button>
                    <button class="btn btn-teal-maq mr-1" id="btn-fullscreen" title="{{ __('Plein écran') }}">
                        <i class="fas fa-expand" id="icon-fullscreen"></i>
                    </button>
                    @can('create_employes')
                        <a class="btn btn-success mr-1" href="{{ route('employes.create')}}">
                            <i class="la la-plus"></i> {{ __('Ajouter') }}
                        </a>
                    @endcan
                    <a href="{{ route('employes.index')}}" class="btn btn-outline-warning">
                        <i class="la la-table"></i>
                    </a>
                    <a href="{{ route('employes.organigramme')}}" class="btn btn-warning">
                        <i class="fas fa-network-wired"></i>
                    </a>
                </div>
            </div>
        </div>

        <div class="content-body pb-5">

            {{-- Filtres --}}
            <div class="organi-filters">
                <div class="row align-items-end">
                    <div class="col-md-4 col-sm-6 mb-2 mb-md-0">
                        <label class="small font-weight-bold text-muted mb-1">{{ __('Organisation') }}</label>
                        <select id="filter-organisation" class="form-control custom-select">
                            <option value="">{{ __('All') }}</option>
                            @foreach($organisations as $org)
                                <option value="{{ $org->id }}">{{ $org->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4 col-sm-6 mb-2 mb-md-0">
                        <label class="small font-weight-bold text-muted mb-1">{{ __('Fonction') }}</label>
                        <select id="filter-fonction" class="form-control custom-select">
                            <option value="">{{ __('All') }}</option>
                            @foreach($fonctions as $fn)
                                <option value="{{ $fn->id }}">{{ $fn->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4 col-sm-9 mb-2 mb-md-0">
                        <label class="small font-weight-bold text-muted mb-1">{{ __('Search') }}</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text" style="border-color:#cce8e8">
                                    <i class="fas fa-search" style="color:var(--teal)"></i>
                                </span>
                            </div>
                            <input type="text" id="filter-search" class="form-control">
                        </div>
                    </div>
                </div>
            </div>

            {{-- Loader --}}
            <div id="organi-loader">
                <i class="fas fa-circle-notch fa-spin fa-2x"></i>
                <p class="mt-2">{{ __('Chargement…') }}</p>
            </div>

            {{-- Organigramme --}}
            <div id="organi-wrapper">
                <div id="organi-tree" class="org-level"></div>
            </div>

        </div>
    </div>
</div>
@endsection

{{-- Modal fiche employé --}}
@section('modals')
<div class="modal fade" id="modalFiche" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content" style="border-radius:10px;overflow:hidden">
            <div class="modal-body" id="modalFicheBody">
                <div class="text-center p-4">
                    <i class="fas fa-circle-notch fa-spin fa-2x" style="color:var(--teal)"></i>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
(function($) {

/* ── Debounce ── */
function debounce(fn, ms) {
    let t;
    return function() { clearTimeout(t); t = setTimeout(() => fn.apply(this, arguments), ms); };
}

/* ── Construire une carte ── */
function buildCard(emp) {
    const hasKids  = emp.fils_recursive && emp.fils_recursive.length > 0;
    const isActive = emp.is_active;
    const fonction = emp.fonction     ? emp.fonction.name     : 'N/A';
    const org      = emp.organisation ? emp.organisation.name : 'N/A';
    const count    = hasKids ? emp.fils_recursive.length : 0;

    return `
    <div class="emp-card"
         data-id="${emp.id}"
         data-has-kids="${hasKids ? 1 : 0}">
        <span class="emp-badge ${isActive ? 'active' : 'inactive'}"></span>
        <div class="emp-avatar"><i class="fas fa-user-tie"></i></div>
        <div class="emp-info">
            <div class="emp-name">${emp.first_name} ${emp.last_name}</div>
            <div class="emp-fonction">${fonction}</div>
            <div class="emp-org">${org}</div>
        </div>
        ${hasKids ? `<span class="emp-count">${count}</span>` : ''}
        ${hasKids ? `<span class="emp-toggle">›</span>` : ''}
    </div>`;
}

/* ── Récursion générale ── */
function buildDeep(employees, depth) {
    return employees.map(emp => {
        const hasKids = emp.fils_recursive && emp.fils_recursive.length > 0;
        return `
        <div class="org-item" data-emp-id="${emp.id}">
            <div class="org-row">
                ${buildCard(emp)}
            </div>
            ${hasKids ? `
            <div class="org-children-wrap" id="children-${emp.id}">
                <div class="org-level" style="padding-left:36px;margin-top:6px;">
                    ${buildDeep(emp.fils_recursive, depth + 1)}
                </div>
            </div>` : ''}
        </div>`;
    }).join('');
}

/* ── Construire un item racine ── */
function buildItem(emp) {
    const hasKids = emp.fils_recursive && emp.fils_recursive.length > 0;

    return `
    <div class="org-item" data-emp-id="${emp.id}">
        <div class="org-row">
            ${buildCard(emp)}
        </div>
        ${hasKids ? `
        <div class="org-children-wrap" id="children-${emp.id}">
            <div class="org-level" style="padding-left:36px;margin-top:6px;">
                ${buildDeep(emp.fils_recursive, 1)}
            </div>
        </div>` : ''}
    </div>`;
}

/* ── Rendu complet ── */
function renderTree(employees) {
    const $tree = $('#organi-tree').empty().addClass('org-level');
    if (!employees.length) {
        $tree.html(`
            <div class="organi-empty">
                <i class="fas fa-network-wired d-block"></i>
                {{ __('Aucun employé trouvé') }}
            </div>`);
        return;
    }
    employees.forEach(emp => $tree.append(buildItem(emp)));
}

/* ── Expand All ── */
$('#btn-expand-all').on('click', function () {
    $('.org-children-wrap').addClass('open');
    $('.emp-card[data-has-kids="1"]').addClass('expanded');
});

/* ── Collapse All ── */
$('#btn-collapse-all').on('click', function () {
    $('.org-children-wrap').removeClass('open');
    $('.emp-card[data-has-kids="1"]').removeClass('expanded');
});

/* ── Fullscreen ── */
var isFullscreen = false;

$('#btn-fullscreen').on('click', function () {
    isFullscreen = !isFullscreen;
    $('#organi-wrapper').toggleClass('is-fullscreen', isFullscreen);
    $('#icon-fullscreen')
        .toggleClass('fa-expand',  !isFullscreen)
        .toggleClass('fa-compress', isFullscreen);
    $(this).attr(
        'title',
        isFullscreen ? '{{ __("Quitter le plein écran") }}' : '{{ __("Plein écran") }}'
    );
});

/* Touche Échap pour quitter le plein écran */
$(document).on('keydown', function (e) {
    if (e.key === 'Escape' && isFullscreen) {
        $('#btn-fullscreen').trigger('click');
    }
});

/* ── Toggle collapse/expand sur clic carte ── */
$(document).on('click', '.emp-card', function (e) {
    e.stopPropagation();
    const $card   = $(this);
    const id      = $card.data('id');
    const hasKids = $card.data('has-kids') == 1;

    if (hasKids) {
        const $wrap = $('#children-' + id);
        const open  = $wrap.hasClass('open');
        $wrap.toggleClass('open', !open);
        $card.toggleClass('expanded', !open);
        return;
    }

    openFiche(id);
});

/* Clic droit → toujours ouvrir la fiche */
$(document).on('contextmenu', '.emp-card', function (e) {
    e.preventDefault();
    openFiche($(this).data('id'));
});

function openFiche(id) {
    $('#modalFicheBody').html(`
        <div class="text-center p-4">
            <i class="fas fa-circle-notch fa-spin fa-2x" style="color:#009a9c"></i>
        </div>`);
    $('#modalFiche').modal('show');
    $.ajax({
        url    : `/employes/${id}/fiche-ajax`,
        success: function(html) { $('#modalFicheBody').html(html); },
        error  : function() {
            $('#modalFicheBody').html(`
                <div class="text-center p-4 text-danger">
                    <i class="fas fa-exclamation-triangle fa-2x"></i>
                    <p class="mt-2">{{ __('Erreur lors du chargement de la fiche') }}</p>
                </div>`);
        }
    });
}

/* ── AJAX filtres ── */
function fetchTree() {
    $('#organi-loader').show();
    $('#organi-wrapper').hide();
    $.ajax({
        url    : '{{ route("employes.organigramme") }}',
        data   : {
            organisation_id : $('#filter-organisation').val(),
            fonction_id     : $('#filter-fonction').val(),
            search          : $('#filter-search').val().trim(),
        },
        headers: { 'X-Requested-With': 'XMLHttpRequest' },
        success: function(data) { renderTree(data); },
        error  : function() {
            $('#organi-tree').html(`
                <div class="organi-empty text-danger">
                    <i class="fas fa-exclamation-triangle d-block"></i>
                    {{ __('Erreur lors du chargement') }}
                </div>`);
        },
        complete: function() {
            $('#organi-loader').hide();
            $('#organi-wrapper').show();
        }
    });
}

$('#filter-organisation, #filter-fonction').on('change', fetchTree);
$('#filter-search').on('input', debounce(fetchTree, 350));

/* ── Chargement initial ── */
fetchTree();

})(jQuery);
</script>
@endpush