@vite([
    'resources/css/dashboard.css',
    'resources/css/add-button.css',
    'resources/css/success.css',
    'resources/css/job/position/position.css',
    'resources/css/job/position/add.css',
    'resources/css/job/position/edit.css',
    'resources/js/job/position/table.js',
    'resources/js/job/position/import.js',
    'resources/js/job/position/add.js',
    'resources/js/job/position/edit.js',

    'resources/js/success.js',


])
@extends('main')
@section('content')
    <div class="content" id="content">

        <div class="d-flex justify-content-between align-items-center border-bottom mb-4 pb-0" style="width: 100%;">
            <div class="d-flex">
            @include('components.content_header')
            <a class="nav-link me-4 "
               href="{{route('jobs.index')}}" id="list-link">
                <img src="{{asset('icons/Metier.svg')}}" class="me-1 mb-2">
                Métier
            </a>
            <a class="nav-link table-active  pb-4.5" href="{{route('position.index')}}" id="table-link">
                <img src="{{asset('icons/FonctionActive.svg')}}" class="me-1 mb-2">
                Fonction
            </a>
        </div>
            @can('position-add')
        <div class="d-flex align-items-center pb-3">

            <button type="button" class="btn btn-import  me-3" data-bs-toggle="modal" data-bs-target="#importPositionModal">
                <img src="{{asset('icons/upload.svg')}}" id="addExcelButton"> Importer Fichier Excel
            </button>
            <button class="btn btn-clear me-2 clearButton" style="display: none;">
                <i class="bi bi-x fs-5"></i> Effacer
            </button>
            <button class="btn btn-filter me-3">
                <i class="bi bi-funnel"></i> Afficher les Filtres
            </button>
            <div class="border-end me-3" style="height: 40px;"></div>

            <button class="btn btn-danger border-left" id="addPositionBtn">
                <i class="bi bi-plus fs-5" id="addPositionButton"></i> Ajouter une fonction
            </button>
            @endcan
        </div>
        </div>
        @include("job.position.add")
        @include("job.position.edit")
        @include("components.success")
        <div class="empty">
            <div class="filter-row row  " style="display: none">

                <div class="col-6 me-5  position-jobs-search">
                    <input type="text" id="positionFilter" class="form-control shadow-none border " placeholder="Fonction">
                </div>
                <div class="col-6  ms-5 job-search">
                    <select id="jobFilter" class="form-control selectpicker" data-live-search="true">
                        <option disabled selected>Métier</option>
                        <option value="0">Tous</option>
                        @foreach($jobs as $job)
                            <option value="{{ $job->id }}|{{ $job->name }}">{{ $job->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

        </div>
        @include("job.position.table")


    </div>
    <div class="modal fade" id="importPositionModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        @include('job.position.import')
    </div>

@endsection
@section('scripts')
    <script>
        var ajaxUrl = "{{ route('positions.ajax') }}";
        var deleteUrl = "{{route('position.destroy',':id')}}";

    </script>

@endsection