@extends('layout.app')

@section('title')
    {{ __('Drivers') }}
@endsection

@push('styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('modern-admin/app-assets/vendors/css/editors/summernote.css') }}">
@endpush

@section('active_drivers', 'active')
@section('data_col', '2-columns')
@section('body_class', '2-columns')

@section('content')
<div class="app-content content">
    <div class="content-overlay"></div>
    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-6 col-12 mb-2 breadcrumb-new">
                <h3 class="content-header-title mb-0 d-inline-block">{{ __('Drivers')}}</h3>
                <div class="row breadcrumbs-top d-inline-block">
                    <div class="breadcrumb-wrapper col-12">
                        <ol class="breadcrumb">
                            @if(isset($driver))
                                <li class="breadcrumb-item">{{ __('Edit') }}</li>
                                <li class="breadcrumb-item active">{{$driver->reference}}</li>
                            @else
                                <li class="breadcrumb-item active">{{ __('Add') }}</li>
                            @endif
                        </ol>
                    </div>
                </div>
            </div>
            <div class="content-header-right col-md-6 col-12">
                <div class="btn-group float-md-right">
                    <a class="btn btn-dark" href="{{ route('drivers.index') }}">
                        <i class="la la-arrow-left"></i> {{ __('Drivers') }}
                    </a>
                    <button type="submit" class="btn btn-success ml-1 pr-1 pl-1" form="driverForm">
                        <i class="la la-save"></i> {{ __('Save') }}
                    </button>
                </div>
            </div>
        </div>
        <div class="content-body pb-5">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-content collpase show">
                                <div class="card-body">
                                    <form class="form form-horizontal" enctype="multipart/form-data" id="driverForm" 
                                        action="@if(isset($driver)) {{ route('drivers.update', $driver->id) }} @else {{ route('drivers.store') }} @endif" method="POST">
                                        @csrf
                                        @if(isset($driver))
                                            @method('PUT')
                                        @endif
                                        
                                        <div class="form-body">
                                            <div class="row">
                                                @if (isset($driver))
                                                    <div class="col-12 mb-1">
                                                        <label class="form-label" for="reference">{{ __('Référence') }} </label>
                                                        <input type="text" class="form-control" id="reference" value="{{ $driver->reference }}" disabled>
                                                    </div>
                                                @endif
                                                <div class="col-md-6 mb-1">
                                                    <label class="form-label" for="first_name">{{ __('First Name') }} <span class="danger">*</span> </label>
                                                    <input type="text" class="form-control" name="first_name" id="first_name" value="{{ old('first_name', $driver->first_name ?? '') }}" required>
                                                </div>
                                                <div class="col-md-6 mb-1">
                                                    <label class="form-label" for="last_name">{{ __('Last Name') }} <span class="danger">*</span> </label>
                                                    <input type="text" class="form-control" name="last_name" id="last_name" value="{{ old('last_name', $driver->last_name ?? '') }}" required>
                                                </div>
                                                <div class="col-md-6 mb-1">
                                                    <label class="form-label" for="email">{{ __('Email') }} <span class="danger">*</span> </label>
                                                    <input type="email" class="form-control" name="email" id="email" value="{{ old('email', $driver->email ?? '') }}" required>
                                                </div>
                                                <div class="col-md-6 mb-1">
                                                    <label class="form-label" for="phone">{{ __('Phone') }} <span class="danger">*</span> </label>
                                                    <input type="text" class="form-control" name="phone" id="phone" value="{{ old('phone', $driver->phone ?? '') }}" required>
                                                </div>
                                                <div class="col-md-6 mb-1">
                                                    <div class="form-group">
                                                        <label class="form-label" for="fonction_id">{{ __('Fonction') }} <span class="danger">*</span></label>
                                                        <select class="form-control select2" name="fonction_id" id="fonction_id" required>
                                                            <option value="">{{ __('Select') }}</option>
                                                            @foreach($fonctions as $fn)
                                                                <option value="{{ $fn->id }}" {{ old('fonction_id', $driver->fonction_id ?? '') == $fn->id ? 'selected' : '' }}> {{ $fn->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-6 mb-1">
                                                    <div class="form-group">
                                                        <label class="form-label" for="organisation_id">{{ __('Organisation') }} <span class="danger">*</span></label>
                                                        <select class="form-control select2" name="organisation_id" id="organisation_id" required>
                                                            <option value="">{{ __('Select') }}</option>
                                                            @foreach($organisations as $org)
                                                                <option value="{{ $org->id }}" {{ old('organisation_id', $driver->organisation_id ?? '') == $org->id ? 'selected' : '' }}> {{ $org->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-6 mb-1 skin skin-square">
                                                    <fieldset>
                                                        <input type="checkbox" id="is_active" name="is_active" value="1" {{ old('is_active', $driver->is_active ?? true) ? 'checked' : '' }}>
                                                        <label for="is_active">{{ __('Employe active')}}</label>
                                                    </fieldset>
                                                </div>
                                            </div>
                                            <input type="hidden" name="has_permit" value="1">
                                            @if (!isset($driver))
                                                <input type="hidden" name="has_account" value="1">
                                                <div class="row tab-authentification">
                                                    <div class="col-md-12 mb-1">
                                                        <div class="form-group">
                                                            <label class="form-label" for="role_id">{{ __('Role') }} <span class="danger">*</span></label>
                                                            <select class="form-control select2" name="role_id" id="role_id" required>
                                                                <option value="">{{ __('Select') }}</option>
                                                                @foreach($roles as $role)
                                                                    <option value="{{ $role->id }}"> {{ $role->name }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6 position-relative mt-1">
                                                        <label for="password" class="form-label">{{ __('Password') }} <span class="text-danger">*</span></label>
                                                        <div class="input-group">
                                                            <input type="password" class="form-control" id="password" name="user_password" placeholder="{{ __('Entrez votre mot de passe') }}" required>
                                                            <button type="button" class="btn btn-outline-dark generate-password">
                                                                <i class="fas fa-random"></i>
                                                            </button>
                                                            <button type="button" class="btn btn-outline-dark toggle-password" data-target="password">
                                                                <i class="fas fa-eye"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6 position-relative mt-1">
                                                        <label for="password_confirmation" class="form-label">{{ __('Confirm Password') }} <span class="text-danger">*</span></label>
                                                        <div class="input-group">
                                                            <input type="password" class="form-control" id="password_confirmation" name="user_password_confirm" placeholder="{{ __('Confirmez votre mot de passe') }}" required>
                                                            <button type="button" class="btn btn-outline-dark toggle-password" data-target="password_confirmation">
                                                                <i class="fas fa-eye"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <div class="row justify-content-md-center">
                                                            <div class="col-lg-6 p-1 shadow-lg">
                                                                <div class="validation-container container">
                                                                    <div class="progress" style="height: 10px;">
                                                                        <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                                                                    </div>
                                                                    <div>
                                                                        <div class="requirement" id="length-req">
                                                                            <i class="fas fa-times-circle text-danger"></i> {{ __("Au moins 8 caractères")}}
                                                                        </div>
                                                                        <div class="requirement" id="lowercase-req">
                                                                            <i class="fas fa-times-circle text-danger"></i> {{ __("Lettres minuscules")}}
                                                                        </div>
                                                                        <div class="requirement" id="uppercase-req">
                                                                            <i class="fas fa-times-circle text-danger"></i> {{ __("Lettres majuscules")}}
                                                                        </div>
                                                                        <div class="requirement" id="number-req">
                                                                            <i class="fas fa-times-circle text-danger"></i> {{ __("Au moins un chiffre")}}
                                                                        </div>
                                                                        <div class="requirement" id="confirm-req">
                                                                            <i class="fas fa-times-circle text-danger"></i> {{ __("Confirmation du mot de passe")}}
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                            <div class="row">
                                                <table class="table table-bordered">
                                                    <thead>
                                                        <tr>
                                                            <th> {{ __("Mission") }} </th>
                                                            <th class="w-25"> {{ __("Active") }} </th>
                                                            <th class="w-25"> {{ __("Besoin validation") }} </th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($missions as $mission)
                                                            <tr>
                                                                <td>
                                                                    #{{ $mission->reference }} {{ $mission->name }}
                                                                </td>
                                                                <td>
                                                                    <div class="row skin skin-square">
                                                                        <fieldset>
                                                                            <input type="checkbox" name="mission[{{$mission->id}}][id]" value="1" {{isset($driver) && $driver->getMission($mission->id) ? 'checked' : ''}}>
                                                                        </fieldset>
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <div class="row skin skin-square">
                                                                        <fieldset>
                                                                            <input type="checkbox" name="mission[{{$mission->id}}][validation]" value="1" {{isset($driver) && $driver->getMission($mission->id) && $driver->getMission($mission->id)->need_validation ? 'checked' : ''}}>
                                                                        </fieldset>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('modals')

@endsection

@push('scripts')
<script src="{{ asset('modern-admin/app-assets/vendors/js/editors/summernote/summernote.js') }}"></script>
<script src="{{ asset('js/generate-password.js') }}"></script>
<script>
    $(document).ready(function(){
        ajaxForm("#driverForm");
        $('#description').summernote({
            height: 200,
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'italic', 'underline', 'clear']],
                ['fontname', ['fontname']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['height', ['height']],
                ['table', ['table']],
                ['insert', ['link', 'picture', 'hr']],
                ['view', ['fullscreen', 'codeview', 'help']]
            ]
        });
    });
</script>
<script>
    $(document).ready(function() {
        $(".toggle-password").click(function() {
            let target = $("#" + $(this).data("target"));
            let icon = $(this).find("i");

            if (target.attr("type") === "password") {
                target.attr("type", "text");
                icon.removeClass("fa-eye").addClass("fa-eye-slash");
            } else {
                target.attr("type", "password");
                icon.removeClass("fa-eye-slash").addClass("fa-eye");
            }
        });
    });
</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var testBtn = false;
        const passwordInput = document.getElementById('password');
        const confirmInput = document.getElementById('password_confirmation');
        const progressBar = document.querySelector('.progress-bar');
        const requirements = {
            length: document.getElementById('length-req'),
            lowercase: document.getElementById('lowercase-req'),
            uppercase: document.getElementById('uppercase-req'),
            number: document.getElementById('number-req'),
            confirm: document.getElementById('confirm-req')
        };
        
        // Fonction pour vérifier les exigences du mot de passe
        function checkPasswordRequirements(password) {
            const hasLength = password.length >= 8;
            const hasLowercase = /[a-z]/.test(password);
            const hasUppercase = /[A-Z]/.test(password);
            const hasNumber = /[0-9]/.test(password);
            
            return { hasLength, hasLowercase, hasUppercase, hasNumber };
        }
        
        // Fonction pour mettre à jour l'interface utilisateur
        function updateUI(requirementsMet) {
            // Mettre à jour les icônes et couleurs des exigences
            requirements.length.classList.toggle('valid', requirementsMet.hasLength);
            requirements.length.querySelector('i').className = requirementsMet.hasLength ? 
                'fas fa-check-circle text-success' : 'fas fa-times-circle text-danger';
            
            requirements.lowercase.classList.toggle('valid', requirementsMet.hasLowercase);
            requirements.lowercase.querySelector('i').className = requirementsMet.hasLowercase ? 
                'fas fa-check-circle text-success' : 'fas fa-times-circle text-danger';
            
            requirements.uppercase.classList.toggle('valid', requirementsMet.hasUppercase);
            requirements.uppercase.querySelector('i').className = requirementsMet.hasUppercase ? 
                'fas fa-check-circle text-success' : 'fas fa-times-circle text-danger';
            
            requirements.number.classList.toggle('valid', requirementsMet.hasNumber);
            requirements.number.querySelector('i').className = requirementsMet.hasNumber ? 
                'fas fa-check-circle text-success' : 'fas fa-times-circle text-danger';
            
            // Vérifier la confirmation
            const passwordsMatch = (passwordInput.value === confirmInput.value) && (passwordInput.value !== '');
           
            requirements.confirm.classList.toggle('valid', passwordsMatch);
            requirements.confirm.querySelector('i').className = passwordsMatch ? 
                'fas fa-check-circle text-success' : 'fas fa-times-circle text-danger';
            
            // Calculer le pourcentage de complétion
            const totalRequirements = 5;
            let metRequirements = Object.values(requirementsMet).filter(Boolean).length;
            
            // Ajouter la confirmation si nécessaire
            if (passwordsMatch) metRequirements++;
            
            const completionPercentage = (metRequirements / totalRequirements) * 100;
            
            // Mettre à jour la barre de progression
            progressBar.style.width = `${completionPercentage}%`;
            
            // Changer la couleur en fonction de la force
            if (completionPercentage <= 20) {
                progressBar.className = 'progress-bar bg-danger bg-darken-4';
            } else if (completionPercentage <= 40) {
                progressBar.className = 'progress-bar bg-danger';
            } else if (completionPercentage <= 60){
                progressBar.className = 'progress-bar bg-danger bg-lighten-1';
            }else if (completionPercentage <= 80){
                progressBar.className = 'progress-bar bg-warning';
            }else {
                testBtn = true;
                progressBar.className = 'progress-bar bg-success';
            }
        }
        
        // Écouter les modifications du mot de passe
        passwordInput.addEventListener('input', function() {
            testBtn = false;
            const password = this.value;
            const requirementsMet = checkPasswordRequirements(password);
            updateUI(requirementsMet);
            
            // Vérifier la confirmation si le champ de confirmation n'est pas vide
            if (confirmInput.value !== '') {
                checkPasswordMatch();
            }
        });
        
        document.querySelector(".generate-password").addEventListener("click", function () {
            let newPassword = generatePassword();

            // Définir le mot de passe et déclencher les événements
            passwordInput.value = newPassword;
            confirmInput.value = newPassword;
            
            // Déclencher manuellement l'événement input
            const event = new Event('input', { bubbles: true });
            passwordInput.dispatchEvent(event);
            const originalType = passwordInput.type;
            passwordInput.type = 'text';
            setTimeout(() => { passwordInput.type = originalType; }, 1000);

            // Déclencher manuellement l'événement input
            const event2 = new Event('input', { bubbles: true });
            confirmInput.dispatchEvent(event2);
            const originalType2 = confirmInput.type;
            confirmInput.type = 'text';
            setTimeout(() => { confirmInput.type = originalType2; }, 1000);
        });

        // Fonction pour vérifier si les mots de passe correspondent
        function checkPasswordMatch() {
            testBtn = false;
            // Mettre à jour l'UI pour refléter l'état de la confirmation
            const requirementsMet = checkPasswordRequirements(passwordInput.value);
            updateUI(requirementsMet);
        }

        confirmInput.addEventListener('input', checkPasswordMatch);
        
    });
</script>
@endpush