@extends('web.layouts.base')

@section('titre')
    Demande Permis
@endsection

@section('styles')
    {{--    <link rel="stylesheet" media="screen, print" href="{{ asset('dt/css/datagrid/datatables/datatables.bundle.css') }}"> --}}
    {{--    <link id="myskin" rel="stylesheet" media="screen, print" href="{{ asset('dt/css/skins/skin-master.css') }}"> --}}
    {{--    <link rel="stylesheet" media="screen, print" href="{{ asset('dt/css/fa-solid.css') }}"> --}}

    {{--    <script src="{{ asset('assets/js/js/jquery.min.js') }}"></script> --}}
    {{--    <script src="{{ asset('assets/js/js/umd/popper.min.js') }}"></script> --}}
    {{--    <script src="{{ asset('assets/js/js/bootstrap.min.js') }}"></script> --}}
    {{--    <script src="{{ asset('assets/js/js/bootstrap.bundle.min.js') }}"></script> --}}
@endsection

@section('content')
    <div class="page-content">
        <div class="container-fluid">
            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                        <h4 class="mb-sm-0">Formulaire de demande d'accès aux ressources</h4>
                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="{{ route('home') }}">Dashboard</a></li>
                                <li class="breadcrumb-item active">Permis</li>
                            </ol>
                        </div>

                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title mb-0" align="center">FORMULAIRE DE DEMANDE D'ACCES AUX RESSOURCES
                                GENETIQUES ET AUX SAVOIRS TRADITIONNELS ASSOCIES ET A LEURS DERIVES EN
                                PROCEDURE DE NOTIFICATION</h4>
                        </div><!-- end card header -->
                        @if ($compteur == 0)
                            <div class="card-body">
                                <form action="{{ route('permis.demande.store') }}" class="form-steps save-form"
                                    method="POST" enctype="multipart/form-data" autocomplete="off">
                                    @csrf
                                    {{-- <div class="text-center pt-3 pb-4 mb-1">
                                        <h5>AUTORITE NATIONALEE COMPETENTE</h5>
                                    </div> --}}
                                    <div id="custom-progress-bar" class="progress-nav mb-4">
                                        <div class="progress" style="height: 1px;">
                                            <div class="progress-bar" role="progressbar" style="width: 0%;"
                                                aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>

                                        <ul class="nav nav-pills progress-bar-tab custom-nav" role="tablist">
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link rounded-pill active"
                                                    data-progressbar="custom-progress-bar" id="pills-gen-info-tab"
                                                    data-bs-toggle="pill" data-bs-target="#pills-gen-info" type="button"
                                                    role="tab" aria-controls="pills-gen-info"
                                                    aria-selected="true">1</button>
                                            </li>
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link rounded-pill" data-progressbar="custom-progress-bar"
                                                    id="pills-info-desc-tab" data-bs-toggle="pill"
                                                    data-bs-target="#pills-info-desc" type="button" role="tab"
                                                    aria-controls="pills-info-desc" aria-selected="false">2</button>
                                            </li>
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link rounded-pill" data-progressbar="custom-progress-bar"
                                                    id="pills-success-tab" data-bs-toggle="pill"
                                                    data-bs-target="#pills-success" type="button" role="tab"
                                                    aria-controls="pills-success" aria-selected="false">3</button>
                                            </li>
                                        </ul>
                                    </div>

                                    <div class="tab-content">
                                        <div class="tab-pane fade show active" id="pills-gen-info" role="tabpanel"
                                            aria-labelledby="pills-gen-info-tab">
                                            <div>
                                                <div class="mb-4">
                                                    <div>
                                                        {{-- <h5 class="mb-3">a. Pour la personne physique</h5> --}}
                                                        {{--                                                    <p class="text-muted">Je m’engage, sous peine des poursuites pénales, à ne faire sortir du territoire national, ni à faire usage commercial des ressources génétiques, savoirs traditionnels associés ou leurs dérivés dont l’accès me sera accordé par l’Autorité Nationale Compétente de la République Démocratique du Congo</p> --}}
                                                    </div>
                                                </div>
                                                {{-- <div class="row">
                                                    <div class="col-lg-6">
                                                        <div class="mb-3">
                                                            <label class="form-label" for="identification">Personnalité
                                                                juridique<span class="text-danger">*</span></label>
                                                            <select name="identification" id="identification"
                                                                class="form-select">
                                                                <option value="1">Personne Pyhysique</option>
                                                                <option value="2">Personne Morale</option>
                                                            </select>
                                                            <div class="invalid-feedback">Svp Entrer le type de personnalité juridique</div>
                                                        </div>
                                                    </div>
                                                </div> --}}
                                                <div class="row">
                                                    <div class="col-lg-6">
                                                        <div class="mb-3">
                                                            <label class="form-label" for="nom">Nom & Postnom /
                                                                Dénomination</label>
                                                            <input type="text" class="form-control" id="nom"
                                                                name="nom" placeholder="Entrer vore nom et postnom" value="{{ auth()->user()->name.' '.auth()->user()->postnom.' '.auth()->user()->prenom }}" @readonly(true)>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="mb-3">
                                                            <label class="form-label" for="nationalite">Nationalité</label>
                                                            <input type="text" class="form-control" name="nationalite" maxlength="255"
                                                                id="nationalite" placeholder="Entrer votre nationalité">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label" for="adresse">Adresse</label>
                                                    <input type="text" class="form-control" id="adresse" name="adresse"
                                                        placeholder="Enter votre adresse" value="{{ auth()->user()->adresse }}" @readonly(true) maxlength="255">
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-6">
                                                        <div class="mb-3">
                                                            <label class="form-label" for="telephone">Téléphone</label>
                                                            <input type="text" class="form-control" id="telephone" maxlength="255"
                                                                name="telephone" placeholder="Entrer votre téléphone" value="{{ auth()->user()->telephone }}" @readonly(true)>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="mb-3">
                                                            <label class="form-label" for="email">Email</label>
                                                            <input type="email" class="form-control" name="email"
                                                                id="email" placeholder="Entrer votre email" value="{{ auth()->user()->email }}" @readonly(true)>
                                                        </div>
                                                    </div>
                                                </div>
                                                @if (auth()->user()->role_id == '1')
                                                    <div class="row physique">
                                                        {{-- <div class="col-lg-6">
                                                            <div class="mb-3">
                                                                <label class="form-label" for="passeport">Numéro de
                                                                    passeport ou
                                                                    carte d'identité</label>
                                                                <input type="text" class="form-control" id="passeport"
                                                                    name="passeport"
                                                                    placeholder="Entrer votre numéro de passeport ou votre cart d'identité">
                                                            </div>
                                                        </div> --}}
                                                        <div class="col-lg-6">
                                                            <div class="mb-3">
                                                                <label class="form-label" for="pays">Pays de
                                                                    residence</label>
                                                                <select name="pays" id="pays"
                                                                    class="form-select" @readonly(true)>
                                                                    <option value="" selected disabled>Choisir un
                                                                        pays
                                                                    </option>
                                                                    @foreach ($pays as $pay)
                                                                        <option value="{{ $pay->id }}" {{ $pay->id == auth()->user()->pays_id ? 'selected' : '' }}>
                                                                            {{ $pay->pays }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @elseif (auth()->user()->role_id == '2')
                                                    <div class="row morale">
                                                        <div class="col-lg-6">
                                                            <div class="mb-3">
                                                                <label class="form-label" for="secteur">Secteur
                                                                    d'activité</label>
                                                                <input type="text" class="form-control" id="secteur"
                                                                    name="secteur" maxlength="255"
                                                                    placeholder="Entrer votre secteur d'activité">
                                                            </div>
                                                        </div>
                                                        {{-- <div class="col-lg-6">
                                                            <div class="mb-3">
                                                                <label class="form-label" for="rccm">Numéro de
                                                                    registre de
                                                                    commerce ou autres</label>
                                                                <input type="text" class="form-control" id="rccm"
                                                                    name="rccm"
                                                                    placeholder="Entrer votre registre de commerce ou autre document">
                                                            </div>
                                                        </div> --}}
                                                    </div>
                                                @endif
                                                <div class="mb-3">
                                                    <label class="form-label" for="proffession">Profession / Raison
                                                        Social</label>
                                                    <input type="text" class="form-control" id="proffession"
                                                        name="proffession" maxlength="255"
                                                        placeholder="Entrer votre proffession ou raison social" value="{{ auth()->user()->proffession }}">
                                                </div>
                                            </div>
                                            <div class="d-flex align-items-start gap-3 mt-4">
                                                <button type="button"
                                                    class="btn btn-primary btn-label right ms-auto nexttab nexttab"
                                                    data-nexttab="pills-info-desc-tab"><i
                                                        class="ri-arrow-right-line label-icon align-middle fs-16 ms-2"></i>Suivant</button>
                                            </div>
                                        </div>
                                        <!-- end tab pane -->

                                        <div class="tab-pane fade" id="pills-info-desc" role="tabpanel"
                                            aria-labelledby="pills-info-desc-tab">
                                            <div>
                                                <div class="mb-3">
                                                    <div>
                                                        <h5 class="mb-3">Accès</h5>
                                                        <p class="text-muted">Elément solicité :</p>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-2"></div>
                                                    <div class="col-md-4">
                                                        <div class="form-check form-check-success">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="rg" name="rg" value="rg">
                                                            <label class="form-check-label" for="rg">
                                                                Ressources Génétique(RG)
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4 text-center">
                                                        <div class="form-check form-check-success">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="sta" name="sta" value="sta">
                                                            <label class="form-check-label" for="sta">
                                                                Savoir Traditionnels Associés (STA)
                                                            </label>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                            <div>
                                                <div class="mb-3">
                                                    <div>
                                                        {{-- <h5 class="mb-3">Accès</h5> --}}
                                                        <p class="text-muted">Objet de la demande :</p>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-2"></div>
                                                    <div class="col-md-4">
                                                        <div class="form-check form-check-success mb-1">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="rechlocal" name="rechlocal" value="rechlocal">
                                                            <label class="form-check-label" for="rechlocal">
                                                                Recherche locale
                                                            </label>
                                                        </div>
                                                        <div class="form-check form-check-success">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="transresul" name="transresul" value="transresul">
                                                            <label class="form-check-label" for="transresul">
                                                                Transfert de resultat
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4 text-center">
                                                        <div class="form-check form-check-success mb-1">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="exportation" name="exportation" value="exportation">
                                                            <label class="form-check-label" for="exportation">
                                                                Exportation
                                                            </label>
                                                        </div>
                                                        <div class="form-check form-check-success mb-1">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="autresobjet" name="autresobjet" value="autresobjet">
                                                            <label class="form-check-label" for="autresobjet">
                                                                Autres(à préciser)
                                                            </label>
                                                            <input class="form-control d-none" type="text"
                                                                id="autresobjetinput" name="autresobjetinput" maxlength="255">
                                                        </div>

                                                    </div>

                                                </div>
                                            </div>
                                            <div>
                                                <div class="mb-3">
                                                    <div>
                                                        {{-- <h5 class="mb-3">Accès</h5> --}}
                                                        <p class="text-muted">But de la demande :</p>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-2"></div>
                                                    <div class="col-md-4">
                                                        <div class="form-check form-check-success mb-1">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="commercial" name="commercial" value="commercial">
                                                            <label class="form-check-label" for="commercial">
                                                                Commercial ou potentiellment commercial
                                                            </label>
                                                        </div>
                                                        <div class="form-check form-check-success">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="noncommercial" name="noncommercial"
                                                                value="noncommercial">
                                                            <label class="form-check-label" for="noncommercial">
                                                                Non commercial
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4 text-center">
                                                        <div class="form-check form-check-success mb-1">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="rechdev" name="rechdev" value="rechdev">
                                                            <label class="form-check-label" for="rechdev">
                                                                Recherche / Developpement
                                                            </label>
                                                        </div>
                                                        <div class="form-check form-check-success mb-1">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="regularisation" name="regularisation"
                                                                value="regularisation">
                                                            <label class="form-check-label" for="regularisation">
                                                                Regularisation
                                                            </label>
                                                        </div>
                                                        <div class="form-check form-check-success mb-1">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="autresbut" name="autresbut" value="autresbut">
                                                            <label class="form-check-label" for="autresbut">
                                                                Autres(à préciser)
                                                            </label>
                                                            <input class="form-control d-none" type="text"
                                                                id="autresbutinput" name="autresbutinput" maxlength="255">
                                                        </div>

                                                    </div>

                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <div>
                                                    {{-- <h5 class="mb-3">Accès</h5> --}}
                                                    <p class="text-muted">Description de la collecte :</p>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="lieu">Lieu /
                                                            Zones de collecte</label>
                                                        <input type="text" class="form-control" id="lieu"
                                                            name="lieu"
                                                            placeholder="Entrer le lieu ou la zone de collecte" maxlength="255">
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="duree">Durée de la
                                                            collecte</label>
                                                        <input type="text" class="form-control" name="duree"
                                                            id="duree" placeholder="Entrer la durée" maxlength="255">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="nombre">Nombre / Frequence de
                                                            collecte</label>
                                                        <input type="text" class="form-control" id="nombre"
                                                            name="nombre" maxlength="255"
                                                            placeholder="Entrer le nombre ou la frequence de collecte">
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="quantite">Quantite par
                                                            collecte</label>
                                                        <input type="text" class="form-control" name="quantite" maxlength="255"
                                                            id="quantite" placeholder="Entrer la durée">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-lg-4">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="periodicite">Periodicité de
                                                            collecte</label>
                                                        <input type="text" class="form-control" id="periodicite" maxlength="255"
                                                            name="periodicite"
                                                            placeholder="Entrer la periodicité de collecte">
                                                    </div>
                                                </div>
                                                <div class="col-lg-4">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="echantillon">Nombre
                                                            d'echantillon</label>
                                                        <input type="text" class="form-control" name="echantillon" maxlength="255"
                                                            id="echantillon" placeholder="Entrer le nombre d'echantillon">
                                                    </div>
                                                </div>
                                                <div class="col-lg-4">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="echantillon">Mode d'acquisition de
                                                            la collecte</label>
                                                        <input type="text" class="form-control" name="mode" maxlength="255"
                                                            id="mode" placeholder="Entrer le mode d'acquisition">
                                                    </div>
                                                </div>

                                            </div>
                                            <div>
                                                <div class="mb-3 mt-3">
                                                    <div>
                                                        <h5 class="mb-3">Identification de la RG/STA</h5>
                                                        <p class="text-muted">Type de la ressource biologique (RB) /
                                                            Ressource Génétique</p>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-3">
                                                        <div class="form-check form-check-success mb-1">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="animale" name="animale" value="animale">
                                                            <label class="form-check-label" for="animale">
                                                                Animale
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3 text-center">
                                                        <div class="form-check form-check-success mb-1">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="vegetale" name="vegetale" value="vegetale">
                                                            <label class="form-check-label" for="vegetale">
                                                                Végétale
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3 text-center">
                                                        <div class="form-check form-check-success mb-1">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="microorganisme" name="microorganisme"
                                                                value="microorganisme">
                                                            <label class="form-check-label" for="microorganisme">
                                                                Micro - Organisme
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3 text-center">
                                                        <div class="form-check form-check-success mb-1">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="autrestype" name="autrestype" value="autrestype">
                                                            <label class="form-check-label" for="autrestype">
                                                                Autres types(à préciser)
                                                            </label>
                                                            <input class="form-control d-none" type="text"
                                                                id="autrestypeinput" name="autrestypeinput" maxlength="255">
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <div>
                                                    {{-- <h5 class="mb-3">Accès</h5> --}}
                                                    <p class="text-muted">Nom Scientifique, commun ou local de la RB(connu
                                                        de l'utilisateur et du fournisseur) :</p>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="nomscientifique">Nom
                                                            Scientifique</label>
                                                        <textarea name="nomscientifique" id="nomscientifique" cols="30" rows="3" class="form-control" maxlength="255"></textarea>
                                                    </div>
                                                </div>
                                            </div>

                                            <div>
                                                <div class="mb-3 mt-3">
                                                    <div>
                                                        {{-- <h5 class="mb-3">Identification de la RG/STA</h5> --}}
                                                        <p class="text-muted">Partie de la RB sollicité</p>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-2">
                                                        <div class="form-check form-check-success mb-1">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="feuilles" name="feuilles" value="feuilles">
                                                            <label class="form-check-label" for="feuilles">
                                                                Feuilles
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-2 text-center">
                                                        <div class="form-check form-check-success mb-1">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="racine" name="racine" value="racine">
                                                            <label class="form-check-label" for="racine">
                                                                Racines
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-2 text-center">
                                                        <div class="form-check form-check-success mb-1">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="ecorces" name="ecorces" value="ecorces">
                                                            <label class="form-check-label" for="ecorces">
                                                                Ecorces
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-2 text-center">
                                                        <div class="form-check form-check-success mb-1">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="os" name="os" value="os">
                                                            <label class="form-check-label" for="os">
                                                                OS
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-2 text-center">
                                                        <div class="form-check form-check-success mb-1">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="caille" name="caille" value="caille">
                                                            <label class="form-check-label" for="caille">
                                                                Cailles
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-2 text-center">
                                                        <div class="form-check form-check-success mb-1">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="autrepartie" name="autrepartie" value="autrepartie">
                                                            <label class="form-check-label" for="autrepartie">
                                                                Autres(à préciser)
                                                            </label>
                                                            <input class="form-control d-none" type="text"
                                                                id="autrepartieinput" name="autrepartieinput" maxlength="255">
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>

                                            <div class="d-flex align-items-start gap-3 mt-4">
                                                <button type="button"
                                                    class="btn btn-link text-decoration-none btn-label previestab"
                                                    data-previous="pills-gen-info-tab"><i
                                                        class="ri-arrow-left-line label-icon align-middle fs-16 me-2"></i>
                                                    Retour</button>
                                                <button type="button"
                                                    class="btn btn-primary btn-label right ms-auto nexttab nexttab"
                                                    data-nexttab="pills-success-tab"><i
                                                        class="ri-arrow-right-line label-icon align-middle fs-16 ms-2"></i>Suivant</button>
                                            </div>
                                        </div>
                                        <!-- end tab pane -->

                                        <div class="tab-pane fade" id="pills-success" role="tabpanel"
                                            aria-labelledby="pills-success-tab">
                                            <div>
                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <div class="mb-3">
                                                            <label class="form-label" for="descsav">Description du Savoir
                                                                Traditionnel Associé(STA)</label>
                                                            <textarea name="descsav" id="descsav" cols="30" rows="3" class="form-control" maxlength="255"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <div class="mb-3">
                                                            <label class="form-label" for="statutsav">Statut du Savoir
                                                                Traditionnel Associé(STA)</label>
                                                            <textarea name="statutsav" id="statutsav" cols="30" rows="3" class="form-control" maxlength="255"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <div class="mb-3">
                                                            <label class="form-label" for="usagetraditionnel">Usage
                                                                Traditionnel</label>
                                                            <textarea name="usagetraditionnel" id="usagetraditionnel" cols="30" rows="3" class="form-control" maxlength="255"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <div class="mb-3">
                                                            <label class="form-label" for="usagetraditionnel">Localisation
                                                                de la RB/STA<em>(toutes les informations disponibles si
                                                                    possible GPS)</em></label>
                                                            <textarea name="localisation" id="localisation" cols="30" rows="3" class="form-control" maxlength="255"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <div class="mb-3">
                                                            <label class="form-label" for="propriete">Propriété
                                                                recherchées</label>
                                                            <textarea name="propriete" id="propriete" cols="30" rows="3" class="form-control" maxlength="255"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <div class="mb-3">
                                                            <label class="form-label" for="zonnerecherche">Lieu /zonnes de
                                                                recherche et developpement de la RG et/ou STA</label>
                                                            <textarea name="zonnerecherche" id="zonnerecherche" cols="30" rows="3" class="form-control" maxlength="255"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <div class="mb-3">
                                                            <label class="form-label" for="resumeprojet">Resumé du
                                                                projet</label>
                                                            <textarea name="resumeprojet" id="resumeprojet" cols="30" rows="3" class="form-control" maxlength="255"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <div class="mb-3">
                                                            <label class="form-label" for="justification">Justification du
                                                                projet</label>
                                                            <textarea name="justification" id="justification" cols="30" rows="3" class="form-control" maxlength="255"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <div class="mb-3">
                                                            <label class="form-label" for="objprojet">Objectif du
                                                                projet</label>
                                                            <textarea name="objprojet" id="objprojet" cols="30" rows="3" class="form-control" maxlength="255"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div>
                                                    <div class="mb-3 mt-3">
                                                        <div>
                                                            {{-- <h5 class="mb-3">Identification de la RG/STA</h5> --}}
                                                            <p class="text-muted">Secteur Concerné</p>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-2">
                                                            <div class="form-check form-check-success mb-1">
                                                                <input class="form-check-input" type="checkbox"
                                                                    id="cosmetique" name="cosmetique" value="cosmetique">
                                                                <label class="form-check-label" for="cosmetique">
                                                                    Cosmetique
                                                                </label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-2 text-center">
                                                            <div class="form-check form-check-success mb-1">
                                                                <input class="form-check-input" type="checkbox"
                                                                    id="alimentaire" name="alimentaire"
                                                                    value="alimentaire">
                                                                <label class="form-check-label" for="alimentaire">
                                                                    Alimentaire
                                                                </label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-2 text-center">
                                                            <div class="form-check form-check-success mb-1">
                                                                <input class="form-check-input" type="checkbox"
                                                                    id="pharmaceutique" name="pharmaceutique"
                                                                    value="pharmaceutique">
                                                                <label class="form-check-label" for="pharmaceutique">
                                                                    Pharmaceutique
                                                                </label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-2 text-center">
                                                            <div class="form-check form-check-success mb-1">
                                                                <input class="form-check-input" type="checkbox"
                                                                    id="neutraceutique" name="neutraceutique"
                                                                    value="neutraceutique">
                                                                <label class="form-check-label" for="neutraceutique">
                                                                    Neutraceutique
                                                                </label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-2 text-center">
                                                            <div class="form-check form-check-success mb-1">
                                                                <input class="form-check-input" type="checkbox"
                                                                    id="biotech" name="biotech" value="biotech">
                                                                <label class="form-check-label" for="biotech">
                                                                    Biotechnologique
                                                                </label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-2 text-center">
                                                            <div class="form-check form-check-success mb-1">
                                                                <input class="form-check-input" type="checkbox"
                                                                    id="autresecteur" name="autresecteur"
                                                                    value="autresecteur">
                                                                <label class="form-check-label" for="autresecteur">
                                                                    Autres
                                                                </label>
                                                                <input class="form-control d-none" type="text"
                                                                id="autresecteurinput" name="autresecteurinput" maxlength="255">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <div class="mb-3">
                                                            <label class="form-label" for="descsav">Utilisation de la
                                                                RG/STA</label>
                                                            <textarea name="utilrgsta" id="utilrgsta" cols="30" rows="3" class="form-control" maxlength="255"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <div class="mb-3">
                                                            <label class="form-label" for="etaperech">Etape de la
                                                                recherche</label>
                                                            <textarea name="etaperech" id="etaperech" cols="30" rows="3" class="form-control" maxlength="255"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <div class="mb-3">
                                                            <label class="form-label" for="descsav">Collaborateur /
                                                                Partenaires</label>
                                                            <textarea name="collabpart" id="collabpart" cols="30" rows="3" class="form-control" maxlength="255"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <div class="mb-3">
                                                            <label class="form-label" for="descsav">Durée du
                                                                projet</label>
                                                            <textarea name="dureeproj" id="dureeproj" cols="30" rows="3" class="form-control" maxlength="255"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6 rg d-none">
                                                        <div class="mb-3 mt-3">
                                                            <div>
                                                                {{-- <h5 class="mb-3">Identification de la RG/STA</h5> --}}
                                                                <p class="text-muted">Pour accès aux ressources génétiques
                                                                </p>
                                                            </div>
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="carteidentitenationaux"
                                                                class="form-label">Photocopie legalisée de la carte
                                                                d'identité passeport valide ou permis de conduire pour les
                                                                nationaux</label>
                                                            <input class="form-control" type="file"
                                                                id="carteidentitenationaux" name="carteidentitenationaux" maxlength="255">
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="carteidentiteetranger"
                                                                class="form-label">Photocopie legalisée pour les
                                                                etrangers</label>
                                                            <input class="form-control" type="file"
                                                                id="carteidentiteetranger" name="carteidentiteetranger" maxlength="255">
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="docadmin"
                                                                class="form-label">Documents administratifs pour les personnes morales</label>
                                                            <input class="form-control" type="file"
                                                                id="docadmin" name="docadmin" maxlength="255">
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="permisrech"
                                                                class="form-label">Permis de recherche obtenu du Ministère de le Recherche
                                                                Scientifique et Technologique</label>
                                                            <input class="form-control" type="file"
                                                                id="permisrech" name="permisrech" maxlength="255">
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="docdet"
                                                                class="form-label">Document détaillé du projet</label>
                                                            <input class="form-control" type="file"
                                                                id="docdet" name="docdet" maxlength="255">
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="preuvepaie"
                                                                class="form-label">Preuve de paiement des frais d’études de dossier à la Direction de Développement Durable</label>
                                                            <input class="form-control" type="file"
                                                                id="preuvepaie" name="preuvepaie" maxlength="255">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6 sta d-none">
                                                        <div class="mb-3 mt-3">
                                                            <div>
                                                                {{-- <h5 class="mb-3">Identification de la RG/STA</h5> --}}
                                                                <p class="text-muted">Pour accès aux savoir traditionnels
                                                                    génétiques</p>
                                                            </div>
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="identiterepr" class="form-label">Identité du
                                                                representant légaal de la personne morale</label>
                                                            <input class="form-control" type="file" id="identiterepr"
                                                                name="identiterepr" maxlength="255">
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="cartenationalsta" class="form-label">Photocopie légalisée de la Carte Nationale d’Identité, passeport valide ou permis de conduire pour les nationaux</label>
                                                            <input class="form-control" type="file" id="cartenationalsta"
                                                                name="cartenationalsta" maxlength="255">
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="passetrsta" class="form-label">Photocopie légalisée du passeport pour les étrangers</label>
                                                            <input class="form-control" type="file" id="passetrsta"
                                                                name="passetrsta" maxlength="255">
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="docadmista" class="form-label">Document administratifs pour les personnes morales</label>
                                                            <input class="form-control" type="file" id="docadmista"
                                                                name="docadmista" maxlength="255">
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="raisonsocsta" class="form-label">Raison sociale de la personne morale</label>
                                                            <input class="form-control" type="file" id="raisonsocsta"
                                                                name="raisonsocsta" maxlength="255">
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="permisprevsta" class="form-label">Autorisation et/ou permis prévu par la règlementation
                                                                en vigueur</label>
                                                            <input class="form-control" type="file" id="permisprevsta"
                                                                name="permisprevsta" maxlength="255">
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="docdetaillesta" class="form-label">Document détaillé du projet </label>
                                                            <input class="form-control" type="file" id="docdetaillesta"
                                                                name="docdetaillesta" maxlength="255">
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="preuvepaiesta" class="form-label">Preuve de paiement des frais d’études de dossier au à
                                                                la Direction de Développement Durable</label>
                                                            <input class="form-control" type="file" id="preuvepaiesta"
                                                                name="preuvepaiesta" maxlength="255">
                                                        </div>
                                                    </div>

                                                </div>
                                                <div class="d-flex align-items-start gap-3 mt-4">
                                                    <button type="button"
                                                        class="btn btn-link text-decoration-none btn-label previestab"
                                                        data-previous="pills-info-desc-tab"><i
                                                            class="ri-arrow-left-line label-icon align-middle fs-16 me-2"></i>
                                                        Retour</button>
                                                    <button type="submit" id="submitBtn"
                                                        class="btn btn-primary btn-label right ms-auto nexttab nexttab"
                                                        data-nexttab="pills-success-tab"><i
                                                            class="ri-arrow-right-line label-icon align-middle fs-16 ms-2"></i>Soumettre</button>
                                                </div>

                                            </div>
                                        </div>
                                        <!-- end tab pane -->
                                    </div>
                                    <!-- end tab content -->
                                </form>
                            </div>
                        @else
                            <div class="row mt-5">
                                <div class="col-md-1"></div>
                                <div class="col-lg-10">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="alert {{ $permis->statut == '2' ? 'alert-warning' : ($permis->statut == '1' ? 'alert-success' : 'alert-danger') }} rounded-top alert-solid alert-label-icon border-0 rounded-0 m-0 d-flex align-items-center mb-3"
                                                role="alert">
                                                <i class="ri-error-warning-line label-icon"></i>
                                                <div class="flex-grow-1 text-truncate">
                                                    Etat de la progression de la demande d'accès aux ressources.
                                                </div>
                                                <div class="flex-shrink-0">
                                                    <a href="#"
                                                        class="text-reset text-decoration-underline"><b>{{ $permis->statut == '2' ? 'En Attente' : ($permis->statut == '1' ? 'Accordé' : 'Refusé') }}</b></a>
                                                </div>
                                            </div>
                                            <h5 class="fs-15 fw-semibold mb-3" align='center'>Pour toute information
                                                suplémentaire sur l'état d'évolution du permis contacter l'administration
                                            </h5>
                                            <p class="text-muted" align='center'>Statut du permis :</p>
                                            <div class="d-flex flex-wrap justify-content-evenly">
                                                <p class="text-muted mb-0">
                                                    {{-- <i class="mdi mdi-numeric-1-circle text-success fs-18 align-middle me-2"></i>Completed --}}
                                                </p>
                                                <p class="text-muted mb-0">
                                                    <i
                                                        class="mdi mdi-numeric-1-circle {{ $permis->statut == '2' ? 'text-warning' : ($permis->statut == '1' ? 'text-success' : 'text-danger') }} fs-18 align-middle me-2"></i>
                                                    {{ $permis->statut == '2' ? 'En Attente' : ($permis->statut == '1' ? 'Accordé' : 'Refusé') }}
                                                </p>
                                                @if ($permis->statut == '1')
                                                    <a href="{{ route('demande.show', $permis->id) }}" target="_blank"
                                                        class="btn btn-success">Visualisé le formulaire de demande de permis</a>
                                                    <a href="{{ route('demande.permis', $permis->id) }}" target="_blank"
                                                        class="btn btn-success">Téléchargé le Permis</a>
                                                @endif
                                                <p class="text-muted mb-0">
                                                    {{-- <i class="mdi mdi-numeric-2-circle text-primary fs-18 align-middle me-2"></i>To Do --}}
                                                </p>
                                            </div>
                                        </div>
                                        <div class="progress animated-progress rounded-bottom rounded-0"
                                            style="height: 6px;">
                                            {{-- <div class="progress-bar bg-success rounded-0" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div> --}}
                                            {{-- <div class="progress-bar bg-info rounded-0" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> --}}
                                            <div class="progress-bar {{ $permis->statut == '2' ? 'bg-warning' : ($permis->statut == '1' ? 'bg-success' : 'bg-danger') }} rounded-0"
                                                role="progressbar" style="width: 100%" aria-valuenow="100"
                                                aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </div><!-- end col -->
                            </div>
                        @endif

                        <!-- end card body -->
                    </div>
                    <!-- end card -->
                </div>
            </div>

        </div>
    </div>
@endsection

@section('scripts')
    <script>

        //checked rg
        $(document).ready(function() {

            $('#rg').click(function() {
                if($(this).is(':checked')){
                    $('.rg').removeClass('d-none');
                }else {
                    $('.rg').addClass('d-none');
                }
            });

            $('#sta').click(function() {
                if($(this).is(':checked')){
                    $('.sta').removeClass('d-none');
                }else {
                    $('.sta').addClass('d-none');
                }
            });

            $('#autresobjet').click(function() {
                if($(this).is(':checked')){
                    $('#autresobjetinput').removeClass('d-none');
                }else {
                    $('#autresobjetinput').addClass('d-none');
                }
            });
            $('#autresbut').click(function() {
                if($(this).is(':checked')){
                    $('#autresbutinput').removeClass('d-none');
                }else {
                    $('#autresbutinput').addClass('d-none');
                }
            });
            $('#autrestype').click(function() {
                if($(this).is(':checked')){
                    $('#autrestypeinput').removeClass('d-none');
                }else {
                    $('#autrestypeinput').addClass('d-none');
                }
            });
            $('#autrepartie').click(function() {
                if($(this).is(':checked')){
                    $('#autrepartieinput').removeClass('d-none');
                }else {
                    $('#autrepartieinput').addClass('d-none');
                }
            });
            $('#autresecteur').click(function() {
                if($(this).is(':checked')){
                    $('#autresecteurinput').removeClass('d-none');
                }else {
                    $('#autresecteurinput').addClass('d-none');
                }
            });

            //Save
            $('.save-form').on('submit', function(e) {
                e.preventDefault();
                $("#submitBtn").prop('disabled', true)

                var spinner =
                    'En cours &nbsp;<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>\n' +
                    '          <span class="sr-only">Loading...</span>'

                var formObj = $(this);
                var url = formObj.attr('action');

                $.each(formObj.find('input', 'select'), function(key, field) {
                    var element = $('[name="' + field.name + '"]');
                    element.removeClass('is-invalid');
                    element.siblings('p.error').remove();
                });
                $("#submitBtn").html(spinner);
                var formData = new FormData(formObj[0]);

                $.ajax({
                        url: url,
                        dataType: 'JSON',
                        type: 'POST',
                        cache: false,
                        data: formData,
                        processData: false,
                        contentType: false,
                        mimeType: 'multipart/form-data',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        beforeSend: function() {
                            formData.append('_token', $('meta[name="csrf-token"]').attr('content'))
                        }
                    })
                    .done(function(data) {
                        //console.log('DONE :: ', data);
                        if (data.redirect) {
                            window.location.href = data.redirect
                        }
                    })
                    .fail((jqXHR, options, error) => {
                        $("#submitBtn").text("Valider");
                        $("#submitBtn").prop('disabled', false);
                        // console.log('FAIL :: ', jqXHR)
                        if (!jqXHR.responseJSON) {
                            return;
                        }
                        status = jqXHR.responseJSON.status;
                        error = jqXHR.responseJSON.error;

                        $.each(error, function(key, val) {
                            var element = $('[name="' + key + '"]', formObj);

                            //console.log('ELEMENT :: ', element);
                            element.addClass('is-invalid');
                            if ($.isArray(val)) {
                                val.forEach((data) => {
                                    element.parent().append(
                                        `<p class="error text-danger">${data}</p>`);
                                })
                            } else {
                                element.parent().append(
                                    `<p class="error text-danger">${data}</p>`);
                            }
                        });
                    });
            });
            //endstore
        });

        $(document).on('change', '#identification', function() {
            var role = $('#identification').val();
            if (role !== '1') {
                $('.physique').addClass('d-none');
                $('.morale').removeClass('d-none');
            } else {
                $('.physique').removeClass('d-none');
                $('.morale').addClass('d-none');
            }
        });
    </script>
    <script src="{{ asset('assets/js/pages/form-wizard.init.js') }}"></script>
    {{--    <script src="{{ asset('assets/libs/bootstrap/js/bootstrap.bundle.min.js') }}"></script> --}}
    {{--    <script src="{{ asset('assets/libs/simplebar/simplebar.min.js') }}"></script> --}}
    {{--    <script src="{{ asset('assets/libs/node-waves/waves.min.js') }}"></script> --}}
    {{--    <script src="{{ asset('assets/libs/feather-icons/feather.min.js') }}"></script> --}}
    {{--    <script src="{{ asset('assets/js/pages/plugins/lord-icon-2.1.0.js') }}"></script> --}}
    {{--    <script src="{{ asset('assets/js/plugins.js') }}"></script> --}}
    {{--    <script src="{{ asset('assets/libs/prismjs/prism.js') }}"></script> --}}
    {{--    <script src="{{ asset('assets/libs/list.pagination.js/list.pagination.min.js') }}"></script> --}}
    {{--    <script src="{{ asset('dt/js/notifications/toastr/toastr.js') }}"></script> --}}
@endsection