@extends('layouts.admin')

@section('page-title') Demande de devis @endsection
@section('page-subtitle') Demande de devis @endsection

@section('styles')
    <!-- Meta tags pour le JavaScript -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link href="{{ asset('css/layouts/admin.css') }}" rel="stylesheet">
    <link href="{{ asset('css/pages/admin/components.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('css/pages/admin/quotes/create.css') }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
    <script src="{{ asset('js/utils/toast-utils.js') }}"></script>
    <script src="{{ asset('js/pages/admin/quotes/create.js') }}"></script>
@endsection

@section('content')
<div class="quote-details-page">
    <!-- En-tête avec actions -->
    <div class="page-header-row">
        <div class="main-header-navigation">
            <a href="{{ route('admin.quotes.index') }}" class="back-link">
                <i class="fas fa-arrow-left"></i>
                <span>Retour à la liste</span>
            </a>
        </div>
    </div>

    <!-- Contenu principal -->
    <div class="container-fluid">
        <form id="create-quote-form" method="POST" action="{{ route('admin.quotes.store') }}">
            @csrf
            
            <!-- Champs cachés pour les données sélectionnées -->
            <input type="hidden" id="client_id" name="client_id" value="">
            <input type="hidden" id="address_id" name="address_id" value="">
            <input type="hidden" id="priority" name="priority" value="normal">
            <input type="hidden" id="selected_workers" name="selected_workers" value="">
            <input type="hidden" id="media_data" name="media_data" value="">
            <input type="hidden" id="comments_data" name="comments_data" value="">

            <!-- Section des cartes principales -->
            <div class="cards-container">
                <!-- Card des informations du client -->
                <div class="profile-card">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="fas fa-user"></i>
                            Informations du client
                        </h3>
                        <button type="button" class="btn-icon" title="Sélectionner un client" id="select-client-btn">
                            <i class="fas fa-plus"></i>
                        </button>
                    </div>
                    <div class="profile-card-body">
                        <!-- État vide par défaut -->
                        <div class="no-client-selected" id="no-client-message">
                            <div class="text-center empty-state">
                                <i class="fas fa-user empty-icon"></i>
                                <p>Aucun client sélectionné</p>
                                <p class="text-muted">Cliquez sur le bouton + pour choisir un client et son adresse</p>
                            </div>
                        </div>

                        <!-- Informations client (masquées par défaut) --> 
                        <div class="client-info-display d-none" id="client-info-display">
                            <div class="profile-card position-relative">
                                <div class="client-info-wrapper">
                                    <!-- Logo et type de client à gauche -->
                                    <div class="client-info-column logo-column">
                                        <div class="client-logo-container">
                                            <img id="client-logo" src="" alt="Logo client" class="client-logo d-none">
                                            <div id="client-default-icon" class="default-logo">
                                                <i class="fas fa-building"></i>
                                            </div>
                                            
                                            <div class="client-type mt-1 text-center" id="client-type-container">
                                                <i id="client-type-icon" class="fas fa-building me-1 text-primary"></i>
                                                <span id="client-type-text"></span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- Adresse à droite -->
                                    <div class="client-info-column address-column">
                                        <div class="address-details">
                                            <div class="address-item">
                                                <i class="fas fa-map-marker-alt me-2 text-primary"></i>
                                                <span id="client-address"></span>
                                            </div>
                                            
                                            <div class="address-item mt-2 d-none" id="floor-info">
                                                <i class="fas fa-building me-2 text-primary"></i>
                                                <span>Étage : <span id="client-floor"></span></span>
                                            </div>
                                            
                                            <div class="address-item mt-2 d-none" id="side-info">
                                                <i class="fas fa-door-open me-2 text-primary"></i>
                                                <span>Côté : <span id="client-side"></span></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Bouton de suppression (croix) -->
                                <button type="button" class="delete-btn" title="Supprimer le client" id="remove-client-btn">
                                    <i class="fas fa-times text-danger"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Card des informations de l'intervention -->
                <div class="profile-card">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="fas fa-info-circle"></i>
                            Informations de l'intervention
                        </h3>
                    </div>
                    <div class="profile-card-body">
                        <!-- Section Priorité, Deadline et Date d'intervention sur une ligne -->
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <div class="detail-label text-center">PRIORITÉ</div>
                                <div class="info-value text-center">
                                    <div class="priority-editor d-inline-flex align-items-center">
                                        <span class="priority-badge priority-badge--normal me-2" id="priority-badge-create">
                                            <i class="fas fa-check-circle me-1"></i>
                                            <span class="priority-text">Normal</span>
                                        </span>
                                        <a href="#" 
                                           class="btn btn-icon edit-priority-trigger"
                                           id="edit-priority-trigger-create"
                                           data-bs-toggle="popover" 
                                           data-bs-placement="bottom"
                                           data-bs-html="true"
                                           data-bs-custom-class="priority-popover"
                                           title="Modifier la priorité"
                                           data-bs-content='@include("admin.interventions.partials.priority-options", ["intervention_id" => "create"])'>
                                            <i class="fas fa-edit text-primary"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label for="deadline" class="detail-label text-center d-block">Deadline</label>
                                <small class="form-text text-muted text-center d-block mb-1">(facultatif)</small>
                                <input type="date" class="form-control" id="deadline" name="deadline">
                            </div>
                            <div class="col-md-4">
                                <label for="intervention_date" class="detail-label text-center d-block">Date d'intervention</label>
                                <small class="form-text text-muted text-center d-block mb-1">(facultatif)</small>
                                <input type="date" class="form-control" id="intervention_date" name="intervention_date">
                            </div>
                        </div>

                        <!-- Section Titre et Description -->
                        <div class="mb-3">
                            <label for="title" class="detail-label">Titre</label>
                            <input type="text" class="form-control" id="title" name="title" placeholder="Titre de l'intervention">
                        </div>
                        <div>
                            <label for="description" class="detail-label">Description</label>
                            <textarea class="form-control" id="description" name="description" rows="4" placeholder="Description détaillée de l'intervention"></textarea>
                        </div>
                    </div>
                </div>

                <!-- Card des intervenants à assigner -->
                <div class="profile-card">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="fas fa-users"></i>
                            Intervenant(s) à assigner
                        </h3>
                        <button class="btn-icon" title="Assigner des intervenants" id="assign-workers-btn">
                            <i class="fas fa-plus"></i>
                        </button>
                    </div>
                    <div class="profile-card-body">
                        <!-- État vide par défaut -->
                        <div class="no-workers-assigned" id="no-workers-message">
                            <div class="text-center empty-state">
                                <i class="fas fa-users empty-icon"></i>
                                <p>Aucun intervenant assigné</p>
                                <p class="text-muted">Cliquez sur le bouton + pour assigner des intervenants</p>
                            </div>
                        </div>

                        <!-- Liste des intervenants assignés -->
                        <div class="assigned-workers-list d-none" id="assigned-workers-list">
                            <!-- Les intervenants seront ajoutés dynamiquement ici -->
                        </div>
                    </div>
                </div>

                <!-- Card des médias de l'intervention -->
                <div class="profile-card">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="fas fa-images"></i>
                            Média(s) de l'intervention
                        </h3>
                        <button type="button" class="btn-icon" title="Ajouter des photos/vidéos" data-bs-toggle="modal" data-bs-target="#uploadPhotoModal">
                            <i class="fas fa-plus"></i>
                        </button>
                    </div>
                    <div class="profile-card-body">
                        <!-- État vide par défaut -->
                        <div class="no-media-uploaded" id="no-media-message">
                            <div class="text-center empty-state">
                                <i class="fas fa-camera empty-icon"></i>
                                <p>Aucun média ajouté</p>
                                <p class="text-muted">Cliquez sur le bouton + pour ajouter des photos ou vidéos</p>
                            </div>
                        </div>

                        <!-- Liste des médias -->
                        <div class="uploaded-media-list d-none" id="media-thumbnails-grid">
                            <!-- Les médias seront ajoutés dynamiquement ici -->
                        </div>
                        
                        <!-- Les templates pour les médias sont maintenant inclus en bas de page via les partials Blade -->
                        
                        <!-- Template pour les icônes de médias (invisible) -->
                        <template id="media-image-template">
                            <img class="card-img-top" src="" alt="Image">
                        </template>
                        
                        <template id="media-video-template">
                            <div class="video-icon-container">
                                <i class="fas fa-file-video fa-3x text-primary"></i>
                            </div>
                        </template>
                        
                        <template id="media-file-template">
                            <div class="file-icon-container">
                                <i class="fas fa-file fa-3x text-secondary"></i>
                            </div>
                        </template>
                        
                        <!-- Template pour le formulaire d'édition de description -->
                        <template id="description-edit-form-template">
                            <div class="edit-description-form">
                                <div class="form-group mb-2">
                                    <textarea class="form-control description-textarea" rows="2" placeholder="Ajouter une description..."></textarea>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <button type="button" class="btn btn-sm btn-outline-secondary cancel-description-btn">Annuler</button>
                                    <button type="button" class="btn btn-sm btn-primary save-description-btn">Enregistrer</button>
                                </div>
                            </div>
                        </template>

                        <!-- Input file caché -->
                        <input type="file" id="media-file-input" multiple accept="image/*,video/*,.heic,.heif" class="media-file-input">
                    </div>
                </div>

                <!-- Card des commentaires de l'intervention -->
                <div class="profile-card">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="fas fa-comments"></i>
                            Commentaires
                        </h3>
                    </div>
                    <div class="profile-card-body">
                        <!-- Formulaire d'ajout de commentaire -->
                        <div class="comment-form mb-3">
                            <div class="input-group">
                                <textarea class="form-control" id="comment-input" rows="2" placeholder="Ajouter un commentaire..."></textarea>
                                <button type="button" class="btn btn-primary" id="add-comment-btn">
                                    <i class="fas fa-paper-plane"></i>
                                </button>
                            </div>
                        </div>

                        <!-- Liste des commentaires -->
                        <div id="comments-list">
                            <!-- État vide par défaut -->
                            <div class="no-comments" id="no-comments-message">
                                <div class="text-center empty-state">
                                    <i class="fas fa-comment-slash empty-icon"></i>
                                    <p>Aucun commentaire</p>
                                    <p class="text-muted">Ajoutez un commentaire à l'intervention</p>
                                </div>
                            </div>
                            
                            <!-- Template pour l'affichage d'un commentaire (sera cloné par JS) -->
                            <template id="comment-template">
                                <div class="comment-item" data-id="">
                                    <div class="comment-content">
                                        <div class="comment-text"></div>
                                    </div>
                                    <div class="comment-actions">
                                        <button type="button" class="btn-icon edit-comment-btn" title="Modifier">
                                            <i class="fas fa-edit text-primary"></i>
                                        </button>
                                        <button type="button" class="btn-icon delete-comment-btn" title="Supprimer">
                                            <i class="fas fa-trash text-danger"></i>
                                        </button>
                                    </div>
                                </div>
                            </template>
                            
                            <!-- Template pour l'édition d'un commentaire (sera cloné par JS) -->
                            <template id="comment-edit-template">
                                <div class="comment-edit-form">
                                    <textarea class="form-control comment-edit-input" rows="2"></textarea>
                                    <div class="comment-actions mt-2">
                                        <button type="button" class="btn btn-sm btn-primary save-comment-btn">
                                            <i class="fas fa-check"></i> Enregistrer
                                        </button>
                                        <button type="button" class="btn btn-sm btn-secondary cancel-edit-btn">
                                            <i class="fas fa-times"></i> Annuler
                                        </button>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Boutons d'action -->
            <div class="row mt-4">
                <div class="col-12 text-end">
                    <button type="button" class="btn btn-secondary me-2" onclick="window.history.back()">
                        <i class="fas fa-arrow-left me-1"></i>
                        Annuler
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-1"></i>
                        Créer l'intervention
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Modal d'assignation des intervenants -->
<div class="modal fade" id="assignWorkerModal" tabindex="-1" aria-labelledby="assignWorkerModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-light">
                <h5 class="modal-title" id="assignWorkerModalLabel">
                    <i class="fas fa-hard-hat me-2"></i>Ajouter un intervenant
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
            </div>
            <div class="modal-body">
              <!-- Barre de recherche et filtres -->
              <div class="filters-card">
                    <div class="filters-card-content">
                        <div class="search-box">
                            <i class="fas fa-search search-box__icon"></i>
                            <input type="text" class="search-box__input" id="worker-search-input-assign" placeholder="Rechercher un ouvrier..." autocomplete="off" autofocus>
                        </div>
                        <div class="selectors-group">
                            <select class="form-select" id="specialty-filter-assign">
                                <option value="">Toutes les spécialités</option>
                                {{-- Check if the specialty list is available and not empty --}} 
                                @if(isset($allSpecialtiesForDropdown) && $allSpecialtiesForDropdown->count() > 0) 
                                    @foreach($allSpecialtiesForDropdown as $specialty_option) 
                                        <option value="{{ $specialty_option->id }}">{{ $specialty_option->name }}</option> 
                                    @endforeach 
                                @else 
                                    <option value="" disabled>Aucune spécialité disponible</option> 
                                @endif
                            </select>
                        </div>
                    </div>
                    </div>


                <!-- Conteneur pour les filtres actifs -->
                <div id="active-filters-container-assign" class="mb-2">
                    {{-- Les badges de filtres actifs seront injectés ici par JavaScript --}}
                </div>

                <!-- État de chargement -->
                <div id="loading-state-assign" class="loading-state d-none">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Chargement...</span>
                    </div>
                    <p class="mt-3">Chargement des ouvriers disponibles...</p>
                </div>

                <!-- État d'erreur -->
                <div id="error-state-assign" class="error-state text-danger d-none">
                    <i class="fas fa-exclamation-triangle fs-1 mb-3"></i>
                    <p id="error-message-assign-text">Message d'erreur par défaut.</p>
                </div>

                <!-- Message "aucun résultat" -->
                <div id="no-results-message-assign" class="text-center d-none">
                    <div class="empty-icon"><i class="fa-solid fa-users fa-3x"></i></div>
                    <p class="empty-description">Aucun ouvrier ne correspond à votre recherche.</p>
                </div>

                <!-- Liste des ouvriers -->
                <div id="workers-container-assign" class="modal-scroll-container is-populated">
                    {{-- Les cartes d'ouvriers seront injectées ici par JavaScript --}}
                </div>

                <!-- Template pour un item ouvrier -->
                <div class="hidden">
                    <script type="text/html" id="worker-item-template-assign">
                        <div class="add-worker-modal__worker-item" data-worker-id="%WORKER_ID%" data-worker-name="%WORKER_FULL_NAME_LOWERCASE%" data-specialties='%SPECIALTIES_JSON%'>
                            <div class="add-worker-modal__worker-item-header">
                                <div class="add-worker-modal__worker-item-avatar">
                                    %WORKER_INITIALS%
                                </div>
                                <div class="add-worker-modal__worker-item-name">
                                    %WORKER_FULL_NAME%
                                </div>
                                <input type="checkbox" class="form-check-input worker-checkbox-assign hidden" value="%WORKER_ID%" id="worker-checkbox-assign-%WORKER_ID%">
                                <div class="add-worker-modal__worker-item-select-indicator">
                                    <i class="fas fa-check"></i>
                                </div>
                            </div>
                            <div class="add-worker-modal__worker-item-body">
                                <div class="add-worker-modal__worker-item-specialties">
                                    <!-- Les spécialités seront insérées dynamiquement ici par JavaScript -->
                                </div>
                                <p class="add-worker-modal__no-specialties hidden"><small>Aucune spécialité</small></p>
                            </div>
                        </div>
                    </script>
                </div>
                
                <!-- Template pour une spécialité -->
                <div class="hidden">
                    <script type="text/html" id="specialty-tag-template">
                        <span class="trade-tag specialty-tag specialty-tag-%SPECIALTY_ID%">
                            %ICON% %SPECIALTY_NAME%
                        </span>
                    </script>
                </div>
            </div>
            <div class="modal-footer bg-light">
                <div class="selected-count me-auto d-flex align-items-center">
                    <strong id="selected-count-assign" class="bg-primary-subtle text-primary-emphasis p-1 rounded me-2">0</strong>
                    <small class="text-muted">ouvrier(s) sélectionné(s)</small>
                </div>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-primary" id="do-assign-workers-button">
                    <i class="fas fa-save me-1"></i>
                    <span>Ajouter les intervenants</span>
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modals de sélection client et adresse -->
@include('admin.interventions.partials.client_selection_modals')

<!-- Modal de confirmation de suppression d'intervenant -->
<div class="modal fade" id="confirmRemoveWorkerModal" tabindex="-1" aria-labelledby="confirmRemoveWorkerModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmRemoveWorkerModalLabel">Confirmer la suppression</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Êtes-vous sûr de vouloir retirer <strong id="workerNameToRemove"></strong> de cette intervention ? Cette action est irréversible.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-danger" id="confirmRemoveWorkerButton">Oui, supprimer</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal pour l'upload de photos/médias -->
<div class="modal fade" id="uploadPhotoModal" tabindex="-1" aria-labelledby="uploadPhotoModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="uploadPhotoModalLabel"><i class="fas fa-file-upload me-2"></i>Ajouter des Fichiers (Photos/Vidéos)</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
            </div>
            <div class="modal-body">
                <form id="uploadPhotoForm" enctype="multipart/form-data">
                    @csrf

                    <!-- Zone de Drag & Drop -->
                    <div id="dropZone" class="mb-3 p-4 border rounded text-center">
                        <input type="file" id="interventionPhotosInput" name="photos[]" multiple 
                               accept="image/*,video/mp4,video/quicktime,video/x-msvideo,video/webm,video/x-matroska,.mkv,.heic,.heif">
                        <i class="fas fa-cloud-upload-alt fa-3x text-secondary mb-3"></i>
                        <p class="mb-0 lead text-muted">Glissez-déposez des fichiers ici ou <span class="text-primary fw-bold">cliquez pour sélectionner</span>.</p>
                        <small class="form-text text-muted mt-2">Formats supportés : Images (JPG, PNG, GIF, WEBP, HEIC) et Vidéos (MP4, MOV, AVI, WEBM, MKV).<br>Taille maximale par fichier : 50MB.</small>
                    </div>

                    <!-- Conteneur pour les prévisualisations -->
                    <div id="filePreviewContainer" class="mt-3 row g-2">
                        <!-- Les prévisualisations des fichiers (images/vidéos) et les boutons de suppression apparaîtront ici -->
                    </div>

                    <div id="upload-progress-container" class="mt-3 d-none">
                        <div class="progress">
                            <div id="upload-progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-primary" id="addPhotosBtn"><i class="fas fa-plus me-2"></i>Ajouter les médias</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal pour l'upload de photos/médias -->
<div class="modal fade" id="uploadPhotoModal" tabindex="-1" aria-labelledby="uploadPhotoModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="uploadPhotoModalLabel"><i class="fas fa-file-upload me-2"></i>Ajouter des Fichiers (Photos/Vidéos)</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
            </div>
            <div class="modal-body">
                <form id="uploadPhotoForm" enctype="multipart/form-data">
                    @csrf

                    <!-- Zone de Drag & Drop -->
                    <div id="dropZone" class="mb-3 p-4 border rounded text-center">
                        <input type="file" id="interventionPhotosInput" name="photos[]" multiple 
                               accept="image/*,video/mp4,video/quicktime,video/x-msvideo,video/webm,video/x-matroska,.mkv,.heic,.heif">
                        <i class="fas fa-cloud-upload-alt fa-3x text-secondary mb-3"></i>
                        <p class="mb-0 lead text-muted">Glissez-déposez des fichiers ici ou <span class="text-primary fw-bold">cliquez pour sélectionner</span>.</p>
                        <small class="form-text text-muted mt-2">Formats supportés : Images (JPG, PNG, GIF, WEBP, HEIC) et Vidéos (MP4, MOV, AVI, WEBM, MKV).<br>Taille maximale par fichier : 50MB.</small>
                    </div>

                    <!-- Conteneur pour les prévisualisations -->
                    <div id="filePreviewContainer" class="mt-3 row g-2">
                        <!-- Les prévisualisations des fichiers (images/vidéos) et les boutons de suppression apparaîtront ici -->
                    </div>

                    <div id="upload-progress-container" class="mt-3 d-none">
                        <div class="progress">
                            <div id="upload-progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-primary" id="addPhotosBtn"><i class="fas fa-plus me-2"></i>Ajouter les médias</button>
            </div>
        </div>
    </div>
</div>

<!-- Templates for client and address rendering -->
<template id="client-item-template" style="display: none;">
    @include('admin.interventions.partials.client_item', ['client' => (object)['id' => '', 'name' => '', 'type' => '', 'has_logo' => false, 'logo_url' => '', 'email' => '', 'phone' => ''], 'isSelected' => false])
</template>

<template id="client-empty-state-template" style="display: none;">
    @include('admin.interventions.partials.client_empty_state')
</template>

<template id="address-item-template" style="display: none;">
    @include('admin.interventions.partials.address_item', ['address' => (object)['id' => '', 'street' => '', 'postal_code' => '', 'city' => '', 'floor' => '', 'side' => '', 'is_primary' => false], 'isSelected' => false])
</template>

<template id="address-empty-state-template" style="display: none;">
    @include('admin.interventions.partials.address_empty_state')
</template>

<!-- Templates for media rendering -->
<template id="media-card-template" style="display: none;">
    @include('admin.interventions.partials.media_card', ['index' => 0, 'description' => ''])
</template>

<template id="media-image-template" style="display: none;">
    @include('admin.interventions.partials.media_image', ['src' => '', 'alt' => ''])
</template>

<template id="media-video-template" style="display: none;">
    @include('admin.interventions.partials.media_video', ['filename' => ''])
</template>

<template id="media-file-template" style="display: none;">
    @include('admin.interventions.partials.media_file', ['filename' => ''])
</template>

<template id="description-edit-form-template" style="display: none;">
    @include('admin.interventions.partials.description_edit_form', ['description' => ''])
</template>

<template id="media-empty-state-template" style="display: none;">
    @include('admin.interventions.partials.media_empty_state')
</template>

<template id="media-description-textarea-template" style="display: none;">
    @include('admin.interventions.partials.media_description_textarea', ['description' => ''])
</template>

<template id="assigned-worker-item-template" style="display: none;">
    @include('admin.interventions.partials.assigned_worker_item', ['worker' => ['id' => '', 'name' => '', 'specialties' => []], 'initials' => '', 'escapedName' => ''])
</template>

@endsection