@extends('web.layouts.base')

@section('titre')
    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 d'engagement Procédure de notification</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 D’ENGAGEMENT POUR L’OBTENTION D’UN PERMIS
                                D’ACCES AUX RESSOURCES GENETIQUES, 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('notification-urgente.store') }}" class="form-steps save-form" autocomplete="off" method="POST">
                                    @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="form-group mb-3">
                                                            <label class="form-label" for="nom">Nom & Postnom / Dénomination</label>
                                                            <input type="text" class="form-control" id="nom" autofocus
                                                                name="nom" value="{{ auth()->user()->name.' '.auth()->user()->postnom.' '.auth()->user()->prenom }}" placeholder="Entrer vore nom et postnom" @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"
                                                                id="nationalite" placeholder="Entrer votre nationalité" maxlength="255">
                                                        </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)>
                                                </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"
                                                                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é" maxlength="20">
                                                        </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" placeholder="Entrer votre secteur d'activité" maxlength="255">
                                                        </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" maxlength="255">
                                                        </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" placeholder="Entrer votre proffession ou raison social" value="{{ auth()->user()->proffession }}" maxlength="255">
                                                </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="text-center">
                                                    {{-- <div class="profile-user position-relative d-inline-block mx-auto mb-2">
                                                        <img src="assets/images/users/user-dummy-img.jpg" class="rounded-circle avatar-lg img-thumbnail user-profile-image" alt="user-profile-image">
                                                        <div class="avatar-xs p-0 rounded-circle profile-photo-edit">
                                                            <input id="profile-img-file-input" type="file" class="profile-img-file-input" accept="image/png, image/jpeg">
                                                            <label for="profile-img-file-input" class="profile-photo-edit avatar-xs">
                                                                        <span class="avatar-title rounded-circle bg-light text-body">
                                                                            <i class="ri-camera-fill"></i>
                                                                        </span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <h5 class="fs-14">Add Image</h5> --}}
                                                    <div class="mb-4">
                                                        <div>
                                                            <h5 class="mb-3">Engagement</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>
                                                <div class="mb-2 text-center">
                                                    <div>
                                                        <p class="text-muted">J’atteste de l'exactitude des informations contenues dans mon
                                                            formulaire relatif à ma demande d'accès en urgence :
                                                        </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">
                                                                Aux RG ou leurs dérivés
                                                            </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">
                                                                Aux STA
                                                            </label>
                                                        </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="submit"
                                                    class="btn btn-primary btn-label" id="submitBtn"
                                                    data-nexttab="pills-success-tab"><i
                                                        class="ri-arrow-right-line label-icon align-middle fs-16 ms-2"></i>Soumettre</button>
                                            </div>
                                        </div>
                                        <!-- end tab pane -->

                                        {{-- <div class="tab-pane fade" id="pills-success" role="tabpanel"
                                            aria-labelledby="pills-success-tab">
                                            <div>
                                                <div class="text-center">

                                                    <div class="mb-4">
                                                        <lord-icon src="../../../lupuorrc.json" trigger="loop"
                                                            colors="primary:#0ab39c,secondary:#405189"
                                                            style="width:120px;height:120px"></lord-icon>
                                                    </div>
                                                    <h5>Well Done !</h5>
                                                    <p class="text-muted">You have Successfully Signed Up</p>
                                                </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 de Notification Urgente.
                                                </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('notification-urgente.show',$permis->id) }}" target="_blank" class="btn btn-success">Visualisé le formulaire</a>
                                                <a href="{{ route('demande.permis.urgente', $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>
        $(document).ready(function() {
            //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>
    <!-- form wizard init -->
    <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