@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>View Client Details</h3></div>
                    
                <div class="panel-body">

                    @if (Auth::check())
                    <div class="row">
                        
                        <div class="col-md-5" style="border:1px solid black;border-radius: 5px;margin-left: 20px;">
                            
                            <div class="col-md-10"><b style="font-size: 16px;line-height: 30px;">Services</b></div>
                            <div class="col-md-2" align="right"><b style="font-size: 24px;line-height: 30px;"><a href="#" onclick="add_client_service({{$client_id}})">+</a></b></div>

                            <div class="col-md-12" id="div_client_service" style="padding: 10px;"></div>
                        </div>

                        
                        <input type="hidden" id="client_id" value="{{$client_id}}">

                        <div class="col-md-6"style="border:1px solid black;border-radius: 5px;margin-left: 20px;">
                            
                            <div class="col-md-10"><b style="font-size: 16px;line-height: 30px;">Invoices</b></div>
                            <div class="col-md-2" align="right"><b style="font-size: 24px;line-height: 30px;">+</b></div>
                            <div class="col-md-12" id="div_client_invoice" style="padding: 10px;"></div>    
                        </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>
<script type="text/javascript">
$(document).ready(function() {

    view_client_service($('#client_id').val());
    view_client_invoice($('#client_id').val());


    $('#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
            }
        });
    }



    

});

    function add_client_service(client_id)
    {
        $.ajax({
            url: "{{url('add-client-service') }}", // 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');
            },
            error: function(xhr) {
                // Handle errors
            }
        });
    }

    function insert_client_service(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-product') }}", // Replace with your route name
            type: 'POST',
            data: {
                _token: csrfToken,
                client_id: $('#client_id').val(),
                product_id: $('#product_id').val()
            },
            success: function(response) {
                // Handle the response, e.g., display a success message
                //console.log(response);
                //alert(response)
                view_client_service($('#client_id').val());
                $('#myModal').modal('hide');
            }
        });
    }

    function view_client_service(client_id){
       
        var data = {
            client_id: client_id,
        };

        $.ajax({
            url: "{{url('/get-client-service') }}", // Replace with your data retrieval endpoint
            type: 'GET',
            data:data,
            success: function(data) { 

                // Update your view with the retrieved data
                $('#div_client_service').html(data.view);
            },
            error: function(xhr, status, error) {
                // Handle errors, if any
                console.error(error);
            }
        });
    }


    function view_client_invoice(client_id){
       
        var data = {
            client_id: client_id,
        };

        $.ajax({
            url: "{{url('/get-client-invoice') }}", // Replace with your data retrieval endpoint
            type: 'GET',
            data:data,
            success: function(data) { 

                // Update your view with the retrieved data
                $('#div_client_invoice').html(data.view);
            },
            error: function(xhr, status, error) {
                // Handle errors, if any
                console.error(error);
            }
        });

       

        
    }

    function payment_modal(invoice_id){
        
        $.ajax({
            url: "{{url('add-invoice-payment') }}", // Replace with your data retrieval endpoint
            type: 'GET',
            data:{invoice_id:invoice_id},
            success: function(data) { 
                // Update your view with the retrieved data
                $('#myModal').html(data.view);
                $('#myModal').modal('show');
            },
            error: function(xhr) {
                // Handle errors
            }
        });
    }

    function insert_invoice_payment(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-invoice-payment') }}", // Replace with your route name
            type: 'POST',
            data: {
                _token: csrfToken,
                invoice_id: $('#invoice_id').val(),

                paid_amount: $('#paid_amount').val()
            },
            success: function(response) {
                // Handle the response, e.g., display a success message
                //console.log(response);
                //alert(response)
                view_client_invoice($('#client_id').val());
                $('#myModal').modal('hide');
            }
        });
    }
    


</script>
@endsection