{{-- resources/views/admin/modules/kua-customer/store.blade.php --}}
@extends('admin.layouts.main')

@php
    // Derive edit state & id from the controller-provided $customer
    $isEdit   = isset($customer) && !empty($customer->id);
    $recordId = $customer->id ?? null;
@endphp

@section('title')
    {{ $isEdit ? 'Edit Kua Customer' : 'Add Kua Customer' }}
@endsection

@section('content')
<main>
    <div class="two-col">
        @include("admin.common.sidebar")

        <div class="right-sec" id="kuaCustomerFormApp">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">Directory</a></li>
                    <li class="breadcrumb-item">
                        <a href="{{ route('admin.kua-customers.index', ['panel' => Session::get('panel')]) }}">Kua Customers</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        @{{ isEdit ? 'Edit Customer' : 'Add Customer' }}
                    </li>
                </ol>
            </nav>

            <div class="form-sec">
                <div class="container">
                    <div class="row">
                        <div class="col-xl-8 offset-xl-2 col-lg-10 offset-lg-1">
                            <div class="step-box">
                                <form
                                    id="storeClientUserForm"
                                    method="POST"
                                    enctype="multipart/form-data"
                                    :action="submitUrl"   {{-- set from window.KUA_FORM_PROPS below --}}
                                    @submit.prevent="submit"
                                >
                                    <div class="form-body">
                                        @csrf
                                        <h2 class="form-sec-title">Edit Customer</h2>
                                        <input v-if="isEdit" type="hidden" name="id" value="{{ $recordId }}">
                                        
                                        {{-- Client --}}
                                        <!-- <div class="form-group">
                                            <label for="client_id" class="required-label">Client</label>
                                            <select v-model="form.client_id" id="client_id" class="form-control" name="client_id" required>
                                                <option value="">Select Client</option>
                                                @foreach($clients as $client)
                                                    <option value="{{ $client->id }}">{{ $client->name }}</option>
                                                @endforeach
                                            </select>
                                        </div> -->

                                        {{-- Product --}}
                                        <!-- <div class="form-group">
                                            <label for="product_id" class="required-label">Product</label>
                                            <select v-model="form.product_id" id="product_id" class="form-control" name="product_id" required>
                                                <option value="">Select Product</option>
                                                {{-- @foreach($products as $p) --}}
                                                    <option value="{{ $products->id }}">{{ $products->product_name }}</option>
                                                {{-- @endforeach --}}
                                            </select>
                                        </div> -->

                                        {{-- Customer Type --}}
                                        <div class="form-group">
                                            <label class="required-label">Customer Type</label>
                                            <div class="radio-as-tab">
                                                <input type="radio" id="customer_type_individual" value="individual" v-model="form.customer_type" name="customer_type">
                                                <label for="customer_type_individual">Individual</label>

                                                <input type="radio" id="customer_type_business" value="business" v-model="form.customer_type" name="customer_type">
                                                <label for="customer_type_business">Business</label>
                                            </div>
                                        </div>

                                        {{-- Individual Fields --}}
                                        <div id="individual-fields" v-show="isIndividual">
                                            <h5 class="mt-3 pb-2 border-bottom">Individual Customer Details</h5>

                                            <div class="form-group">
                                                <label for="full_name" class="required-label">Full Name</label>
                                                <input type="text" id="full_name" class="form-control"
                                                    v-model="form.full_name" name="full_name" :required="isIndividual">
                                            </div>

                                            <div class="form-group">
                                                <label for="phone_number" class="required-label">Phone Number</label>
                                                <input type="text" id="phone_number" class="form-control"
                                                    v-model="form.phone_number" name="phone_number" :required="isIndividual">
                                            </div>

                                            <div class="form-group">
                                                <label for="email">Email</label>
                                                <input type="email" id="email" class="form-control" v-model="form.email" name="email">
                                            </div>

                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label for="national_id_type" class="required-label mt-3">National ID Type</label>
                                                    <select id="national_id_type" class="form-control"
                                                            v-model="form.national_id_type" name="national_id_type" :required="isIndividual">
                                                        <option value="">Select</option>
                                                        <option v-for="t in lists.nationalIdTypes" :key="t.id" :value="t.id">
                                                            @{{ t.title || t.name || t.id }}
                                                        </option>
                                                    </select>
                                                </div>

                                                <div class="col-md-6">
                                                    <label for="national_id_number" class="mt-3">National ID Number</label>
                                                    <input type="text" id="national_id_number" class="form-control"
                                                        v-model="form.national_id_number" name="national_id_number">
                                                </div>

                                                <div class="col-md-4">
                                                    <label class="mt-3" for="gender">Gender</label>
                                                    <select id="gender" class="form-control" v-model="form.gender" name="gender">
                                                        <option value="">Select</option>
                                                        <option v-for="g in lists.genders" :key="g" :value="g">@{{ g }}</option>
                                                    </select>
                                                </div>

                                                <div class="col-md-4">
                                                    <label class="mt-3" for="age_group">Age Group</label>
                                                    <select id="age_group" class="form-control" v-model="form.age_group" name="age_group">
                                                        <option value="">Select</option>
                                                        <option v-for="a in lists.ageGroups" :key="a" :value="a">@{{ a }}</option>
                                                    </select>
                                                </div>

                                                <div class="col-md-4">
                                                    <label class="mt-3" for="occupation">Occupation</label>
                                                    <input type="text" id="occupation" class="form-control" v-model="form.occupation" name="occupation">
                                                </div>
                                            </div>

                                            <div class="form-group mt-3">
                                                <label for="physical_address">Physical Address</label>
                                                <input type="text" id="physical_address" class="form-control" v-model="form.physical_address" name="physical_address">
                                            </div>

                                            <div class="form-group">
                                                <label for="geolocation" class="mt-3">Geolocation Pin</label>
                                                <input type="text" id="geolocation" class="form-control" v-model="form.geolocation" name="geolocation">
                                            </div>

                                            {{-- ID Document upload --}}
                                            <div class="form-group mt-3">
                                                <label class="mb-2" for="id_document">Upload ID Document</label>
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <label class="file-upload-label mb-0" for="id_document" style="cursor:pointer;">
                                                        <img src="{{ asset('/img/file-upload.svg') }}" alt="Upload Icon"> Upload
                                                    </label>
                                                    <input type="file" id="id_document" name="id_document" class="d-none file-input"
                                                        accept=".jpg,.jpeg,.png,.pdf" @change="onFileChange($event, 'id_document')">
                                                </div>
                                                <div id="id_document-file-info"
                                                    class="d-flex justify-content-between align-items-center"
                                                    :class="{'d-none': !fileNames.id_document}">
                                                    <span id="id_document-file-name" class="semibold">@{{ fileNames.id_document }}</span>
                                                    <input type="hidden" name="delete_id_document" id="delete_id_document"
                                                        :value="deleteFlags.id_document ? 1 : 0">
                                                </div>
                                                <div v-if="errors.id_document" class="text-danger">@{{ errors.id_document }}</div>
                                            </div>
                                        </div>

                                        {{-- Business Fields --}}
                                        <div id="business-fields" v-show="isBusiness">
                                            <h5 class="mt-3 pb-2 border-bottom">Business Customer Details</h5>

                                            <div class="form-group">
                                                <label for="registered_company_name" class="required-label">Registered Company Name</label>
                                                <input type="text" id="registered_company_name" class="form-control"
                                                    v-model="form.registered_company_name" name="registered_company_name" :required="isBusiness">
                                            </div>

                                            <div class="form-group">
                                                <label for="trading_name" class="mt-3">Trading Name</label>
                                                <input type="text" id="trading_name" class="form-control" v-model="form.trading_name" name="trading_name">
                                            </div>

                                            <div class="form-group">
                                                <label for="business_registration_number" class="mt-3">Business Registration Number</label>
                                                <input type="text" id="business_registration_number" class="form-control"
                                                    v-model="form.business_registration_number" name="business_registration_number">
                                            </div>

                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label for="business_type" class="mt-3">Business Type</label>
                                                    <select id="business_type" class="form-control" v-model="form.business_type" name="business_type">
                                                        <option value="">Select</option>
                                                        <option v-for="bt in lists.businessTypes" :key="bt.id" :value="bt.id">@{{ bt.title || bt.name }}</option>
                                                    </select>
                                                </div>

                                                <div class="col-md-6">
                                                    <label for="industry_sector" class="mt-3">Industry Sector</label>
                                                    <select id="industry_sector" class="form-control" v-model="form.industry_sector" name="industry_sector">
                                                        <option value="">Select</option>
                                                        <option v-for="isect in lists.industrySectors" :key="isect.id" :value="isect.id">@{{ isect.name || isect.title }}</option>
                                                    </select>
                                                </div>

                                                <div class="col-md-6">
                                                    <label for="business_segment" class="mt-3">Business Segment</label>
                                                    <select id="business_segment" class="form-control" v-model="form.business_segment" name="business_segment">
                                                        <option value="">Select</option>
                                                        <option v-for="seg in lists.businessSegments" :key="seg.id" :value="seg.id">@{{ seg.title || seg.name }}</option>
                                                    </select>
                                                </div>

                                                <div class="col-md-6">
                                                    <label for="number_of_employees" class="mt-3">Number of Employees</label>
                                                    <select id="number_of_employees" class="form-control" v-model="form.number_of_employees" name="number_of_employees">
                                                        <option value="">Select</option>
                                                        <option v-for="opt in lists.numberOfEmployees" :key="opt" :value="opt">@{{ opt }}</option>
                                                    </select>
                                                </div>

                                                <div class="col-md-6">
                                                    <label for="monthly_revenue" class="mt-3">Monthly Revenue</label>
                                                    <select id="monthly_revenue" class="form-control" v-model="form.monthly_revenue" name="monthly_revenue">
                                                        <option value="">Select</option>
                                                        <option v-for="opt in lists.monthlyRevenue" :key="opt" :value="opt">@{{ opt }}</option>
                                                    </select>
                                                </div>

                                                <div class="col-md-6">
                                                    <label for="business_age" class="mt-3">Business Age</label>
                                                    <select id="business_age" class="form-control" v-model="form.business_age" name="business_age">
                                                        <option value="">Select</option>
                                                        <option v-for="opt in lists.businessAge" :key="opt" :value="opt">@{{ opt }}</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="form-group mt-3">
                                                <label class="d-block">Is the business part of a group/corporation?</label>
                                                <div class="radio-as-tab">
                                                    <input type="radio" id="part_of_group_yes" :value="1" v-model="form.part_of_group" name="part_of_group">
                                                    <label for="part_of_group_yes">Yes</label>
                                                    <input type="radio" id="part_of_group_no" :value="0" v-model="form.part_of_group" name="part_of_group">
                                                    <label for="part_of_group_no">No</label>
                                                </div>
                                            </div>

                                            <div class="form-group mt-3">
                                                <label class="d-block">Does the business have multiple branches?</label>
                                                <div class="radio-as-tab">
                                                    <input type="radio" id="multiple_branches_yes" :value="1" v-model="form.multiple_branches" name="multiple_branches">
                                                    <label for="multiple_branches_yes">Yes</label>
                                                    <input type="radio" id="multiple_branches_no" :value="0" v-model="form.multiple_branches" name="multiple_branches">
                                                    <label for="multiple_branches_no">No</label>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label class="mt-3" for="number_of_outlets">Number of active Outlets/Branches</label>
                                                    <input type="text" id="number_of_outlets" class="form-control" v-model="form.number_of_outlets" name="number_of_outlets">
                                                </div>

                                                <div class="col-md-6">
                                                    <label class="mt-3" for="region_id">Regions of operation</label>
                                                    <select id="region_id" class="form-control" v-model="form.region_id" name="region_id">
                                                        <option value="">Select</option>
                                                        <option v-for="r in lists.regions" :key="r.id" :value="r.id">@{{ r.region_name || r.title }}</option>
                                                    </select>
                                                </div>

                                                <div class="col-md-6">
                                                    <label class="mt-3" for="registered_address">Registered Physical Address</label>
                                                    <input type="text" id="registered_address" class="form-control" v-model="form.registered_address" name="registered_address">
                                                </div>

                                                <div class="col-md-6">
                                                    <label class="mt-3" for="business_geolocation">Business Geolocation</label>
                                                    <input type="text" id="business_geolocation" class="form-control" v-model="form.business_geolocation" name="business_geolocation">
                                                </div>
                                            </div>

                                            {{-- Business document uploads (names must match controller expectations) --}}
                                            @php
                                                $uploads = [
                                                    ['certificate_incorporation', $customer->certificate_incorporation ?? null],
                                                    ['business_license',          $customer->business_license ?? null],
                                                    ['company_profile',           $customer->company_profile ?? null],
                                                ];
                                            @endphp
                                            @foreach ($uploads as [$name, $existingFile])
                                                @php $fileId = str_replace('_', '-', $name); @endphp
                                                <div class="form-group mt-3 file-upload-container">
                                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                                        <label class="mb-0" for="{{ $name }}">Upload {{ ucwords(str_replace('_',' ', $name)) }}</label>
                                                        <label class="file-upload-label mb-0" for="{{ $name }}" style="cursor:pointer;">
                                                            <img src="{{ asset('/img/file-upload.svg') }}" alt="Upload Icon"> Upload
                                                        </label>
                                                        <input type="file"
                                                            id="{{ $name }}"
                                                            name="{{ $name }}"
                                                            class="d-none file-input"
                                                            accept="application/pdf"
                                                            @change="onFileChange($event, '{{ $name }}')">
                                                    </div>
                                                    <div id="{{ $fileId }}-file-info"
                                                        class="d-flex justify-content-between align-items-center"
                                                        :class="{'d-none': !fileNames['{{ $name }}']}">
                                                        <span id="{{ $fileId }}-file-name" class="semibold" v-text="fileNames['{{ $name }}']"></span>
                                                        <input type="hidden" name="delete_{{ $name }}" id="delete_{{ $name }}"
                                                            :value="deleteFlags['{{ $name }}'] ? 1 : 0">
                                                    </div>
                                                    <div v-if="errors['{{ $name }}']" class="text-danger" v-text="errors['{{ $name }}']"></div>
                                                </div>
                                            @endforeach
                                        </div>

                                        {{-- Submit + Cancel --}}
                                        <div class="mt-4 pt-4 text-end d-flex justify-content-between border-top">
                                            <a href="{{ route('admin.kua-customers.index', ['panel' => Session::get('panel')]) }}" class="btn btn-secondary">Cancel</a>
                                            <button type="submit" class="btn btn-primary" :disabled="submitting">
                                                @{{ submitting ? 'Please wait…' : (isEdit ? 'Update' : 'Save') }}
                                            </button>
                                        </div>
                                    </div>
                                </form>

                                <div v-if="errors._" class="alert alert-danger mt-3">
                                    @{{ errors._ }}
                                </div>
                            </div> {{-- step-box --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> {{-- two-col --}}
</main>
@endsection

@push('pageJs')
<script>
  // Compute the correct submit URL on the server side so Vue can bind to it
  window.KUA_FORM_PROPS = {
    isEdit: @json($isEdit),
    // Use update route when editing, store route when creating
    submitUrl: "{{route('admin.kua-customers.update', ['panel' => Session::get('panel'), 'id' => $recordId])}}",
    indexUrl: "{{route('admin.kua-customers.index', ['panel' => Session::get('panel')])}}",
    csrf: @json(csrf_token()),

    // Preload form with the $customer object from controller (createAndEdit already normalizes when from lead)
    initial: @json($customer ?? new \stdClass()),
    old: @json(old()),

    // Lists exactly as provided by the controller
    nationalIdTypes: @json($nationalIdTypes ?? []),
    businessTypes: @json($businessTypes ?? []),
    industrySectors: @json($industrySectors ?? []),
    businessSegments: @json($businessSegments ?? []),
    regions: @json($regions ?? []),

    // (optional) if your Vue wants raw client/product lists too
    clients: @json($clients ?? []),
    products: @json($products ?? []),
  };
  console.log(window.KUA_FORM_PROPS)
</script>
<script src="{{ asset('/js/admin/kua_customer.js') }}"></script>
@endpush