@extends('admin.layouts.app')

@section('content')

@push('styles')
<link rel="stylesheet" href="{{ asset('admin/css/clients-add.css') }}">
@endpush

<div class="admin-client-create">

    <div class="admin-client-create-container">

        {{-- Header --}}
        <div class="client-create-header">

            <div class="client-create-header-left">

                <h1>
                    Add Client
                </h1>

                <p>
                    Create a new client account with personal, KYC, bank and employment details.
                </p>

            </div>

            <a
                href="{{ route('admin.clients') }}"
                class="back-client-btn"
            >
                ← Back to Clients
            </a>

        </div>


        {{-- Success --}}
        @if(session('success'))

            <div class="client-alert client-alert-success">
                {{ session('success') }}
            </div>

        @endif


        {{-- Error --}}
        @if(session('error'))

            <div class="client-alert client-alert-error">
                {{ session('error') }}
            </div>

        @endif


        {{-- Validation Errors --}}
        @if($errors->any())

            <div class="client-alert client-alert-error">
                Please check the highlighted fields and correct the errors.
            </div>

        @endif


        <form
            method="POST"
            action="{{ route('admin.clients.store') }}"
            enctype="multipart/form-data"
            id="adminClientCreateForm"
        >

            @csrf


            {{-- ==========================================================
                 ACCOUNT DETAILS
            =========================================================== --}}

            <div class="client-form-card">

                <div class="client-form-section">

                    <div class="client-section-header">

                        <div class="client-section-icon">
                            01
                        </div>

                        <div class="client-section-title">

                            <h2>
                                Account Details
                            </h2>

                            <p>
                                Basic login and contact information
                            </p>

                        </div>

                    </div>


                    <div class="client-form-grid">

                        {{-- Name --}}
                        <div class="client-field">

                            <label for="name">
                                Name <span class="required">*</span>
                            </label>

                            <input
                                type="text"
                                id="name"
                                name="name"
                                class="client-input @error('name') is-invalid @enderror"
                                value="{{ old('name') }}"
                                maxlength="255"
                                autocomplete="name"
                                required
                            >

                            @error('name')
                                <div class="field-error">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>


                        {{-- Email --}}
                        <div class="client-field">

                            <label for="email">
                                Email <span class="required">*</span>
                            </label>

                            <input
                                type="email"
                                id="email"
                                name="email"
                                class="client-input @error('email') is-invalid @enderror"
                                value="{{ old('email') }}"
                                maxlength="255"
                                autocomplete="email"
                                required
                            >

                            @error('email')
                                <div class="field-error">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>


                        {{-- Mobile --}}
                        <div class="client-field">

                            <label for="mobile">
                                Mobile Number <span class="required">*</span>
                            </label>

                            <input
                                type="text"
                                id="mobile"
                                name="mobile"
                                class="client-input @error('mobile') is-invalid @enderror"
                                value="{{ old('mobile') }}"
                                maxlength="20"
                                autocomplete="tel"
                                inputmode="tel"
                                required
                            >

                            @error('mobile')
                                <div class="field-error">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>


                        {{-- Password --}}
                        <div class="client-field">

                            <label for="password">
                                Password <span class="required">*</span>
                            </label>

                            <div class="password-wrap">

                                <input
                                    type="password"
                                    id="password"
                                    name="password"
                                    class="client-input @error('password') is-invalid @enderror"
                                    minlength="8"
                                    autocomplete="new-password"
                                    required
                                >

                                <button
                                    type="button"
                                    class="password-toggle"
                                    onclick="togglePassword('password', this)"
                                >
                                    Show
                                </button>

                            </div>

                            <div class="field-help">
                                Minimum 8 characters.
                            </div>

                            @error('password')
                                <div class="field-error">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>


                        {{-- Confirm Password --}}
                        <div class="client-field">

                            <label for="password_confirmation">
                                Confirm Password <span class="required">*</span>
                            </label>

                            <div class="password-wrap">

                                <input
                                    type="password"
                                    id="password_confirmation"
                                    name="password_confirmation"
                                    class="client-input"
                                    minlength="8"
                                    autocomplete="new-password"
                                    required
                                >

                                <button
                                    type="button"
                                    class="password-toggle"
                                    onclick="togglePassword('password_confirmation', this)"
                                >
                                    Show
                                </button>

                            </div>

                        </div>

                    </div>

                </div>


                {{-- ======================================================
                     PERSONAL DETAILS
                ======================================================= --}}

                <div class="client-form-section">

                    <div class="client-section-header">

                        <div class="client-section-icon">
                            02
                        </div>

                        <div class="client-section-title">

                            <h2>
                                Personal Details
                            </h2>

                            <p>
                                Client's personal and address information
                            </p>

                        </div>

                    </div>


                    <div class="client-form-grid">


                        {{-- Full Name --}}
                        <div class="client-field">

                            <label for="full_name">
                                Full Name <span class="required">*</span>
                            </label>

                            <input
                                type="text"
                                id="full_name"
                                name="full_name"
                                class="client-input @error('full_name') is-invalid @enderror"
                                value="{{ old('full_name') }}"
                                maxlength="255"
                                required
                            >

                            @error('full_name')
                                <div class="field-error">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>


                        {{-- Date of Birth --}}
                        <div class="client-field">

                            <label for="date_of_birth">
                                Date of Birth <span class="required">*</span>
                            </label>

                            <input
                                type="date"
                                id="date_of_birth"
                                name="date_of_birth"
                                class="client-input @error('date_of_birth') is-invalid @enderror"
                                value="{{ old('date_of_birth') }}"
                                max="{{ now()->subYears(18)->format('Y-m-d') }}"
                                required
                            >

                            <div class="field-help">
                                Client must be 18 years or older.
                            </div>

                            @error('date_of_birth')
                                <div class="field-error">
                                    {{ $message }}
                                </div>
                            @enderror

                            <div
                                class="field-error"
                                id="dobAgeError"
                                style="display:none;"
                            >
                                Client must be 18 years or older.
                            </div>

                        </div>


                        {{-- Gender --}}
                        <div class="client-field">

                            <label for="gender">
                                Gender <span class="required">*</span>
                            </label>

                            <select
                                id="gender"
                                name="gender"
                                class="client-select @error('gender') is-invalid @enderror"
                                required
                            >

                                <option value="">
                                    Select gender
                                </option>

                                <option
                                    value="Male"
                                    {{ old('gender') === 'Male' ? 'selected' : '' }}
                                >
                                    Male
                                </option>

                                <option
                                    value="Female"
                                    {{ old('gender') === 'Female' ? 'selected' : '' }}
                                >
                                    Female
                                </option>

                                <option
                                    value="Other"
                                    {{ old('gender') === 'Other' ? 'selected' : '' }}
                                >
                                    Other
                                </option>

                            </select>

                            @error('gender')
                                <div class="field-error">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>


                        {{-- Address --}}
                        <div class="client-field full">

                            <label for="address">
                                Address <span class="required">*</span>
                            </label>

                            <textarea
                                id="address"
                                name="address"
                                class="client-textarea @error('address') is-invalid @enderror"
                                maxlength="500"
                                required
                            >{{ old('address') }}</textarea>

                            @error('address')
                                <div class="field-error">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>


                        {{-- City --}}
                        <div class="client-field">

                            <label for="city">
                                City <span class="required">*</span>
                            </label>

                            <input
                                type="text"
                                id="city"
                                name="city"
                                class="client-input @error('city') is-invalid @enderror"
                                value="{{ old('city') }}"
                                maxlength="100"
                                required
                            >

                            @error('city')
                                <div class="field-error">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>


                        {{-- State --}}
                        <div class="client-field">

                            <label for="state">
                                State <span class="required">*</span>
                            </label>

                            <input
                                type="text"
                                id="state"
                                name="state"
                                class="client-input @error('state') is-invalid @enderror"
                                value="{{ old('state') }}"
                                maxlength="100"
                                required
                            >

                            @error('state')
                                <div class="field-error">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>


                        {{-- Pincode --}}
                        <div class="client-field">

                            <label for="pincode">
                                Pincode <span class="required">*</span>
                            </label>

                            <input
                                type="text"
                                id="pincode"
                                name="pincode"
                                class="client-input @error('pincode') is-invalid @enderror"
                                value="{{ old('pincode') }}"
                                maxlength="6"
                                minlength="6"
                                inputmode="numeric"
                                required
                            >

                            @error('pincode')
                                <div class="field-error">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>

                    </div>

                </div>


                {{-- ======================================================
                     KYC DETAILS
                ======================================================= --}}

                <div class="client-form-section">

                    <div class="client-section-header">

                        <div class="client-section-icon">
                            03
                        </div>

                        <div class="client-section-title">

                            <h2>
                                KYC Details
                            </h2>

                            <p>
                                Aadhaar, PAN and supporting documents
                            </p>

                        </div>

                    </div>


                    <div class="section-note">

                        Aadhaar and PAN numbers are securely encrypted before being stored.
                        Documents are optional and can be uploaded later if required.

                    </div>


                    <div class="client-form-grid">


                        {{-- Aadhaar --}}
                        <div class="client-field">

                            <label for="aadhaar_number">
                                Aadhaar Number <span class="required">*</span>
                            </label>

                            <input
                                type="text"
                                id="aadhaar_number"
                                name="aadhaar_number"
                                class="client-input @error('aadhaar_number') is-invalid @enderror"
                                value="{{ old('aadhaar_number') }}"
                                maxlength="12"
                                minlength="12"
                                inputmode="numeric"
                                autocomplete="off"
                                required
                            >

                            @error('aadhaar_number')
                                <div class="field-error">
                                    {{ $message }}
                                </div>
                            @enderror

                            <div class="field-help">
                                Enter 12 digit Aadhaar number.
                            </div>

                        </div>


                        {{-- PAN --}}
                        <div class="client-field">

                            <label for="pan_number">
                                PAN Number <span class="required">*</span>
                            </label>

                            <input
                                type="text"
                                id="pan_number"
                                name="pan_number"
                                class="client-input @error('pan_number') is-invalid @enderror"
                                value="{{ old('pan_number') }}"
                                maxlength="10"
                                minlength="10"
                                autocomplete="off"
                                style="text-transform:uppercase"
                                required
                            >

                            @error('pan_number')
                                <div class="field-error">
                                    {{ $message }}
                                </div>
                            @enderror

                            <div class="field-help">
                                Example: ABCDE1234F
                            </div>

                        </div>


                        {{-- Aadhaar Document --}}
                        <div class="client-field">

                            <label for="aadhaar_document">
                                Aadhaar Document
                            </label>

                            <input
                                type="file"
                                id="aadhaar_document"
                                name="aadhaar_document"
                                class="file-input @error('aadhaar_document') is-invalid @enderror"
                                accept=".jpg,.jpeg,.png,.pdf"
                            >

                            @error('aadhaar_document')
                                <div class="field-error">
                                    {{ $message }}
                                </div>
                            @enderror

                            <div class="field-help">
                                JPG, JPEG, PNG or PDF. Maximum 5 MB.
                            </div>

                        </div>


                        {{-- PAN Document --}}
                        <div class="client-field">

                            <label for="pan_document">
                                PAN Document
                            </label>

                            <input
                                type="file"
                                id="pan_document"
                                name="pan_document"
                                class="file-input @error('pan_document') is-invalid @enderror"
                                accept=".jpg,.jpeg,.png,.pdf"
                            >

                            @error('pan_document')
                                <div class="field-error">
                                    {{ $message }}
                                </div>
                            @enderror

                            <div class="field-help">
                                JPG, JPEG, PNG or PDF. Maximum 5 MB.
                            </div>

                        </div>

                    </div>

                </div>


                {{-- ======================================================
                     BANK DETAILS
                ======================================================= --}}

                <div class="client-form-section">

                    <div class="client-section-header">

                        <div class="client-section-icon">
                            04
                        </div>

                        <div class="client-section-title">

                            <h2>
                                Bank Details
                            </h2>

                            <p>
                                Client's bank account information
                            </p>

                        </div>

                    </div>


                    <div class="section-note">

                        Enter the bank account details used for EMI and financial transactions.

                    </div>


                    <div class="client-form-grid">


                        {{-- Bank Name --}}
                        <div class="client-field">

                            <label for="bank_name">
                                Bank Name <span class="required">*</span>
                            </label>

                            <input
                                type="text"
                                id="bank_name"
                                name="bank_name"
                                class="client-input @error('bank_name') is-invalid @enderror"
                                value="{{ old('bank_name') }}"
                                maxlength="150"
                                required
                            >

                            @error('bank_name')
                                <div class="field-error">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>


                        {{-- Branch --}}
                        <div class="client-field">

                            <label for="branch">
                                Branch <span class="required">*</span>
                            </label>

                            <input
                                type="text"
                                id="branch"
                                name="branch"
                                class="client-input @error('branch') is-invalid @enderror"
                                value="{{ old('branch') }}"
                                maxlength="150"
                                required
                            >

                            @error('branch')
                                <div class="field-error">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>


                        {{-- Account Number --}}
                        <div class="client-field">

                            <label for="account_number">
                                Account Number <span class="required">*</span>
                            </label>

                            <input
                                type="text"
                                id="account_number"
                                name="account_number"
                                class="client-input @error('account_number') is-invalid @enderror"
                                value="{{ old('account_number') }}"
                                maxlength="50"
                                inputmode="numeric"
                                autocomplete="off"
                                required
                            >

                            @error('account_number')
                                <div class="field-error">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>


                        {{-- IFSC --}}
                        <div class="client-field">

                            <label for="ifsc_code">
                                IFSC Code <span class="required">*</span>
                            </label>

                            <input
                                type="text"
                                id="ifsc_code"
                                name="ifsc_code"
                                class="client-input @error('ifsc_code') is-invalid @enderror"
                                value="{{ old('ifsc_code') }}"
                                maxlength="20"
                                autocomplete="off"
                                style="text-transform:uppercase"
                                required
                            >

                            @error('ifsc_code')
                                <div class="field-error">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>

                    </div>

                </div>


                {{-- ======================================================
                     EMPLOYMENT DETAILS
                ======================================================= --}}

                <div class="client-form-section">

                    <div class="client-section-header">

                        <div class="client-section-icon">
                            05
                        </div>

                        <div class="client-section-title">

                            <h2>
                                Employment Details
                            </h2>

                            <p>
                                Current employment and income information
                            </p>

                        </div>

                    </div>


                    <div class="client-form-grid three">


                        {{-- Employment Type --}}
                        <div class="client-field">

                            <label for="employment_type">
                                Employment Type <span class="required">*</span>
                            </label>

                            <select
                                id="employment_type"
                                name="employment_type"
                                class="client-select @error('employment_type') is-invalid @enderror"
                                required
                            >

                                <option value="">
                                    Select employment type
                                </option>

                                <option
                                    value="salaried"
                                    {{ old('employment_type') === 'salaried' ? 'selected' : '' }}
                                >
                                    Salaried
                                </option>

                                <option
                                    value="self_employed"
                                    {{ old('employment_type') === 'self_employed' ? 'selected' : '' }}
                                >
                                    Self Employed
                                </option>

                                <option
                                    value="business"
                                    {{ old('employment_type') === 'business' ? 'selected' : '' }}
                                >
                                    Business
                                </option>

                                <option
                                    value="student"
                                    {{ old('employment_type') === 'student' ? 'selected' : '' }}
                                >
                                    Student
                                </option>

                                <option
                                    value="other"
                                    {{ old('employment_type') === 'other' ? 'selected' : '' }}
                                >
                                    Other
                                </option>

                            </select>

                            @error('employment_type')
                                <div class="field-error">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>


                        {{-- Company --}}
                        <div class="client-field">

                            <label for="company_name">
                                Company / Business Name <span class="required">*</span>
                            </label>

                            <input
                                type="text"
                                id="company_name"
                                name="company_name"
                                class="client-input @error('company_name') is-invalid @enderror"
                                value="{{ old('company_name') }}"
                                maxlength="255"
                                required
                            >

                            @error('company_name')
                                <div class="field-error">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>


                        {{-- Job Title --}}
                        <div class="client-field">

                            <label for="job_title">
                                Job Title / Position <span class="required">*</span>
                            </label>

                            <input
                                type="text"
                                id="job_title"
                                name="job_title"
                                class="client-input @error('job_title') is-invalid @enderror"
                                value="{{ old('job_title') }}"
                                maxlength="255"
                                required
                            >

                            @error('job_title')
                                <div class="field-error">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>


                        {{-- Monthly Income --}}
                        <div class="client-field">

                            <label for="monthly_income">
                                Monthly Income <span class="required">*</span>
                            </label>

                            <input
                                type="number"
                                id="monthly_income"
                                name="monthly_income"
                                class="client-input @error('monthly_income') is-invalid @enderror"
                                value="{{ old('monthly_income') }}"
                                min="0"
                                step="0.01"
                                inputmode="decimal"
                                required
                            >

                            @error('monthly_income')
                                <div class="field-error">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>


                        {{-- Experience --}}
                        <div class="client-field">

                            <label for="work_experience">
                                Work Experience <span class="required">*</span>
                            </label>

                            <input
                                type="text"
                                id="work_experience"
                                name="work_experience"
                                class="client-input @error('work_experience') is-invalid @enderror"
                                value="{{ old('work_experience') }}"
                                maxlength="100"
                                placeholder="e.g. 3 years"
                                required
                            >

                            @error('work_experience')
                                <div class="field-error">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>


                        {{-- Office City --}}
                        <div class="client-field">

                            <label for="office_city">
                                Office / Work City <span class="required">*</span>
                            </label>

                            <input
                                type="text"
                                id="office_city"
                                name="office_city"
                                class="client-input @error('office_city') is-invalid @enderror"
                                value="{{ old('office_city') }}"
                                maxlength="100"
                                required
                            >

                            @error('office_city')
                                <div class="field-error">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>

                    </div>

                </div>


                {{-- ======================================================
                     FORM FOOTER
                ======================================================= --}}

                <div class="client-form-footer">

                    <a
                        href="{{ route('admin.clients') }}"
                        class="client-btn client-btn-cancel"
                    >
                        Cancel
                    </a>

                    <button
                        type="submit"
                        class="client-btn client-btn-save"
                        id="saveClientBtn"
                    >
                        ✓ Create Client
                    </button>

                </div>

            </div>

        </form>

    </div>

</div>


<script>

function togglePassword(id, button) {

    const input = document.getElementById(id);

    if (!input) {
        return;
    }

    if (input.type === 'password') {

        input.type = 'text';
        button.textContent = 'Hide';

    } else {

        input.type = 'password';
        button.textContent = 'Show';

    }
}


/*
|--------------------------------------------------------------------------
| PAN Uppercase
|--------------------------------------------------------------------------
*/

const panInput = document.getElementById('pan_number');

if (panInput) {

    panInput.addEventListener('input', function () {

        this.value = this.value
            .toUpperCase()
            .replace(/[^A-Z0-9]/g, '')
            .slice(0, 10);

    });
}


/*
|--------------------------------------------------------------------------
| Aadhaar Numbers Only
|--------------------------------------------------------------------------
*/

const aadhaarInput =
    document.getElementById('aadhaar_number');

if (aadhaarInput) {

    aadhaarInput.addEventListener('input', function () {

        this.value = this.value
            .replace(/\D/g, '')
            .slice(0, 12);

    });
}


/*
|--------------------------------------------------------------------------
| Pincode Numbers Only
|--------------------------------------------------------------------------
*/

const pincodeInput =
    document.getElementById('pincode');

if (pincodeInput) {

    pincodeInput.addEventListener('input', function () {

        this.value = this.value
            .replace(/\D/g, '')
            .slice(0, 6);

    });
}


/*
|--------------------------------------------------------------------------
| Account Number Numbers Only
|--------------------------------------------------------------------------
*/

const accountNumberInput =
    document.getElementById('account_number');

if (accountNumberInput) {

    accountNumberInput.addEventListener('input', function () {

        this.value = this.value
            .replace(/\D/g, '')
            .slice(0, 50);

    });
}


/*
|--------------------------------------------------------------------------
| IFSC Uppercase
|--------------------------------------------------------------------------
*/

const ifscInput =
    document.getElementById('ifsc_code');

if (ifscInput) {

    ifscInput.addEventListener('input', function () {

        this.value = this.value
            .toUpperCase()
            .slice(0, 20);

    });
}


/*
|--------------------------------------------------------------------------
| 18+ Age Validation
|--------------------------------------------------------------------------
*/

const dobInput =
    document.getElementById('date_of_birth');

const dobAgeError =
    document.getElementById('dobAgeError');

const clientForm =
    document.getElementById('adminClientCreateForm');

const saveButton =
    document.getElementById('saveClientBtn');


function isAtLeast18(dateString) {

    if (!dateString) {
        return false;
    }

    const dob = new Date(dateString + 'T00:00:00');

    if (isNaN(dob.getTime())) {
        return false;
    }

    const today = new Date();

    let age =
        today.getFullYear() -
        dob.getFullYear();

    const monthDifference =
        today.getMonth() -
        dob.getMonth();

    if (
        monthDifference < 0 ||
        (
            monthDifference === 0 &&
            today.getDate() < dob.getDate()
        )
    ) {
        age--;
    }

    return age >= 18;
}


/*
|--------------------------------------------------------------------------
| Set Maximum DOB = 18 Years Ago
|--------------------------------------------------------------------------
*/

if (dobInput) {

    const today = new Date();

    const maxDob = new Date(
        today.getFullYear() - 18,
        today.getMonth(),
        today.getDate()
    );

    const year =
        maxDob.getFullYear();

    const month =
        String(
            maxDob.getMonth() + 1
        ).padStart(2, '0');

    const day =
        String(
            maxDob.getDate()
        ).padStart(2, '0');

    dobInput.max =
        `${year}-${month}-${day}`;


    dobInput.addEventListener('change', function () {

        if (!this.value) {

            dobAgeError.style.display = 'none';
            return;

        }

        if (!isAtLeast18(this.value)) {

            dobAgeError.style.display = 'block';

            this.setCustomValidity(
                'Client must be 18 years or older.'
            );

        } else {

            dobAgeError.style.display = 'none';

            this.setCustomValidity('');

        }

    });

}


/*
|--------------------------------------------------------------------------
| Form Submit Protection + Age Check
|--------------------------------------------------------------------------
*/

if (clientForm && saveButton) {

    clientForm.addEventListener('submit', function (event) {

        /*
        |--------------------------------------------------------------
        | Check 18+ before submit
        |--------------------------------------------------------------
        */

        if (
            dobInput &&
            !isAtLeast18(dobInput.value)
        ) {

            event.preventDefault();

            dobAgeError.style.display = 'block';

            dobInput.setCustomValidity(
                'Client must be 18 years or older.'
            );

            dobInput.reportValidity();

            return;

        }


        /*
        |--------------------------------------------------------------
        | Clear age validation
        |--------------------------------------------------------------
        */

        if (dobInput) {

            dobInput.setCustomValidity('');

        }


        /*
        |--------------------------------------------------------------
        | Submit protection
        |--------------------------------------------------------------
        */

        saveButton.disabled = true;

        saveButton.innerHTML =
            'Creating Client...';

        saveButton.style.opacity = '.75';

        saveButton.style.cursor =
            'not-allowed';

    });

}

</script>

@endsection