@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">
                    <div class="dashboard-box margin-top-0">

                        <!-- Headline -->
                        <div class="headline">
                            <h3><i class="icon-feather-folder-plus"></i> Ajouter Une Publication</h3>
                        </div>
                        <form action="{{ route('update.publication') }}" method="POST" enctype="multipart/form-data">
                            @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</h5>
                                            <div class="input-with-icon">
                                                <input class="with-border" type="date" name="date_debut" 
                                                    value="{{ $publication->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</h5>
                                            <div class="input-with-icon">
                                                <input class="with-border" type="date" placeholder="" name="date_fin"
                                                     value="{{ $publication->date_fin }}">
                                                <i class="icon-material-outline-date-range"></i>
                                            </div>
                                        </div>
                                    </div>



                                    <div class="col-xl-6">
                                        <div class="submit-field">
                                            <h5>Titre Du document </h5>
                                            <input type="text" class="with-border" name="titre_document" placeholder=""
                                                value="{{ $publication->title_document }}">
                                        </div>
                                    </div>



                                    <div class="col-xl-6">
                                        <div class="submit-field">
                                            <h5>Categorie De La Publication</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 }}">{{ $category->category_label }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>


                                    <div class="col-xl-6 col-md-6">
                                        <div class="submit-field">
                                            <h5>Ville Publication</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>Image Banière </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">Images de la publication</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-xl-6">
                                        <div class="submit-field">
                                            <h5>Document De La Publication </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="{{ $publication->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">
                                        <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="{{ old('numbre_client') }}"
                                                    disabled>
                                                <input type="hidden" name="number_of_client_hidden"
                                                    id="number_of_client_hidden">
                                            </div>

                                        </div>
                                    </div>

                                    <div class="col-xl-3">
                                        <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"
                                                    id="prix_total_hidden_taxe">
                                                <i class="currency">EUR</i>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-xl-3">
                                        <div class="submit-field">
                                            <h5>Prix total à Payer HTTC</h5>
                                            <div class="input-with-icon">
                                                <input class="with-border" type="number" placeholder="" disabled
                                                    name="prix" value="{{ old('prix') }}" 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">
                                        <div class="submit-field">
                                            <h5>Description De La Publication</h5>
                                            <textarea cols="20" rows="2" class="with-border" name="description" required>{{ $publication->description }}</textarea>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="col-xl-12">
                                <button class="button ripple-effect big margin-top-0" type="submit">
                                    <i class="icon-feather-plus"></i>
                                    Ajouter La Publication</a>
                                </button>
                                {{-- <a href="#" class="button ripple-effect big margin-top-0"><i
                                        class="icon-feather-plus"></i>
                                    Ajouter La Publication</a> --}}
                            </div>
                        </form>
                    </div>
                </div>

            </div>




            @include('clients.layout.footer')

        </div>
    </div>

@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>






    //To get number of user
    <script>
        $(document).ready(function() {

            $('#selectVille').change(function() {
                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 prix = $('#number_of_page').val()
                        if (parseInt(prix) > 2) {
                            $('#number_of_client').val(count_user)
                            $('#number_of_client_hidden').val(count_user)
                            $('#prix_total').val(count_user * 0.3 + (0.2))
                            $('#prix_total_hors_taxe').val(count_user * 0.3)
                            $('#prix_total_hidden').val(count_user * 0.3 + (0.2))
                        }
                        $('#number_of_client').val(count_user)
                        $('#number_of_client_hidden').val(count_user)
                        $('#prix_total').val(count_user * 0.05 + (0.2))
                        $('#prix_total_hors_taxe').val(count_user * 0.05)
                        $('#prix_total_hidden').val(count_user * 0.05 + (0.2))
                        console.log($('#prix_total_hidden').val())
                    },
                    error: function() {
                        console.log('erroe')
                    }
                })
            })
        })
    </script>

    //To get number of pages

    <script>
        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(file)

            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
                    if (nombre_client > 2) {
                        $('#number_of_page').val(nombre_page)
                        $('#number_of_page_hidden').val(nombre_page)
                        $('#prix_total').val(0.3 * parseInt(nombre_client) + (0.2))
                        $('#prix_total_hors_taxe').val(0.3 * parseInt(nombre_client))
                        $('#prix_total_hidden').val(0.3 * parseInt(nombre_client) + (0.2))
                    }
                    $('#number_of_page').val(nombre_page)
                    $('#number_of_page_hidden').val(nombre_page)
                    $('#prix_total').val(0.05 * parseInt(nombre_client) + (0.2))
                    $('#prix_total_hors_taxe').val(0.05 * parseInt(nombre_client))
                    $('#prix_total_hidden').val(0.05 * parseInt(nombre_client) + (0.2))
                    // console.log(nombre_page)
                    // alert(nombre_page)
                })
            }

            filereader.readAsArrayBuffer(file)
        }
    </script>
@endsection
@endsection