@extends('default.master')

@section('title', 'Créer un devis')

@section('main')
    @include('default.navbar')
    <div class="container-fluid p-5 mt-5" id="main-container">
        <form class="row" method="post" action="{{route('quote.store')}}">
            @csrf
            <div class="col-lg-3 col-md-6 col-xs-12 mb-3">
                <div class="card">
                    <h5 class="card-header">Contexte du devis</h5>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="title" class="form-label">Titre du devis</label>
                            <input type="text" class="form-control" id="title" name="title"/>
                        </div>
                        <div class="mb-3">
                            <label for="client" class="form-label">Client</label>
                            <select class="form-select" id="client" name="client_id" aria-label="Default select example">
                                @foreach($clients as $client)
                                    <option value="{{$client->id}}">{{$client->name}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="date" class="form-label">Date facturation</label>
                            <input type="date" class="form-select" id="date" name="date" value="{{date('Y-m-d')}}"/>
                        </div>
                        <div class="mb-3">
                            <label for="deadline" class="form-label">Échéance du paiement</label>
                            <input type="date" class="form-select" id="deadline"
                                   value="{{date('Y-m-d', mktime(0, 0, 0, date("m")+1, date("d"),   date("Y")))}}" name="deadline"/>
                        </div>
                        <div class="mb-3">
                            <label for="deposit" class="form-label">Acompte</label>
                            <input type="number" class="form-select" id="deposit" name="deposit" value=0 step=0.01 min=0 />
                        </div>
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="send_copy" name="send_copy">
                                <label class="form-check-label" for="send_copy">
                                    Envoyer une copie par email<br/>
                                    <small>Cet email ne sera pas envoyé si l'utilisateur ne possède pas d'adresse email</small>
                                </label>
                            </div>
                        </div>
                        <button type="submit" id="submitButton" class="btn btn-primary disabled" onclick="onSubmit()">créer</button>
                    </div>
                </div>
            </div>
            <div class="col-lg-9 col-md-6 col-xs-12">
                <div class="card">
                    <h5 class="card-header d-flex justify-content-between">
                        <div>Contenu du devis</div>
                        <div>
                            @if(count($products) > 0)
                                <a class="btn btn-success" onclick="addLine()">
                                    <i class="fa-solid fa-plus"></i>
                                    produit
                                </a>
                            @else
                                <a class="btn btn-success disabled">
                                    <i class="fa-solid fa-plus"></i>
                                    produit
                                </a>
                            @endif
                            @if(count($services) > 0)
                                <a class="btn btn-primary" onclick="addLine(false)">
                                    <i class="fa-solid fa-plus"></i>
                                    service
                                </a>
                            @else
                                <a class="btn btn-primary disabled">
                                    <i class="fa-solid fa-plus"></i>
                                    service
                                </a>
                            @endif
                        </div>
                    </h5>
                    <div class="card-body">
                        <input type="hidden" name="nbLines" id="nbLines" value="0"/>
                        <ul class="list-group list-group-flush" id="line-container">
                            <p class="list-group-item" id="empty-line">
                                aucune ligne pour le moment
                            </p>
                        </ul>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <script>
        const products = {{Js::from($products)}};
        const services = {{Js::from($services)}};

        function findByID(list, id) {
            return list.filter(element => {return element.id == id})[0]
        }

        function onSubmit() {
            const submitButton = document.querySelector('#submitButton');

            document.querySelector('#main-container').setAttribute('style', 'cursor: wait;');
            submitButton.setAttribute('class', 'btn btn-primary disabled');
            submitButton.innerHTML = '<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span> Création en cours';
        }

        function addLine(isProduct = true) {
            const submitButton = document.querySelector('#submitButton');
            const main = document.querySelector('#line-container')
            const emptyLine = document.querySelector('#empty-line')
            const nbLines = document.querySelector('#nbLines')
            const li = document.createElement('li')
            const row = document.createElement('div')
            const inputContainer = document.createElement('div')
            const quantityContainer = document.createElement('div')
            const taxPriceContainer = document.createElement('div')
            const discountContainer = document.createElement('div')
            const deleteButton = document.createElement('a')
            const idLines = main.getElementsByTagName('li').length + 1
            const containerClass = 'mb-3 col-lg-3 col-md-6'

            emptyLine.style.display = 'none';
            submitButton.setAttribute('class', 'btn btn-primary');

            inputContainer.setAttribute('class', containerClass);
            quantityContainer.setAttribute('class', containerClass);
            taxPriceContainer.setAttribute('class', containerClass);
            discountContainer.setAttribute('class', containerClass);
            quantityContainer.innerHTML = '<label for="quantity" class="form-label">Quantité</label> <input type="number" class="form-control" id="quantity-'+idLines+'" name="lines['+idLines+'][quantity]" min=0 value=1 step=0.01 required />'
            if (isProduct) {
                inputContainer.innerHTML = '<label for="product" class="form-label">Produit</label> <select class="form-select" id="product-'+idLines+'" name="lines['+idLines+'][id]"> @foreach($products as $product) <option value="{{$product->id}}">{{$product->name}}</option> @endforeach </select><input type="hidden" name="lines['+idLines+'][product]" value=1 />'
            } else {
                inputContainer.innerHTML = '<label for="service" class="form-label">Service</label> <select class="form-select" id="service-'+idLines+'" name="lines['+idLines+'][id]"> @foreach($services as $service) <option value="{{$service->id}}">{{$service->name}}</option> @endforeach </select><input type="hidden" name="lines['+idLines+'][product]" value=0 />'
            }
            taxPriceContainer.innerHTML = '<label for="tax_price" class="form-label">Prix HT</label> <input type="number" class="form-control" id="tax_price-'+idLines+'" step=0.01 min=0 name="lines['+idLines+'][tax_price]" value=0 required>'
            discountContainer.innerHTML = '<label for="discount" class="form-label">Remise (%)</label> <input type="number" class="form-control" id="discount-'+idLines+'" step=0.01 min=0 max="100" name="lines['+idLines+'][discount]" value=0 required>'

            li.setAttribute('class', 'list-group-item')
            li.setAttribute('id', 'line-' + idLines)
            row.setAttribute('class', 'row g-3');
            deleteButton.setAttribute('class', 'btn btn-danger')
            deleteButton.innerHTML = 'supprimer'
            deleteButton.setAttribute('onclick', 'deleteLine(' + idLines + ')')

            row.appendChild(inputContainer)
            row.appendChild(discountContainer)
            row.appendChild(quantityContainer)
            row.appendChild(taxPriceContainer)
            li.appendChild(row)
            li.appendChild(deleteButton)
            main.appendChild(li)

            nbLines.value = main.getElementsByTagName('li').length
        }

        function deleteLine(id) {
            const main = document.querySelector('#line-container')
            main.removeChild(document.querySelector('#line-' + id))
            if (main.getElementsByTagName('li').length === 0) {
                document.querySelector('#empty-line').style.display = 'inline'
                document.querySelector('#submitButton').setAttribute('class', 'btn btn-primary disabled');
            }
            nbLines.value = main.getElementsByTagName('li').length
            updateLineID()
        }

        function updateLineID() {
            let id = 1
            for (line of document.querySelector('#line-container').getElementsByTagName('li')) {
                line.setAttribute('id', 'line-' + id)
                line.getElementsByTagName('a')[0].setAttribute('onclick', 'deleteLine(' + id + ')')
                id++
            }
        }
    </script>
@endsection