@extends('layouts.main')
@section('title', 'Create Demand Notice')
@section('content')
    <!-- push external head elements to head -->
    @push('head')
        @livewireStyles
        <link rel="stylesheet" href="{{ asset('plugins/DataTables/datatables.min.css') }}">
        <link rel="stylesheet" href="{{ asset('plugins/datedropper/datedropper.min.css') }}">
        {{-- <link rel="stylesheet" href="{{ asset('')}}"> --}}
        <style>
            .card-body table {
                width: 100% !Important;
            }

            .table-actions a {
                font-size: 5px !important;
            }

            .swal2-popup .select2 {
                display: none !important;
            }
        </style>
    @endpush


    <div class="container-fluid">
        <div class="page-header">
            <div class="row align-items-end mt-2">
                <div class="col-lg-8">
                    <div class="page-header-title">
                        <i class="ik ik-users bg-blue"></i>
                        <div class="d-inline">
                            <h5>{{ __('Add new Demand Notice') }}</h5>
                            <span>{{ __('Create a new demand notice') }}</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <nav class="breadcrumb-container" aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="{{ route('dashboard') }}"><i class="ik ik-home"></i></a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="{{ route('demand-notice.index') }}">{{ __('Demand Notices') }}</a>
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
        <livewire:wire-create-demand-notice />
    </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>
        {{-- <script src="{{ asset('plugins/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.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>
            document.addEventListener('DOMContentLoaded', function() {
                document.body.classList.add("sidebar-mini");
                // Initialize select2
                initializeSelect2();

                const clearSearchResults = (searchBox) => {
                    searchBox.toggleClass("d-none");
                    searchBox.html("");
                }

                onCustomEvent('click', $('.set-amount'), (e)=> {
                    const dataId = $(e.target).attr("data-id")
                    const inputElement = $('.amount[data-service-id="' + dataId + '"]');
                    if ($(e.target).is(':checked')) {
                        inputElement.attr("readonly", false);
                        inputElement.attr("min", inputElement.val());
                    } else {
                        inputElement.attr("readonly", true);
                        inputElement.attr("min", 0);
                    }
                });

                //When you click away from search box, it clears your search results
                onCustomEvent("click", $(document), function(event) {
                    const searchBox = $('.search-box');
                    const inputBox = $('.search-input');
                    if (!searchBox.hasClass('d-none')) {
                        const isClickInside = searchBox.is(event.target) || inputBox.is(event.target) || searchBox.has(event.target).length > 0;
                        // If click is outside of the search results element, clear its contents
                        if (!isClickInside) {
                            searchBox.remove(); // Clear the contents of the search results element
                            inputBox.val() = '';
                        }
                    }

                });

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

                onCustomEvent('click','#submit-btn', ()=> {
                    showLoading();
                    Livewire.emit('submitForm');
                });
                Livewire.on('errorReload', (msg)=> {
                    fireSwalErrorAlert(msg);
                    setTimeout(() => window.location.reload(true), 3000);
                });

                alertSuccessMsg();

                alertErrorMsg();
            });
        </script>
    @endpush
@endsection