<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registration</title>
</head>

<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
    }

    .container {
        background: #fff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        width: 100%;
        max-width: 600px;
    }

    h1 {
        text-align: center;
        margin-bottom: 20px;
    }

    .form-group {
        margin-bottom: 15px;
    }

    .form-group label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
    }

    .form-group input[type="text"],
    .form-group input[type="date"],
    .form-group input[type="email"],
    .form-group input[type="password"],
    .form-group textarea,
    .form-group select {
        width: 100%;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    .form-group .error {
        color: red;
        font-size: 0.875em;
        margin-top: 5px;
    }

    .btn {
        background-color: #007bff;
        color: #fff;
        padding: 10px 15px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 1em;
        width: 100%;
    }

    .btn:hover {
        background-color: #0056b3;
    }

    .role-fields {
        display: none;
    }
</style>

<body>
    <div class="container">
        <h1>Register</h1>


        <!-- Display Success Message -->
        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif

        <!-- Display Error Messages -->
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="POST" action="{{ route('register') }}" enctype="multipart/form-data">
            @csrf
            <div class="form-group">
                <label for="role">Role</label>
                <select id="role" name="role" required>
                    <option value="">Select Role</option>
                    <option value="pemerintah">Pemerintah</option>
                    <option value="umkm">UMKM</option>
                    <option value="investor">Investor</option>
                    <option value="akademisi">Akademisi</option>
                    <option value="komunitas">Komunitas</option>
                </select>
                @error('role')
                    <span class="error">{{ $message }}</span>
                @enderror
            </div>

            <div class="form-group">
                <label for="sub_sektor">Sub Sektor</label>
                <select id="sub_sektor" name="sub_sektor" required>
                    <option value="">-- Pilih Sub Sektor --</option>
                    <option value="Aplikasi dan permainan">Aplikasi dan permainan</option>
                    <option value="Arsitektur">Arsitektur</option>
                    <option value="Desain">Desain</option>
                    <option value="Film, video, dan animasi">Film, video, dan animasi</option>
                    <option value="Fotografi">Fotografi</option>
                    <option value="Kriya">Kriya</option>
                    <option value="Kuliner">Kuliner</option>
                    <option value="Mode">Mode</option>
                    <option value="Musik">Musik</option>
                    <option value="Penerbitan">Penerbitan</option>
                    <option value="Periklanan">Periklanan</option>
                    <option value="Permainan rakyat">Permainan rakyat</option>
                    <option value="Radio dan televisi">Radio dan televisi</option>
                    <option value="Riset dan pengembangan">Riset dan pengembangan</option>
                    <option value="Seni pertunjukan">Seni pertunjukan</option>
                    <option value="Seni rupa">Seni rupa</option>
                    <option value="Software">Software</option>
                </select>
                @error('sub_sektor')
                    <span class="error">{{ $message }}</span>
                @enderror
            </div>


            <div class="form-group">
                <label for="full_name">Full Name</label>
                <input type="text" id="full_name" name="full_name" value="{{ old('full_name') }}" required>
                @error('full_name')
                    <span class="error">{{ $message }}</span>
                @enderror
            </div>

            <div class="form-group">
                <label for="nik">NIK</label>
                <input type="text" id="nik" name="nik" value="{{ old('nik') }}" required>
                @error('nik')
                    <span class="error">{{ $message }}</span>
                @enderror
            </div>

            <div class="form-group">
                <label for="birthdate">Birthdate</label>
                <input type="date" id="birthdate" name="birthdate" value="{{ old('birthdate') }}" required>
                @error('birthdate')
                    <span class="error">{{ $message }}</span>
                @enderror
            </div>

            <div class="form-group">
                <label for="address">Address</label>
                <input type="text" id="address" name="address" value="{{ old('address') }}" required>
                @error('address')
                    <span class="error">{{ $message }}</span>
                @enderror
            </div>

            <div class="form-group">
                <label for="phone_number">Phone Number</label>
                <input type="text" id="phone_number" name="phone_number" value="{{ old('phone_number') }}" required>
                @error('phone_number')
                    <span class="error">{{ $message }}</span>
                @enderror
            </div>

            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" id="email" name="email" value="{{ old('email') }}" required>
                @error('email')
                    <span class="error">{{ $message }}</span>
                @enderror
            </div>

            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" required>
                @error('password')
                    <span class="error">{{ $message }}</span>
                @enderror
            </div>

            <div class="form-group">
                <label for="password_confirmation">Confirm Password</label>
                <input type="password" id="password_confirmation" name="password_confirmation" required>
                @error('password_confirmation')
                    <span class="error">{{ $message }}</span>
                @enderror
            </div>

            <!-- Role-specific fields -->
            <div id="role-specific-fields">
                <!-- Fields for Pemerintah -->
                <div id="pemerintah-fields" class="role-fields">
                    <div class="form-group">
                        <label for="institution_name">Institution Name</label>
                        <input type="text" id="institution_name" name="institution_name">
                        @error('institution_name')
                            <span class="error">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="description_pemerintah">Description Pemerintah</label>
                        <textarea id="description_pemerintah" name="description_pemerintah"></textarea>
                        @error('description_pemerintah')
                            <span class="error">{{ $message }}</span>
                        @enderror
                    </div>
                </div>

                <!-- Fields for UMKM -->
                <div id="umkm-fields" class="role-fields">
                    <div class="form-group">
                        <label for="umkm_name">UMKM Name</label>
                        <input type="text" id="umkm_name" name="umkm_name">
                        @error('umkm_name')
                            <span class="error">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="establishment_date_umkm">Establishment Date</label>
                        <input type="date" id="establishment_date_umkm" name="establishment_date_umkm">
                        @error('establishment_date_umkm')
                            <span class="error">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="product">Product</label>
                        <input type="text" id="product" name="product">
                        @error('product')
                            <span class="error">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="siup_number_umkm">SIUP Number</label>
                        <input type="text" id="siup_number_umkm" name="siup_number_umkm">
                        @error('siup_number_umkm')
                            <span class="error">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="profit_umkm">Profit Umkm</label>
                        <input type="number" id="profit_umkm" name="profit_umkm" step="0.01">
                        @error('profit_umkm')
                            <span class="error">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="description_umkm">Description Pemerintah</label>
                        <textarea id="description_umkm" name="description_umkm"></textarea>
                        @error('description_umkm')
                            <span class="error">{{ $message }}</span>
                        @enderror
                    </div>
                </div>

                <!-- Investor-specific fields -->
                <div id="investor-fields" class="role-fields">
                    <div class="form-group">
                        <label for="category">Category</label>
                        <select id="category" name="category">
                            <option value="">Select Category</option>
                            <option value="personal">Personal</option>
                            <option value="perusahaan">Perusahaan</option>
                        </select>
                        @error('category')
                            <span class="error">{{ $message }}</span>
                        @enderror
                    </div>

                    <!-- Personal Fields -->
                    <div id="personal-fields" class="form-group" style="display: none;">
                        <div class="form-group">
                            <label for="npwp_number_inves_personal">NPWP Number</label>
                            <input type="text" id="npwp_number_inves_personal" name="npwp_number_inves_personal"
                                value="{{ old('npwp_number_inves_personal') }}" required>
                            @error('npwp_number_inves_personal')
                                <span class="error">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="job">Job</label>
                            <input type="text" id="job" name="job" value="{{ old('job') }}"
                                required>
                            @error('job')
                                <span class="error">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="profit_inves_personal">Profit</label>
                            <input type="text" id="profit_inves_personal" name="profit_inves_personal"
                                value="{{ old('profit_inves_personal') }}" required>
                            @error('profit_inves_personal')
                                <span class="error">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="total_assets">Total Assets</label>
                            <input type="text" id="total_assets" name="total_assets"
                                value="{{ old('total_assets') }}" required>
                            @error('total_assets')
                                <span class="error">{{ $message }}</span>
                            @enderror
                        </div>

                    </div>

                    <!-- Perusahaan Fields -->
                    <div id="perusahaan-fields" class="form-group" style="display: none;">
                        <div class="form-group">
                            <label for="company_name">Company Name</label>
                            <input type="text" id="company_name" name="company_name"
                                value="{{ old('company_name') }}" required>
                            @error('company_name')
                                <span class="error">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="npwp_number_inves_perusahaan">NPWP Number</label>
                            <input type="text" id="npwp_number_inves_perusahaan"
                                name="npwp_number_inves_perusahaan" value="{{ old('npwp_number_inves_perusahaan') }}"
                                required>
                            @error('npwp_number_inves_perusahaan')
                                <span class="error">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="siup_number_inves_perusahaan">SIUP Number</label>
                            <input type="text" id="siup_number_inves_perusahaan"
                                name="siup_number_inves_perusahaan" value="{{ old('siup_number_inves_perusahaan') }}"
                                required>
                            @error('siup_number_inves_perusahaan')
                                <span class="error">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="nib_number">NIB Number</label>
                            <input type="text" id="nib_number" name="nib_number" value="{{ old('nib_number') }}"
                                required>
                            @error('nib_number')
                                <span class="error">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="establishment_date_inves_perusahaan">Establishment Date</label>
                            <input type="date" id="establishment_date_inves_perusahaan"
                                name="establishment_date_inves_perusahaan">
                            @error('establishment_date_inves_perusahaan')
                                <span class="error">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="profit_inves_perusahaan">Profit</label>
                            <input type="text" id="profit_inves_perusahaan" name="profit_inves_perusahaan"
                                value="{{ old('profit_inves_perusahaan') }}" required>
                            @error('profit_inves_perusahaan')
                                <span class="error">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="description_inves_perusahaan">Description</label>
                            <textarea id="description_inves_perusahaan" name="description_inves_perusahaan"></textarea>
                            @error('description_inves_perusahaan')
                                <span class="error">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                </div>



                <!-- Fields for Akademisi -->
                <div id="akademisi-fields" class="role-fields">
                    <div class="form-group">
                        <label for="university_name">University Name</label>
                        <input type="text" id="university_name" name="university_name">
                        @error('university_name')
                            <span class="error">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="faculty">Faculty</label>
                        <input type="text" id="faculty" name="faculty">
                        @error('faculty')
                            <span class="error">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="study_program">Study Program</label>
                        <input type="text" id="study_program" name="study_program">
                        @error('study_program')
                            <span class="error">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="expertise_field">Expertise Field</label>
                        <input type="text" id="expertise_field" name="expertise_field">
                        @error('expertise_field')
                            <span class="error">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="description_akademisi">Description</label>
                        <textarea id="description_akademisi" name="description_akademisi"></textarea>
                        @error('description_akademisi')
                            <span class="error">{{ $message }}</span>
                        @enderror
                    </div>
                </div>

                <!-- Fields for Komunitas -->
                <div id="komunitas-fields" class="role-fields">
                    <div class="form-group">
                        <label for="community_name">Community Name</label>
                        <input type="text" id="community_name" name="community_name">
                        @error('community_name')
                            <span class="error">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="establishment_date_komunitas">Establishment Date</label>
                        <input type="date" id="establishment_date_komunitas" name="establishment_date_komunitas">
                        @error('establishment_date_komunitas')
                            <span class="error">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="description_komunitas">Description</label>
                        <textarea id="description_komunitas" name="description_komunitas"></textarea>
                        @error('description_komunitas')
                            <span class="error">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="community_license">Community License</label>
                        <input type="text" id="community_license" name="community_license">
                        @error('community_license')
                            <span class="error">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label for="foto">Upload Photo</label>
                <input type="file" id="foto" name="foto">
                @error('foto')
                    <span class="error">{{ $message }}</span>
                @enderror
            </div>

            <button type="submit" class="btn">Register</button>
        </form>
    </div>

    {{-- <script>
        document.getElementById('role').addEventListener('change', function() {
            var role = this.value;
            document.querySelectorAll('.role-fields').forEach(function(field) {
                field.style.display = 'none';
            });

            if (role === 'pemerintah') {
                document.getElementById('pemerintah-fields').style.display = 'block';
            } else if (role === 'umkm') {
                document.getElementById('umkm-fields').style.display = 'block';
            } else if (role === 'investor') {
                document.getElementById('investor-fields').style.display = 'block';
            } else if (role === 'akademisi') {
                document.getElementById('akademisi-fields').style.display = 'block';
            } else if (role === 'komunitas') {
                document.getElementById('komunitas-fields').style.display = 'block';
            }

        });

        document.getElementById('category').addEventListener('change', function() {
            var value = this.value;

            // Tampilkan field yang sesuai dengan kategori yang dipilih
            if (value === 'personal') {
                document.getElementById('personal-fields').style.display = 'block';
            } else if (value === 'perusahaan') {
                document.getElementById('perusahaan-fields').style.display = 'block';
            }
        });
    </script> --}}

    {{-- <script>
        document.getElementById('role').addEventListener('change', function() {
            var role = this.value;

            // Sembunyikan semua field role terlebih dahulu
            document.querySelectorAll('.role-fields').forEach(function(field) {
                field.style.display = 'none';
            });

            // Tampilkan field sesuai dengan role yang dipilih
            if (role) {
                document.getElementById(role + '-fields').style.display = 'block';
            }
        });

        document.getElementById('category').addEventListener('change', function() {
            var value = this.value;

            // Sembunyikan semua field kategori terlebih dahulu
            document.getElementById('personal-fields').style.display = 'none';
            document.getElementById('perusahaan-fields').style.display = 'none';

            // Tampilkan field sesuai dengan kategori yang dipilih
            if (value === 'personal') {
                document.getElementById('personal-fields').style.display = 'block';
            } else if (value === 'perusahaan') {
                document.getElementById('perusahaan-fields').style.display = 'block';
            }
        });
    </script> --}}

    {{-- <script>
    document.addEventListener('DOMContentLoaded', function() {
        // Ensure the elements exist before adding event listeners
        var roleElement = document.getElementById('role');
        var categoryElement = document.getElementById('category');
    
        if (roleElement) {
            roleElement.addEventListener('change', function() {
                var role = this.value;
    
                // Hide all role fields first
                document.querySelectorAll('.role-fields').forEach(function(field) {
                    field.style.display = 'none';
                });
    
                // Show fields corresponding to the selected role
                if (role) {
                    var roleFields = document.getElementById(role + '-fields');
                    if (roleFields) {
                        roleFields.style.display = 'block';
                    }
                }
            });
        }
    
        if (categoryElement) {
            categoryElement.addEventListener('change', function() {
                var value = this.value;
    
                // Hide all category fields first
                // document.getElementById('personal-fields').style.display = 'none';
                // document.getElementById('perusahaan-fields').style.display = 'none';
    
                // Show fields corresponding to the selected category
                if (value === 'personal') {
                    document.getElementById('personal-fields').style.display = 'block';
                } else if (value === 'perusahaan') {
                    document.getElementById('perusahaan-fields').style.display = 'block';
                }
            });
        }
    });
    


</script> --}}

    {{-- <script>
    document.getElementById('role').addEventListener('change', function() {
        var role = this.value;

        // Sembunyikan dan nonaktifkan semua role-fields
        document.querySelectorAll('.role-fields').forEach(function(field) {
            field.style.display = 'none';
            field.querySelectorAll('input, select, textarea').forEach(function(input) {
                input.disabled = true;
                input.required = false;
            });
        });

        // Tampilkan dan aktifkan field yang sesuai dengan role yang dipilih
        var activeFields = null;
        if (role === 'pemerintah') {
            activeFields = document.getElementById('pemerintah-fields');
        } else if (role === 'umkm') {
            activeFields = document.getElementById('umkm-fields');
        } else if (role === 'investor') {
            activeFields = document.getElementById('investor-fields');
        } else if (role === 'akademisi') {
            activeFields = document.getElementById('akademisi-fields');
        } else if (role === 'komunitas') {
            activeFields = document.getElementById('komunitas-fields');
        }

        if (activeFields) {
            activeFields.style.display = 'block';
            activeFields.querySelectorAll('input, select, textarea').forEach(function(input) {
                input.disabled = false;
                if (input.hasAttribute('data-required')) {
                    input.required = true;
                }
            });
        }
    });

    document.getElementById('category').addEventListener('change', function() {
        var value = this.value;

        // Sembunyikan dan nonaktifkan field 'personal' dan 'perusahaan'
        document.getElementById('personal-fields').style.display = 'none';
        document.getElementById('personal-fields').querySelectorAll('input, select, textarea').forEach(function(input) {
            input.disabled = true;
            input.required = false;
        });

        document.getElementById('perusahaan-fields').style.display = 'none';
        document.getElementById('perusahaan-fields').querySelectorAll('input, select, textarea').forEach(function(input) {
            input.disabled = true;
            input.required = false;
        });

        // Tampilkan dan aktifkan field yang sesuai dengan kategori yang dipilih
        if (value === 'personal') {
            var personalFields = document.getElementById('personal-fields');
            personalFields.style.display = 'block';
            personalFields.querySelectorAll('input, select, textarea').forEach(function(input) {
                input.disabled = false;
                if (input.hasAttribute('data-required')) {
                    input.required = true;
                }
            });
        } else if (value === 'perusahaan') {
            var perusahaanFields = document.getElementById('perusahaan-fields');
            perusahaanFields.style.display = 'block';
            perusahaanFields.querySelectorAll('input, select, textarea').forEach(function(input) {
                input.disabled = false;
                if (input.hasAttribute('data-required')) {
                    input.required = true;
                }
            });
        }
    });
</script> --}}

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const roleSelect = document.getElementById('role');
            const roleFields = document.querySelectorAll('.role-fields');
            const categorySelect = document.getElementById('category');
            const personalFields = document.getElementById('personal-fields');
            const perusahaanFields = document.getElementById('perusahaan-fields');

            // Handle role selection
            roleSelect.addEventListener('change', function() {
                roleFields.forEach(field => {
                    field.style.display = 'none';
                    field.querySelectorAll('input, select, textarea').forEach(input => {
                        input.disabled = true;
                        input.required = false;
                    });
                });

                const selectedRole = roleSelect.value;
                if (selectedRole) {
                    const activeFields = document.getElementById(selectedRole + '-fields');
                    if (activeFields) {
                        activeFields.style.display = 'block';
                        activeFields.querySelectorAll('input, select, textarea').forEach(input => {
                            input.disabled = false;
                            if (input.hasAttribute('data-required')) {
                                input.required = true;
                            }
                        });
                    }
                }
            });

            // Handle category selection for investors
            categorySelect.addEventListener('change', function() {
                const selectedCategory = categorySelect.value;
                personalFields.style.display = 'none';
                personalFields.querySelectorAll('input, select, textarea').forEach(input => {
                    input.disabled = true;
                    input.required = false;
                });

                perusahaanFields.style.display = 'none';
                perusahaanFields.querySelectorAll('input, select, textarea').forEach(input => {
                    input.disabled = true;
                    input.required = false;
                });

                if (selectedCategory === 'personal') {
                    personalFields.style.display = 'block';
                    personalFields.querySelectorAll('input, select, textarea').forEach(input => {
                        input.disabled = false;
                        if (input.hasAttribute('data-required')) {
                            input.required = true;
                        }
                    });
                } else if (selectedCategory === 'perusahaan') {
                    perusahaanFields.style.display = 'block';
                    perusahaanFields.querySelectorAll('input, select, textarea').forEach(input => {
                        input.disabled = false;
                        if (input.hasAttribute('data-required')) {
                            input.required = true;
                        }
                    });
                }
            });
        });
    </script>





</body>

</html>
