@extends('layouts.layoutMaster')

@section('title', __('Create Customer'))

@section('vendor-style')
  @vite(['resources/assets/vendor/libs/select2/select2.scss'])
@endsection

@section('vendor-script')
  @vite(['resources/assets/vendor/libs/select2/select2.js'])
@endsection

@section('content')
@php
  $breadcrumbs = [
    ['name' => __('CRM'), 'url' => route('crm.dashboard.index')],
    ['name' => __('Customers'), 'url' => route('customers.index')],
    ['name' => __('Create'), 'url' => '']
  ];
@endphp

<x-breadcrumb
  :title="__('Create Customer')"
  :breadcrumbs="$breadcrumbs"
  :homeUrl="route('dashboard')"
/>

<div class="row">
    <div class="col-md-12">
        <div class="card">
            <form id="customerForm" action="{{ route('customers.store') }}" method="POST">
                @csrf
                <div class="card-header">
                    <h5 class="mb-0">{{ __('Customer Information') }}</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <!-- Customer Name -->
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ __('Customer Name') }} *</label>
                            <input type="text" class="form-control" name="name" required maxlength="255" value="{{ old('name') }}">
                        </div>

                        <!-- Company Name -->
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ __('Company Name') }}</label>
                            <input type="text" class="form-control" name="company_name" maxlength="255" value="{{ old('company_name') }}">
                        </div>

                        <!-- Customer Type -->
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ __('Customer Type') }} *</label>
                            <select class="form-select" name="customer_type" required>
                                @foreach($customerTypes as $type)
                                    <option value="{{ $type->value }}" {{ old('customer_type') == $type->value ? 'selected' : '' }}>
                                        {{ $type->label() }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Customer Group -->
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ __('Customer Group') }}</label>
                            <select class="form-select" name="customer_group_id">
                                <option value="">{{ __('None') }}</option>
                                @foreach($customerGroups as $group)
                                    <option value="{{ $group->id }}" {{ old('customer_group_id') == $group->id ? 'selected' : '' }}>
                                        {{ $group->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Company (B2B) -->
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ __('Company') }} ({{ __('B2B') }})</label>
                            <select class="form-select" name="company_id">
                                <option value="">{{ __('None') }}</option>
                                @foreach($companies as $company)
                                    <option value="{{ $company->id }}" {{ old('company_id') == $company->id ? 'selected' : '' }}>
                                        {{ $company->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Email -->
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ __('Email') }}</label>
                            <input type="email" class="form-control" name="email" maxlength="255" value="{{ old('email') }}">
                        </div>

                        <!-- Phone -->
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ __('Phone') }}</label>
                            <input type="text" class="form-control" name="phone" maxlength="50" value="{{ old('phone') }}">
                        </div>

                        <!-- Mobile -->
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ __('Mobile') }}</label>
                            <input type="text" class="form-control" name="mobile" maxlength="50" value="{{ old('mobile') }}">
                        </div>

                        <!-- Website -->
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ __('Website') }}</label>
                            <input type="url" class="form-control" name="website" maxlength="255" value="{{ old('website') }}" placeholder="https://">
                        </div>

                        <!-- Tax ID -->
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ __('Tax ID') }}</label>
                            <input type="text" class="form-control" name="tax_id" maxlength="100" value="{{ old('tax_id') }}">
                        </div>

                        <!-- VAT Number -->
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ __('VAT Number') }}</label>
                            <input type="text" class="form-control" name="vat_number" maxlength="100" value="{{ old('vat_number') }}">
                        </div>
                    </div>
                </div>

                <div class="card-header border-top">
                    <h5 class="mb-0">{{ __('Financial Settings') }}</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <!-- Payment Terms -->
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ __('Payment Terms') }} *</label>
                            <select class="form-select" name="payment_terms" required>
                                <option value="cod" {{ old('payment_terms', 'cod') == 'cod' ? 'selected' : '' }}>{{ __('Cash on Delivery') }}</option>
                                <option value="prepaid" {{ old('payment_terms') == 'prepaid' ? 'selected' : '' }}>{{ __('Prepaid') }}</option>
                                <option value="net30" {{ old('payment_terms') == 'net30' ? 'selected' : '' }}>{{ __('Net 30 Days') }}</option>
                                <option value="net60" {{ old('payment_terms') == 'net60' ? 'selected' : '' }}>{{ __('Net 60 Days') }}</option>
                            </select>
                        </div>

                        <!-- Credit Limit -->
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ __('Credit Limit') }}</label>
                            <div class="input-group">
                                <span class="input-group-text">$</span>
                                <input type="number" class="form-control" name="credit_limit" value="{{ old('credit_limit', 0) }}" min="0" step="0.01">
                            </div>
                        </div>

                        <!-- Discount Percentage -->
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ __('Discount Percentage') }}</label>
                            <div class="input-group">
                                <input type="number" class="form-control" name="discount_percentage" value="{{ old('discount_percentage', 0) }}" min="0" max="100" step="0.01">
                                <span class="input-group-text">%</span>
                            </div>
                        </div>

                        <!-- Tax Exempt -->
                        <div class="col-md-6 mb-3">
                            <div class="form-check form-switch mt-4">
                                <input class="form-check-input" type="checkbox" id="tax_exempt" name="tax_exempt" value="1" {{ old('tax_exempt') ? 'checked' : '' }}>
                                <label class="form-check-label" for="tax_exempt">
                                    {{ __('Tax Exempt') }}
                                </label>
                            </div>
                        </div>

                        <!-- Notes -->
                        <div class="col-md-12 mb-3">
                            <label class="form-label">{{ __('Notes') }}</label>
                            <textarea class="form-control" name="notes" rows="3">{{ old('notes') }}</textarea>
                        </div>
                    </div>
                </div>

                <div class="card-footer">
                    <button type="submit" class="btn btn-primary">
                        <i class="bx bx-save me-1"></i> {{ __('Create Customer') }}
                    </button>
                    <a href="{{ route('customers.index') }}" class="btn btn-label-secondary">
                        <i class="bx bx-x me-1"></i> {{ __('Cancel') }}
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('page-script')
<script>
// Page data for JavaScript
const pageData = {
    labels: {
        errorOccurred: @json(__('An error occurred'))
    }
};
</script>
@vite(['Modules/CRMCore/resources/assets/js/customers-create.js'])
@endsection