@extends('layouts.app')

@section('content')
<input type="hidden" name="id_otpremnice" value="" id="id_otpremnice">
{{ csrf_field() }}
<section class="panel">
    <form id="form" method="post" action="{{route('order_form.store')}}" class="form-horizontal">
        @csrf
        <header class="panel-heading">
            <a type="button" class="btn btn-default" href="{{route('order_form.index')}}">{{__("Discard")}} <i class="fa fa-backward"></i></a>
            <button type="submit" class="btn btn-primary">{{__("Save")}} <i class="fa fa-save"></i></button>
        </header>
        <div class="panel-body">
            <div class="form-group">
                <div class="col-sm-2"><p>{{__("Number")}}: </p></div>
                <div class="col-sm-4">
                    <input type="text"  class="form-control" placeholder="" spellcheck="false" value="{{$lastId}}" readonly/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2"><p>{{__("Customer")}}:  <span class="required">*</span></p></div>
                <div class="col-sm-4 @if($errors->has('customer_id')){{'has-error'}} @endif">
                    <select name="customer_id" id="customer_id" class="form-control" data-plugin-selectTwo>
                        <option value="" selected>-- {{__("Customer")}} --</option>
                        @foreach($customers as $customer)
                            <option value="{{$customer->id}}" @if(old('customer_id') == $customer->id) selected @endif>{{$customer->name}}</option>
                        @endforeach
                    </select>
                    @if($errors->has('customer_id'))
                        <label for="customer_id" class="error">{{$errors->first('customer_id')}}</label>
                    @endif
                </div>
                <div class="col-sm-2">
                    <a href="{{route('customer.create')}}" class="btn btn-default"> <i class="fa fa-plus"></i></a>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2"><p>{{__("Date")}}: <span class="required">*</span> </p></div>
                <div class="col-sm-4  @if($errors->has('order_date')){{'has-error'}} @endif">
                    <div class="input-group">
                        <span class="input-group-addon">
                            <i class="fa fa-calendar"></i>
                        </span>
                        <input type="text" name="order_date" class="form-control date-picker" placeholder="" id="order_date"  spellcheck=""/>
                    </div>
                    @if($errors->has('order_date'))
                        <label for="order_date" class="error">{{$errors->first('order_date')}}</label>
                    @endif
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2"><p>{{__("Deadline")}}: <span class="required">*</span> </p></div>
                <div class="col-sm-4 @if($errors->has('deadline')){{'has-error'}} @endif">
                    <div class="input-group">
                        <span class="input-group-addon">
                            <i class="fa fa-calendar"></i>
                        </span>
                        <input type="text" name="deadline" class="form-control date-picker" placeholder="" id="deadline"  spellcheck=""/>
                    </div>
                    @if($errors->has('deadline'))
                        <label for="deadline" class="error">{{$errors->first('deadline')}}</label>
                    @endif
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2"><p>{{__("Area")}}: <span class="required">*</span> </p></div>
                <div class="col-sm-4 @if($errors->has('area_id')){{'has-error'}} @endif">
                    <select name="area_id" id="area_id" class="form-control">
                        <option value="" selected disabled>-- {{__("Area")}} --</option>
                        @foreach($areas as $area)
                            <option value="{{$area->id}}">{{$area->area}}</option>
                        @endforeach
                    </select>
                    @if($errors->has('area_id'))
                        <label for="area_id" class="error">{{$errors->first('area_id')}}</label>
                    @endif
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2"><p>{{__("Payment terms")}}: <span class="required">*</span> </p></div>
                <div class="col-sm-4">
                    <select name="payment_term_id" id="payment_term_id" class="form-control">
                        <option value="" selected disabled>-- {{__("Payment terms")}} --</option>
                        @foreach($paymentTerms as $pt)
                            <option value="{{$pt->id}}">{{$pt->days}} {{__("days")}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
    </form>
</section>
<section class="panel">
    <div class="panel-body">
        <form id="itemForm">
            <div class="form-group">
                <div class="col-sm-2"><p>{{__("Item type")}}: </p></div>
                <div class="col-sm-4">
                    <select name="item_type" id="item_type" class="form-control"  data-plugin-selectTwo>
                        <option value="" selected disabled>-- {{__("Item Type")}} --</option>
                        @foreach($itemTypes as $it)
                            <option value="{{$it->id}}">{{$it->name}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2"><p>{{__("Item")}}: </p></div>
                <div class="col-sm-4">
                    <select name="item" id="item" class="form-control"  data-plugin-selectTwo>
                        <option value="" selected disabled>-- {{__("Item")}} --</option>
                    </select>
                </div>
            </div>
            @csrf
            <div class="form-group">
                <div class="col-sm-3">
                    <label for="code">{{__("Code")}}</label>
                    <input type="text" name="code" class="form-control" placeholder="" id="code" spellcheck="false" style="background-color:#eeeeee">
                </div>
                <div class="col-sm-4">
                    <label for="article">{{__("Item")}}</label>
                    <input type="text" name="item_name" class="form-control" placeholder="" id="item_name" spellcheck="false" style="background-color:#eeeeee">
                </div>
                <div class="col-sm-2">
                    <label for="quantity">{{__("Quantity")}}</label>
                    <input type="text" name="quantity" class="form-control" placeholder="" id="quantity" spellcheck="false" style="background-color:#eeeeee">
                </div>
                <div class="col-sm-1">
                    <label for="discount">{{__("Discount")}}</label>    
                    <input type="text" name="discount" class="form-control" placeholder="" id="discount" spellcheck="false" style="background-color:#eeeeee">
                </div>
                <div class="col-sm-2">
                    <label for="price">{{__("Price")}}</label>
                    <input type="text" name="price" class="form-control" placeholder="" id="price" spellcheck="false" style="background-color:#eeeeee">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-12">
                    <textarea type="text" placeholder="{{__("Description")}}" name="description" class="form-control" placeholder="" id="description" spellcheck="false" rows="6" style="background-color:#eeeeee"></textarea>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-12">
                    <button type="button" class="btn btn-primary" id="btn-prepare-items">{{__("Add row")}} <i class="fa fa-save"></i></button>
                    <button type="button" class="btn btn-default" id="btn-discard-items">{{__("Discard")}} <i class="fa fa-times"></i></button>
                </div>
            </div>
        </form>
        @if(!empty($preparedItems))
            <hr>
        <div class="form-group">
            <div class="col-sm-12">
                <h4>{{__("Prepared items")}}</h4>
            </div>
            <div class="col-sm-12">
                <table class="table table-bordered table-striped mb-none" id="datatable-default">
                    <thead>
                    <tr>
                        <th>{{__('Code')}}</th>
                        <th>{{__('Item')}}</th>
                        <th>{{__('Quantity')}}</th>
                        <th>{{__('Discount')}}</th>
                        <th>{{__('Price')}}</th>
                        <th>{{__('Total')}}</th>
                        <th>{{__('Description')}}</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($preparedItems as $item)
                        <tr class="gradeX">
                            <td>{{$item->code}}</td>
                            <td>{{$item->item_name}}</td>
                            <td>{{$item->quantity}}</td>
                            <td>{{$item->discount}}%</td>
                            <td>{{number_format($item->price, 2, ',', '.')}}</td>
                            <td>{{number_format($item->price*$item->quantity*(1-$item->discount/100), 2, ',', '.')}}</td>
                            <td>{{$item->description}}</td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        @endif
    </div>
</section>
<script>
    $(document).ready(function() {
        // Restore form values from sessionStorage
        var savedFormData = sessionStorage.getItem('orderFormData');
        if (savedFormData) {
            var formData = JSON.parse(savedFormData);
            $('#customer_id').val(formData.customer_id);
            $('#order_date').val(formData.order_date);
            $('#deadline').val(formData.deadline);
            $('#area_id').val(formData.area_id);
            
            // Refresh Select2 if it's being used
            if ($('#customer_id').hasClass('select2-hidden-accessible')) {
                $('#customer_id').trigger('change');
            }
            if ($('#area_id').hasClass('select2-hidden-accessible')) {
                $('#area_id').trigger('change');
            }
            
            // Clear the saved data
            sessionStorage.removeItem('orderFormData');
        }

        $('#item').on('change', function() {
            var selectedOption = $(this).find('option:selected');
            var code = selectedOption.data('code');
            var name = selectedOption.data('name');
            
            $('#code').val(code || '');
            $('#item_name').val(name || '');
        });
    });
    function saveFormData() {
        var formData = {
            customer_id: $('#customer_id').val(),
            order_date: $('#order_date').val(),
            deadline: $('#deadline').val(),
            area_id: $('#area_id').val()
        };
        sessionStorage.setItem('orderFormData', JSON.stringify(formData));
    }

    $('#btn-prepare-items').click(function(){
        var _token = $('input[name="_token"]').val();
        saveFormData();
        $.ajax({
            method  :   'POST',
            cache   :   false,
            '_token' : _token,
            url     :   "{{route('prepare_items')}}",
            data    :   $('#itemForm').serialize(),
            success :   function(result){
                $('#code').val('');
                $('#item_name').val('');
                $('#quantity').val('');
                $('#discount').val('');
                $('#price').val('');
                document.location.reload();
            }
        });
        $('#item_type').val(null).trigger('change');
    });
    $('#btn-discard-items').click(function(){
        var _token = $('input[name="_token"]').val();
        saveFormData();
        $.ajax({
            method  :   'GET',
            cache   :   false,
            '_token' : _token,
            url     :   "{{route('discard_items')}}",
            success :   function(result){
                document.location.reload();
            }
        });
    });
    $('#item_type').on('change', function() {

        let typeId = $(this).val();

        $.ajax({
            url: '/order_form/populate_items/' + typeId,
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {

                let $itemSelect = $('#item');
                $itemSelect.empty();

                $itemSelect.append('<option value="" disabled selected>-- Select Item --</option>');

                $.each(response, function(index, item) {
                    $itemSelect.append(
                        `<option value="${item.id}" 
                            data-code="${item.code}" 
                            data-name="${item.name}">
                            (${item.code}) ${item.name}
                        </option>`
                    );
                });

                $itemSelect.val(null).trigger('change');
            }
        });
    });

</script>

@endsection