@extends('admin.layouts.master')

@section('title', 'إضافة عميل')

@section('content')
<div class="pc-container">
    <div class="pc-content">
        <div class="page-header d-flex justify-content-between align-items-center mb-3">
            <h4 class="mb-0">إضافة عميل جديد</h4>
            <a href="{{ route('admin.customers.index') }}" class="btn btn-light">رجوع</a>
        </div>

        <div class="card">
            <div class="card-body">
                <form action="{{ route('admin.customers.store') }}" method="POST">
                    @csrf
                    @include('admin.customers._form')

                    <div class="mt-4 text-end">
                        <button type="submit" class="btn btn-primary">حفظ العميل</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script>
(function () {
    const isUnderCompanyEl = document.getElementById('is_under_company');
    const companyWrapperEl = document.getElementById('company-wrapper');
    const companySelectEl = document.getElementById('company_id');
    const customerTypeEl = document.getElementById('customer_type');

    function toggleCompanySection() {
        const isUnderCompany = isUnderCompanyEl.value === '1';

        companyWrapperEl.style.display = isUnderCompany ? '' : 'none';

        if (!isUnderCompany) {
            companySelectEl.value = '';
            customerTypeEl.value = 'person';
        } else if (customerTypeEl.value === 'person') {
            customerTypeEl.value = 'company_contact';
        }
    }

    isUnderCompanyEl.addEventListener('change', toggleCompanySection);
    toggleCompanySection();
})();
</script>
@endsection