@extends('web.layouts.base')

@section('titre')
    Liste des Ressources Génétiques
@endsection

@section('styles')
    <link rel="stylesheet" media="screen, print" href="{{ asset('dt/css/datagrid/datatables/datatables.bundle.css') }}">
@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">Liste des Ressources Génétiques</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">Liste des Ressources Génétiques</li>
                            </ol>
                        </div>

                    </div>
                </div>
            </div>
            <!-- end page title -->

            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title mb-0">Ajouter, Modifier & Supprimer</h4>
                        </div><!-- end card header -->

                        <div class="card-body">
                            <div id="customerList">
                                <div class="d-flex align-items-center g-4 mb-3">
                                    @can('Création des categories')
                                        <div class="col-sm">
                                            <div>
                                                <button type="button" class="btn btn-primary" data-toggle="modal"
                                                    data-target="#ajout">Ajouter</button>
                                            </div>
                                        </div>
                                        <br>
                                    @endcan
                                    {{-- @can('Recherche des categories') --}}
                                    <div class="flex-shrink-0">
                                        <div class="d-flex flex-wrap gap-2">
                                            <div class="d-flex justify-content-sm-end">
                                                <div class="search-box ms-4">
                                                    <input type="text" class="form-control search"
                                                        placeholder="Rechercher...">
                                                    <i class="ri-search-line search-icon"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {{-- @endcan --}}
                                </div>
                                <div class="table-responsive">
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <!-- datatable start -->
                                            <table id="dt-basic-example"
                                                class="table table-bordered table-hover table-striped w-100">
                                                <thead class="table-primary">
                                                    <tr>
                                                        <th>ID</th>
                                                        <th class="text-right">Actions</th>
                                                        <th>Nom Scientifique</th>
                                                        <th>Nom Vernaculaire</th>
                                                        <th>Nom Vulgaire</th>
                                                        <th>Prix</th>
                                                        <th>image</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($datas as $item)
                                                        <tr>
                                                            <td> {{ ++$i }}</td>
                                                            <td>
                                                                <div class="d-flex gap-2">
                                                                    <button onclick="handleEdit({{ $item->id }})" data-toggle="modal" data-target="#edit"
                                                                        class="btn btn-sm btn-warning">
                                                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                                                            <i class="bx bxs-edit-alt"></i>
                                                                        </div>
                                                                    </button>
                                                                    <button onclick="handlePrice({{ $item->id }})" data-toggle="modal" data-target="#price"
                                                                        class="btn btn-sm btn-info">
                                                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                                                            <i class="bx bxs-dollar-circle"></i>
                                                                        </div>
                                                                    </button>
                                                                    <a href="{{ route('rg.destroy', $item->id) }}" class="btn btn-sm btn-danger remove-item-btn" id="delete">
                                                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                                                            <i class="bx bxs-trash"></i>
                                                                        </div>
                                                                    </a>
                                                                </div>
                                                            </td>
                                                            <td>{{ $item->nomScientifique }}</td>
                                                            <td>{{ $item->nomVernaculaire }}</td>
                                                            <td>{{ $item->nomVulgaire }}</td>
                                                            <td>{{ isset($item->price) ? number_format($item->price->price, '2',',',' ' ) : 'Pas Defini' }} {{ isset($item->price) ? '$' : '' }} </td>
                                                            <td><img src="{{ (!empty($item->imageUrl)) ? url('upload/dossier_images/'.$item->imageUrl) : url('upload/no_image.jpg') }}"
                                                                style="width: 50px;height: 50px" alt="photo"></td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                                <tfoot class="table-primary">
                                                    <tr>
                                                        <th>ID</th>
                                                        <th class="text-right">Actions</th>
                                                        <th>Nom Scientifique</th>
                                                        <th>Nom Vernaculaire</th>
                                                        <th>Nom Vulgaire</th>
                                                        <th>Prix</th>
                                                        <th>image</th>
                                                    </tr>
                                                </tfoot>
                                            </table>
                                            <!-- datatable end -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div><!-- end card -->
                    </div>
                    <!-- end col -->
                </div>
                <!-- end col -->
            </div>
            <!-- end row -->

            {{-- ajout --}}
            <div class="modal fade zoomIn" id="ajout" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-lg">
                    <div class="modal-content border-0">
                        <div class="modal-header p-3 bg-primary">
                            <h5 class="modal-title text-white" id="exampleModalLabel">Ajout d'une ressource génétique</h5>
                            <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"
                                id="close-modal"></button>
                        </div>
                        <form method="POST" action="{{ route('ressources-genetiques.store') }}"
                            class="save-form">
                            @csrf
                            <div class="modal-body">
                                <div class="row g-3">
                                    <div class="col-lg-4">
                                        <label for="nomScientifique" class="form-label">Nom Scientifique</label>
                                        <input type="text" id="nomScientifique" name="nomScientifique"
                                            class="form-control" placeholder="Nom Scientifique" required="" maxlength="50">
                                        <div id="error-taille" class="invalid-feedback"></div>
                                    </div>
                                    <div class="col-lg-4">
                                        <label for="nomVernaculaire" class="form-label">Nom Vernaculaire</label>
                                        <input type="text" id="nomVernaculaire" name="nomVernaculaire" class="form-control"
                                            placeholder="Nom Vernaculaire" required="" minlength="3" maxlength="50">
                                        <div id="error-forme" class="invalid-feedback"></div>
                                    </div>
                                    <div class="col-lg-4">
                                        <label for="nomVulgaire" class="form-label">Nom Vulgaire</label>
                                        <input type="text" id="nomVulgaire" name="nomVulgaire" class="form-control"
                                            placeholder="Nom Vulgaire" required="" minlength="3"
                                            maxlength="50">
                                        <div id="error-couleur" class="invalid-feedback"></div>
                                    </div>
                                    <div class="col-lg-4">
                                        <label for="dureeVie" class="form-label">Durée de vie</label>
                                        <input type="text" id="dureeVie" name="dureeVie" class="form-control"
                                            placeholder="Durée de vie" required="" minlength="3"
                                            maxlength="50">
                                        <div id="error-texture" class="invalid-feedback"></div>
                                    </div>
                                    <div class="col-lg-4">
                                        <label for="modeReproduction" class="form-label">Mode de reproduction</label>
                                        <input type="text" id="modeReproduction" name="modeReproduction"
                                            class="form-control" placeholder="Mode de reproduction"
                                            maxlength="50">
                                        <div id="error-patronColoration" class="invalid-feedback"></div>
                                    </div>
                                    <div class="col-lg-4">
                                        <label for="provenance" class="form-label">Provenance</label>
                                        <select name="provenance" id="provenance" class="form-control">
                                            <option value="">Selectionnez</option>
                                            @foreach ($provenances as $value)
                                                <option value="{{ $value->id }}">{{ $value->nom }}</option>
                                            @endforeach
                                            <option value="0">Nouvelle Provenance</option>
                                        </select>
                                        <input type="text" name="provenance_id" id="add_provenance" style="display: none" class="form-control" placeholder="Entrez la nouvelle provenance">
                                    </div>
                                    <div class="col-lg-4">
                                        <label for="typeressource" class="form-label">Type de ressource</label>
                                        <select name="typeressource" id="typeressource" class="form-control">
                                            <option value="">Selectionnez</option>
                                            @foreach ($typesressources as $value)
                                                <option value="{{ $value->id }}">{{ $value->type }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-lg-4">
                                        <label for="variete" class="form-label">Variétés</label>
                                        <select name="variete" id="variete" class="form-control">
                                            <option value="">Selectionnez</option>
                                            @foreach ($varietes as $value)
                                                <option value="{{ $value->id }}">{{ $value->nom }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-lg-4">
                                        <label for="marqueur" class="form-label">Marqueur</label>
                                        <select name="marqueur" id="marqueur" class="form-control">
                                            <option value="">Selectionnez</option>
                                            @foreach ($marqueurs as $value)
                                                <option value="{{ $value->id }}">{{ $value->nom }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-lg-4">
                                        <label for="gene" class="form-label">Gene</label>
                                        <select name="gene" id="gene" class="form-control">
                                            <option value="">Selectionnez</option>
                                            @foreach ($genes as $value)
                                                <option value="{{ $value->id }}">{{ $value->nom }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-lg-4">
                                        <label for="gene" class="form-label">Origine géographique</label>
                                        <select name="pays" id="pays" class="form-control">
                                            <option value="">Selectionnez</option>
                                            @foreach ($pays as $value)
                                                <option value="{{ $value->id }}">{{ $value->pays }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-lg-4">
                                        <label for="typeusage" class="form-label">Type d'Usage</label>
                                        <select name="typeusage" id="typeusage" class="form-control">
                                            <option value="">Selectionnez</option>
                                            <option value="Commercial">Commercial</option>
                                            <option value="Non Commercial">Non Commercial</option>
                                        </select>
                                    </div>
                                    <div class="col-lg-4">
                                        <label for="usage" class="form-label">usage</label>
                                        <select name="usage" id="usage" class="form-control">
                                            <option value="">Selectionnez</option>
                                            <option value="Médicinale">Médicinale</option>
                                            <option value="Cosmétique">Cosmétique</option>
                                            <option value="Nutraceutique">Nutraceutique</option>
                                            <option value="Conservation">Conservation</option>
                                            <option value="Biotechnologie">Biotechnologie</option>
                                            <option value="Horticulture">Horticulture</option>
                                            <option value="Autres">Autres</option>
                                        </select>
                                    </div>
                                    <div class="col-lg-4">
                                        <label for="visibilite" class="form-label">Visibilité</label>
                                        <select name="visibilite" id="visibilite" class="form-control">
                                            <option value="">Selectionnez</option>
                                            <option value="Public">Public</option>
                                            <option value="Confidentiel">Confidentiel</option>
                                        </select>
                                    </div>

                                </div>
                                <div class="row g-3">
                                    @if (auth()->user()->role_id != 3)
                                        <div class="col-lg-4">
                                            <div class="form-group">
                                                <label for="fournisseur" class="form-label">Fournisseur</label>
                                                <select name="fournisseur" id="fournisseur" class="form-control" required>
                                                    <option value="">Selectionner un fournisseur</option>
                                                    @foreach($fournisseurs as $value)
                                                        <option value="{{ $value->id }}">{{ $value->prenom.' '.$value->postnom }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="col-lg-4">
                                        <label class="form-label" for="image">Illustration</label>
                                        <input type="file" name="image" id="image"
                                            class="form-control @error('image') is-invalid @enderror">
                                        @error('image')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                        <img id="showImage"
                                            src="{{ url('upload/no_image.jpg') }}"
                                            style="width: 100px;height: 100px; border: 1px solid #fff8e9;" alt="">
                                    </div>
                                    <div class="col-lg-4">
                                        <label for="description" class="form-label">Description</label>
                                        <textarea type="text" id="description" class="form-control" name="description" id="description" cols="30"
                                            rows="4" minlength="3" maxlength="255" placeholder="Enter une description description"></textarea>
                                        <div id="error-description" class="invalid-feedback"></div>
                                    </div>
                                </div>
                            </div>

                                <div class="modal-footer">
                                    <div class="hstack gap-2 justify-content-end">
                                        <button type="button" class="btn btn-warning"
                                            data-dismiss="modal">Annuler</button>
                                        <button type="submit" class="btn btn-primary"
                                            id="submitBtn">Enregistrer</button>
                                    </div>
                                </div>
                        </form>
                    </div>
                </div>
            </div>

            {{-- edit --}}
            <div class="modal fade zoomIn" id="edit" tabindex="-2" role="dialog" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-lg">
                    <div class="modal-content border-0">
                        <div class="modal-header p-3 bg-primary">
                            <h5 class="modal-title text-white" id="exampleModalLabel">Modification d'une caracteristique
                                morphologique</h5>
                            <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"
                                id="close-modal"></button>
                        </div>
                        <form action="" id="editUserForm" class="update-form">
                            @csrf
                            @method('PUT')
                            <div class="modal-body">
                                <div class="modal-body">
                                    <div class="row g-3">
                                        <div class="col-lg-4">
                                            <label for="nomScientifiqueedit" class="form-label">Nom Scientifique</label>
                                            <input type="text" id="nomScientifiqueedit" name="nomScientifique"
                                                class="form-control" placeholder="Nom Scientifique" required="" maxlength="50">
                                            <div id="error-taille" class="invalid-feedback"></div>
                                        </div>
                                        <div class="col-lg-4">
                                            <label for="nomVernaculaireedit" class="form-label">Nom Vernaculaire</label>
                                            <input type="text" id="nomVernaculaireedit" name="nomVernaculaire" class="form-control"
                                                placeholder="Nom Vernaculaire" required="" minlength="3" maxlength="50">
                                            <div id="error-forme" class="invalid-feedback"></div>
                                        </div>
                                        <div class="col-lg-4">
                                            <label for="nomVulgaireedit" class="form-label">Nom Vulgaire</label>
                                            <input type="text" id="nomVulgaireedit" name="nomVulgaire" class="form-control"
                                                placeholder="Nom Vulgaire" required="" minlength="3"
                                                maxlength="50">
                                            <div id="error-couleur" class="invalid-feedback"></div>
                                        </div>
                                        <div class="col-lg-4">
                                            <label for="dureeVieedit" class="form-label">Durée de vie</label>
                                            <input type="text" id="dureeVieedit" name="dureeVie" class="form-control"
                                                placeholder="Durée de vie" required="" minlength="3"
                                                maxlength="50">
                                            <div id="error-texture" class="invalid-feedback"></div>
                                        </div>
                                        <div class="col-lg-4">
                                            <label for="modeReproductionedit" class="form-label">Mode de reproduction</label>
                                            <input type="text" id="modeReproductionedit" name="modeReproduction"
                                                class="form-control" placeholder="Mode de reproduction"
                                                maxlength="50">
                                            <div id="error-patronColoration" class="invalid-feedback"></div>
                                        </div>
                                        <div class="col-lg-4">
                                            <label for="provenanceedit" class="form-label">Provenance</label>
                                            <select name="provenance" id="provenanceedit" class="form-control">
                                                <option value="">Selectionnez</option>
                                                @foreach ($provenances as $value)
                                                    <option value="{{ $value->id }}">{{ $value->nom }}</option>
                                                @endforeach
                                                {{-- <option value="0">Nouvelle Provenance</option> --}}
                                            </select>
                                            {{-- <input type="text" name="provenance_id" id="add_provenance" style="display: none" class="form-control" placeholder="Entrez la nouvelle provenance"> --}}
                                        </div>
                                        <div class="col-lg-4">
                                            <label for="typeressourceedit" class="form-label">Type de ressource</label>
                                            <select name="typeressource" id="typeressourceedit" class="form-control">
                                                <option value="">Selectionnez</option>
                                                @foreach ($typesressources as $value)
                                                    <option value="{{ $value->id }}">{{ $value->type }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-lg-4">
                                            <label for="varieteedit" class="form-label">Variétés</label>
                                            <select name="variete" id="varieteedit" class="form-control">
                                                <option value="">Selectionnez</option>
                                                @foreach ($varietes as $value)
                                                    <option value="{{ $value->id }}">{{ $value->nom }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-lg-4">
                                            <label for="marqueuredit" class="form-label">Marqueur</label>
                                            <select name="marqueur" id="marqueuredit" class="form-control">
                                                <option value="">Selectionnez</option>
                                                @foreach ($marqueurs as $value)
                                                    <option value="{{ $value->id }}">{{ $value->nom }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-lg-4">
                                            <label for="geneedit" class="form-label">Gene</label>
                                            <select name="gene" id="geneedit" class="form-control">
                                                <option value="">Selectionnez</option>
                                                @foreach ($genes as $value)
                                                    <option value="{{ $value->id }}">{{ $value->nom }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-lg-4">
                                            <label for="paysedit" class="form-label">Origine géographique</label>
                                            <select name="pays" id="paysedit" class="form-control">
                                                <option value="">Selectionnez</option>
                                                @foreach ($pays as $value)
                                                    <option value="{{ $value->id }}">{{ $value->pays }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-lg-4">
                                            <label for="typeusageedit" class="form-label">Type d'Usage</label>
                                            <select name="typeusage" id="typeusageedit" class="form-control">
                                                <option value="">Selectionnez</option>
                                                <option value="Commercial">Commercial</option>
                                                <option value="Non Commercial">Non Commercial</option>
                                            </select>
                                        </div>
                                        <div class="col-lg-4">
                                            <label for="usageedit" class="form-label">usage</label>
                                            <select name="usage" id="usageedit" class="form-control">
                                                <option value="">Selectionnez</option>
                                                <option value="Médicinale">Médicinale</option>
                                                <option value="Cosmétique">Cosmétique</option>
                                                <option value="Nutraceutique">Nutraceutique</option>
                                                <option value="Conservation">Conservation</option>
                                                <option value="Biotechnologie">Biotechnologie</option>
                                                <option value="Horticulture">Horticulture</option>
                                                <option value="Autres">Autres</option>
                                            </select>
                                        </div>
                                        <div class="col-lg-4">
                                            <label for="visibiliteedit" class="form-label">Visibilité</label>
                                            <select name="visibilite" id="visibiliteedit" class="form-control">
                                                <option value="">Selectionnez</option>
                                                <option value="Public">Public</option>
                                                <option value="Confidentiel">Confidentiel</option>
                                            </select>
                                        </div>

                                    </div>
                                    <div class="row g-3">
                                        @if (auth()->user()->role_id != 3)
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label for="fournisseur" class="form-label">Fournisseur</label>
                                                    <select name="fournisseur" id="fournisseuredit" class="form-control" required>
                                                        <option value="">Selectionner un fournisseur</option>
                                                        @foreach($fournisseurs as $value)
                                                            <option value="{{ $value->id }}">{{ $value->prenom.' '.$value->postnom }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        @endif
                                        <div class="col-lg-4">
                                            <label class="form-label" for="imageedit">Illustration</label>
                                            <input type="file" name="image" id="imageedit"
                                                class="form-control @error('image') is-invalid @enderror">
                                        </div>
                                        <div class="col-lg-4">
                                            <label for="descriptionedit" class="form-label">Description</label>
                                            <textarea type="text" id="descriptionedit" class="form-control" name="description" id="description" cols="30"
                                                rows="4" minlength="3" maxlength="255" placeholder="Enter une description description"></textarea>
                                            <div id="error-description" class="invalid-feedback"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <div class="hstack gap-2 justify-content-end">
                                    <button type="button" class="btn btn-warning" data-dismiss="modal">Annuler</button>
                                    <button type="submit" class="btn btn-primary" id="submitEdit">Enregistrer</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            {{-- price --}}
            <div class="modal fade zoomIn" id="price" tabindex="-2" role="dialog" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-lg">
                    <div class="modal-content border-0">
                        <div class="modal-header p-3 bg-primary">
                            <h5 class="modal-title text-white" id="exampleModalLabel">Renseignement du prix</h5>
                            <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"
                                id="close-modal"></button>
                        </div>
                        <form action="" id="editPriceForm" class="update-price">
                            @csrf
                            @method('POST')
                            <div class="modal-body">
                                <div class="modal-body">
                                    <div class="row g-3">
                                        <div class="col-lg-4">
                                            <label for="nomScientifiqueprice" class="form-label">Nom Scientifique</label>
                                            <input type="text" id="nomScientifiqueprice" name="nomScientifique"
                                                class="form-control" placeholder="Nom Scientifique" required="" maxlength="50" readonly>
                                            <div id="error-taille" class="invalid-feedback"></div>
                                        </div>
                                        <div class="col-lg-4">
                                            <label for="nomVernaculaireprice" class="form-label">Nom Vernaculaire</label>
                                            <input type="text" id="nomVernaculaireprice" name="nomVernaculaire" class="form-control"
                                                placeholder="Nom Vernaculaire" required="" minlength="3" maxlength="50" readonly>
                                            <div id="error-forme" class="invalid-feedback"></div>
                                        </div>
                                        <div class="col-lg-4">
                                            <label for="nomVulgaireprice" class="form-label">Nom Vulgaire</label>
                                            <input type="text" id="nomVulgaireprice" name="nomVulgaire" class="form-control"
                                                placeholder="Nom Vulgaire" required="" minlength="3"
                                                maxlength="50" readonly>
                                            <div id="error-couleur" class="invalid-feedback"></div>
                                        </div>
                                        <div class="col-lg-4">
                                            <label for="prix" class="form-label">Prix</label>
                                            <input type="text" id="prix" name="prix" class="form-control"
                                                placeholder="Prix" required="">
                                            <div id="error-couleur" class="invalid-feedback"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <div class="hstack gap-2 justify-content-end">
                                    <button type="button" class="btn btn-warning" data-dismiss="modal">Annuler</button>
                                    <button type="submit" class="btn btn-primary" id="submitPrice">Enregistrer</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>


            <!-- Modal -->
            <div class="modal fade flip" id="deleteOrder" tabindex="-1" aria-hidden="true" role="dialog">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-body p-5 text-center">
                            <lord-icon src="{{ asset('../assets/icons/gsqxdxog.json') }}" trigger="loop"
                                colors="primary:#405189,secondary:#f06548" style="width:90px;height:90px"></lord-icon>
                            <div class="mt-4 text-center">
                                <h4>Vous êtes sur le point de supprimer cette enregistrement ?</h4>
                                <p class="text-muted fs-14 mb-4">La suppression de votre tâche supprimera tous
                                    vos informations de notre base de données.</p>
                                <div class="hstack gap-2 justify-content-center remove">
                                    <button class="btn btn-link btn-ghost-success fw-medium text-decoration-none"
                                        id="deleteRecord-close" data-bs-dismiss="modal"><i
                                            class="ri-close-line me-1 align-middle"></i> Fermer</button>
                                    <button class="btn btn-danger" id="delete-record">
                                        Supprimer</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--end modal -->



        </div>
        <!-- container-fluid -->
    </div>
    <!-- End Page-content -->
@endsection

@section('scripts')
    {{-- <script src="{{ asset('assets/js/app.js') }}"></script> --}}

    <script>
        $(document).ready(function() {
            $('#image').change(function (e) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#showImage').attr('src', e.target.result);
                }
                reader.readAsDataURL(e.target.files['0']);
            });

            //Saveur Choix
            $(document).on('change', '#provenance', function () {
                var provenance_id = $(this).val();
                if (provenance_id == '0'){
                    $('#add_provenance').show();
                }else{
                    $('#add_provenance').hide();
                }
            });
            //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

            //Update form
            $('.update-form').on('submit', function(e) {
                e.preventDefault();
                $("#submitEdit").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();
                });

                $("#submitEdit").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) => {
                        $("#submitEdit").text("Valider");
                        $("#submitEdit").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

            // Price form
            $('.update-price').on('submit', function(e) {
                e.preventDefault();
                $("#submitPrice").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();
                });

                $("#submitPrice").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) => {
                        $("#submitPrice").text("Valider");
                        $("#submitPrice").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
        });

        function handleEdit(id) {
            var form = document.getElementById('editUserForm')
            form.action = '/backend/ressources-genetiques/' + id;
            var token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

            $.ajax({
                headers: {
                    "Content-Type": "application/json",
                    "Accept": "application/json, text-plain, */*",
                    "x-Requested-With": "XMLHttpRequest",
                    "x-CSRF-TOKEN": token
                },
                type: "GET",
                url: "/backend/ressources-genetiques/" + id,
                method: "GET",
                success: function(data) {
                    $('#nomScientifiqueedit').attr({
                        value: data.nomScientifique
                    });

                    $('#nomVernaculaireedit').attr({
                        value: data.nomVernaculaire
                    });
                    $('#nomVulgaireedit').attr({
                        value: data.nomVulgaire
                    });
                    $('#dureeVieedit').attr({
                        value: data.dureeVie
                    });
                    $('#modeReproductionedit').attr({
                        value: data.modeReproduction
                    });
                    $('#provenanceedit').val(data.provenance_id);
                    $('#typeressourceedit').val(
                        data.typesressource_id
                    );
                    $('#varieteedit').val(
                        data.variete_id
                    );
                    $('#marqueuredit').val(
                        data.marqueur_id
                    );
                    $('#geneedit').val(
                        data.gene_id
                    );
                    $('#paysedit').val(
                        data.origineGeographique
                    );
                    $('#typeusageedit').val(
                        data.typeusage
                    );
                    $('#fournisseuredit').val(
                        data.fournisseur_id
                    );
                    $('#usageedit').val(
                        data.usage
                    );
                    $('#visibiliteedit').val(
                        data.visibilite
                    );
                    var x = document.getElementById('descriptionedit');
                    x.value = data.description;
                }
            });

            //$('#edit').modal('show')
        }

        function handlePrice(id) {
            var form = document.getElementById('editPriceForm')
            form.action = '/backend/ressources-genetique/update/' + id;
            var token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

            $.ajax({
                headers: {
                    "Content-Type": "application/json",
                    "Accept": "application/json, text-plain, */*",
                    "x-Requested-With": "XMLHttpRequest",
                    "x-CSRF-TOKEN": token
                },
                type: "GET",
                url: "/backend/ressources-genetiques/" + id,
                method: "GET",
                success: function(data) {
                    $('#nomScientifiqueprice').attr({
                        value: data.nomScientifique
                    });

                    $('#nomVernaculaireprice').attr({
                        value: data.nomVernaculaire
                    });
                    $('#nomVulgaireprice').attr({
                        value: data.nomVulgaire
                    });$('#prix').attr({
                        value: data.price.price
                    });
                    

                }
            });

            //$('#price').modal('show')
        }
    </script>
@endsection