@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-12 col-md-offset-0">
            <div class="modal" id="myModal"></div>

            <div class="panel panel-default">
                <div class="panel-heading"><h3>Add New Client</h3></div>
                    
                <div class="panel-body">

                    @if (Auth::check())
                    <form id="insertForm" method="POST"  >
                        <meta name="csrf-token" content="{{ csrf_token() }}">
                        <div class="row">
                            <div class="col-md-2" align="right" style="margin-top:5px">First Name </div>
                            <div class="col-md-3" ><input type="text" class="form-control" id="first_name" name="first_name"></div>
                        </div><br>

                        <div class="row">
                            <div class="col-md-2" align="right" style="margin-top:5px">Last Name </div>
                            <div class="col-md-3" ><input type="text" class="form-control" id="last_name" name="last_name"></div>
                        </div><br>
                        
                        <div class="row">
                            <div class="col-md-2" ></div>
                            <div class="col-md-3" ><input type="submit" class="btn btn-primary" name="btn-submit" value="Add Client"></div>
                        </div> 
                    

                        
                    </form>  

                    <div id="your-updated-view-container">
                        <div class="col-md-12"><h3>View All Clients</h3></div>

                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-3">First Name</div>
                                    <div class="col-md-3">Last Name</div>
                                    <div class="col-md-2">View Details</div>
                                    <div class="col-md-2">Create Invoice</div>
                                </div>
                                @foreach($client as $row)
                                    <div class="row">
                                        <div class="col-md-3">{{$row->first_name}}</div>
                                        <div class="col-md-3">{{$row->last_name}}</div>
                                        <div class="col-md-2">
                                        <a href="{{ url('view-client', ['client_id' => "$row->id"]) }}">View Details</a>
                                        </div>
                                        <div class="col-md-2" ><a href='#' onclick="create_invoice({{$row->id}})">Create Invoice</a></div>
                                    </div>
                                @endforeach
                                
                            </div>
                    </div>

                    @else
                        User is not authenticated
                    @endif

                    
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" integrity="sha512-mQ8Fj7epKOfW0M7CwuuxdPtzpmtIB5rI4rl76MSd3mm5dCYBKjzPk7EU/2buhPMs0KmC6YOPR/MQlQwpkdNcpQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js" integrity="sha512-Y+0b10RbVUTf3Mi0EgJue0FoheNzentTMMIE2OreNbqnUPNbQj8zmjK3fs5D2WhQeGWIem2G2UkKjAL/bJ/UXQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-->
<script type="text/javascript">
$(document).ready(function() {
    $('#insertForm').submit(function(event) {
        event.preventDefault();
        var csrfToken = $('meta[name="csrf-token"]').attr('content');
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': csrfToken
            }
        });

        //alert($('#first_name').val())
        $.ajax({
            url: "{{ url('insert-client') }}", // Replace with your route name
            type: 'POST',
            data: {
                _token: csrfToken,
                first_name: $('#first_name').val(),
                last_name: $('#last_name').val()
            },
            success: function(response) {
                // Handle the response, e.g., display a success message
                //console.log(response);
                //alert(response)
                view_client();
            }
        });
    });

    function view_client(){
       
        $.ajax({
            url: "{{url('get-client') }}", // Replace with your data retrieval endpoint
            type: 'GET',
            success: function(data) { 
                // Update your view with the retrieved data
                $('#your-updated-view-container').html(data.view);
            },
            error: function(xhr) {
                // Handle errors
            }
        });
    }

});


//CODE FOR SHOWING MODAL
function create_invoice(client_id)
{
      
        $.ajax({
            url: "{{url('create-client-invoice') }}", // Replace with your data retrieval endpoint
            type: 'GET',
            data:{client_id:client_id},
            success: function(data) {
                // Update your view with the retrieved data
                $('#myModal').html(data.view);
                $('#myModal').modal('show');
                //$('#invoice_date').datepicker();
                //$('#invoice_date').datetimepicker();
            },
            error: function(xhr) {
                // Handle errors
            }
        });
}
/*
function create_invoice(client_id)
{
        
        $.ajax({
            url: "{{url('create-client-invoice') }}", // Replace with your data retrieval endpoint
            type: 'GET',
            data:{client_id:client_id},
            success: function(data) { 
                // Update your view with the retrieved data
               // $('#myModal').html(data.view);
               // $('#myModal').modal('show');
                alert('Client Invoice created successfully.')
            },
            error: function(xhr) {
                // Handle errors
            }
        });
}*/


    function show_product_price(price)
    {
       
       $('#product_price').html(price)
    }

    function show_div_service()
    {
        $('#div_service').show();
        $('#div_product').hide();
        $('#div_custom_product').hide();
    }

    function show_div_product()
    {
        $('#div_service').hide();
        $('#div_product').show();
        $('#div_custom_product').hide();
    }

    function show_div_custom_product()
    {
        $('#div_service').hide();
        $('#div_product').hide();
        $('#div_custom_product').show();
    }


    function add_custom_product()
    {
        var csrfToken = $('meta[name="csrf-token"]').attr('content');
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': csrfToken
            }
        });
        
        //alert($('#first_name').val())
        $.ajax({
            url: "{{ url('invoice-add-custom-product') }}", // Replace with your route name
            type: 'POST',
            data: {
                _token: csrfToken,
                product_code: $('#product_code').val(),
                monthly_charge: $('#monthly_charge').val(),
                invoice_qty: $('#invoice_qty_3').val(),
                client_id:$('#client_id').val()
            },
            success: function(response) {
                // Handle the response, e.g., display a success message
                //console.log(response);
                //alert(response)
                //view_client();
                create_invoice($('#client_id').val())
            }
        });
    }


    function add_product()
    {
        var csrfToken = $('meta[name="csrf-token"]').attr('content');
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': csrfToken
            }
        });
        
        //alert($('#first_name').val())
        $.ajax({
            url: "{{ url('invoice-add-product') }}", // Replace with your route name
            type: 'POST',
            data: {
                _token: csrfToken,
                product_id: $('#product_id_2').val(),
                invoice_qty: $('#invoice_qty_2').val(),
                client_id:$('#client_id').val()
            },
            success: function(response) {
                // Handle the response, e.g., display a success message
                //console.log(response);
                //alert(response)
                //view_client();
                create_invoice($('#client_id').val())
            }
        });
    }


    function add_service()
    {
        var csrfToken = $('meta[name="csrf-token"]').attr('content');
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': csrfToken
            }
        });
        //alert($('#client_id').val())
        //alert($('#first_name').val())
        $.ajax({
            url: "{{ url('invoice-add-service') }}", // Replace with your route name
            type: 'POST',
            data: {
                _token: csrfToken,
                product_id: $('#product_id_1').val(),
                invoice_qty: $('#invoice_qty_1').val(),
                client_id:$('#client_id').val()
            },
            success: function(response) {
                // Handle the response, e.g., display a success message
                //console.log(response);
                //alert(response)
                //view_client();
                create_invoice($('#client_id').val())
            }
        });
    }


    function create_client_invoice()
    {
        var csrfToken = $('meta[name="csrf-token"]').attr('content');
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': csrfToken
            }
        });
        //alert($('#client_id').val())
        //alert($('#first_name').val())
        $.ajax({
            url: "{{ url('create-client-invoice') }}", // Replace with your route name
            type: 'POST',
            data: {
                _token: csrfToken,
                client_id:$('#client_id').val()
            },
            success: function(response) {
                // Handle the response, e.g., display a success message
                //console.log(response);
                //alert(response)
                //view_client();
               // create_invoice($('#client_id').val())
                $('#myModal').modal('hide');
                alert('Invoice Created Successfully')
            }
        });
    }
</script>
@endsection