<div class="modal fade" id="createClientModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold" id="clientModalTitle">Add New Client</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            
            <form id="createClientForm" action="{{ route('clients.store') }}" method="POST">
                @csrf
                <div class="modal-body p-4">
                    <input type="hidden" id="clientId" name="id">
                    
                    <div id="clientModalAlert"></div>
                    
                    <h6 class="fw-bold mb-3 text-secondary text-uppercase" style="font-size: 0.75rem;">Company Details</h6>
                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Company Name *</label>
                            <input type="text" class="form-control" id="clientName" name="name" required placeholder="e.g. Kasapreko Distilleries">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Location / Country *</label>
                            <!-- Changed name from 'location' to 'country' -->
                            <input type="text" class="form-control" id="country" name="country" required placeholder="e.g. Ghana">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Company Type *</label>
                            <select class="form-select" id="companyType" name="company_type" required>
                                <option value="" selected disabled>--Select--</option>
                                <option value="Aggregator/Supplier">Aggregator/Supplier</option>
                                <option value="Enterprise">Enterprise</option>
                                <option value="Hybrid">Hybrid</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Industry Type *</label>
                            <!-- Changed name from 'industry_type' to 'industry' -->
                            <select class="form-select" id="industryType" name="industry" required>
                                <option value="" selected disabled>--Select--</option>
                                <option value="Aggregator SMS/USSD/Voice">Aggregator SMS/USSD/Voice</option>
                                <option value="Delivery Service">Delivery Service</option>
                                <option value="Education">Education</option>
                                <option value="Financial Institution">Financial Institution</option>
                                <option value="Games & Gambling">Games & Gambling</option>
                                <option value="General">General</option>
                                <option value="Government">Government</option>
                                <option value="Health">Health</option>
                                <option value="Hospitality">Hospitality</option>
                                <option value="Mobile Network Operator">Mobile Network Operator</option>
                                <option value="NGO">NGO</option>
                            </select>
                        </div>
                    </div>

                    <h6 class="fw-bold mb-3 text-secondary text-uppercase" style="font-size: 0.75rem;">Primary Contact</h6>
                    <div class="row g-3 mb-4">
                        <div class="col-md-4">
                            <label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Full Name</label>
                            <!-- Changed name from 'contact_name' to 'contact_person' -->
                            <input type="text" class="form-control" id="clientContact" name="contact_person" placeholder="Contact person">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Email Address *</label>
                            <input type="email" class="form-control" id="clientEmail" name="email" required placeholder="name@company.com">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Phone Number</label>
                            <input type="text" class="form-control" id="clientPhone" name="phone" placeholder="+233 ...">
                        </div>
                    </div>

                    <h6 class="fw-bold mb-3 text-secondary text-uppercase" style="font-size: 0.75rem;">Service & Billing Information</h6>
                    <div class="row g-3">
                        <div class="col-md-12">
                            <label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Primary Services *</label>
                            <select class="form-select" id="clientService" name="services[]" multiple required style="width: 100%;">
                                @foreach($service_types as $row)
                                <option value="{{ $row }}">{{ $row }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Billing Type *</label>
                            <!-- Changed name from 'billing_type' to 'payment_mode' -->
                            <select class="form-select" id="clientBilling" name="payment_mode" required>
                                <option value="" selected disabled>--Select--</option>
                                <option value="Postpaid">Postpaid (Invoice)</option>
                                <option value="Prepaid">Prepaid (Balance)</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Account Status *</label>
                            <select class="form-select" id="clientStatus" name="status" required>
                                <option value="" selected disabled>--Select--</option>
                                <option value="Live">Active / Live</option>
                                <option value="Prospective">Prospective</option>
                                <option value="Cancelled">Cancelled</option>
                            </select>
                        </div>
                        
                        <!-- Added Missing Required Fields for the Controller -->
                        <div class="col-md-6 mt-3">
                            <label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Currency *</label>
                            <select class="form-select" id="clientCurrency" name="currency" required>
                                <option value="" selected disabled>--Select--</option>
                                <option value="USD">USD</option>
                                <option value="EUR">EUR</option>
                            </select>
                        </div>
                        <div class="col-md-6 mt-3">
                            <label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Account Manager *</label>
                            <select class="form-select" id="authUserId" name="account_manager" required>
                                <option value="" selected disabled>--Select--</option>
                                <option value="{{ Auth()->user()->id }}">Assign to Me</option>
                                @foreach($staff_members as $id => $name)
                                <option value="{{ $id }}">{{ $name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn text-white fw-bold px-4" style="background-color: #5c4df0;" id="btnSubmitClient">
                        Save Client
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>