@vite([
    'resources/css/dashboard.css',
    'resources/css/add-button.css',
    'resources/css/success.css',
    'resources/css/job/job.css',
    'resources/css/job/add.css',
    'resources/css/job/edit.css',
    'resources/js/job/table.js',
    'resources/js/job/add.js',
    'resources/js/job/edit.js',
    'resources/js/job/import.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 table-active"
               href="{{route('jobs.index')}}" id="list-link">
                <img src="{{asset('icons/MétierActive.svg')}}" class="me-1 mb-2">
                Métier
            </a>
            @can('positions-manage')

            <a class="nav-link  pb-4.5" href="{{route('position.index')}}" id="table-link">
                <img src="{{asset('icons/Fonction.svg')}}" class="me-1 mb-2">
                Fonction
            </a>
                @endcan
        </div>
        @can('job-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="#importJobModal">
            <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="addJobBtn">
            <i class="bi bi-plus fs-5" id="addJobButton"></i> Ajouter un métier
        </button>
        </div>
            @endcan
    </div>
@include("job.add")
@include("job.edit")
@include("components.success")
        <div class="empty">
            <div class="filter-row row  " style="display: none">
                <div class="col-6 me-5  job-search">
                    <input type="text" id="jobFilter" class="form-control shadow-none border " placeholder="Métier">
                </div>
                <div class="col-6 ms-5  code-jobs-search">
                    <input type="text" id="codeFilter" class="form-control shadow-none border " placeholder="Code">
                </div>
            </div>
        </div>
@include("job.table")


    </div>

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

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

    </script>

@endsection