@extends('welcome')
@section('title', 'Articles')
@section('styles')
    <link href="{{ asset('dist/css/hotspot/hotspot.css') }}" rel="stylesheet" />
    <link href="{{ asset('dist/css/hotspot/style.css') }}" rel="stylesheet" />
@endsection

@section('content')
    <div class="content-wrapper">
        <div class="container-fluid">
            <div class="row mt-3">
                <div class="col-lg-12">
                    <div class="card m-3">
                        <div class="card-body">
                            <div class="d-flex justify-content-between m-3">
                                <h5 class="card-title">Articles</h5>
                                @if (Auth::user()->role_id == 1)
                                    <button type="button" data-bs-toggle="modal" data-bs-target="#inlineForm"
                                        onclick="clearInput()" class="btn btn-primary">Ajouter</button>
                                @endif
                            </div>
                            <div class="table-responsive">

                                <table class="table table-striped w-100" id="table">
                                    <thead>
                                        <tr>
                                            <th scope="col">Code</th>
                                            <th scope="col">Article</th>
                                            <th scope="col">Description</th>
                                            <th id="number" scope="col">Prix</th>
                                            <th id="number" scope="col">Quantité</th>
                                            <th id="number" scope="col">TVA</th>
                                            @if (Auth::user()->role_id == 1)
                                                <th scope="col">Actions</th>
                                            @endif
                                        </tr>
                                    </thead>

                                </table>

                                <form id="delete" method="POST">
                                    @method('DELETE')
                                    @csrf

                                </form>
                                <!--End Row-->

                                <div class="modal fade text-left " id="inlineForm" tabindex="-1" role="dialog"
                                    aria-labelledby="myModalLabel33" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-scrollable" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h4 class="modal-title" id="myModalLabel33">Ajouter </h4>
                                                <button type="button" class="close" data-bs-dismiss="modal"
                                                    aria-label="Close">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                        fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
                                                        <path
                                                            d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z" />
                                                    </svg>
                                                </button>
                                            </div>
                                            <form method="POST" action="{{ route('products.store') }}"
                                                enctype="multipart/form-data" id="formmm">
                                                @csrf
                                                <div class="modal-body">
                                                    <label>Nom: </label>
                                                    <div class="form-group">
                                                        <input type="text" name="name" class="form-control">
                                                    </div>
                                                    <label>Code: </label>
                                                    <div class="form-group">
                                                        <input type="text" name="code" class="form-control">
                                                    </div>


                                                    <label>Description: </label>
                                                    <div class="form-group">
                                                        <textarea name="description" class="form-control" id="" cols="30" rows="10"></textarea>
                                                    </div>

                                                    <label>Prix: </label>
                                                    <div class="form-group">
                                                        <input type="number" name="price" step="0.001"
                                                            class="form-control">
                                                    </div>

                                                    <label>TVA: </label>
                                                    <div class="form-group">
                                                        <input type="number" value="19" name="tva" step="0.01"
                                                            class="form-control">

                                                        <label>Image: </label>
                                                        <input type="file" name="image"
                                                            class="multiple-files-filepond">
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-light-secondary"
                                                            data-bs-dismiss="modal">
                                                            <i class="bx bx-x d-block d-sm-none"></i>
                                                            <span class="d-none d-sm-block">Annuler</span>
                                                        </button>
                                                        <button type="submit" class="btn btn-primary ml-1">
                                                            <i class="bx bx-check d-block d-sm-none"></i>
                                                            <span class="d-none d-sm-block text-white"
                                                                id="buttonText">Ajouter</span>
                                                        </button>
                                                    </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>


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



        </div>
        <!--End Row-->



        <!--start overlay-->
        <div class="overlay toggle-menu"></div>
        <!--end overlay-->
    </div>
    <!-- End container-fluid-->
    </div>
@endsection

@section('scripts')


    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.js"></script>
    <script src="{{ asset('dist/js/datatables.net-bs5/js/dataTables.bootstrap5.min.js') }}"></script>
    <script>
        const pond = FilePond.create(document.querySelector(".multiple-files-filepond"), {
            credits: null,
            allowImagePreview: true,
            allowImageFilter: false,
            allowImageExifOrientation: false,
            allowMultiple: false,
            required: false,
            storeAsFile: true,
            acceptedFileTypes: ["image/png", "image/jpg", "image/jpeg"],
            labelIdle: `<span class="text-primary">Choisir une image ou <span class="filepond--label-action text-primary" >Browse</span></span>`,
        });



        function deleteClient(id) {
            var form = document.getElementById('delete');
            let base = "{{ route('products.destroy', '5') }}";
            base = base.replace('5', id);
            form.action = base;
            form.submit();
        }

        document.addEventListener('click', function(event) {
            const target = event.target;
            if (target.classList.contains('edit')) {
                const form = document.getElementById('formmm');
                const editButton = target;
                const id = editButton.id;
                let base = "{{ route('products.show', '5') }}".replace('5', id);
                const nameInput = form.querySelector('input[name="name"]');
                const codeInput = form.querySelector('input[name="code"]');
                const descriptionInput = form.querySelector('textarea[name="description"]');
                const priceInput = form.querySelector('input[name="price"]');
                const tvaInput = form.querySelector('input[name="tva"]');
                const imageInput = form.querySelector('input[name="image"]');
                const buttonText = form.querySelector('#buttonText');
                buttonText.innerHTML = "Modifier";
                const title = document.querySelector('#myModalLabel33');
                title.innerHTML = "Modifier";

                axios.get(base).then((response) => {
                    const product = response.data;
                    nameInput.value = product.name;
                    codeInput.value = product.code;
                    var tempElement = document.createElement('div');
                    tempElement.innerHTML = product.description;
                    var plainText = tempElement.textContent || tempElement.innerText;
                    descriptionInput.value = plainText;
                    priceInput.value = product.price;
                    tvaInput.value = parseFloat(product.tva).toFixed(2);
                    if (product.image) {
                        console.log(product.image)
                        if (product.image.includes('https')) {
                            const proxyUrl = "{{ route('proxy-file') }}?url=" + product.image;
                            console.log(proxyUrl)
                            pond.addFile(proxyUrl);
                        } else {
                            pond.addFile("{{ route('home') }}/storage/products/" + product.image);
                        }
                    }


                    form.action = "{{ route('products.update', '5') }}".replace('5', id);
                });
            }
        });

        const clearInput = () => {
            const form = document.getElementById('formmm');
            const nameInput = form.querySelector('input[name="name"]');
            const descriptionInput = form.querySelector('textarea[name="description"]');
            const codeInput = form.querySelector('input[name="code"]');
            const priceInput = form.querySelector('input[name="price"]');
            const tvaInput = form.querySelector('input[name="tva"]');
            const imageInput = form.querySelector('input[name="image"]');
            const buttonText = form.querySelector('#buttonText');
            buttonText.innerHTML = "Ajouter";
            const title = document.querySelector('#myModalLabel33');
            title.innerHTML = "Ajouter";
            nameInput.value = "";
            codeInput.value = "";
            descriptionInput.value = "";
            priceInput.value = 0;
            tvaInput.value = 0;
            pond.removeFile();
        }
    </script>
    <script>
        $(document).ready(function() {
            $('#table').DataTable({
                processing: true,
                serverSide: true,
                ordering: true,
                search: "Tedarikçiler Arasında Ara",
                ajax: {
                    url: "{{ route('products.ajax') }}",
                    data: function(d) {
                        d.search = $('input[type="search"]').val();
                    }
                },
                columns: [{
                        data: 'code'
                    },
                    {
                        data: null,
                        render: function(data, type, row) {
                            // get from the start till the slash before products
                            const url = window.location.href;
                            const index = url.lastIndexOf('/products');
                            const baseUrl = url.substring(0, index);
                            return `
                            <div class="col-12 d-flex flex-row p-2 justify-content-start">
                                <div class="avatar avatar-md">

                                    <img src="${data.image? data.image.startsWith('https') ? data.image : `${baseUrl}/storage/products/` + data.image:`${baseUrl}/static/2.png`}" alt="">
                                </div>
                                <div class="mx-3 d-flex justify-content-center align-items-center">
                                    ${data.name}
                                </div>
                            </div>
                        `;
                        }
                    },

                    {
                        data: null,
                        render: function(data, type, row) {
                            var description = data.description;
                            if (/<[^>]+>/i.test(description)) {
                                // Strip HTML tags
                                description = description.replace(/<[^>]+>/g, '');
                            }
                            return description?.length > 50 ? description.substr(0, 50) + '...' :
                                description;
                        }
                    },
                    {
                        data: 'price'
                    },
                    {
                        data: 'quantity'
                    },
                    {
                        data: 'tva'
                    },
                    @if (Auth::user()->role_id == 1)
                        {
                            data: null,
                            render: function(data, type, row) {
                                return `
                            <button id="${data.id}" class="btn btn-warning edit"
                                data-bs-toggle="modal" data-bs-target="#inlineForm"><i
                                    data-feather="edit"></i>Modifier</button>
                            <button onclick="deleteClient(${data.id})"
                                class="btn btn-danger"><i
                                    data-feather="trash"></i>Supprimer</button>
                        `;
                            }
                        }
                    @endif
                ]
            });
        });
    </script>
@endsection