@extends('layout.app')

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

@push('styles')
@endpush

@section('active_missions', '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 mb-1">
            <div class="content-header-left col-md-6 col-12 breadcrumb-new">
                <h3 class="content-header-title mb-0 d-inline-block">{{ __('Missions')}}</h3>
                <div class="row breadcrumbs-top d-inline-block">
                    <div class="breadcrumb-wrapper col-12">
                        <ol class="breadcrumb">
                            @if(isset($mission))
                                <li class="breadcrumb-item">{{ __('Edit') }}</li>
                                <li class="breadcrumb-item active">{{$mission->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-msm-right">
                    <a class="btn btn-dark" href="{{ route('missions.index') }}">
                        <i class="la la-arrow-left"></i> {{ __('Missions') }}
                    </a>
                    <button type="submit" class="btn btn-success ml-1 pr-1 pl-1" form="missionForm">
                        <i class="la la-save"></i> {{ __('Save') }}
                    </button>
                </div>
            </div>
        </div>
        <div class="content-body pb-5">
            <form autocomplete="off" class="form form-horizontal" enctype="multipart/form-data" id="missionForm" 
                action="@if(isset($mission)) {{ route('missions.update', $mission->id) }} @else {{ route('missions.store') }} @endif" method="POST">
                @csrf
                @if(isset($mission))
                    @method('PUT')
                @endif
                <div class="form-body">
                    <div class="card">
                        <div class="card-content collpase show">
                            <div class="card-body">
                                <div class="row">
                                    @if (isset($mission))
                                        <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="{{ $mission->reference }}" disabled>
                                        </div>
                                    @endif
                                    <div class="col-md-7 mb-1">
                                        <label class="form-label" for="name">{{ __('Name') }} <span class="danger">*</span> </label>
                                        <input type="text" class="form-control" name="name" id="name" value="{{ old('name', $mission->name ?? '') }}" required>
                                    </div>
                                    <div class="col-md-5 mb-1 skin skin-square mt-3">
                                        <fieldset>
                                            <input type="checkbox" id="is_active" name="is_active" value="1" {{ old('is_active', $mission->is_active ?? true) ? 'checked' : '' }}>
                                            <label for="is_active">{{ __('Mission active')}}</label>
                                        </fieldset>
                                    </div>
                                    <div class="col-12 mb-1">
                                        <label class="form-label" for="description">{{ __('Description') }} </label>
                                        <textarea class="form-control" name="description" id="description" rows="5">{{ old('description', $mission->description ?? '') }}</textarea>
                                    </div>
                                    {{--@if (!isset($mission))
                                        <div class="col-md-12 mb-1">
                                            <div class="form-group">
                                                <label class="form-label" for="role_id">{{ __('Affecter au Roles') }} </label>
                                                <select class="form-control select2" name="role_id[]" id="role_id" multiple>
                                                    @foreach(\Spatie\Permission\Models\Role::all() as $role)
                                                        <option value="{{ $role->id }}" {{ isset($user) && ($user->getRoleNames()[0]??'') ==  $role->name ? 'selected' : '' }}> {{ $role->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    @endif--}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content collpase show">
                        <div class="card-header d-flex justify-content-between align-items-center bg-light">
                            <h4 class="card-title mb-0">
                                {{ __("Affecter à ")}}
                            </h4>
                            <div>
                                <button type="button" class="btn btn-dark btn-sm" data-toggle="collapse" data-target="#filtersCollapse" aria-expanded="false" aria-controls="filtersCollapse">
                                    <i class="la la-filter"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row collapse" id="filtersCollapse">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label" for="organisation">{{ __('Organisation') }} </label>
                                        <select class="form-control select2" name="organisation" id="organisation" multiple>
                                            @foreach(\App\Models\Organisation::all() as $org)
                                                <option value="{{ $org->id }}"> {{ $org->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label" for="fonction">{{ __('Fonction') }} </label>
                                        <select class="form-control select2" name="fonction" id="fonction" multiple>
                                            @foreach(\App\Models\Fonction::all() as $fn)
                                                <option value="{{ $fn->id }}"> {{ $fn->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-label" for="role">{{ __('System role') }} </label>
                                        <select class="form-control select2" name="role" id="role" multiple>
                                            @foreach(\Spatie\Permission\Models\Role::all() as $role)
                                                <option value="{{ $role->name }}"> {{ $role->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-label" for="driver">{{ __('Chauffeur') }} </label>
                                        <select class="form-control select2" name="driver" id="driver">
                                            <option value="">{{ __('Select') }}</option>
                                            <option value="1">{{ __("Oui")}}</option>
                                            <option value="0">{{ __("Non")}}</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-label" for="mediateur">{{ __('Médiateur') }} </label>
                                        <select class="form-control select2" name="mediateur" id="mediateur">
                                            <option value="">{{ __('Select') }}</option>
                                            <option value="1">{{ __("Oui")}}</option>
                                            <option value="0">{{ __("Non")}}</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row" style="max-height: 500px;overflow-y: auto;overflow-x: auto;">
                                <table class="table table-bordered">
                                    <thead class="text-uppercase text-center text-white bg-light text-dark">
                                        <tr>
                                            <th>
                                                <fieldset>
                                                    <input type="checkbox" id="select-all">
                                                </fieldset>
                                            </th>
                                            <th>{{ __('Name') }}</th>
                                            <th>{{ __('Organisation') }}</th>
                                            <th>{{ __('Fonction') }}</th>
                                            <th>{{ __('Chauffeur') }}</th>
                                            <th>{{ __('Médiateur') }}</th>
                                            <th>{{ __('System role')}}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($employes as $employe)
                                            <tr data-organisation="{{ $employe->organisation_id }}" 
                                                data-fonction="{{ $employe->fonction_id }}"
                                                data-role="{{ $employe->user && count($employe->user->getRoleNames()) ? $employe->user->getRoleNames()[0] : '' }}">
                                                <td>
                                                    <fieldset>
                                                        <input type="checkbox" name="employes[]" value="{{$employe->id}}" {{ isset($mission) && $mission->toEmploye($employe->id) ? 'checked' : ''}}>
                                                    </fieldset>
                                                </td>
                                                <td>{{ $employe->first_name .' '. $employe->last_name }}</td>
                                                <td>{{ $employe->organisation->name ?? '' }}</td>
                                                <td>{{ $employe->fonction->name ?? '' }}</td>
                                                <td>{{$employe->is_driver ? __('Oui') : __('Non')}}</td>
                                                <td>{{$employe->mediateur ? __('Oui') : __('Non')}}</td>
                                                <td>{{$employe->user && count($employe->user->getRoleNames()) ? $employe->user->getRoleNames()[0] : ''}}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('modals')

@endsection

@push('scripts')    
    <script>
        $(document).ready(function(){
            ajaxForm("#missionForm");
            $('#select-all').on('change', function() {
                var isChecked = $(this).prop('checked');
                $('table tbody tr:visible input[name="employes[]"]').prop('checked', isChecked);
            });
            
            // Mettre à jour select-all quand des checkboxes individuelles changent
            $(document).on('change', 'input[name="employes[]"]', function() {
                var totalCheckboxes = $('input[name="employes[]"]').length;
                var checkedCheckboxes = $('input[name="employes[]"]:checked').length;
                $('#select-all').prop('checked', totalCheckboxes === checkedCheckboxes);
            });
            
            function updateSelectAll() {
                var visibleCheckboxes = $('table tbody tr:visible input[name="employes[]"]');
                var checkedVisible = $('table tbody tr:visible input[name="employes[]"]:checked');
                $('#select-all').prop('checked', visibleCheckboxes.length === checkedVisible.length && visibleCheckboxes.length > 0);
            }
            
            // Fonction de filtre
            function filterTable() {
                var organisations = $('#organisation').val() || [];
                var fonctions = $('#fonction').val() || [];
                var roles = $('#role').val() || [];
                var driver = $('#driver').val();
                var mediateur = $('#mediateur').val();
                
                $('table tbody tr').each(function() {
                    var row = $(this);
                    var show = true;
                    
                    // Filtre par organisation
                    if (organisations.length > 0) {
                        var orgId = row.data('organisation')?.toString();
                        show = organisations.includes(orgId);
                    }
                    
                    // Filtre par fonction
                    if (show && fonctions.length > 0) {
                        var foncId = row.data('fonction')?.toString();
                        show = fonctions.includes(foncId);
                    }
                    
                    // Filtre par rôle système
                    if (show && roles.length > 0) {
                        var roleName = row.data('role')?.toString();
                        show = roles.includes(roleName);
                    }
                    
                    // Filtre par chauffeur
                    if (show && driver !== '') {
                        var isDriver = row.find('td:eq(4)').text().trim() === '{{ __("Oui") }}';
                        show = (driver === '1') ? isDriver : !isDriver;
                    }
                    
                    // Filtre par médiateur
                    if (show && mediateur !== '') {
                        var isMediateur = row.find('td:eq(5)').text().trim() === '{{ __("Oui") }}';
                        show = (mediateur === '1') ? isMediateur : !isMediateur;
                    }
                    
                    if (show) {
                        row.show();
                    } else {
                        row.hide();
                        // Décocher les lignes cachées avec iCheck
                        row.find('input[name="employes[]"]').iCheck('uncheck');
                    }
                });
                
                updateSelectAll();
            }
            
            // Appliquer les filtres sur changement
            $('#organisation, #fonction, #role, #driver, #mediateur').on('change', function() {
                filterTable();
            });
        });
    </script>
@endpush