@extends('client.layouts.app')

@section('title', __('Orders'))

@section('content')
@if($draftOrders)
<section class="container-fluid ordini-flow">
    <div class="row">
        <div class="col-lg-12 responsive-100">
            <div class="container-card do-draft">
                <h5>PREVENTIVO ORDINI</h5>
                <br>
                <div class="accordion" id="doDraftsAccordion">
                    @foreach($draftOrders as $order)

                    <div class="card">
                        <div class="card-header" id="headingOne">
                            <h5 class="mb-0">
                                <div class="btn btn-link do-collapse collapsed" type="button" data-toggle="collapse" data-target="#order_{{$order->id}}" aria-expanded="false" aria-controls="order_{{$order->id}}">
                                    <div class="row do-order-info">
                                        <div class="col-3"><strong>Preventivo: </strong> {{$order->name}} </div>
                                        <div class="col-4"><strong>Data creazione: </strong>{{$order->created_at}}</div>
                                        <div class="col-3"><strong>Quantità: </strong>{{count($order->order_products)}}</div>
                                        <div class="col-1">
                                            <div class="do-complete float-right">
                                                <form action="{{route('orders.change-status',$order->id)}}" method="POST">
                                                    @csrf
                                                    @method('PUT')
                                                    <button type="btn" data-toggle="tooltip" data-placement="top" title="Completa"> ✓</button>
                                                </form>

                                            </div>
                                        </div>
                                        <div class="col-1">
                                            <div class="do-delete float-right">
                                                <form action="{{route('orders.destroy',$order->id)}}" method="POST">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="btn" data-toggle="tooltip" data-placement="top" title="Cancella preventivo"> ✗</button>
                                                </form>

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

                        <div id="order_{{$order->id}}" class="collapse" aria-labelledby="headingOne" data-parent="#doDraftsAccordion">
                            <div class="card-body">
                                @foreach($order->order_products as $product)
                                <div class="row">
                                    <div class="col-5">
                                        <p> <strong>Prodotto: </strong>{{$product->product_name}}</p>
                                    </div>
                                    <div class="col-5">
                                        <p><strong>Rif. Cliente: </strong>{{$product->customer_reference}}</p>
                                    </div>
                                    <div class="col-2">
                                        <div class="do-delete-product">
                                            <form action="{{route('delete-product-order',['orderId'=>$order->id,'productId'=>$product->id])}}" method="POST">
                                                @csrf
                                                @method('DELETE')
                                                <button type="btn" data-toggle="tooltip" data-placement="top" title="Cancella articolo dal preventivo"> ✗</button>
                                            </form>

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

                                @endforeach
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>

            </div>
        </div>
    </div>
</section>
@endif

@if($shops)
<section class="container-fluid ordini-flow">
    <div class="row">
        <div class="col-lg-9 responsive-100">
            <div class="container-card">
                <h5>NUOVO ORDINE</h5>

                <hr />
                <div id="smartwizard">
                    <ul class="nav">
                        <li class="step-wrapper">
                            <a class="nav-link" href="#step-1">
                                INSERISCI DATI DI PRESCRIZIONE
                            </a>
                        </li>
                        <li class="step-wrapper">
                            <a class="nav-link" href="#step-2">
                                SELEZIONA PRODOTTO
                            </a>
                        </li>
                        <li class="step-wrapper">
                            <a class="nav-link" href="#step-3">
                                SELEZIONA TRATTAMENTO
                            </a>
                        </li>
                        <li class="step-wrapper">
                            <a class="nav-link" href="#step-4">SELEZIONA COLORAZIONE
                            </a>
                        </li>
                        <li class="step-wrapper">
                            <a class="nav-link" href="#step-5">
                                COMPILA IL MODULO MOI/PRC (se richiesto)
                            </a>
                        </li>
                        <li class="step-wrapper">
                            <a class="nav-link" href="#step-6">
                                ANGOLO DI AVVOLGIMENTO (se richiesto)
                            </a>
                        </li>
                        <li class="step-wrapper last">
                            <a class="nav-link" href="#step-7"> TERMINA ORDINE </a>
                        </li>
                    </ul>
                    <form id="doCreateOrder">
                        <input type="hidden" name="total_spending" />
                        <input type="hidden" name="special_price" />
                        <input type="hidden" name="eurobonus_gained" />
                        <input type="hidden" name="eurobonus_gained_special" />
                        <input type="hidden" name="eurobonus_spent" />
                        <div class="tab-content">
                            <div id="step-1" class="tab-pane" role="tabpanel">
                                <div class="container-fluid">
                                    <div class="row flowSection">
                                        <div class="col-sm-4">
                                            <label for="clientNum">Selezione punto vendita</label>
                                            <select name="shop" id="shop" class="combobox">
                                                <option value="">Seleziona...</option>
                                                @foreach($shops as $shop)
                                                <option value="{{$shop->id}}">{{$shop->code ? $shop->name . ' - cod.' .$shop->code : $shop->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-sm-4">
                                            <label for="clientNum">Nome ordine</label>
                                            <input type="text" class="form-control" name="name" />

                                        </div>
                                    </div>

                                    <h4 class="light">INSERISCI DATI DI PRESCRIZIONE</h4>
                                    <hr class="b2" />
                                    <div class="row flowSection">
                                        <div class="col-sm-4">
                                            <label for="customer_reference">Riferimento Cliente</label>
                                            <input type="text" class="form-control" name="customer_reference" value="" />
                                            <p></p>
                                        </div>
                                        <div class="col-sm-4">
                                            <label for="clientNum">Tipo ordine</label>

                                            <select name="type" id="txtTipoOrdine" class="combobox">
                                                <option value="">Seleziona...</option>
                                                <option value="COPPIA">coppia</option>
                                                <option value="DX">lente destra</option>
                                                <option value="SX">lente sinistra</option>
                                            </select>
                                        </div>
                                        <div class="col-sm-4"></div>
                                    </div>
                                    <div id="rightLens">
                                        <h4>Lente DX</h4>
                                        <div class="row flowSection">
                                            <div class="col-sm-2">
                                                <label for="sferoDx">Sfero</label>
                                                <input type="text" class="form-control" id="sferoDx" name="right_lens[sphere]" value="" />
                                            </div>
                                            <div class="col-sm-2">
                                                <label for="cilindroDx">Cilindro</label>
                                                <input type="text" class="form-control" id="cilindroDx" name="right_lens[cylinder]" value="" />
                                            </div>
                                            <div class="col-sm-2">
                                                <label for="asseDx">Asse</label>
                                                <input type="text" class="form-control" id="asseDx" name="right_lens[axis]" value="" />
                                            </div>
                                            <div class="col-sm-2">
                                                <label for="diametroDx">Diametro</label>
                                                <input type="text" class="form-control" id="diametroDx" name="right_lens[diametar]" value="" />
                                            </div>
                                            <div class="col-sm-2">
                                                <label for="addizioneDx">Addizione</label>
                                                <input type="text" class="form-control" id="addizioneDx" name="right_lens[addition]" />
                                            </div>
                                            <div class="col-sm-2">
                                                <label for="altezzaDx">Altezza Montaggio</label>
                                                <input type="text" class="form-control" id="altezzaDx" name="right_lens[mounting_height]" />
                                            </div>
                                            <div class="col-sm-12">
                                                <a href="#" data-toggle="collapse" data-target="#additionalInfo" aria-expanded="false" aria-controls="additionalInfo">Ulteriori prescrizioni
                                                    <i class="ci ci-arrowDown"></i></a>
                                                <div class="collapse show" id="additionalInfo">
                                                    <div class="row">
                                                        <div class="col-sm-2">
                                                            <label>Prisma</label>
                                                            <input type="text" class="form-control" name="right_lens[prism]" />
                                                        </div>
                                                        <div class="col-sm-2">
                                                            <label>Decentramento</label>
                                                            <input type="text" class="form-control" name="right_lens[decentralization]" />
                                                        </div>
                                                        <div class="col-sm-2">
                                                            <label>Base Prisma</label>
                                                            <input type="text" class="form-control" name="right_lens[base_prism]" />
                                                        </div>
                                                        <div class="col-sm-2">
                                                            <label>Base Speciale</label>
                                                            <input type="text" class="form-control" name="right_lens[base_special]" />
                                                        </div>

                                                        <div class="col-sm-4">
                                                            <div class="custom-control custom-checkbox">
                                                                <input type="checkbox" name="right_lens[digital_prc]" class="custom-control-input" id="right">
                                                                <label class="custom-control-label" for="right">Digital PRC</label>
                                                            </div>
                                                        </div>

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

                                    <div id="leftLens">
                                        <h4>Lente SX</h4>
                                        <a href="javascript:void(0)" id="copyValues">Copia da Lente DX</a>

                                        <div class="row flowSection">
                                            <div class="col-sm-2">
                                                <label for="sferoXs">Sfero</label>
                                                <input type="text" class="form-control" id="sferoXs" name="left_lens[sphere]" />
                                            </div>
                                            <div class="col-sm-2">
                                                <label for="cilindroXs">Cilindro</label>
                                                <input type="text" class="form-control" id="cilindroXs" name="left_lens[cylinder]" />
                                            </div>
                                            <div class="col-sm-2">
                                                <label for="asseXs">Asse </label>
                                                <input type="text" class="form-control" id="asseXs" name="left_lens[axis]" />
                                            </div>
                                            <div class="col-sm-2">
                                                <label for="diametroXs">Diametro</label>
                                                <input type="text" class="form-control" id="diametroXs" name="left_lens[diametar]" />
                                            </div>
                                            <div class="col-sm-2">
                                                <label for="addizioneXs">Addizione</label>
                                                <input type="text" class="form-control" id="addizioneXs" name="left_lens[addition]" />
                                            </div>
                                            <div class="col-sm-2">
                                                <label for="altezzaXs">Altezza Montaggio</label>
                                                <input type="text" class="form-control" id="altezzaXs" name="left_lens[mounting_height]" />
                                            </div>
                                            <div class="col-sm-12">
                                                <a href="#" data-toggle="collapse" data-target="#additionalInfolenteSx" aria-expanded="false" aria-controls="additionalInfolenteSx">Ulteriori prescrizioni
                                                    <i class="ci ci-arrowDown"></i></a>
                                                <div class="collapse show" id="additionalInfolenteSx">
                                                    <div class="row">
                                                        <div class="col-sm-2">
                                                            <label>Prisma</label>
                                                            <input type="text" class="form-control" name="left_lens[prism]" />
                                                        </div>
                                                        <div class="col-sm-2">
                                                            <label>Decentramento</label>
                                                            <input type="text" class="form-control" name="left_lens[decentralization]" />
                                                        </div>
                                                        <div class="col-sm-2">
                                                            <label>Base Prisma <span>tabo</span></label>
                                                            <input type="text" class="form-control" name="left_lens[base_prism]" />
                                                        </div>
                                                        <div class="col-sm-2">
                                                            <label>Base Speciale</label>
                                                            <input type="text" class="form-control" name="left_lens[base_special]" />
                                                        </div>

                                                        <div class="col-sm-4">
                                                            <div class="custom-control custom-checkbox">
                                                                <input type="checkbox" name="left_lens[digital_prc]" class="custom-control-input" id="left">
                                                                <label class="custom-control-label" for="left">Digital PRC</label>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="step-2" class="tab-pane" role="tabpanel">
                                <div class="container-fluid">
                                    <h4 class="light">SELEZIONA PRODOTTO</h4>
                                    <hr class="b2" />
                                    <h4>CARATTERISTICHE LENTE</h4>
                                    <div class="row flowSection">
                                        <div class="col-sm-4">
                                            <label>Geometria</label>

                                            <select name="geometry" class="combobox">
                                                <option value="">Seleziona...</option>
                                            </select>
                                        </div>
                                        <div class="col-sm-4">
                                            <label>Disponibilità</label>

                                            <select name="availability" class="combobox">
                                                <option value="">Seleziona...</option>
                                            </select>
                                        </div>
                                        <div class="col-sm-4">
                                            <label>Famiglia</label>

                                            <select name="family" class="combobox">
                                                <option value="">Seleziona...</option>
                                            </select>
                                        </div>
                                        <div class="col-sm-4">
                                            <label>Disegno</label>

                                            <select name="design" class="combobox">
                                                <option value="">Seleziona...</option>
                                            </select>
                                        </div>
                                        
                                        <div class="col-sm-4">
                                            <label>Altezza min. montaggio (canale +6 mm)</label>

                                            <select name="channel" class="combobox">
                                                <option value="">Seleziona...</option>
                                            </select>
                                        </div>
                                        <div class="col-sm-4">
                                            <label>Materiale</label>

                                            <select name="material" class="combobox">
                                                <option value="">Seleziona...</option>
                                            </select>
                                        </div>
                                        <div id="nylor" class="col-sm-4 checkBoxWrapper">

                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" name="nylor_thickness" class="custom-control-input" id="nylorcheck">
                                                <label class="custom-control-label" for="nylorcheck">Aumento spessore Nylor</label>
                                            </div>
                                        </div>
                                    </div>
                                    <h4>Seleziona prodotto</h4>
                                    <input type="hidden" name="product_id" value="" />
                                    <input type="hidden" name="similar_product" value="" />

                                    <div class="row flowSection do-products">


                                    </div>
                                </div>
                            </div>
                            <div id="step-3" class="tab-pane" role="tabpanel">
                                <div class="container-fluid">
                                    <h4 class="light">SELEZIONA IL TRATTAMENTO</h4>
                                    <hr class="b2" />
                                    <div class="row do-treatments">


                                    </div>
                                    <hr class="b2" />
                                </div>
                            </div>
                            <div id="step-4" class="tab-pane" role="tabpanel">
                                <div class="container-fluid">
                                    <h4 class="light">SELEZIONA COLORAZIONE</h4>
                                    <hr class="b2" />
                                    <input type="hidden" name="palette">
                                    <div class="row do-colorations">
                                  

                                    </div>
                                    <div class="row addSelection do-colors">


                                    </div>

                                </div>
                            </div>
                            <div id="step-5" class="tab-pane" role="tabpanel">
                                <div class="container-fluid">
                                    <h4 class="light">
                                        COMPILA IL MODULO MOI/PRC <small> (se richiesto) </small>
                                    </h4>
                                    <hr class="b2" />
                                    <p class="do-module-error d-block">
                                        Non è richiesta la compilazione del modulo MOI per
                                        il prodotto selezionato.
                                    </p>
                                </div>
                            </div>
                            <div id="step-6" class="tab-pane" role="tabpanel">
                                <div class="container-fluid">
                                    <h4 class="light">
                                        ANGOLO DI AVVOLGIMENTO (se richiesto)
                                    </h4>
                                    <hr class="b2" />
                                    <p>
                                        Non è richiesta la compilazione dell'angolo di avvolgimento per il prodotto selezionato.
                                    </p>
                                    <hr class="b2" />
                                </div>
                            </div>
                            <div id="step-7" class="tab-pane" role="tabpanel">
                                <div class="container-fluid">
                                    <h4 class="light">TERMINA ORDINE</h4>
                                    <hr class="b2" />
                                    <div class="form-group">
                                        <h4>Note</h4>
                                        <textarea class="form-control" id="note" name="note" rows="5" style="resize: none;"></textarea>
                                    </div>

                                    <h4 class="do-eb-title">I tuoi EUROBONUS</h4>
                                    <div class="row hideMobile">
                                        <div class="col-lg-6 do-eurobonus-wrapper">

                                        </div>
                                        <div class="col-lg-6">
                                            <h3>HO UN CODICE SCONTO</h3>
                                            <div class="d-inline-flex">
                                                <div class="input-group mb-2 mr-sm-2">
                                                    <input type="text" name="code" placeholder="Promo code" />
                                                </div>
                                                <button type="button" class="codeSubmit mb-2">
                                                    Submit
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row showMobile">
                                        <div class="col-sm-6 leftCol do-eurobonus-wrapper">

                                        </div>
                                        <div class="col-sm-6 rightCol">
                                            <h3>HO UN CODICE SCONTO</h3>
                                            <div class="d-inline-flex">
                                                <div class="input-group">
                                                    <input type="text" name="code_mob" placeholder="Promo code" />
                                                </div>
                                                <div class="input-group">
                                                    <button type="button" class="codeSubmit">
                                                        Submit
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                        <table id="doFinalCart">
                                            <thead>
                                                <tr>
                                                    <th colspan="2">IL TUO PREZZO DEDICATO</th>
                                                </tr>
                                            </thead>
                                            <tbody class="doFinalCart">
                                            </tbody>
                                            <tfoot>
                                                <tr class="total">
                                                    <td class="left">TOTALE</td>
                                                    <td class="right">

                                                        <span class="totalPrice">0.00</span>&#8364;
                                                    </td>
                                                </tr>
                                                <tr class="total">
                                                    <td class="left do-points-text"></td>
                                                    <td class="right do-points">
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="right" colspan="2">
                                                        <a class="btn btn-primary do-special" data-toggle="collapse" href="#collapseSpecialPriceFinal" role="button" aria-expanded="false" aria-controls="collapseSpecialPriceFinal">
                                                            SCOPRI IL PREZZO A TE DEDICATO
                                                        </a>

                                                    </td>
                                                </tr>
                                            </tfoot>

                                        </table>
                                        <div class="collapse" id="collapseSpecialPriceFinal">
                                            <table id="doSpecialFinal">
                                                <thead>
                                                </thead>
                                                <tbody class="doFinalSpecialCart">
                                                </tbody>
                                                <tfoot>
                                                    <tr class="total">
                                                        <td class="left" style="color: red;">SPECIAL TOTALE</td>
                                                        <td class="right" style="color: red;">

                                                            <span class="totalSpecialPrice">N/A</span>&#8364;
                                                        </td>
                                                    </tr>
                                                    <tr class="total">
                                                        <td class="left do-points-text" style="color: red;"></td>
                                                        <td class="right do-points" style="color: red;">
                                                        </td>
                                                    </tr>

                                                </tfoot>

                                            </table>
                                        </div>
                                        <hr />
                                        <div class="row btns">
                                            <div class="col-6 ">
                                                <a class="do-save-order" data-status="{{$completed}}" href="#!">INVIA ORDINE</a>
                                            </div>
                                            <div class="col-6 ">
                                                <a class="do-save-order" data-status="{{$draft}}" href="#!">SALVA PREVENTIVO</a>
                                            </div>
                                            <div class="col-8 offset-sm-2 ">
                                                <a class="do-save-with-draft" href="#!">SALVA E AGGIUNGI NUOVO ORDINE</a>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-lg-3 miniCart responsive-100">
            <div class="container-card">
                <h5>IL TUO PREZZO DEDICATO</h5>
                <hr />
                <div class="container-fluid do-wrap">
                    <div class="row cart">
                        <table class="do-cart">


                        </table>
                    </div>
                    <div class="row priceBox">
                        <div class="col-sm-6">
                            <h5>Totale</h5>
                        </div>
                        <div class="col-sm-6">
                            <h5 class="text-right">
                                <span class="totalPrice">0.00</span>&#8364;
                            </h5>
                        </div>
                        <div class="col-sm-6 do-points-text">

                        </div>
                        <div class="col-sm-6 do-points">

                        </div>
                    </div>
                </div>
                <div class="miniCartInfo">
                    <div class="inner">
                        <div class="top-bar">
                            <a class="btn btn-primary do-special" data-toggle="collapse" href="#collapseSpecialPrice" role="button" aria-expanded="false" aria-controls="collapseSpecialPrice">
                                Scopri il prezzo a te dedicato
                            </a>

                        </div>
                        <div class="collapse" id="collapseSpecialPrice">
                            <div class="container-fluid do-special-wrap">
                                <div class="row cart">
                                    <table class="do-special-cart">


                                    </table>
                                </div>
                                <div class="row priceBox do-red">
                                    <div class="col-sm-6">
                                        <h5>Special Totale</h5>
                                    </div>
                                    <div class="col-sm-6">
                                        <h5 class="text-right">
                                            <span class="totalSpecialPrice">N/A</span>&#8364;
                                        </h5>
                                    </div>
                                    <div class="col-sm-6 do-points-text">

                                    </div>
                                    <div class="col-sm-6 do-points">

                                    </div>
                                </div>
                            </div>
                        </div>
                        <ul class="text-center">
                            <li><a class="do-save-order" data-status="{{$completed}}" href="#!">INVIA ORDINE</a></li>
                            <li><a class="do-save-with-draft" href="#!">SALVA E AGGIUNGI NUOVO ORDINE</a></li>
                            <li><a class="do-save-order" data-status="{{$draft}}" href="#!">SALVA PREVENTIVO</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<div class="container floatingCart">
    <div class="row">
        <div class="col-sm-10 cartInfo">
            <h4>Title</h4>

        </div>
        <div class="col-sm-2 total">
            <h5>Totale</h5>
            <span class="totalPrice">0.00</span>&#8364;

        </div>
    </div>
</div>
@else
<div class="alert alert-info" role="alert">
    You don't have permissions to create orders or you don't have any shops yet.
</div>

@endif

@endsection
@push('modals')
<div class="modal" tabindex="-1" role="dialog" id="popup-july">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <img src="{{ asset('img/sept-pop.png') }}" alt="" class="img-fluid" />
    </div>
</div>
@endpush

@push('scripts')
<script type="text/javascript">
     $(document).ready(function() {
        $('#popup-july').modal('hide');
    });


</script>
@endpush