@extends('layouts/layoutMaster')

<!-- Vendor Styles -->
@section('vendor-style')
@vite([
'resources/assets/vendor/libs/flatpickr/flatpickr.scss',
'resources/assets/vendor/libs/select2/select2.scss',
'resources/assets/vendor/libs/bootstrap-select/bootstrap-select.scss',
'resources/assets/vendor/libs/@form-validation/form-validation.scss',
'resources/assets/vendor/libs/sweetalert2/sweetalert2.scss',
])
@endsection

<!-- Vendor Scripts -->
@section('vendor-script')
@vite([
'resources/assets/vendor/libs/flatpickr/flatpickr.js',
'resources/assets/vendor/libs/select2/select2.js',
'resources/assets/vendor/libs/bootstrap-select/bootstrap-select.js',
'resources/assets/vendor/libs/cleavejs/cleave.js',
'resources/assets/vendor/libs/@form-validation/popular.js',
'resources/assets/vendor/libs/@form-validation/bootstrap5.js',
'resources/assets/vendor/libs/@form-validation/auto-focus.js',
'resources/assets/vendor/libs/sweetalert2/sweetalert2.js',
'resources/assets/vendor/libs/petite-vue/petite-vue.js',
'resources/js/saisie-management.js',
])
@endsection

<!-- Page Scripts -->
@section('page-script')

<script type="module">

    /**
     * Caisse est une saisie en base (id) ou la saisie en session
     */
    const STORAGE_KEY = 'saisie-caisse-jour'
    const caisseStorage = {
        fetch() {
            @if(!empty(json_decode($caisse)->id))
                return JSON.parse(@json($caisse));
            @else
                // Si on a pas de caisse en storage on utilise celle par defaut json($caisse)
                return JSON.parse(localStorage.getItem(STORAGE_KEY)) || JSON.parse(@json($caisse));
            @endif
        },
        save(caisse) {
            localStorage.setItem(STORAGE_KEY, JSON.stringify(caisse))
        }
    }

    window.caisse = caisseStorage.fetch();
    console.log("CAISSE", caisse);

    // On met à jour le champ date
    $('#flatpickr-date').flatpickr({
        monthSelectorType: 'static',
        dateFormat: "d/m/Y",
        defaultDate: caisse.date
    });

    const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
    const popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
        return new bootstrap.Popover(popoverTriggerEl, { html: true, trigger: 'focus' });
    });

    /**
     * PIZZAS
     */
    const store_pizzas = reactive({

        // On utilise la liste des pizza comme base.
        // On rajoute et utilise un compteur de petites/moyennes/grandes
        pizzas: caisse.pizzas,

        nb_pizzas: 0, // Nb total de pizza, affiché
        total_petites: 0, // Compteurs nombre de pizzas
        total_moyennes: 0,
        total_grandes: 0,
        total_ca_petites: 0, // Somme CA des pizzas du compteur
        total_ca_moyennes: 0,
        total_ca_grandes: 0,
        total_ca_pizzas: 0,
        total_gratuites: caisse.total_gratuites, // Total _ca gratuites

        // Met a jour le compteur nb_pizza
        updateNbPizzas: function(){
            this.nb_pizzas = this.pizzas.reduce((acc, pizza) => {
                let total = parseInt(pizza.petites) + parseInt(pizza.moyennes);
                let grandes = pizza.nom !== 'GRATUITE' ? parseInt(pizza.grandes) : 0;
                return acc + (total + grandes);
            }, 0);
            this.updateTotalMontantPizza();
        },

        updateTotalMontantPizza: function(id, type){

            // Nombre de pizzas par type
            this.total_petites = this.pizzas.reduce((acc, pizza) => { return acc + parseInt(pizza.petites) }, 0);
            this.total_moyennes = this.pizzas.reduce((acc, pizza) => { return acc + parseInt(pizza.moyennes) }, 0);
            this.total_grandes = this.pizzas.reduce((acc, pizza) => {
                return acc + (pizza.nom !== 'GRATUITE' ? parseInt(pizza.grandes) : 0)
            }, 0);

            // // Total des gratuites // MAJ : champ libre
            // this.total_ca_gratuites = this.pizzas.reduce((acc, pizza) => {
            //     return acc + (pizza.nom === 'GRATUITE' ? pizza.grandes * parseFloat(pizza.prix_grande) : 0)
            // }, 0);

            this.total_ca_petites = this.pizzas.reduce((acc, pizza) => { return acc + pizza.petites * parseFloat(pizza.prix_petite) }, 0);
            this.total_ca_moyennes = this.pizzas.reduce((acc, pizza) => { return acc + pizza.moyennes * parseFloat(pizza.prix_moyenne) }, 0);
            // Total des grandes - les gratuites
            this.total_ca_grandes = this.pizzas.reduce((acc, pizza) => {
                return acc + (pizza.nom !== 'GRATUITE' ? pizza.grandes * parseFloat(pizza.prix_grande) : 0)
            }, 0) ;

            // Somme des totaux
            this.total_ca_pizzas = this.total_ca_petites + this.total_ca_moyennes + this.total_ca_grandes;
        },

        // Retourne la pizza par son id
        getPizza(id) {
            return this.pizzas.find(obj => parseInt(obj.id) === parseInt(id))
        },
        // Retourne le compteur (type petites,..) de cette pizza
        getPizzas(id, type) {
            let pizza = this.getPizza(id)
            if (type === 'petites') return pizza.petites
            if (type === 'moyennes') return pizza.moyennes
            if (type === 'grandes') return pizza.grandes
            return pizza
        },
        // Incrémente le nbr de pizzas de ce type
        incPizza(id, type) {
            let pizza = this.getPizzas(id)
            if(type === 'petites') pizza.petites++
            if(type === 'moyennes') pizza.moyennes++
            if(type === 'grandes') pizza.grandes++
            this.updateNbPizzas()
        },
        // Décrémente le nbr de pizzas de ce type
        decPizza(id, type) {
            let pizza = this.getPizzas(id)
            if(type === 'petites' && pizza.petites > 0) pizza.petites--
            if(type === 'moyennes' && pizza.moyennes > 0) pizza.moyennes--
            if(type === 'grandes' && pizza.grandes > 0) pizza.grandes--
            this.updateNbPizzas()
        },
        // Retourne le prix de cette pizza pour ce type
        getPizzasPrice(pizza, type) {
            if (type === 'grandes') return pizza.prix_grande
            if (type === 'moyennes') return pizza.prix_moyenne
            return pizza.prix_petite
        },
        getTotalCA(){
            return this.total_ca_pizzas
        },
    })

    /**
     * EXTRA - EAU / SODA / PATISSERIES
     */
    const store_extras = reactive({

        // On utilise la liste des extras comme base. On rajoute et utilise un compteur de part/pro
        extras: caisse.extras ,
        nb_extras: 0,
        total_parts: 0,
        total_pros: 0,
        total_ca_parts: 0,
        total_ca_pros: 0,
        total_ca_extras: 0,

        // Met a jour le compteur nb_extras
        updateNbExtras: function(){
            this.nb_extras = this.extras.reduce((acc, extra) => {
                return acc + (parseInt(extra.parts) + parseInt(extra.pros));
            }, 0);
            this.updateTotalMontantExtra();
        },
        updateTotalMontantExtra: function(){
            // Nombre de extras par type
            this.total_parts = this.extras.reduce((acc, extra) => { return acc + extra.parts }, 0);
            this.total_pros = this.extras.reduce((acc, extra) => { return acc + extra.pros }, 0);

            this.total_ca_parts = this.extras.reduce((acc, extra) => { return acc + parseInt(extra.parts) * parseFloat(extra.prix_part) }, 0);
            this.total_ca_pros = this.extras.reduce((acc, extra) => { return acc + parseInt(extra.pros) * parseFloat(extra.prix_pro) }, 0);

            // Somme
            this.total_ca_extras = this.total_ca_parts + this.total_ca_pros;
        },
        // Retourne extrapar son id
        getExtra(id) {
            return this.extras.find(obj => parseInt(obj.id) === parseInt(id))
        },
        // Retourne le compteur (type part/pro) de cet extra
        getExtras(id, type) {
            let extra = this.getExtra(id)
            if (type === 'part') return extra.parts
            if (type === 'pro') return extra.pros
            return extra
        },
        // Incrémente le nbr d'extra de ce type
        incExtra(id, type) {
            let extra = this.getExtras(id)
            if(type === 'part') extra.parts++
            if(type === 'pro') extra.pros++
            this.updateNbExtras()
        },
        // Décrémente le nbr de extras de ce type
        decExtra(id, type) {
            let extra = this.getExtras(id)
            if(type === 'part') extra.parts--
            if(type === 'pro') extra.pros--
            this.updateNbExtras()
        },
        getTotalCA(){
            return this.total_ca_extras
        }
    })

    /**
     * CHEQUES & ESPECES
     */
    const store_cheques = reactive({
        total_cheques: caisse.cheques.total_cheques,
        cheque_inputs: caisse.cheques.cheque_inputs || [],
        espece_input: caisse.cheques.espece_input,
        getNbCheques() {
            let isNotNull = value => value !== '' && value !== 0 && value !== null;
            return this.cheque_inputs.filter(isNotNull).length;
        },
        updateTotalCheque() {
            this.total_cheques = this.cheque_inputs.reduce((acc, val) => acc + parseFloat(val || 0), 0);
            this.getNbCheques();
        },
        getTotalCA() {
            return parseFloat(this.total_cheques || 0) + parseFloat(this.espece_input || 0)
        },

    })

    /**
     * CARTES BANCAIRES
     */
    const store_cartes = reactive({
        cbless: caisse.cartes.cbless,
        cbemv: caisse.cartes.cbemv,
        getTotalCA(){
            return parseFloat(this.cbless || 0) + parseFloat(this.cbemv || 0)
        }
    })

    /**
     * DEPENSES
     */
    const store_depenses = reactive({
        depenses: {
            place: caisse.depenses.place,
            bon_loto: caisse.depenses.bon_loto,
            autres: caisse.depenses.autres,
        },
        getTotal(){
            return Object.values(this.depenses).reduce((acc, val) => acc + parseFloat(val || 0), 0);
        }
    })


    const app = createApp({

        // share it with app scopes
        date: caisse.date,
        place: caisse.place || 0,
        type: caisse.type || 0,

        store_pizzas,
        store_extras,
        store_cartes,
        store_cheques,
        store_depenses,

        // Initialise place / date ..
        places: @json($places->toArray()),
        types: @json($types->toArray()),

        total_ca: 0,

        // Switch validation pour une validation manuelle
        validated: caisse.validated,

        displayAlertDiff: function(){
            if (this.totalVentes() !== this.totalEncaissements())
                return true
            return false;
        },

        // Total des ventes pizzas + boissons + pâtisseries
        // En déduire les pizzas gratuites et les dépenses
        totalVentes: function(){
            return this.store_pizzas.getTotalCA() + this.store_extras.getTotalCA() - this.store_depenses.getTotal()
        },

        totalEncaissements: function(){
            return this.store_cartes.getTotalCA() + this.store_cheques.getTotalCA()
        },

        totalCa: function () {
            // On sauvegarde en session la caisse en cours
            this.storeSessionCaisse();

            return this.totalEncaissements();
        },

        formatedCaisse: function(){
            return {
                id: {{ Request::get('id') ?? 0 }},
                place: this.place,
                type: this.type,
                date: this.date,
                pizzas: store_pizzas.pizzas,
                total_gratuites: store_pizzas.total_gratuites,
                extras: store_extras.extras,
                depenses: store_depenses.depenses,
                cheques: {
                    total_cheques: store_cheques.total_cheques,
                    cheque_inputs: store_cheques.cheque_inputs,
                    espece_input: store_cheques.espece_input,
                },
                cartes: {
                    cbless: store_cartes.cbless,
                    cbemv: store_cartes.cbemv,
                },
                validated: this.validated
            }
        },

        storeSessionCaisse: function(){
            // Si on n'a pas d'id on sauvegarde
            @if(empty(Request::get('id')))
                caisseStorage.save(this.formatedCaisse());
            @endif
        },

        setupMounted() {
            // Update les compteurs (pizzas, extras, totaux ...) si on a une caisse enregistrée à réafficher
            this.store_pizzas.updateNbPizzas();
            this.store_extras.updateNbExtras();
            this.store_cheques.updateTotalCheque();

            // Met a jour les select avec selectpicker -- En entrée de script v-for ne fonctionne pas car le dom n'est surement pas chargé correctement
            $('.selectpicker').selectpicker({
                language: 'FR'
            });
            handleBootstrapSelectEvents();
        },

        saveCaisse(datas){
            $.ajax({
                data: datas,
                url: '{{ route('saisie.save') }}',
                type: 'POST',
                success: function (status) {
                    Swal.fire({
                        icon: 'success',
                        text: `${status['message']}`,
                        timer: 4500,
                        timerProgressBar: true,
                        customClass: {
                            confirmButton: 'btn btn-success'
                        }
                    })

                    // Recharge la page pour la mettre en lecture seule
                    if (datas.validated) {
                        location.reload();
                    }
                },
                error: function (xhr, status, error) {
                    let json_return = JSON.parse(xhr.responseText)
                    console.error(json_return);
                    Swal.fire({
                        text: json_return.message,
                        icon: 'error',
                        customClass: {
                            confirmButton: 'btn btn-secondary'
                        }
                    })
                }
            })
        },

        onSubmit(){

            let datas = this.formatedCaisse();

            // Revalidation des champs par FV (saisie-management)
            if (this.place === 0 || this.type === 0 || null === this.date) {
                fv.validate(); return;
            }

            // Valider / verrouiller est coché on demande confirmation
            if (this.validated) {
                if (confirm('Confirmer la validation et le verrouillage définitif de cette caisse ?')){
                    this.saveCaisse(datas);
                }
                // Sinon save
            } else {
                this.saveCaisse(datas);
            }


        },

        reinitialise(){
            localStorage.removeItem(STORAGE_KEY)
            window.location = '{{ route('saisie') }}'
        },

    }).mount('#app');



</script>

@endsection

@php
    $col_md_1 = 8;
    $col_md_2 = 4;
    $col_lg_1 = 9;
    $col_lg_2 = 3;
    $tr_height = "max-height: 55px !important; height: 55px !important; ";
    $border_footer = "border-top: 2px solid #ccc;";
    $validated = json_decode($caisse)->validated;
    $disabled = !empty($validated);
@endphp

@section('title', 'Saisie Caisses')
@section('nav-title')
    <i class="menu-icon tf-icons ri-inbox-archive-line text-muted"></i>

    @if(Request::has('id'))
        @if($disabled)
            Visualisation d'une caisse verrouillée en lecture seule
        @else
            Modification d'une caisse existante
        @endif
    @else
        Saisie d'une nouvelle caisse
    @endif
@endsection

@section('content')


    <div id="app" v-scope @vue:mounted="setupMounted" v-cloak>

        <form id="form-saisie" >

            @include('saisie.select_top')

            @include('saisie.pizzas')

            @include('saisie.gratuites')

            @include('saisie.extras')

            @include('saisie.depenses')

            @include('saisie.cheques')

            @include('saisie.cartes_bancaires')

            @include('saisie.recapitulatif')

            @include('saisie.verrouillage')

        </form>

    </div>

@endsection