@extends('layouts.app')
@section('content')
    @if (session('message'))
        <div class="px-4 my-2">
            <div class="alert alert-success" role="alert">
                {!! session('message') !!}
            </div>
        </div>
    @endif
    @if (session('error'))
        <div class="px-4 my-2">
            <div class="mr-4 alert alert-danger" role="alert">
                {!! session('error') !!}
            </div>
        </div>
    @endif

    <h1>Registo do Produto</h1>


    <div class="mb-5">
        <div class="row g-5">
            <div class="col-4">
                <label class="form-label"><b>SKU</b> </label>
                <input name="reference" class="form-control" id="reference" value="{!! isset($data['reference']) ? $data['reference'] : '' !!}" />
            </div>
            <div class="col-4">
                <label class="form-label"><b>Referência</b> <span class="text-danger">*</span></label>
                <input name="reference_sale" class="form-control" id="reference_sale" value="{!! isset($data['reference_sale']) ? $data['reference_sale'] : '' !!}" />
            </div>
        </div>

        <div class="row g-5 mt-1 mb-0">
            <div class="col-8">
                <label class="form-label"><b>Descrição</b></label>
                <input name="description" class="form-control" id="description" value="{!! isset($data['description']) ? $data['description'] : '' !!}" />
            </div>
        </div>
    </div>
    <h3>Variância: <button class="btn btn-primary" onclick="addVariancia()"><i class="fa fa-plus"></i></button></h3>

    <div class="row g-2 mb-0" id="variancias"></div>

    <hr class="col-3 col-md-12 mb-5">
    <div class="row g-2 mb-0">
        <div class="col-md-2">
            <label class="form-label"><b>Artigo</b></label>

        </div>
        <div class="col-md-1">
            <label class="form-label"><b>Size</b></label>

        </div>
        <div class="col-md-3">
            <label class="form-label"><b>Color</b></label>

        </div>
        <div class="col-md-3">
            <label class="form-label"><b>Material</b></label>

        </div>
        <div class="col-md-1">
            <label class="form-label"><b>Stock</b></label>

        </div>
        <div class="col-md-1">
            <label class="form-label"><b>Sale</b></label>

        </div>
        <div class="col-md-1">
            *
        </div>
    </div>
    <div id="itens-variancias">
    @foreach ($data['variancia'] as $variancia)
        <div class="row g-2 mb-0 mt-1">
            <div class="col-md-2">
                <input name="artigo" class="form-control" id="artigo-{!! isset($variancia['id']) ? $variancia['id'] : '' !!}" value="{!! isset($variancia['artigo']) ? $variancia['artigo'] : '' !!}" readonly />
            </div>
            <div class="col-md-1">

                <input name="size" class="form-control" id="size-{!! isset($variancia['id']) ? $variancia['id'] : '' !!}" value="{!! isset($variancia['size']) ? $variancia['size'] : '' !!}" readonly />
            </div>
            <div class="col-md-3">

                <input name="color" class="form-control" id="color-{!! isset($variancia['id']) ? $variancia['id'] : '' !!}" value="{!! isset($variancia['color']) ? $variancia['color'] : '' !!}"  readonly/>
            </div>
            <div class="col-md-3">
                <input name="material" class="form-control" id="material-{!! isset($variancia['id']) ? $variancia['id'] : '' !!}" value="{!! isset($variancia['material']) ? $variancia['material'] : '' !!}"  readonly/>
            </div>
            <div class="col-md-1">

                <input name="stock" class="form-control" id="stock-{!! isset($variancia['id']) ? $variancia['id'] : '' !!}" type="number" value="{!! isset($variancia['stock']) ? $variancia['stock'] : '' !!}"  readonly/>
            </div>
            <div class="col-md-1">
                <input name="sale" class="form-control" id="sale-{!! isset($variancia['id']) ? $variancia['id'] : '' !!}" type="number" value="{!! isset($variancia['sale']) ? $variancia['sale'] : '' !!}"  readonly />
            </div>
            <div class="col-md-1" id="action-{!! isset($variancia['id']) ? $variancia['id'] : '' !!}">
                <button class="btn btn-danger btn-sm me-1 mt-1" onclick="deleteVariancia({!! $variancia->id !!})">
                    <i class="fa-solid fa-square-xmark"></i>
                </button>
                <button class="btn btn-primary btn-sm me-1 mt-1" onclick="editVariancia({!! $variancia->id !!})">
                    <i class="fa-solid fa-pen-to-square"></i>
                </button>
            </div>
        </div>

    @endforeach
    </div>
    <hr class="col-3 col-md-12 mb-5">
    <div class="row g-4 mt-4">
        <div class="col-2">
            <b>Cava:</b>
            <input name="cava" value="{!! isset($data['cava']) ? $data['cava'] : '' !!}" class="form-control" id="cava" type="number" step="0.00" />
        </div>
        <div class="col-2 form-check align-self-end">
            <input name="cava_symbol" class="form-check-input" type="checkbox" value="cm" id="cava_symbol" {!! isset($data['cava_symbol']) ? 'checked' : '' !!}>
            <label class="form-check-label" for="flexCheckDefault">
                cm
            </label>
        </div>
    </div>
    <div class="row g-4 mt-1">
        <div class="col-2">
            <b>Preço:</b>
            <input name="sale" class="form-control" id="price" value="{!! isset($data['price']) ? $data['price'] : '' !!}" />
        </div>
        <div class="col-2 form-check align-self-end">
            <input name="currency_symbol" class="form-check-input" type="checkbox" value="€" id="currency_symbol" {!! isset($data['currency_symbol']) ? 'checked' : '' !!}>
            <label class="form-check-label" for="flexCheckDefault">
                €
            </label>
        </div>
    </div>
    <hr class="col-3 col-md-12 mb-0">
    <button type="button" class="mt-2 btn btn-secondary" onclick="clearForm()">Limpar</button>
    <button type="button" class="mt-2 btn btn-primary" onclick="saveProduct()">Guardar</button>

    <script>
        const idProduct = "{!! isset($data['id']) ? $data['id'] : '' !!}"

        function clearForm() {
            if (confirm("Realmente deseja limpar este formulário ?\nAs veriâncias salvas serão apagadas!!")) {
                document.getElementById('reference').value  = ''
                document.getElementById('reference_sale').value = ''
                document.getElementById('description').value = ''
                document.getElementById('cava').value = ''
                document.getElementById('price').value = ''

                $.ajax({
                    url: "{!! url('/product/clear/variancia') !!}",
                    type: "post",
                    data: {},
                    datatype: "json",
                    success: function(response) {
                        console.log(response, ' Resposta AJAX')
                        document.getElementById('itens-variancias').innerHTML = ""
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.error(textStatus, errorThrown);
                    }
                });
            }
        }

        function saveVariancia() {

            const artigo = document.getElementById('artigo').value
            const color = document.getElementById('color').value
            const size = document.getElementById('size').value
            const material = document.getElementById('material').value
            const stock = document.getElementById('stock').value
            const sale = document.getElementById('sale').value

            const data = {
                product_id: idProduct,
                artigo,
                color,
                size,
                material,
                stock,
                sale,
                _token: "{!! csrf_token() !!}"
            }
            $.ajax({
                url: "{!! url('/product/variancia') !!}",
                type: "post",
                data: data,
                datatype: "json",
                success: function(response) {
                    console.log(response, ' Resposta AJAX')
                    location.reload()
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    let error = jqXHR.responseJSON?.msg || 'Erro ao Salvar'
                    alert(error)
                    console.error(textStatus, errorThrown);
                }
            });
        }

        function deleteVariancia(id) {
            if (confirm("Realmente deseja deletar esta variância ?")) {
                $.ajax({
                    url: "{!! url('/product/variancia') !!}/" + id,
                    type: "delete",
                    datatype: "json",
                    success: function(response) {
                        console.log(response, ' Resposta AJAX')
                        location.reload()
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.error(textStatus, errorThrown);
                    }
                });
            }
        }

        function addVariancia() {
            let variancias = document.getElementById('variancias');
            variancias.innerHTML = `
                <div class="col-md-2">
                      <label class="form-label"><b>Artigo</b></label>
                      <input name="artigo" class="form-control" id="artigo" />
                  </div>
                <div class="col-md-1">
                      <label class="form-label"><b>Size</b></label>
                      <input name="size" class="form-control" id="size" />
                  </div>
                  <div class="col-md-3">
                      <label class="form-label"><b>Color</b></label>
                      <input name="color" class="form-control" id="color" />
                  </div>
                  <div class="col-md-3">
                      <label class="form-label"><b>Material</b></label>
                      <input name="material" class="form-control" id="material" />
                  </div>
                  <div class="col-md-1">
                      <label class="form-label"><b>Stock</b></label>
                      <input name="stock" class="form-control" id="stock" type="number" />
                  </div>
                  <div class="col-md-1">
                      <label class="form-label"><b>Sale</b></label>
                      <input name="sale" class="form-control" id="sale" type="number" />
                  </div>
                  <div class="col-md-1 align-self-end">
                      <button class="btn btn-primary btn-sm" onclick="saveVariancia()"><i class="fa-solid fa-floppy-disk"></i></button>
                      <button class="btn btn-danger btn-sm me-1" onclick="closeVariancia()"><i class="fa-solid fa-square-xmark"></i></button>
                  </div>`
        }

        function editVariancia(id) {
            document.getElementById(`artigo-${id}`).readOnly = false
            document.getElementById(`color-${id}`).readOnly = false
            document.getElementById(`size-${id}`).readOnly = false
            document.getElementById(`material-${id}`).readOnly = false
            document.getElementById(`stock-${id}`).readOnly = false
            document.getElementById(`sale-${id}`).readOnly = false
            document.getElementById(`action-${id}`).innerHTML = `
                <button class="btn btn-success btn-sm me-1" onclick="saveEditVariancia('${id}')"><i class="fa-solid fa-circle-check"></i></button>
                <button class="btn btn-danger btn-sm me-1" onclick="closeEditVariancia('${id}')"><i class="fa-solid fa-square-xmark"></i></button>
            `

        }

        function saveEditVariancia(id) {
            const artigo    = document.getElementById(`artigo-${id}`).value
            const color     = document.getElementById(`color-${id}`).value
            const size      = document.getElementById(`size-${id}`).value
            const material  = document.getElementById(`material-${id}`).value
            const stock     = document.getElementById(`stock-${id}`).value
            const sale      = document.getElementById(`sale-${id}`).value
            const actions   = document.getElementById(`action-${id}`)
            const loading = `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Guardando ...`

            actions.innerHTML = loading

            const data = {
                artigo,
                color,
                size,
                stock,
                material,
                sale,
                id,
                product_id: idProduct
            }

            $.ajax({
                url: "{!! url('/product/variancia') !!}/"+ id,
                type: "post",
                data: data,
                datatype: "json",
                success: function(response) {
                    console.log(response, ' Resposta AJAX')
                    const artigo    = document.getElementById(`artigo-${id}`).setAttribute('readonly', true)
                    const color     = document.getElementById(`color-${id}`).setAttribute('readonly', true)
                    const size      = document.getElementById(`size-${id}`).setAttribute('readonly', true)
                    const material  = document.getElementById(`material-${id}`).setAttribute('readonly', true)
                    const stock     = document.getElementById(`stock-${id}`).setAttribute('readonly', true)
                    const sale      = document.getElementById(`sale-${id}`).setAttribute('readonly', true)

                    actions.innerHTML = `

                        <button class="btn btn-danger btn-sm me-1 mt-1" onclick="deleteVariancia('${id}')">
                            <i class="fa-solid fa-square-xmark"></i>
                        </button>
                        <button class="btn btn-primary btn-sm me-1 mt-1" onclick="editVariancia('${id}')">
                            <i class="fa-solid fa-pen-to-square"></i>
                        </button>
                    `;
                    //location.reload()
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    alert("Erro ao guardar Variância")
                    console.error(textStatus, errorThrown);
                    actions.innerHTML = `
                        <button class="btn btn-success btn-sm mt-5" onclick="saveEditVariancia('${id}')"><i class="fa-solid fa-circle-check"></i></button>
                        <button class="btn btn-danger btn-sm me-1 mt-5" onclick="closeEditVariancia('${id}')"><i class="fa-solid fa-square-xmark"></i></button>
                    `;
                }
            });


        }

        function closeEditVariancia (id) {
            document.getElementById(`artigo-${id}`).readOnly = true
            document.getElementById(`color-${id}`).readOnly = true
            document.getElementById(`size-${id}`).readOnly = true
            document.getElementById(`material-${id}`).readOnly = true
            document.getElementById(`stock-${id}`).readOnly = true
            document.getElementById(`sale-${id}`).readOnly = true
            document.getElementById(`action-${id}`).innerHTML = `
                <button class="btn btn-danger btn-sm me-1 mt-1" onclick="deleteVariancia('${id}')">
                    <i class="fa-solid fa-square-xmark"></i>
                </button>
                <button class="btn btn-primary btn-sm me-1 mt-1" onclick="editVariancia('${id}')">
                    <i class="fa-solid fa-pen-to-square"></i>
                </button>
            `
        }

        function closeVariancia() {

            let variancias = document.getElementById('variancias');
            variancias.innerHTML = ``

        }

        function saveProduct() {

            const reference = document.getElementById('reference').value
            const reference_sale = document.getElementById('reference_sale').value
            const description = document.getElementById('description').value

            const cava = document.getElementById('cava').value
            const price = document.getElementById('price').value

            const cava_symbol = document.getElementById('cava_symbol').checked ? document.getElementById('cava_symbol').value : ''
            const currency_symbol = document.getElementById('currency_symbol').checked ? document.getElementById('currency_symbol').value : ''

            if (!reference_sale || reference_sale === '') {
                alert("Por favor, informe a Referência de Venda");
                return
            }


            const data = {
                reference,
                reference_sale,
                description,
                cava,
                price,
                cava_symbol,
                currency_symbol,
                _token: "{!! csrf_token() !!}"
            }

            if (idProduct !== '' && idProduct !== undefined) {
                data.id = idProduct
            }

            $.ajax({
                url: "{!! url('/product/edit') !!}",
                type: "post",
                data: data,
                datatype: "json",
                success: function(response) {
                    console.log(response, ' Resposta AJAX')
                    window.location.reload()

                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.error(textStatus, errorThrown);
                }
            });


        }
    </script>
@endsection