@extends('layouts.squelette')
<!-- ************************************** -->
@section('css_header')

@endsection

<!-- ************************************** -->
@section('titre')
{{ __('Localisations équipements') }}
@endsection

<!-- ************************************** -->
@section('titre_header')
{{ __('Localisations équipements') }}
@endsection
<!-- ************************************** -->
@section('titre_page')
{{ __('Liste') }}
@endsection
<!-- ************************************** -->
@section('panel_boutons')
@endsection

@section('contenu')

<div class="card">
    <div class="card-header">
        <h3 class="card-title">{{ __('Arborescence des localisations') }}</h3>
        <div class="card-tools">
            <button class="btn btn-primary btn-sm" id="btn_add_root">
                <i class="fas fa-plus-circle mr-1"></i>{{ __('Ajouter une racine') }}
            </button>
        </div>
    </div>
    <div class="card-body col-md-6">
        <div id="localisations_tree"></div>
    </div>
</div>
@endsection

@section('js_footer')
<script src="{{ asset('js/localisations_equipment.js').'?'.env('VERSION_JS')}}"></script>
@endsection

@section('modale')

@include('modales.delete_standard')

@endsection

<style>
     #localisations_tree {
        max-height: 600px;
        overflow-y: auto;
        padding: 15px;
        background-color: #f8f9fa;
        border-radius: 5px;
    }
    
    .jstree-default .jstree-wholerow-clicked {
        background: transparent !important;
    }
    
    .jstree-default .jstree-clicked {
        background: transparent;
        box-shadow: none;
        color: #3875d7 !important;
    }
    
    .jstree-anchor {
        transition: color 0.2s ease;
        display: inline-block !important;
    }
    
    .jstree-anchor:hover {
        background-color: transparent;
        color: #3875d7;
    }
    
    .jstree-default .jstree-wholerow {
        margin-top: 3px !important;
        height: 30px !important;
        border-radius: 10px;
        background: transparent !important;
    }
    
    .jstree-default .jstree-wholerow-clicked {
        background: transparent !important;
    }
    
    .jstree-default>.jstree-wholerow-ul .jstree-clicked {
        color: #3875d7 !important;
    }
    
    /* Styles modifiés pour les boutons */
    .node-buttons {
        display: inline-block;
        margin-left: 10px;
        position: relative;
        z-index: 1000;
    }

    .node-buttons .btn {
        padding: 0;
        margin: 0 5px;
        border: none;
        background: transparent;
        box-shadow: none;
    }

    /* Couleurs spécifiques pour les icônes */
    .node-buttons .btn-primary .fas {
        color: #007bff;
    }

    .node-buttons .btn-warning .fas {
        color: #ffc107;
    }

    .node-buttons .btn-danger .fas {
        color: #dc3545;
    }

    /* Effets de survol */
    .node-buttons .btn:hover .fas {
        opacity: 0.8;
    }

    /* Effet au clic */
    .node-buttons .btn:active {
        transform: scale(0.95);
    }
</style>