@include('layouts.header', ['title' => 'Import Survey'])
<div class="wrapper">
    @include('layouts.navbar')
    @include('layouts.sidebar')

    <div class="content-page">
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box">
                            <div class="page-title-right"></div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-9">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="page-title">Import Survey</h4>
                            </div>

                            <form id="userForm"
                                action="{{ route('admin.import.surveys') }}"
                                method="POST" enctype="multipart/form-data" autocomplete="off">
                                @csrf
                                @if (isset($user))
                                    @method('PUT')
                                @endif

                                <div class="card-body">

                                    <div class="mb-3">
                                        <label for="agency" class="form-label">Project<span
                                                class="text-danger">*</span></label>
                                        <select class="form-select form-select-sm mb-3 select2" name="project"
                                            id="project" required>
                                            <option value="" selected disabled>Select Project</option>
                                            @foreach ($projects as $project)
                                                <option value="{{ $project->id }}">
                                                    {{ $project->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="mb-3">
                                        <label for="agency" class="form-label">Agency User<span
                                                class="text-danger">*</span></label>
                                        <select class="form-select form-select-sm mb-3 select2" name="agency_user"
                                            id="agency_user" required>
                                            <option value="" selected disabled>Select Agency User</option>
                                            @foreach ($users as $agency)
                                                <option value="{{ $agency->id }}">
                                                    {{ $agency->name }} - {{ $agency->email }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="mb-3">
                                        <label for="agency" class="form-label">Type<span
                                                class="text-danger">*</span></label>
                                        <select class="form-select form-select-sm mb-3 select2" name="type"
                                            id="type" required>
                                            <option value="1" selected>Survey</option>
                                            <option value="2">Household Members</option>
                                            <option value="3">Employees</option>
                                        </select>
                                    </div>

                                    <div class="mb-3">
                                        <label for="file" class="form-label">File <span
                                                class="text-danger">*</span></label>
                                        <input type="file" id="file" name="file"
                                            class="form-control @error('file') is-invalid @enderror">
                                        @error('file')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>

                                </div>

                                <div class="card-footer border-top border-light">
                                    <button type="submit" class="btn btn-primary" id="submitBtn">
                                        Submit
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        @include('layouts.footer')
    </div>
</div>

<!-- Vendor JS -->
<script src="{{ asset('assets/js/vendor.min.js') }}"></script>
<script src="{{ asset('assets/js/app.min.js') }}"></script>
<!--  Select2 Plugin Js -->
<script src="{{ asset('assets/vendor/select2/js/select2.min.js') }}"></script>

<script>
    $(document).ready(function() {
        @if ($errors->any())
            @foreach ($errors->all() as $error)
                toastr.error("{{ $error }}");
            @endforeach
        @endif

        @if (session('success'))
            toastr.success("{{ session('success') }}");
        @endif

        @if (session('error'))
            toastr.error("{{ session('error') }}");
        @endif

        document.getElementById('userForm').addEventListener('submit', function() {
            const submitBtn = document.getElementById('submitBtn');
            submitBtn.disabled = true;
            submitBtn.innerHTML = 'Submitting...'; // Change button text to indicate submission
        });
    });
</script>

</body>

</html>