@extends('layouts.main') 
@section('title', 'MDAS')
@section('content')
    <!-- push external head elements to head -->
    @push('head')
      @livewireStyles
        <link rel="stylesheet" href="{{ asset('plugins/DataTables/datatables.min.css') }}">
        <style>
            .card-body table{
                width:100%!Important;
            }
            .table-actions a {
                font-size: 5px!important;
            }
        </style>
    @endpush

    <div class="container-fluid">
        <x-breadcrumb  :desc="$desc" :pageTitle="$pageTitle"   :iconName="$iconName" />
    	
        <div class="row">
            <livewire:wire-mdas/>
            <!-- end message area-->
        </div>
    </div>
    <!-- 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>
        <!--server side users table script-->
        <script src="{{ asset('js/custom.js') }}"></script>
        <script>
            document.body.classList.add("sidebar-mini");
            document.addEventListener('DOMContentLoaded', function () {
                document.body.classList.add("sidebar-mini");

                const services = [];
                
                // Initialize select2
                initializeSelect2();
                // initialize MDADatable
                initializeMDaDataTable();

                alertSuccessMsg(()=> {
                    redrawTable('mda_table')
                });

                alertErrorMsg(()=> {
                    redrawTable('mda_table')
                });
                
                Livewire.on('initSelect', (index)=> {
                    let elName = `#select-${index}`;
                    initializeSelect2(elName);
                });

                onCustomEvent('click', '.range', showRangeComponent);
                onCustomEvent('click','#addService', addNewService);
                onCustomEvent('click', '.remove-service', removeService);

                // Changing Service Input
                onChangeEvent('.service-name', null, setService);
                onChangeEvent('.service-amt',null, setService);
                onChangeEvent('.service-cat', null, setService);
                onChangeEvent('.range', null, setService);

                // Changing service range
                onCustomEvent('click', '.add_range', addNewRange);
                onCustomEvent('click', '.remove_range', removeRange);
                onChangeEvent('.range-desc', null, setRange);
                onChangeEvent('.range-amt', null, setRange);

                onCustomEvent('click', '#savemda-btn', ()=> {
                    showLoading()
                    Livewire.emit("save_mda");
                });
                // save service 
                onCustomEvent('click', '.save-service', ()=> {
                    if (Object.keys(mdaServicesObj).length === 0){ 
                        return fireSwalErrorAlert("Sorry, service cannot be empty");
                    }
                    const status = validateService();
                    if (status) {
                       showLoading()
                        Livewire.emit("save_services", JSON.stringify(mdaServicesObj));
                    }
                });
                Livewire.on('reloadmda', ()=> setTimeout(() => {
                     window.location.reload(true)
                }, 1500));
            });
        </script>
    @endpush
@endsection