@extends('admin.layouts.app')

@section('content')

<form method="POST" id="push-form" action="{{ isset($push) && $push->id ? route('admin.pushes.update', $push->id) : route('admin.pushes.store') }}" enctype="multipart/form-data">
    @csrf
    @if(isset($push) && $push->id)
    @method('PUT')
    @endif

    <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">{{ isset($push) && $push->id ? __('admin/push.edit.title') : __('admin/push.create.title') }}</h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">{{ __('admin/push.breadcrumb.module') }}</a></li>
                        <li class="breadcrumb-item active">{{ isset($push) && $push->id ? __('admin/push.breadcrumb.edit') : __('admin/push.breadcrumb.create') }}</li>
                    </ol>
                </div>
            </div>

            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex align-items-center flex-wrap gap-2">
                            <div class="flex-grow-1">
                                <a href="{{ route('admin.pushes.index') }}" class="btn btn-light me-2">
                                    <i class="ri-arrow-left-line me-1"></i>{{ __('admin/push.buttons.close') }}
                                </a>
                                <button type="submit" class="btn btn-info add-btn" id="savepush" data-bs-loading-text="{{ __('admin/push.buttons.saving') }}">
                                    <i class="ri-save-line me-1 align-bottom"></i> {{ __('admin/push.buttons.save') }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-header">
                            <ul class="nav nav-tabs-custom rounded card-header-tabs border-bottom-0" role="tablist">
                                @foreach(config('translatable.locales') as $index => $locale)
                                <li class="nav-item">
                                    <a class="nav-link {{ $index === 0 ? 'active' : '' }}" data-bs-toggle="tab" href="#{{ $locale }}" role="tab">
                                        {{ strtoupper($locale) }}
                                    </a>
                                </li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="card-body p-4">
                            <div class="tab-content">
                                @foreach(config('translatable.locales') as $index => $locale)
                                <div class="tab-pane {{ $index === 0 ? 'active' : '' }}" id="{{ $locale }}" role="tabpanel">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="mb-3">
                                                <label class="form-label" for="{{ $locale }}-title">{{ __('admin/push.fields.title') }}</label>
                                                <input type="text" class="form-control @error($locale.'.title') is-invalid @enderror"
                                                    id="{{ $locale }}-title" name="{{ $locale }}[title]"
                                                    placeholder="{{ __('admin/push.placeholders.title', ['locale' => strtoupper($locale)]) }}"
                                                    value="{{ old($locale.'.title', isset($push) ? $push->translate($locale)?->title : '') }}">
                                                @error($locale.'.title')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="mb-3">
                                                <div class="d-flex justify-content-between align-items-center mb-2">
                                                    <label class="form-label mb-0" for="{{ $locale }}-content">{{ __('admin/push.fields.content') }}</label>

                                                </div>
                                                <textarea class="form-control @error($locale.'.content') is-invalid @enderror content-field"
                                                    id="{{ $locale }}-content"
                                                    name="{{ $locale }}[content]"
                                                    rows="3"
                                                    maxlength="160"
                                                    data-locale="{{ $locale }}"
                                                    placeholder="{{ __('admin/push.placeholders.content', ['locale' => strtoupper($locale)]) }}">{{ old($locale.'.content', isset($push) ? $push->translate($locale)?->content : '') }}</textarea>
                                                    <small class="text-muted">
                                                        <span id="{{ $locale }}-content-counter">0</span> / 160 {{ __('admin/push.fields.characters') }}
                                                    </small>
                                                @error($locale.'.content')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="button-fields" style="{{ old('display_button', (isset($push) ? $push->display_button : false)) ? '' : 'display: none;' }}">
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <div class="mb-3">
                                                    <label class="form-label" for="{{ $locale }}-button_text">{{ __('admin/push.fields.button_text') }}</label>
                                                    <input type="text" class="form-control @error($locale.'.button_text') is-invalid @enderror"
                                                        id="{{ $locale }}-button_text" name="{{ $locale }}[button_text]"
                                                        placeholder="{{ __('admin/push.placeholders.button_text', ['locale' => strtoupper($locale)]) }}"
                                                        value="{{ old($locale.'.button_text', isset($push) ? $push->translate($locale)?->button_text : '') }}">
                                                    @error($locale.'.button_text')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="mb-3">
                                <div class="form-check form-switch form-switch-md">
                                    <input class="form-check-input" type="checkbox" name="display_button" id="display_button" value="1"
                                        {{ old('display_button', (isset($push) ? $push->display_button : false)) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="display_button">
                                        {{ __('admin/push.fields.display_button') }}
                                    </label>
                                </div>
                            </div>
                            <div id="button-link-config" style="{{ old('display_button', (isset($push) ? $push->display_button : false)) ? '' : 'display: none;' }}">
                                <div class="mb-3">
                                    <label class="form-label">{{ __('admin/push.fields.button_link_type') }}</label>
                                    <select class="form-select @error('button_link_type') is-invalid @enderror" id="button_link_type" name="button_link_type">
                                        <option value="external" {{ old('button_link_type', isset($push) ? $push->button_link_type : 'external') == 'external' ? 'selected' : '' }}>
                                            {{ __('admin/push.fields.button_link_external') }}
                                        </option>
                                        <option value="internal" {{ old('button_link_type', isset($push) ? $push->button_link_type : '') == 'internal' ? 'selected' : '' }}>
                                            {{ __('admin/push.fields.button_link_internal') }}
                                        </option>
                                    </select>
                                    @error('button_link_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Lien externe -->
                                <div class="mb-3" id="external_link_field" style="{{ old('button_link_type', isset($push) ? $push->button_link_type : 'external') == 'external' ? '' : 'display: none;' }}">
                                    <label class="form-label" for="button_link">{{ __('admin/push.fields.button_link') }}</label>
                                    <input type="url" class="form-control @error('button_link') is-invalid @enderror"
                                        id="button_link" name="button_link"
                                        placeholder="https://exemple.com"
                                        value="{{ old('button_link', isset($push) ? $push->button_link : '') }}">
                                    @error('button_link')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Lien interne -->
                                <div id="internal_link_field" style="{{ old('button_link_type', isset($push) ? $push->button_link_type : 'external') == 'internal' ? '' : 'display: none;' }}">
                                    <div class="mb-3">
                                        <label class="form-label">{{ __('admin/push.fields.internal_link_type') }}</label>
                                        <select class="form-select @error('internal_link_type') is-invalid @enderror" id="internal_link_type" name="internal_link_type">
                                            <option value="">{{ __('admin/push.fields.select_internal_type') }}</option>
                                            <option value="training" {{ old('internal_link_type', isset($push) ? $push->internal_link_type : '') == 'training' ? 'selected' : '' }}>
                                                {{ __('admin/push.fields.internal_link_training') }}
                                            </option>
                                            <option value="page" {{ old('internal_link_type', isset($push) ? $push->internal_link_type : '') == 'page' ? 'selected' : '' }}>
                                                {{ __('admin/push.fields.internal_link_page') }}
                                            </option>
                                            <option value="route" {{ old('internal_link_type', isset($push) ? $push->internal_link_type : '') == 'route' ? 'selected' : '' }}>
                                                {{ __('admin/push.fields.internal_link_route') }}
                                            </option>
                                        </select>
                                        @error('internal_link_type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Sélection de formation -->
                                    <div class="mb-3" id="training_field" style="{{ old('internal_link_type', isset($push) ? $push->internal_link_type : '') == 'training' ? '' : 'display: none;' }}">
                                        <label class="form-label" for="training_id">{{ __('admin/push.fields.select_training') }}</label>
                                        <select class="form-select @error('training_id') is-invalid @enderror" id="training_id" name="training_id">
                                            <option value="">{{ __('admin/push.fields.select_training_placeholder') }}</option>
                                            @foreach($trainings as $training)
                                            <option value="{{ $training->id }}" {{ old('training_id', isset($push) ? $push->training_id : '') == $training->id ? 'selected' : '' }}>
                                                {{ $training->title }}
                                            </option>
                                            @endforeach
                                        </select>
                                        @error('training_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Sélection de page -->
                                    <div class="mb-3" id="page_field" style="{{ old('internal_link_type', isset($push) ? $push->internal_link_type : '') == 'page' ? '' : 'display: none;' }}">
                                        <label class="form-label" for="page_id">{{ __('admin/push.fields.select_page') }}</label>
                                        <select class="form-select @error('page_id') is-invalid @enderror" id="page_id" name="page_id">
                                            <option value="">{{ __('admin/push.fields.select_page_placeholder') }}</option>
                                            @foreach($pages as $page)
                                            <option value="{{ $page->id }}" {{ old('page_id', isset($push) ? $push->page_id : '') == $page->id ? 'selected' : '' }}>
                                                {{ $page->title }}
                                            </option>
                                            @endforeach
                                        </select>
                                        @error('page_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Sélection de route -->
                                    <div class="mb-3" id="route_field" style="{{ old('internal_link_type', isset($push) ? $push->internal_link_type : '') == 'route' ? '' : 'display: none;' }}">
                                        <label class="form-label" for="route_name">{{ __('admin/push.fields.select_route') }}</label>
                                        <select class="form-select @error('route_name') is-invalid @enderror" id="route_name" name="route_name">
                                            <option value="">{{ __('admin/push.fields.select_route_placeholder') }}</option>
                                            @foreach($routes as $routeName => $routeLabel)
                                            <option value="{{ $routeName }}" {{ old('route_name', isset($push) ? $push->route_name : '') == $routeName ? 'selected' : '' }}>
                                                {{ $routeLabel }}
                                            </option>
                                            @endforeach
                                        </select>
                                        @error('route_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/push.sections.configuration') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <div class="form-check form-switch form-switch-md">
                                    <input class="form-check-input" type="checkbox" name="is_active" id="activeswitch" value="1"
                                        {{ old('is_active', (isset($push) ? $push->is_active : true)) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="activeswitch">
                                        {{ __('admin/push.fields.is_active') }}
                                    </label>
                                </div>
                            </div>

                            <div class="mb-3">
                                <div class="form-check form-switch form-switch-md">
                                    <input class="form-check-input" type="checkbox" name="display_text" id="displaytextswitch" value="1"
                                        {{ old('display_text', (isset($push) ? $push->display_text : false)) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="displaytextswitch">
                                        {{ __('admin/push.fields.display_text') }}
                                    </label>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="order" class="form-label">{{ __('admin/push.fields.order') }}</label>
                                <input type="number" id="order" name="order"
                                    class="form-control @error('order') is-invalid @enderror"
                                    value="{{ old('order', isset($push) ? $push->order : (isset($lastPush) ? $lastPush->order + 1 : 1)) }}"
                                    min="0" step="1">
                                <small class="text-muted">{{ __('admin/push.notes.order') }}</small><br>
                                @if(isset($lastPush))
                                <small class="text-muted">{{ __('admin/push.notes.last_order', ['order' => $lastPush->order]) }}</small>
                                @endif
                                @error('order')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Dimensions de l'image -->
                    <!-- <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <a data-bs-toggle="collapse" href="#collapse-dimensions" aria-expanded="false" aria-controls="collapse-dimensions" class="d-block collapsed">{{ __('admin/push.sections.dimensions') }}</a></h5>
                        </div>
                        <div class="collapse" id="collapse-dimensions">
                            <div class="card-body">
                                <div class="row mb-3">
                                    <div class="col-6">
                                        <label for="image_width" class="form-label">{{ __('admin/push.fields.width') }} <span class="text-danger">*</span></label>
                                        <input type="number" id="image_width" name="image_width"
                                            class="form-control @error('image_width') is-invalid @enderror"
                                            value="{{ old('image_width', 1920) }}" min="100" max="3000" required>
                                        @error('image_width')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-6">
                                        <label for="image_height" class="form-label">{{ __('admin/push.fields.height') }} <span class="text-danger">*</span></label>
                                        <input type="number" id="image_height" name="image_height"
                                            class="form-control @error('image_height') is-invalid @enderror"
                                            value="{{ old('image_height', 765) }}" min="100" max="3000" required>
                                        @error('image_height')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <small class="text-muted" id="ratio-display">{{ __('admin/push.dimensions.ratio', ['ratio' => '2.13']) }}</small>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">{{ __('admin/push.dimensions.presets') }}</label>
                                    <div class="row g-1">
                                        <div class="col-6">
                                            <button type="button" class="btn btn-outline-secondary btn-sm preset-btn w-100" data-width="1280" data-height="600">
                                                {{ __('admin/push.dimensions.standard') }}
                                            </button>
                                        </div>
                                        <div class="col-6">
                                            <button type="button" class="btn btn-outline-secondary btn-sm preset-btn w-100" data-width="1920" data-height="765">
                                                {{ __('admin/push.dimensions.large') }}
                                            </button>
                                        </div>
                                        <div class="col-6">
                                            <button type="button" class="btn btn-outline-secondary btn-sm preset-btn w-100" data-width="800" data-height="400">
                                                {{ __('admin/push.dimensions.compact') }}
                                            </button>
                                        </div>
                                        <div class="col-6">
                                            <button type="button" class="btn btn-outline-secondary btn-sm preset-btn w-100" data-width="1200" data-height="630">
                                                {{ __('admin/push.dimensions.facebook') }}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> -->
                    <div class="card">
                        <div class="card-header">
                                <div class="d-flex align-items-center">
                                    <div class="flex-grow-1">
                                        <h6 class="card-title mb-0">{{ __('admin/push.sections.dimensions') }}</h6>
                                    </div>
                                    <div class="flex-shrink-0">
                                        <ul class="list-inline card-toolbar-menu d-flex align-items-center mb-0">
                                            <li class="list-inline-item">
                                                <a class="align-middle minimize-card collapsed" data-bs-toggle="collapse" href="#collapse-dimensions" role="button" aria-expanded="false" aria-controls="collapseExample2">
                                                    <i class="mdi mdi-plus align-middle plus"></i>
                                                    <i class="mdi mdi-minus align-middle minus"></i>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                        </div>
                            <div class="card-body collapse" id="collapse-dimensions">
                                <div class="row mb-3">
                                    <div class="col-6">
                                        <label for="image_width" class="form-label">{{ __('admin/push.fields.width') }} <span class="text-danger">*</span></label>
                                        <input type="number" id="image_width" name="image_width"
                                            class="form-control @error('image_width') is-invalid @enderror"
                                            value="{{ old('image_width', 1920) }}" min="100" max="3000" required>
                                        @error('image_width')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-6">
                                        <label for="image_height" class="form-label">{{ __('admin/push.fields.height') }} <span class="text-danger">*</span></label>
                                        <input type="number" id="image_height" name="image_height"
                                            class="form-control @error('image_height') is-invalid @enderror"
                                            value="{{ old('image_height', 765) }}" min="100" max="3000" required>
                                        @error('image_height')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <small class="text-muted" id="ratio-display">{{ __('admin/push.dimensions.ratio', ['ratio' => '2.13']) }}</small>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">{{ __('admin/push.dimensions.presets') }}</label>
                                    <div class="row g-1">
                                        <div class="col-6">
                                            <button type="button" class="btn btn-outline-secondary btn-sm preset-btn w-100" data-width="1280" data-height="600">
                                                {{ __('admin/push.dimensions.standard') }}
                                            </button>
                                        </div>
                                        <div class="col-6">
                                            <button type="button" class="btn btn-outline-secondary btn-sm preset-btn w-100" data-width="1920" data-height="765">
                                                {{ __('admin/push.dimensions.large') }}
                                            </button>
                                        </div>
                                        <div class="col-6">
                                            <button type="button" class="btn btn-outline-secondary btn-sm preset-btn w-100" data-width="800" data-height="400">
                                                {{ __('admin/push.dimensions.compact') }}
                                            </button>
                                        </div>
                                        <div class="col-6">
                                            <button type="button" class="btn btn-outline-secondary btn-sm preset-btn w-100" data-width="1200" data-height="630">
                                                {{ __('admin/push.dimensions.facebook') }}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/push.sections.image') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="image" class="form-label">{{ __('admin/push.fields.image') }} @if(!isset($push) || !$push->id)<span class="text-danger">*</span>@endif</label>
                                <input type="file" id="image" name="image"
                                    class="form-control @error('image') is-invalid @enderror"
                                    accept="image/*">
                                <small class="text-muted">{{ __('admin/push.notes.image_formats') }}</small><br>
                                <small class="text-muted">{{ __('admin/push.notes.image_auto_resize') }}</small>
                                @error('image')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror

                                @if(isset($push) && $push->image)
                                <div class="mt-3">
                                    <img src="{{ $push->image_url }}" alt="{{ __('admin/push.alt.current_image') }}" class="img-thumbnail" style="max-width: 200px;">
                                    <div class="mt-1">
                                        <small class="text-muted">{{ __('admin/push.notes.current_image') }}</small>
                                    </div>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    @if(isset($push) && $push->id)
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/push.sections.information') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-2">
                                <small class="text-muted">{{ __('admin/push.fields.created_at') }}:</small>
                                <div>{{ $push->created_at->format('d/m/Y à H:i') }}</div>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted">{{ __('admin/push.fields.updated_at') }}:</small>
                                <div>{{ $push->updated_at->format('d/m/Y à H:i') }}</div>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</form>

@endsection

@push('script')
<script>
window.translatableLocales = {!! json_encode(config('translatable.locales')) !!};

document.addEventListener('DOMContentLoaded', function() {
    // Gestion du switch global du bouton
    const displayButton = document.getElementById('display_button');
    const buttonLinkConfig = document.getElementById('button-link-config');
    const buttonFields = document.querySelectorAll('.button-fields');

    displayButton.addEventListener('change', function() {
        if (displayButton.checked) {
            buttonLinkConfig.style.display = 'block';
            buttonFields.forEach(function(field) {
                field.style.display = 'block';
            });
        } else {
            buttonLinkConfig.style.display = 'none';
            buttonFields.forEach(function(field) {
                field.style.display = 'none';
            });
        }
    });

    // Gestion du type de lien (interne/externe)
    const buttonLinkType = document.getElementById('button_link_type');
    const externalLinkField = document.getElementById('external_link_field');
    const internalLinkField = document.getElementById('internal_link_field');

    buttonLinkType.addEventListener('change', function() {
        if (buttonLinkType.value === 'external') {
            externalLinkField.style.display = 'block';
            internalLinkField.style.display = 'none';
        } else {
            externalLinkField.style.display = 'none';
            internalLinkField.style.display = 'block';
        }
    });

    // Gestion du type de lien interne (formation/page/route)
    const internalLinkType = document.getElementById('internal_link_type');
    const trainingField = document.getElementById('training_field');
    const pageField = document.getElementById('page_field');
    const routeField = document.getElementById('route_field');

    internalLinkType.addEventListener('change', function() {
        if (internalLinkType.value === 'training') {
            trainingField.style.display = 'block';
            pageField.style.display = 'none';
            routeField.style.display = 'none';
        } else if (internalLinkType.value === 'page') {
            trainingField.style.display = 'none';
            pageField.style.display = 'block';
            routeField.style.display = 'none';
        } else if (internalLinkType.value === 'route') {
            trainingField.style.display = 'none';
            pageField.style.display = 'none';
            routeField.style.display = 'block';
        } else {
            trainingField.style.display = 'none';
            pageField.style.display = 'none';
            routeField.style.display = 'none';
        }
    });

    // Gestion des dimensions de l'image
    const widthInput = document.getElementById('image_width');
    const heightInput = document.getElementById('image_height');
    const ratioDisplay = document.getElementById('ratio-display');

    function updateRatio() {
        const width = parseInt(widthInput.value);
        const height = parseInt(heightInput.value);
        
        if (width && height) {
            const ratio = (width / height).toFixed(2);
            ratioDisplay.textContent = `{{ __('admin/push.dimensions.ratio_with_size', ['ratio' => '']) }}`.replace(':ratio', ratio).replace(':width', width).replace(':height', height);
        }
    }

    widthInput.addEventListener('input', updateRatio);
    heightInput.addEventListener('input', updateRatio);

    // Gestion des préréglages
    const presetButtons = document.querySelectorAll('.preset-btn');

    // Gestion des préréglages
    presetButtons.forEach(button => {
        button.addEventListener('click', function() {
            const width = this.getAttribute('data-width');
            const height = this.getAttribute('data-height');
            
            widthInput.value = width;
            heightInput.value = height;
            
            updateRatio();
            
            this.classList.add('btn-primary');
            this.classList.remove('btn-outline-secondary');
            
            setTimeout(() => {
                this.classList.remove('btn-primary');
                this.classList.add('btn-outline-secondary');
            }, 300);
        });
    });

    // Mettre à jour le ratio
    updateRatio();

    // Gestion du compteur de caractères pour les champs content
    const contentFields = document.querySelectorAll('.content-field');

    function updateCharacterCount(textarea) {
        const locale = textarea.getAttribute('data-locale');
        const counter = document.getElementById(locale + '-content-counter');
        const currentLength = textarea.value.length;
        const maxLength = 160;

        counter.textContent = currentLength;

        // Changer la couleur selon le nombre de caractères
        if (currentLength >= maxLength) {
            counter.classList.remove('text-warning', 'text-muted');
            counter.classList.add('text-danger', 'fw-bold');
        } else if (currentLength >= maxLength * 0.9) { // 90% = 144 caractères
            counter.classList.remove('text-danger', 'text-muted');
            counter.classList.add('text-warning', 'fw-bold');
        } else {
            counter.classList.remove('text-danger', 'text-warning', 'fw-bold');
            counter.classList.add('text-muted');
        }
    }

    contentFields.forEach(textarea => {
        // Initialiser le compteur au chargement
        updateCharacterCount(textarea);

        // Mettre à jour le compteur à chaque saisie
        textarea.addEventListener('input', function() {
            updateCharacterCount(this);
        });
    });

    const form = document.getElementById('push-form');
    const submitBtn = document.getElementById('savepush');
    const isEditMode = @json(isset($push) && $push->id);

    // Validation manuelle complète avant soumission
    form.addEventListener('submit', function(e) {
        e.preventDefault();

        let hasErrors = false;
        let errorMessages = [];

        // 1. Valider image (uniquement en mode création)
        if (!isEditMode) {
            const imageField = document.getElementById('image');
            if (!imageField.value) {
                imageField.classList.add('is-invalid');
                hasErrors = true;
            }
        }

        // 2. Valider dimensions
        const width = parseInt(widthInput.value);
        const height = parseInt(heightInput.value);

        if (!widthInput.value || width < 100 || width > 3000) {
            widthInput.classList.add('is-invalid');
            hasErrors = true;
        }

        if (!heightInput.value || height < 100 || height > 3000) {
            heightInput.classList.add('is-invalid');
            hasErrors = true;
        }

        // 3. Valider title et content si display_text est activé
        const displayTextSwitch = document.getElementById('displaytextswitch');
        if (displayTextSwitch && displayTextSwitch.checked) {
            const locales = window.translatableLocales;
            for (let i = 0; i < locales.length; i++) {
                const locale = locales[i];
                const titleField = document.getElementById(locale + '-title');
                const contentField = document.getElementById(locale + '-content');

                if (!titleField || !titleField.value.trim()) {
                    if (titleField) titleField.classList.add('is-invalid');
                    errorMessages.push('Le titre est obligatoire en ' + locale.toUpperCase() + '.');
                    hasErrors = true;
                }

                if (!contentField || !contentField.value.trim()) {
                    if (contentField) contentField.classList.add('is-invalid');
                    errorMessages.push('Le contenu est obligatoire en ' + locale.toUpperCase() + '.');
                    hasErrors = true;
                }
            }
        }

        // 4. Valider les champs bouton si activé
        if (displayButton.checked) {
            // Valider button_link_type
            if (!buttonLinkType.value) {
                buttonLinkType.classList.add('is-invalid');
                errorMessages.push('{{ __("admin/push.errors.button_link_type_required") }}');
                hasErrors = true;
            }

            // Selon le type, valider les bons champs
            if (buttonLinkType.value === 'external') {
                const buttonLink = document.getElementById('button_link');
                if (!buttonLink.value.trim()) {
                    buttonLink.classList.add('is-invalid');
                    errorMessages.push('{{ __("admin/push.errors.button_link_required") }}');
                    hasErrors = true;
                }
            } else if (buttonLinkType.value === 'internal') {
                if (!internalLinkType.value) {
                    internalLinkType.classList.add('is-invalid');
                    errorMessages.push('{{ __("admin/push.errors.internal_link_type_required") }}');
                    hasErrors = true;
                }

                // Valider le champ correspondant au type interne
                if (internalLinkType.value === 'training') {
                    const trainingId = document.getElementById('training_id');
                    if (!trainingId.value) {
                        trainingId.classList.add('is-invalid');
                        errorMessages.push('{{ __("admin/push.errors.training_required") }}');
                        hasErrors = true;
                    }
                } else if (internalLinkType.value === 'page') {
                    const pageId = document.getElementById('page_id');
                    if (!pageId.value) {
                        pageId.classList.add('is-invalid');
                        errorMessages.push('{{ __("admin/push.errors.page_required") }}');
                        hasErrors = true;
                    }
                } else if (internalLinkType.value === 'route') {
                    const routeName = document.getElementById('route_name');
                    if (!routeName.value) {
                        routeName.classList.add('is-invalid');
                        errorMessages.push('{{ __("admin/push.errors.route_required") }}');
                        hasErrors = true;
                    }
                }
            }

            // Valider les textes de bouton pour chaque langue
            const locales = window.translatableLocales;
            for (let i = 0; i < locales.length; i++) {
                const locale = locales[i];
                const buttonTextField = document.getElementById(locale + '-button_text');
                if (!buttonTextField || !buttonTextField.value.trim()) {
                    if (buttonTextField) buttonTextField.classList.add('is-invalid');
                    errorMessages.push('{{ __("admin/push.errors.button_text_required") }}'.replace(':locale', locale.toUpperCase()));
                    hasErrors = true;
                }
            }
        }

        // Afficher la modal si erreurs
        if (hasErrors) {
            const message = errorMessages.length > 0
                ? errorMessages.join('<br>')
                : "{{ __('admin/push.errors.fill_all_required_fields') }}";

            Swal.fire({
                title: "Champs manquants",
                html: message,
                icon: "warning",
                customClass: {
                    confirmButton: "btn btn-primary w-xs mt-2"
                },
                buttonsStyling: false,
                showCloseButton: true
            });
            return false;
        }

        // Tout est OK, soumettre
        submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>{{ __("admin/push.buttons.saving") }}';
        submitBtn.disabled = true;
        form.submit();
    });

    // Nettoyer les erreurs lors de la saisie
    buttonLinkType.addEventListener('change', () => buttonLinkType.classList.remove('is-invalid'));
    document.getElementById('button_link')?.addEventListener('input', function() { this.classList.remove('is-invalid'); });
    internalLinkType.addEventListener('change', function() {
        this.classList.remove('is-invalid');
        document.getElementById('training_id')?.classList.remove('is-invalid');
        document.getElementById('page_id')?.classList.remove('is-invalid');
        document.getElementById('route_name')?.classList.remove('is-invalid');
    });
    document.getElementById('training_id')?.addEventListener('change', function() { this.classList.remove('is-invalid'); });
    document.getElementById('page_id')?.addEventListener('change', function() { this.classList.remove('is-invalid'); });
    document.getElementById('route_name')?.addEventListener('change', function() { this.classList.remove('is-invalid'); });

    window.translatableLocales.forEach(locale => {
        document.getElementById(locale + '-button_text')?.addEventListener('input', function() { this.classList.remove('is-invalid'); });
        document.getElementById(locale + '-title')?.addEventListener('input', function() { this.classList.remove('is-invalid'); });
        document.getElementById(locale + '-content')?.addEventListener('input', function() { this.classList.remove('is-invalid'); });
    });

    widthInput.addEventListener('input', () => widthInput.classList.remove('is-invalid'));
    heightInput.addEventListener('input', () => heightInput.classList.remove('is-invalid'));
});
</script>
@endpush