@extends('layouts.website-main-menu')

@section('content')
    <style>
        label {
            font-weight: bolder;
        }
    </style>
    <div style="background-color: #838383a1;" class="container">
        <br>
        <h1>Register New Company</h1>
        <br>
        <form action="{{ route('companies.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-6">
                    <div class="form-group">
                        <label for="name">Company Name</label>
                        <input type="text" name="name" id="name" class="form-control" required>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6">
                    <div class="form-group">
                        <label for="company_type">Company Type</label>
                        <select name="company_type" id="company_type" class="form-control" required>
                            <option value="">Please Select</option>
                            <option value="Private Company">Private Company</option>
                            <option value="Public Company">Public Company</option>
                            <option value="State-Owned Company">State-Owned Company</option>
                            <option value="Non-Profit Company">Non-Profit Company</option>
                            <option value="Personal Liability Company">Personal Liability Company</option>
                            <option value="Sole proprietorship">Sole proprietorship</option>
                            <option value="Partnership">Partnership</option>
                            <option value="Other">Other</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-6">
                    <div class="form-group">
                        <label for="registration_number">Registration Number</label>
                        <input type="text" name="registration_number" id="registration_number" class="form-control" required>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6">
                    <div class="form-group">
                        <label for="sector">Sector</label>
                        <input type="text" name="sector" id="sector" class="form-control" required>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-6">
                    <div class="form-group">
                        <label for="VAT_number">VAT Number</label>
                        <input type="text" name="VAT_number" id="VAT_number" class="form-control" required>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6">
                    <div class="form-group">
                        <label for="CSD_number">CSD Number</label>
                        <input type="text" name="CSD_number" id="CSD_number" class="form-control" required>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-6">
                    <div class="form-group">
                        <label for="BBBEE_document">BBBEE Document (PDF)</label>
                        <input type="file" name="BBBEE_document" id="BBBEE_document" class="form-control" required>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6">
                    <div class="form-group">
                        <label for="BBBEE_expiry">BBBEE Expiry Date</label>
                        <input type="date" name="BBBEE_expiry" id="BBBEE_expiry" class="form-control" required>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-6">
                    <div class="form-group">
                        <label for="tax_certificate">Tax Certificate (PDF)</label>
                        <input type="file" name="tax_certificate" id="tax_certificate" class="form-control" required>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6">
                    <div class="form-group">
                        <label for="tax_certificate_expiry">Tax Certificate Expiry Date</label>
                        <input type="date" name="tax_certificate_expiry" id="tax_certificate_expiry" class="form-control" required>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label for="other_documents">Other Documents (PDF)</label>
                <input type="file" name="other_documents[]" id="other_documents" class="form-control" multiple onchange="previewFiles()">
                <ul id="fileList"></ul>
            </div>
            <button type="submit" class="btn credit-btn">Register Company</button><br><br>
        </form>
    </div>

    <script>
        let selectedFiles = [];

        function previewFiles() {
            var input = document.getElementById('other_documents');
            var fileList = document.getElementById('fileList');

            for (let i = 0; i < input.files.length; i++) {
                selectedFiles.push(input.files[i]);
            }

            fileList.innerHTML = '';
            selectedFiles.forEach((file, index) => {
                var li = document.createElement('li');
                li.textContent = file.name;
                fileList.appendChild(li);
            });

            updateFileInput();
        }

        function updateFileInput() {
            var input = document.getElementById('other_documents');
            var dataTransfer = new DataTransfer();

            selectedFiles.forEach(file => {
                dataTransfer.items.add(file);
            });

            input.files = dataTransfer.files;
        }
    </script>
@endsection