@extends('models')
@section('substock')
    open active
@endsection
@section('stock')
    active
@endsection
@section('titre-page', 'Comptage d\'inventaire')
@section('content-body')

    @include('pages.stocks.partials.comptageTactile')

    <style>
        /* Écran de démarrage du comptage : ni menu latéral ni barre d'application, comme
           l'écran de saisie qui suit. Le fil d'Ariane suffit à ressortir. */
        .app-header,
        .app-sidebar,
        .sidemenu-toggle {
            display: none !important;
        }

        .app-content {
            margin-inline-start: 0 !important;
            margin-block-start: 0 !important;
            margin-top: 0 !important;
        }

        /* Sous 992px, le gabarit réserve 3.75rem en haut pour l'en-tête fixe. L'en-tête
           étant masqué ici, cette réserve ne laisserait qu'un bandeau vide sur tablette. */
        .main-content {
            padding-block-start: 0 !important;
        }

        .demarrage-comptage .card-saisie {
            max-width: 46rem;
            margin: 0 auto;
        }

        .demarrage-comptage .etape {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.6rem;
            height: 1.6rem;
            border-radius: 50%;
            background: var(--primary01);
            color: var(--primary-color);
            font-weight: 700;
            font-size: .85rem;
            margin-right: .5rem;
        }
    </style>

    <div class="demarrage-comptage">

        <!-- Page Header -->
        <div class="d-md-flex d-block align-items-center justify-content-between mt-4 page-header-breadcrumb">
            <div class="col-xl-12 col-12">
                <div class="row mb-2">
                    <div class="col-xl-8 col-lg-7 col-md-7 mt-2">
                        <nav>
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item text-light"><a href="{{ url('/') }}">Accueil</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Saisie d'inventaire</li>
                            </ol>
                        </nav>
                    </div>
                    <div class="col-xl-4 col-lg-5 col-md-5 mt-md-0 mt-2">
                        <div class="d-flex gap-2 justify-content-md-end">
                            <button class="btn btn-outline-primary" id="btnModeTactile">
                                <i class="bx bx-tab"></i> &nbsp;Mode tablette
                            </button>
                            {{-- <a href="{{ route('stock.inventaireSocks.index') }}" class="btn btn-outline-secondary">
                                <i class="bx bx-list-ul"></i> &nbsp;Inventaires
                            </a> --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Page Header Close -->

        @if ($INVENTAIRE == null)
            <div class="card custom-card card-saisie">
                <div class="card-body text-center p-4">
                    <i class="bx bx-error-circle text-warning" style="font-size: 3rem"></i>
                    <h6 class="fw-semibold mt-2">Aucun inventaire en cours sur ce site</h6>
                    <p class="text-muted mb-3">
                        Le comptage porte sur le dernier inventaire ouvert du site.
                        Créez-en un, ou rouvrez une zone depuis la fiche inventaire.
                    </p>
                    {{-- <a href="{{ route('stock.inventaireSocks.index') }}" class="btn btn-primary">
                        Aller aux inventaires
                    </a> --}}
                </div>
            </div>
        @else
            <input type="hidden" id="IDINVENTAIRE" value="{{ $INVENTAIRE->IDINVENTAIRE }}">

            <div class="card custom-card card-saisie">
                <div class="card-header p-2">
                    <div class="d-flex flex-wrap align-items-center gap-2" style="font-size: 9pt">
                        <span class="fw-semibold">Inventaire {{ $INVENTAIRE->NumeroInventaire }}</span>
                        <span class="badge bg-primary-transparent">
                            {{ \Carbon\Carbon::parse($INVENTAIRE->DateInventaire)->format('d/m/Y') }}
                        </span>
                        <span class="badge bg-info-transparent">{{ $INVENTAIRE->NomAgence }}</span>
                        <span class="badge bg-dark-transparent">
                            {{ $INVENTAIRE->ModeInventaire == 1 ? 'PAR LOT' : 'PAR PRODUIT' }}
                        </span>
                        @if ($INVENTAIRE->CommentaireInventaire)
                            <span class="text-muted">{{ $INVENTAIRE->CommentaireInventaire }}</span>
                        @endif
                    </div>
                </div>

                <div class="card-body p-3 tac-grand">

                    <div class="mb-3 tac-champ-hote">
                        <label class="form-label fw-semibold" for="zoneComptage">
                            <span class="etape">1</span> Zone de stockage
                        </label>
                        <select class="form-select" id="zoneComptage"></select>
                        <div class="mt-2" id="infoComptage"></div>
                    </div>

                    <div class="mb-4 tac-champ-hote">
                        <label class="form-label fw-semibold" for="personnelComptage">
                            <span class="etape">2</span> Comptage effectué par
                        </label>
                        <select class="form-select" id="personnelComptage"></select>
                    </div>

                    <button class="btn btn-primary w-100 btn-lg" id="btnContinuer">
                        Continuer &nbsp;<i class="bx bx-right-arrow-alt"></i>
                    </button>
                </div>
            </div>
        @endif

    </div>

@endsection

@section('script')
    <script>
        $(function() {

            Tactile.init()

            $(document).on("click", "#btnModeTactile", function() {
                Tactile.basculer()
                $(this).toggleClass("btn-primary", Tactile.estActif())
                    .toggleClass("btn-outline-primary", !Tactile.estActif())
            })

            $("#btnModeTactile").toggleClass("btn-primary", Tactile.estActif())
                .toggleClass("btn-outline-primary", !Tactile.estActif())

            @if ($INVENTAIRE != null)

                /* ============================ ZONES ============================ */

                $.ajax({
                    type: "GET",
                    url: "{{ route('stock.saisieSimplifiee.zones', '') }}/" + $("#IDINVENTAIRE").val(),
                    dataType: "json",
                    success: function(response) {

                        if (response.error == true) {
                            notifWarning(response.messages)
                            return false
                        }

                        $("#zoneComptage").html('<option value="">-- CHOISIR UNE ZONE --</option>')

                        $.each(response.data, function(index, zone) {
                            let comptage = parseInt(zone.EtapeInventaireZone)
                            let libelle = comptage >= 5 ? "Zone clôturée · comptage 800" :
                                (comptage == 4 ? "Comptage 800" : "Comptage " + comptage)

                            $("#zoneComptage").append(
                                `<option value="${zone.IDZONESTOCKAGE}" data-comptage="${comptage}" data-detail="${libelle}">${zone.NomZoneStockage}</option>`
                            )
                        })

                        $("#zoneComptage").select2({
                            placeholder: "Rechercher une zone…"
                        })

                        Tactile.brancherSelect("#zoneComptage", {
                            titre: "Zone de stockage",
                            sousTitre: "Inventaire N° {{ $INVENTAIRE->NumeroInventaire }}",
                            invite: "Toucher pour choisir la zone",
                            libelle: "Zone de stockage",
                        })

                        // Un inventaire est ouvert : cet écran n'a qu'un but, choisir la zone.
                        // On l'ouvre donc d'emblée plutôt que d'attendre un clic de plus.
                        if (Tactile.estActif()) {
                            $(".tac-declencheur[data-cible='zoneComptage']").trigger("click")
                        } else {
                            $("#zoneComptage").select2("open")
                        }
                    },
                    error: function() {
                        notifWarning("Impossible de charger les zones de stockage !")
                    }
                });

                $(document).on("change", "#zoneComptage", function() {

                    let comptage = parseInt($(this).find("option:selected").data("comptage"))

                    if ($(this).val() == "") {
                        $("#infoComptage").html("")
                        return false
                    }

                    let libelle = comptage >= 5 ? "ZONE CLOTUREE — COMPTAGE 800" :
                        (comptage == 4 ? "COMPTAGE 800" : "COMPTAGE " + comptage)

                    $("#infoComptage").html(
                        `<span class="badge bg-success-transparent">Comptage ouvert sur la zone : ${libelle}</span>`
                    )
                })

                /* ============================ PERSONNEL ============================ */

                listingComboPersonnel("#personnelComptage", "-- CHOISIR LA PERSONNE --").then(function() {
                    $("#personnelComptage option[value='0']").val("")
                    $("#personnelComptage").select2({
                        placeholder: "Rechercher une personne…"
                    })

                    Tactile.brancherSelect("#personnelComptage", {
                        titre: "Comptage effectué par",
                        invite: "Toucher pour choisir la personne",
                        libelle: "Compté par",
                    })

                    // Par défaut, la personne connectée : c'est elle qui compte le plus souvent.
                    $("#personnelComptage").val("{{ session('IDPERSONNEL') }}").trigger("change")
                    Tactile.majDeclencheur($("#personnelComptage"))
                })

                /* ============================ CONTINUER ============================ */

                function continuer() {

                    if ($("#zoneComptage").val() == "" || $("#zoneComptage").val() == null) {
                        alertSwal("Veuillez choisir la zone de stockage !")
                        return false
                    }

                    if ($("#personnelComptage").val() == "" || $("#personnelComptage").val() == null) {
                        alertSwal("Veuillez indiquer qui effectue le comptage !")
                        return false
                    }

                    window.location.href = "{{ route('stock.comptage.saisie') }}" +
                        "?zone=" + $("#zoneComptage").val() +
                        "&personnel=" + $("#personnelComptage").val()
                }

                $(document).on("click", "#btnContinuer", continuer)

                // Poste fixe : la touche Entrée enchaîne, sans quitter le clavier.
                $(document).on("keydown", function(evt) {
                    if (evt.key == "Enter" && !$("#tacEcran").is(":visible")) {
                        evt.preventDefault()
                        continuer()
                    }
                })
            @endif
        })
    </script>
@endsection