@extends('layouts.app')
@push('style')   

    
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />     
    
    <link rel="stylesheet" type="text/css" href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css"/>
   
  
@endpush

@section('content') 
<div class="container-fluid my-1  bg-light border shadow-lg rounded-3">
    <div class="row flex-nowrap p-2" id="2nd-row">
        @include('customer.components.leftpanel')
        <div class="col-md-10 flex-grow-1 " id="rightPanel">
            <div class="  d-flex navbar-item">
                        
                @include('customer.components.navbar')     
            </div>    
            <div class="row px-2 pb-0   rounded-3 border shadow-lg">
                <div class="text-dark px-0">
                        <div id="info-message" class="mr-4 alert alert-danger 
                            @if (session('error')) 
                                    " >{{session('error')}}  
                            @else  
                                    d-none"> 
                            @endif  
                        </div>
                </div>
                <div id="CustomerPanel" class="flex-row px-2 pb-2  justify-content-between">                                
                    <div class="row mb-auto">
                    @include('customer.components.simpleCustomerForm')    
                    </div>    
                </div>            
            </div>
        </div>
    </div>
</div>

@include('components.modal-delete-confirm')
@include('components.modalalert')


@push('scripts')      
 
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>  
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

<script type="text/JavaScript" >

  
const modalConfirmDelete = new bootstrap.Modal('#modalConfirmDelete') 
const modalAlert = new bootstrap.Modal('#modalAlert') 
let formchanged = false;
    $(document).ready( function populateDropdown() {  
        $.ajax({
                type: 'POST',
                url: "{{ url('/customersGenders/get') }}",
                success: function(data) {
                    selectedId = '{{  isset($customer) ? $customer["genres_id"] : '' }}'
                    $('#genres_id').empty();
                    $('#genres_id').append( '<option value=""  >Select ...</option>');
                    for(var i = 0; i< data.length;i++){
                        $('#genres_id').append('<option value="'+data[i]['id']+'"'+ ((selectedId == data[i]['id']) ? 'selected' : '') +'>'+data[i]['name']+'</option>');
                    } 
                },

                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    console.log(textStatus);
                }
        }) 
    });
  
    $(document).ready( function populateDropdown() {  
        $.ajax({
                type: 'POST',
                url: "{{ url('/customersMentions/get') }}",
                success: function(data) {
                    selectedId = '{{  isset($customer) ? $customer["customers_mentions_id"] : '' }}'
                    $('#customers_mentions_id').empty();
                    $('#customers_mentions_id').append( '<option value=""  >Select ...</option>');
                    for(var i = 0; i< data.length;i++){
                        $('#customers_mentions_id').append('<option value="'+data[i]['id']+'"'+ ((selectedId == data[i]['id']) ? 'selected' : '') +'>'+data[i]['name']+'</option>');
                    } 
                },

                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    console.log(textStatus);
                }
        }) 
    });
  
   
 
    $(document).ready(function() {
   
        $('#customerForm').on('submit',function saveCustomer (e) {
            e.preventDefault();

            var form = $("#customerForm")


            if (form[0].checkValidity()) {
                form.addClass('was-validated');
            
                var formData  = form.serializeArray(); //serialize
                console.log(formData);
                $.ajax({
                        type: 'POST',
                        url: "{{ url('/customers/update') }}",
                        data: formData,
                        datatype: "json",
                        success: function(response) {
                            console.log(response, ' Resposta AJAX')
                            //modalProduct.hide(){{ url('') }}/${id}` ,
                            location.replace("{{ LaravelLocalization::localizeUrl('/customers/edit/') }}" +'/'+ response['id'])
                             
                        }, 
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            console.log(textStatus);
                        }
                    });
            
            } else { 
                form[0].reportValidity();
                event.preventDefault()
                event.stopPropagation()
            }

        });
     
        $('#closeCustomer').on('click',function closeProduct (e) {
            e.preventDefault();
            location.replace("{{ LaravelLocalization::localizeUrl('/customers') }}")
        });
    });


    $('#modalBtnDelete').on('click', function  deleteProduct (){
            id = $('#deleteId').val();
            if (id != ''){
                $.ajax({
                    url: `{{ url('/customers/hide') }}/${id}`,
                    method: "post",
                    success: function(response) {
                        console.log('response', response);
                        //if (response.success) {
                        //customersTable.draw(false);
                        window.location.reload();
                        //}
                        
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        let error = jqXHR.responseJSON;
                            $("#info-message").removeClass('d-none');
                            $("#info-message").html("Erro: "+ errorThrown);
                    }
                });
            }
        });
   
    function deleteClient (id = null , name = '') { // DELETE 
           if (id !== null ){
                console.log(id +  name);
                $('#modalConfirmTitle').html("{{__('applabels.DeleteItem')}}" );
                $('#modalHeaderMessage').html("");
                $('#confirmDeleteMessage').html("{{__('applabels.Confirm if you want to delete')}} "+name );
                $('#deleteId').val(id);
                modalConfirmDelete.show();
           }
   };

   function  BtnSave (e){
            console.log('modalBtnSave');
            modalAlert.hide();
            $('#customerForm').trigger('submit');
            
            location.replace("{{LaravelLocalization::localizeUrl('/customers/shipping/') }}/{{  isset($customer) ? $customer['id'] : 0}}");
    };
   
    $(document).ready(function() {
        $('#customerForm').on( 'change', 'input', function (e) {
            console.log('input changed');
            formchanged = true;
        } );

        $('#shippingLink').on( 'click' , function (e) {
            //e.preventDefault();
           
            console.log('shipping')
            if (formchanged) {
               
                $('#alertmessage').html('You have unsaved data! Please save before proceding')
                $('.modal-footer').html('<button type="button" id="btnCancel" class="btn btn-secondary" data-bs-dismiss="modal" >{{ __("applabels.OK") }}</button>');
                   // '<button type="button" id="modalBtnSave" class="btn btn-primary" data-bs-dismiss="modal"  onclick="BtnSave"  >{{ __("applabels.Save") }}</button>');
                modalAlert.show();
            }
            else { 
                
                location.replace("{{LaravelLocalization::localizeUrl('/customers/shipping/') }}/{{ isset($customer) ? $customer['id'] : 0}}");
            }
        } );


       
    });
</script>

 
    @endpush
@endsection