@include('../header')

<main class="main" id="top">

    @include('../navigation')

    <div class="content">

        <h3>::. Infos société</h3>
        <hr>
        <div class="card card-shadow mb-4">

            <div class="card-body">

                <form class="formUpdateInfoSociete  needs-validation p-0" method="POST">
                    @csrf
                    <div class="row">

                        <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4 ">

                            <div
                                style="width:200px;height:200px; border:3px solid #64C5B1;border-radius:50%;display:block;margin:0 auto">

                                <div id="PhotoZone" class="PhotoZone"
                                    style="display:block; margin: 0 auto; border:1px dashed #64C5B1; width:180px; height:180px; border-radius:50%; margin-top:8px;">
                                    <img class="imgPhotoSocicete" id="imgPhoto" src="" alt="">
                                    <input type="file" id="photo" accept="image/*" class="inputPhoto"
                                        name="logoSociete" hidden>

                                </div>

                                <div id="RemovePicture" style="display:none;background:green"
                                    class="animate animated animate__bounceIn cursor-pointer"> <i class="fa fa-times"
                                        style="postion:absolute;margin-left:10px;margin-top:8px;color:#fff"></i> </div>
                            </div>

                        </div>

                        <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8 ">

                            <div class="row">
                                <div class="col-md-4">
                                    <label class="FormLabel">Raison sociale</label>
                                    <input type="text" id="raisonSocial" name="raisonSocial" class="form-control">
                                </div>
                                <div class="col-md-4">
                                    <label class="FormLabel">Email</label>
                                    <input type="text" id="email" name="email" class="form-control">
                                </div>
                                <input type="hidden" name="logoInputHidden" id="logoInputHidden">


                                <div class="col-md-4">
                                    <label class="FormLabel">Slogan</label>
                                    <input type="text" id="slogan" name="slogan" class="form-control">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-8 col-sm-8 col-lg-8 col-xl-8">
                                    <label class="FormLabel">Contacts</label>
                                    <input type="text" id="contact" name="contact" class="form-control">
                                </div>
                                <div class="col-md-4 col-sm-4 col-lg-4 col-xl-4">
                                    <label class="FormLabel">Nombre de jour relance facture échue </label>
                                    <input type="text" id="nbreJourRelanceFactureEchue"
                                        name="nbreJourRelanceFactureEchue" class="form-control">
                                </div>
                            </div><br>

                            <button class="btn btn-success" style="display:block;margin:0 auto;"
                                type="submit">Valider</button>

                        </div>

                    </div>

                </form>


            </div>
        </div>

        <h3>::. Infos impression</h3>
        <hr>

        <div class="card card-shadow mb-4">

            <div class="card-body">

                <form class="FormAddOrUpdatePiedpage" method="POST">

                    @csrf
                    <div class="mb-3">
                        <label class="FormLabel">Entête</label>
                        <textarea class="form-control" id="EnteteImpression" name="EnteteImpression"></textarea>
                    </div>

                    <div class="row">

                        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">

                            <textarea id="summernoteInfoImpression" name="piedDepageInfoImpression"></textarea>

                        </div>

                    </div><br>

                    <button class="btn btn-warning" style="display:block;margin:0 auto;" type="submit">Valider</button>

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

        @include('../primary_footer')
    </div>
    @include('../chatblock')
</main>

@include('../rightbar')

@include('../footer')

<script>
    $(document).ready(function() {
        getInfoSociete()
        $('#summernoteInfoImpression').summernote({
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'italic', 'underline', 'clear']],
                ['fontname', ['fontname']],
                ['fontsize', ['fontsize']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['height', ['height']],
                ['table', ['table']],
                ['insert', ['media', 'link', 'hr']],
                ['view', ['fullscreen', 'codeview']],
                ['help', ['help']],
                ['paperSize', ['paperSize']],
            ],
            placeholder: 'Entrez du texte ici...',

            height: '200px'
        });

        $('.formUpdateInfoSociete').on('submit', function(e) {

            e.preventDefault();
            MesrequetesAjax("{{ Route('infoSociteEntete.creer') }}", "POST", new FormData(this), false,
                false, "JSON",
                function(resp) {
                    Notification('Succès', resp.msg, 'top-right', 'success')
                })
        })


        $('.FormAddOrUpdatePiedpage').on('submit', function(e) {

            e.preventDefault();
            MesrequetesAjax("{{ Route('infoSocitePiedPage.creer') }}", "POST", new FormData(this),
                false, false, "JSON",
                function(resp) {

                    Notification('Succès', resp.msg, 'top-right', 'success')
            })

        })
    })

    function getInfoSociete() {

        MesrequetesAjax("{{ route('infoSociete.recuperation') }}", "GET", null, true, true, "JSON", function(resp) {

            $('.imgPhotoSocicete').css('display', 'block')
            $('.imgPhotoSocicete').prop("src", "media/logoSociete/" + resp.ligne[0].logoSociete)
            $('#raisonSocial').val(resp.ligne[0].RaisonSociale)
            $('#email').val(resp.ligne[0].emailSociete)
            $('#slogan').val(resp.ligne[0].Slogan)
            $('#contact').val(resp.ligne[0].contactSociete)
            $('#nbreJourRelanceFactureEchue').val(resp.ligne[0].NbreJourRelanceFactureEchue)
            $('#EnteteImpression').val(resp.ligne[0].enteteImpression)
            $('#summernoteInfoImpression').summernote('code', resp.ligne[0].infoPieddepage)
            $('#logoInputHidden').val(resp.ligne[0].logoSociete)



        })

    }
</script>
<script>
    const photoZone = document.querySelector('#PhotoZone');
    const inputPhotoPersonnel = document.querySelector('#photo');
    const ImgPhoto = document.querySelector('.imgPhotoSocicete');
    photoZone.addEventListener('click', () => {
        inputPhotoPersonnel.click();
    })

    inputPhotoPersonnel.addEventListener('change', function(e) {

        const clickFile = this.files[0];
        if (clickFile) {

            ImgPhoto.style = "display:block";
            const reader = new FileReader();
            reader.readAsDataURL(clickFile);
            reader.onloadend = function() {

                const result = reader.result;
                let src = this.result;
                ImgPhoto.src = src;
                ImgPhoto.alt = clickFile.name
            }

        }

    })
</script>
</body>

</html>