@extends('layouts.higher-institution')
@section('title', 'Higer Institution Payment')
@section('content')
    <!-- push external head elements to head -->
    @push('head')
        @livewireStyles
    @endpush

    <livewire:higher-institution.wire-create-payment :services="$services" />
    <!-- push external js -->
    @push('script')
        @livewireScripts
        <script src="{{ asset('plugins/DataTables/datatables.min.js') }}"></script>
        <script src="{{ asset('plugins/select2/dist/js/select2.min.js') }}"></script>
        <script src="{{ asset('plugins/datedropper/datedropper.min.js') }}"></script>
        <script src="{{ asset('js/form-picker.js') }}"></script>
        <!--server side users table script-->
        <script src="{{ asset('js/custom.js') }}"></script>
        <script>
            function calculateTotalAmount() {
                let totalAmount = 0;
                $('#service_ids option:selected').each(function() {
                    totalAmount += parseFloat($(this).data('amount'));
                });
                $('#total_amount').val(totalAmount);
            }
            document.addEventListener('DOMContentLoaded', function() {
                // Initialize select2
                initializeSelect2();


                // Calculate total amount on page load
                calculateTotalAmount();

                // Calculate total amount on selection change
                $('#service_ids').on('change', function() {
                    calculateTotalAmount();
                });

                Livewire.on('initSelect', (index) => {
                    initializeSelect2();
                });

            });
        </script>
    @endpush
@endsection