@extends('clients.layout.base')



@section('contenu')
    <div class="dashboard-content-container" data-simplebar>
        <div class="dashboard-content-inner">


            @include('clients.layout.message')


            <!-- Dashboard Headline -->
            {{-- <div class="dashboard-headline">
            <h3>Howdy, Tom!</h3>
            <span>We are glad to see you again!</span>

            <!-- Breadcrumbs -->
            <nav id="breadcrumbs" class="dark">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li>Dashboard</li>
                </ul>
            </nav>
        </div> --}}


            <div class="row">

                <!-- Dashboard Box -->
                <div class="col-xl-12">
                    <form action="{{ route('ville.save') }}" method="POST" enctype="multipart/form-data">
                        <div class="dashboard-box margin-top-0">

                            <!-- Headline -->
                            <div class="headline">
                                <h3><i class="icon-feather-folder-plus"></i> Ajouter Une Publication</h3>
                            </div>

                            @csrf
                            <div class="content with-padding padding-bottom-10">
                                <div class="row">
                                    <div class="col-xl-6">
                                        <div class="submit-field">
                                            <h5>Date Début De L'Annonce</h5>
                                            <div class="input-with-icon">
                                                <input class="with-border" type="date" name="date_debut" required
                                                    value="{{ old('date_debut') }}" id="date_debut">
                                                <i class="icon-material-outline-date-range"></i>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-xl-6">
                                        <div class="submit-field">
                                            <h5>Date Fin De L'Annonce</h5>
                                            <div class="input-with-icon">
                                                <input class="with-border" type="date" placeholder="" name="date_fin"
                                                    required value="{{ old('date_fin') }}" id="date_fin">
                                                <i class="icon-material-outline-date-range"></i>
                                            </div>
                                        </div>
                                    </div>

                                    <input type="hidden" name="mounth" id="nombre_de_mois">


                                    <div class="col-xl-6">
                                        <div class="submit-field">
                                            <h5>Titre Du document De L'Annonce</h5>
                                            <input type="text" class="with-border" name="titre_document" placeholder=""
                                                value="{{ old('titre_document') }}" required>
                                        </div>
                                    </div>



                                    <div class="col-xl-6" hidden>
                                        <div class="submit-field">
                                            <h5>Categorie De L'Annonce</h5>
                                            <select class="selectpicker with-border" data-size="7"
                                                title="Selectionner la  Categorie" name="category_id" required>
                                                @foreach ($categories as $category)
                                                    <option value="{{ $category->id }}"
                                                        @if ($category->category_label == "Autres") selected @endif
                                                        >{{ $category->category_label }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>







                                    <div class="col-xl-6">
                                        <div class="submit-field">
                                            <h5>Document De L'Annonce </h5>
                                            <input type="file" class="with-border" accept=".pdf" id="myfile" required
                                                name="pdf_file">
                                        </div>
                                    </div>



                                    <div class="col-xl-6">
                                        <div class="submit-field">
                                            <h5>Nombre De Pages</h5>
                                            <input type="number" class="with-border" name="number" placeholder=""
                                                value="{{ old('number_of_page') }}" disabled id="number_of_page">
                                            <input type="hidden" name="number_of_page" id="number_of_page_hidden">
                                        </div>
                                    </div>


                                    {{-- <div class="col-xl-6 col-md-6">
                                        <div class="submit-field">
                                            <h5>Ville De L'Annonce</h5>
                                            <select class="selectpicker with-border" data-live-search="true" multiple
                                                name="ville_id[]" id="selectVille" required>
                                                @foreach ($villes as $ville)
                                                    <option value="{{ $ville->id }}">{{ $ville->ville_name }}
                                                    </option>
                                                @endforeach
                                            </select>Type Address
                                        </div>
                                    </div> --}}

                                    <div class="col-xl-6">
                                        <div class="submit-field">
                                            <h5>Nombre de clients</h5>
                                            <div class="input-with-icon">
                                                <input id="number_of_client" class="with-border" type="number"
                                                    placeholder="" name="numbre_client" value="{{ $user }}"
                                                    disabled>
                                                <input type="hidden" name="number_of_client_hidden"
                                                    id="number_of_client_hidden" value="{{ $user }}">
                                            </div>

                                        </div>
                                    </div>


                                    <div class="col-xl-3">
                                        <div class="submit-field">
                                            <h5>Image Banière de l'Annonce </h5>
                                            <div class="uploadButton">
                                                <input class="uploadButton-input" type="file" accept="image/*"
                                                    id="upload" name="picture_file" required />
                                                <label class="uploadButton-button ripple-effect" for="upload">Choisir
                                                    l'image </label>
                                                <span class="uploadButton-file-name">Bannière</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-3" style="padding: 0px">
                                        <img src="" alt="" id="imgPreview">
                                    </div>

                                    <div class="col-xl-3" hidden>
                                        <div class="submit-field">
                                            <h5>Prix total à Payer HT</h5>
                                            <div class="input-with-icon">
                                                <input class="with-border" type="number" placeholder="" disabled
                                                    name="prix" value="{{ old('prix') }}" id="prix_total_hors_taxe">
                                                <input type="hidden" name="prix_total_hidden_taxe"
                                                    id="prix_total_hidden_taxe">
                                                <i class="currency">EUR</i>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-xl-3" hidden>
                                        <div class="submit-field">
                                            <h5>Prix total à Payer TTC</h5>
                                            <div class="input-with-icon">
                                                <input class="with-border" type="number" placeholder="" disabled
                                                    name="prixttc" value="{{ old('prixttc') }}" id="prix_total">
                                                <input type="hidden" name="prix_total_hidden" id="prix_total_hidden">
                                                <i class="currency">EUR</i>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-xl-12" hidden>
                                        <div class="submit-field">
                                            <h5>Description De L'Annonce</h5>
                                            <textarea cols="20" rows="2" class="with-border" name="description" required>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                                                 industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type an
                                            </textarea>
                                        </div>
                                    </div>

                                </div>

                            </div>
                            {{-- <div class="add-note-button">
                                <a href="#small-dialog"
                                    class="popup-with-zoom-anim button full-width button-sliding-icon"> Ajouter La
                                    Publication<i class="icon-material-outline-arrow-right-alt"></i></a>
                            </div> --}}
                            {{-- <div class="add-note-button">
                                <button href="#small-dialog"
                                    class="popup-with-zoom-anim button full-width button-sliding-icon">Add Note <i
                                        class="icon-material-outline-arrow-right-alt"></i></button>
                            </div> --}}

                        </div>
                        <div class="col-xl-12">
                            <button class="button ripple-effect big margin-top-50" type="submit">
                                Ajouter L'Annonce</a>
                            </button>
                        </div>
                    </form>
                </div>
            </div>


            <div id="small-dialog" class="zoom-anim-dialog mfp-hide dialog-with-tabs">

                <!--Tabs -->
                <div class="sign-in-form">

                    <ul class="popup-tabs-nav">
                        <li><a href="#tab">Add Note</a></li>
                    </ul>

                    <div class="popup-tabs-container">

                        <!-- Tab -->
                        <div class="popup-tab-content" id="tab">

                            <!-- Welcome Text -->
                            <div class="welcome-text">
                                <h3>Résumé de votre annonce </h3>
                            </div>

                            <!-- Form -->
                            <form method="post" id="add-note">

                                <select class="selectpicker with-border default margin-bottom-20" data-size="7"
                                    title="Priority">
                                    <option>Low Priority</option>
                                    <option>Medium Priority</option>
                                    <option>High Priority</option>
                                </select>

                                <textarea name="textarea" cols="10" placeholder="Note" class="with-border"></textarea>

                            </form>

                            <!-- Button -->
                            <button class="button full-width button-sliding-icon ripple-effect" type="submit"
                                form="add-note">Add Note <i class="icon-material-outline-arrow-right-alt"></i></button>

                        </div>

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




            @include('clients.layout.footer')

        </div>
    </div>

@section('script')
    //Sweelt alert
    {{-- <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script> --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
    //To get number of user
    <script>
        function showAlertMessage(message) {
            Swal.fire({
                title: 'Erreur!',
                text: message,
                icon: 'error',
                confirmButtonText: 'Ok'
            })
        }


        //Calculer le prix HT
        function calculPrixTotalHT() {
            var nbrePage = $('#number_of_page').val() == 0 ? 0 : $('#number_of_page').val()
            var month = $("#nombre_de_mois").val() <= 0 ? 1 : $("#nombre_de_mois").val()
            var nbreUser = $('#number_of_client').val() == 0 ? 0 : $('#number_of_client').val()

            // showAlertMessage("Mois"+month)

            if (nbrePage >= 2) {
                var prixHT = (Number.parseInt(nbreUser) * Number.parseInt(month) * 0.3).toFixed(2)
                var prixTTC = calculPrixTTC(prixHT)
                // console.log("prixTTCH"+prixHT);

                $('#prix_total_hors_taxe').val(prixHT)
                $('#prix_total_hidden_taxe').val(prixHT)
                $('#prix_total').val(prixTTC)
                $('#prix_total_hidden').val(prixTTC)
                return prixHT
            } else if (nbrePage < 2) {
                var prixHT = (Number.parseInt(nbreUser) * Number.parseInt(month) * 0.05).toFixed(2)
                var prixTTC = calculPrixTTC(prixHT)
                $('#prix_total_hors_taxe').val(prixHT)
                $('#prix_total_hidden_taxe').val(prixHT)
                $('#prix_total').val(prixTTC)
                $('#prix_total_hidden').val(prixTTC)
                return prixHT
            }
        }

        function calculPrixTTC(prixTotal) {
            var prix = (prixTotal * (1 + 0.2)).toFixed(2)
            // console.log("prix total"+prix);
            return (prixTotal * (1 + 0.2)).toFixed(2)
        }



        $(document).ready(function() {

            $('#selectVille').change(function() {

                //Verifier si le document a ete uploader

                // if( document.getElementById("myfile").files.length === 0 ){
                //       showAlertMessage("Vous deviez choisir le document");
                //       return 
                // }
                if ($('#date_debut').val() === '') {
                    showAlertMessage("ajouter une date debut pour la diffusion du document ...")
                    return;
                }

                if ($('#date_fin').val() === '') {
                    showAlertMessage("ajouter une date de fin pour la diffusion du document ...")
                    return;
                }

                if ($('#myfile').get(0).files.length === 0) {
                    showAlertMessage("Ajouter d'abord le document pour la diffusion")
                    return
                }


                var element = new Array()
                element = $(this).val()
                // console.log(element)
                $.ajax({
                    url: "{{ url('get_user_of_ville') }}",
                    method: "GET",
                    async: true,
                    data: {
                        element: element
                    },
                    success: function(data) {
                        count_user = data['value']
                        var nombre_pages = $('#number_of_page').val()
                        var nombre_de_mois = $("#nombre_de_mois").val() <= 0 ? 1 : $(
                            "#nombre_de_mois").val()

                        //Mise a jour des champs
                        $('#number_of_client').val(count_user)
                        $('#number_of_client_hidden').val(count_user)
                        $('#prix_total').val(prixTTC)
                        $('#prix_total_hors_taxe').val(prixHT)
                        $('#prix_total_hidden_taxe').val(prixHT)
                        $('#prix_total_hidden').val(prixTTC)


                        var prixHT = calculPrixTotalHT()
                        var prixTTC = calculPrixTTC(prixHT)
                    },
                    error: function() {
                        console.log('error')
                    }
                })
            })
        })
    </script>


    <script>
        //To get number of pages
        let pdf = document.getElementById('myfile')
        var nombre_client
        var nombre_page

        pdf.onchange = function(event) {
            var file = event.target.files[0]
            var nombre_client = $('#number_of_client').val()

            // console.log(nombre_client)

            var filereader = new FileReader();
            filereader.onload = function() {
                var typeArray = new Uint8Array(this.result)
                const loadingTask = pdfjsLib.getDocument(typeArray)

                loadingTask.promise.then((pdf) => {
                    nombre_page = pdf.numPages
                    $('#number_of_page').val(nombre_page)
                    $('#number_of_page_hidden').val(nombre_page)
                    var prixHT = calculPrixTotalHT()
                    var prixTTC = calculPrixTTC(prixHT)
                })
            }

            filereader.readAsArrayBuffer(file)
        }
    </script>

    <script>
        //Calulate mounth of two date 
        //Function to calculate month between two date
        function getMonthDifference(startDate, endDate) {
            return (
                endDate.getMonth() -
                startDate.getMonth() +
                12 * (endDate.getFullYear() - startDate.getFullYear())
            );
        }

        $(document).ready(function() {
            $('#date_fin').blur(function() {

                var date_fin = $(this).val()
                var date_debut = $('#date_debut').val()
                var madate = getMonthDifference(new Date(date_debut), new Date(date_fin))


                if (date_debut === "") {
                    showAlertMessage(
                        "Choisissez la date début, elle doit être supérieure à la date fin de votre diffusion "
                    )
                    $('#date_fin').val('')
                }

                if (new Date(date_debut) > new Date(date_fin)) {
                    showAlertMessage("La date début doit être inférieure à la date fin de votre diffusion")
                    $('#date_fin').val('')
                }

                if (new Date(date_debut) === new Date(date_fin)) {
                    showAlertMessage(
                        "La duré de diffusion de votre document doit être d'au moins de quelques jours  "
                    )
                    $('#date_fin').val('')
                }


                if (new Date(date_fin) === new Date()) {
                    showAlertMessage(
                        "La duré de diffusion de votre document doit être d'au moins de quelques jours  "
                    )
                    $('#date_fin').val('')
                }


                // if (madate < 1) {
                //     showAlertMessage("La duré de diffusion de votre document doit être d'au moins 1 mois ")
                //     $('#date_fin').val('')
                // }

                // if (madate >=1) {
                //     // showAlertMessage("KOOL")
                //     alert(madate)
                // }

                if (new Date(date_fin) < new Date()) {
                    showAlertMessage("Vous deviez choisire une date de fin valide ...")
                    $('#date_fin').val('')
                }

                var nombre_de_mois = getMonthDifference(new Date(date_debut), new Date(date_fin))
                $('#nombre_de_mois').val(nombre_de_mois)
                var prixHT = calculPrixTotalHT()
                var prixTTC = calculPrixTTC(prixHT)


                // alert(nombre_de_mois)



            })



            $('#date_debut').blur(function() {
                var date_fin = $('#date_fin').val()
                var date_debut = $('#date_debut').val()


                // alert(new Date())


                if (new Date(date_debut) < new Date()) {
                    showAlertMessage("La date début doit être supérieur à la date d'aujourd'hui")
                    $('#date_debut').val('')
                }

                if (new Date(date_debut) > new Date(date_fin)) {
                    showAlertMessage("La date début doit être inférieure à la date fin de votre diffusion")
                    $('#date_debut').val('')
                }

                var nombre_de_mois = getMonthDifference(new Date(date_debut), new Date(date_fin))
                $('#nombre_de_mois').val(nombre_de_mois)
                var prixHT = calculPrixTotalHT()
                var prixTTC = calculPrixTTC(prixHT)


            })

        })
    </script>

    <script>
        //Image preview

        function previewImage(image) {
            var style = {
                "border-radius": "10px",
                "width": "50%",
                "height": "50%",
                "padding": "0",
            }
            var reader
            var previewfile = document.getElementById("imgPreview")
            if (image.files && image.files[0]) {
                reader = new FileReader();

                reader.onload = function(e) {
                    previewfile.setAttribute('src', e.target.result)
                    $("#imgPreview").css(style)
                }
                reader.readAsDataURL(image.files[0]);
            }
        }

        $(document).ready(function() {
            var fileUplod = document.getElementById("upload")
            fileUplod.addEventListener("change", function() {
                previewImage(this)
            })
        })
    </script>
@endsection
@endsection