@extends('layouts.app')

@section('content')
<!--begin::Toolbar-->
<div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
    <!--begin::Toolbar container-->
    <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
        <!--begin::Page title-->
        <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
            <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">{{ __('customers.add') }}</h1>
            <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                <li class="breadcrumb-item text-muted">
                    <a href="{{ url('/') }}" class="text-muted text-hover-primary">{{ __('common.home') }}</a>
                </li>
                <li class="breadcrumb-item">
                    <span class="bullet bg-gray-500 w-5px h-2px"></span>
                </li>
                <li class="breadcrumb-item text-muted">
                    <a href="{{ route('customers.index') }}" class="text-muted text-hover-primary">{{ __('common.customers') }}</a>
                </li>
                <li class="breadcrumb-item">
                    <span class="bullet bg-gray-500 w-5px h-2px"></span>
                </li>
                <li class="breadcrumb-item text-muted">{{ __('customers.add') }}</li>
            </ul>
        </div>
        <!--end::Page title-->
    </div>
    <!--end::Toolbar container-->
</div>
<!--end::Toolbar-->

<!--begin::Content-->
<div id="kt_app_content" class="app-content flex-column-fluid">
    <div id="kt_app_content_container" class="app-container container-xxl">
        <!--begin::Card-->
        <div class="card card-flush h-lg-100">
            <form id="kt_customer_create_form" class="form" action="{{ route('customers.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <!--begin::Card header-->
                <div class="card-header pt-7">
                    <div class="card-title">
                        <h2>{{ __('customers.new_details') }}</h2>
                    </div>
                </div>
                <!--end::Card header-->
                <!--begin::Card body-->
                <div class="card-body pt-5">
                    <!-- Section: Kişisel Bilgiler -->
                    <h4 class="fw-bold text-gray-900 mb-7">{{ __('messages.personal_information') }}</h4>

                    <!--begin::Image input-->
                    <div class="fv-row mb-7 text-center">
                        <label class="d-block fw-semibold fs-6 mb-5">Müşteri Fotoğrafı</label>
                        <div class="image-input image-input-outline image-input-placeholder" data-kt-image-input="true">
                            <div class="image-input-wrapper w-125px h-125px" style="background-image: url({{ asset('assets/media/avatars/blank.png') }})"></div>
                            <label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="change" data-bs-toggle="tooltip" title="Fotoğraf Değiştir">
                                <i class="ki-outline ki-pencil fs-7"></i>
                                <input type="file" name="photo" accept=".png, .jpg, .jpeg" />
                                <input type="hidden" name="avatar_remove" />
                            </label>
                            <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="cancel" data-bs-toggle="tooltip" title="İptal Et">
                                <i class="ki-outline ki-cross fs-2"></i>
                            </span>
                            <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="remove" data-bs-toggle="tooltip" title="Kaldır">
                                <i class="ki-outline ki-cross fs-2"></i>
                            </span>
                        </div>
                        <div class="form-text">İzin verilen dosya tipleri: png, jpg, jpeg. Maksimum: 4MB.</div>
                        @error('photo')
                            <div class="text-danger fs-7 mt-1">{{ $message }}</div>
                        @enderror
                    </div>
                    <!--end::Image input-->

                    <!--begin::Input group-->
                    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-1 row-cols-lg-2">
                        <!--begin::Col-->
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3">
                                    <span>{{ __('messages.customer_code') }}</span>
                                </label>
                                <input type="text" class="form-control form-control-solid" name="customer_code" value="{{ old('customer_code', $nextCode) }}" readonly />
                                <div class="text-muted fs-7 mt-1">{{ __('messages.automatic_sync') }}</div>
                            </div>
                        </div>
                        <!--end::Col-->
                        <!--begin::Col-->
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3">
                                    <span class="required">{{ __('messages.first_name') }}</span>
                                </label>
                                <input type="text" class="form-control form-control-solid @error('first_name') is-invalid @enderror" name="first_name" value="{{ old('first_name') }}" />
                                @error('first_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <!--end::Col-->
                    </div>
                    <!--end::Input group-->

                    <!--begin::Input group-->
                    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-1 row-cols-lg-2">
                        <!--begin::Col-->
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3">
                                    <span class="required">{{ __('messages.last_name') }}</span>
                                </label>
                                <input type="text" class="form-control form-control-solid @error('last_name') is-invalid @enderror" name="last_name" value="{{ old('last_name') }}" />
                                @error('last_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <!--end::Col-->
                        <!--begin::Col-->
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3">
                                    <span class="required">{{ __('messages.phone') }}</span>
                                </label>
                                <input type="text" class="form-control form-control-solid @error('phone') is-invalid @enderror" name="phone" value="{{ old('phone') }}" />
                                @error('phone')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <!--end::Col-->
                    </div>
                    <!--end::Input group-->

                    <!--begin::Input group-->
                    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-1 row-cols-lg-2">
                        <!--begin::Col-->
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3">
                                    <span>{{ __('messages.email') }}</span>
                                </label>
                                <input type="email" class="form-control form-control-solid @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" />
                                @error('email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <!--end::Col-->
                        <!--begin::Col-->
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3">
                                    <span>{{ __('messages.gender') }}</span>
                                </label>
                                <select class="form-select form-select-solid @error('gender') is-invalid @enderror" name="gender">
                                    <option value="">{{ __('customers.select') }}</option>
                                    <option value="male" {{ old('gender') == 'male' ? 'selected' : '' }}>{{ __('messages.male') }}</option>
                                    <option value="female" {{ old('gender') == 'female' ? 'selected' : '' }}>{{ __('messages.female') }}</option>
                                </select>
                                @error('gender')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <!--end::Col-->
                    </div>
                    <!--end::Input group-->

                    <!--begin::Input group-->
                    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-1 row-cols-lg-2">
                        <!--begin::Col-->
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3">
                                    <span>{{ __('messages.birth_date') }}</span>
                                </label>
                                <input type="date" class="form-control form-control-solid @error('birth_date') is-invalid @enderror" name="birth_date" value="{{ old('birth_date') }}" />
                                @error('birth_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <!--end::Col-->
                    </div>
                    <!--end::Input group-->

                    <!--begin::Input group-->
                    <div class="fv-row mb-7">
                        <label class="fs-6 fw-semibold form-label mt-3">
                            <span>{{ __('messages.address') }}</span>
                        </label>
                        <textarea class="form-control form-control-solid @error('address') is-invalid @enderror" name="address" rows="3">{{ old('address') }}</textarea>
                        @error('address')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <!--end::Input group-->

                    <!--begin::Input group (Customer Type)-->
                    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-1 row-cols-lg-2">
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3">
                                    <span>{{ __('customers.type') }}</span>
                                </label>
                                <select class="form-select form-select-solid @error('type') is-invalid @enderror" name="type" id="customer_type_select">
                                    <option value="individual" {{ old('type', 'individual') == 'individual' ? 'selected' : '' }}>{{ __('customers.individual') }}</option>
                                    <option value="corporate" {{ old('type') == 'corporate' ? 'selected' : '' }}>{{ __('customers.corporate') }}</option>
                                </select>
                                @error('type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <!--end::Input group-->

                    <!--begin::Input group (Individual Fields)-->
                    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-1 row-cols-lg-2" id="individual_fields_group">
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3">
                                    <span>{{ __('customers.tckimlik') }}</span>
                                </label>
                                <input type="text" class="form-control form-control-solid @error('tckimlik') is-invalid @enderror" name="tckimlik" value="{{ old('tckimlik') }}" maxlength="11" />
                                @error('tckimlik')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <!--end::Input group-->

                    <!--begin::Input group (Corporate Fields)-->
                    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-1 row-cols-lg-2" id="corporate_fields_group" style="display: none;">
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3">
                                    <span>{{ __('customers.tax_office') }}</span>
                                </label>
                                <input type="text" class="form-control form-control-solid @error('tax_office') is-invalid @enderror" name="tax_office" value="{{ old('tax_office') }}" />
                                @error('tax_office')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3">
                                    <span>{{ __('customers.tax_number') }}</span>
                                </label>
                                <input type="text" class="form-control form-control-solid @error('tax_number') is-invalid @enderror" name="tax_number" value="{{ old('tax_number') }}" />
                                @error('tax_number')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <!--end::Input group-->

                    <script>
                        document.addEventListener('DOMContentLoaded', function () {
                            const typeSelect = document.getElementById('customer_type_select');
                            const individualGroup = document.getElementById('individual_fields_group');
                            const corporateGroup = document.getElementById('corporate_fields_group');

                            function toggleFields() {
                                if (typeSelect.value === 'corporate') {
                                    individualGroup.style.display = 'none';
                                    corporateGroup.style.display = 'flex';
                                } else {
                                    corporateGroup.style.display = 'none';
                                    individualGroup.style.display = 'flex';
                                }
                            }

                            typeSelect.addEventListener('change', toggleFields);
                            toggleFields(); // Initial run
                        });
                    </script>

                    <!-- Separator -->
                    <div class="separator separator-dashed my-10"></div>

                    <!-- Section: Ek Detaylar -->
                    <h4 class="fw-bold text-gray-900 mb-7">{{ __('messages.additional_details') }}</h4>

                    <!--begin::Input group-->
                    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-1 row-cols-lg-2">
                        <!--begin::Col-->
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3">
                                    <span>{{ __('messages.height') }}</span>
                                </label>
                                <div class="input-group input-group-solid">
                                    <input type="number" step="0.1" class="form-control form-control-solid @error('height') is-invalid @enderror" name="height" value="{{ old('height') }}" />
                                    <span class="input-group-text">cm</span>
                                </div>
                                @error('height')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <!--end::Col-->
                        <!--begin::Col-->
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3">
                                    <span>{{ __('messages.weight') }}</span>
                                </label>
                                <div class="input-group input-group-solid">
                                    <input type="number" step="0.1" class="form-control form-control-solid @error('weight') is-invalid @enderror" name="weight" value="{{ old('weight') }}" />
                                    <span class="input-group-text">kg</span>
                                </div>
                                @error('weight')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <!--end::Col-->
                    </div>
                    <!--end::Input group-->

                    <!--begin::Input group-->
                    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-1 row-cols-lg-2">
                        <!--begin::Col-->
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3">
                                    <span>{{ __('messages.shoe_size') }}</span>
                                </label>
                                <input type="number" step="0.5" class="form-control form-control-solid @error('shoe_size') is-invalid @enderror" name="shoe_size" value="{{ old('shoe_size') }}" />
                                @error('shoe_size')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <!--end::Col-->
                        <!--begin::Col-->
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3">
                                    <span>{{ __('messages.wedding_anniversary') }}</span>
                                </label>
                                <input type="date" class="form-control form-control-solid @error('wedding_anniversary') is-invalid @enderror" name="wedding_anniversary" value="{{ old('wedding_anniversary') }}" />
                                @error('wedding_anniversary')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <!--end::Col-->
                    </div>
                    <!--end::Input group-->

                </div>
                <!--end::Card body-->
                <!--begin::Card footer-->
                <div class="card-footer d-flex justify-content-end py-6 px-9">
                    <a href="{{ route('customers.index') }}" class="btn btn-light btn-active-light-primary me-2">{{ __('common.cancel') }}</a>
                    <button type="submit" name="action" value="save_create_new" class="btn btn-light-primary me-2">
                        {{ __('customers.save_and_create_new') }}
                    </button>
                    <button type="submit" name="action" value="save" class="btn btn-primary" id="kt_customer_submit">
                        <span class="indicator-label">{{ __('customers.save') }}</span>
                    </button>
                </div>
                <!--end::Card footer-->
            </form>
        </div>
        <!--end::Card-->
    </div>
</div>
<!--end::Content-->
@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/css/intlTelInput.css">
<style>
    .iti {
        width: 100% !important;
        display: block !important;
    }
    .iti__country-list {
        z-index: 1050;
    }
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/intlTelInput.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const phoneInput = document.querySelector('input[name="phone"]');
        if (phoneInput) {
            const iti = window.intlTelInput(phoneInput, {
                initialCountry: "tr",
                preferredCountries: ["tr", "us", "gb", "de"],
                utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/utils.js",
                autoPlaceholder: "aggressive",
                separateDialCode: true,
            });

            const form = phoneInput.closest('form');

            const stripLeadingZero = () => {
                let val = phoneInput.value.trim();
                if (val.startsWith('0')) {
                    phoneInput.value = val.substring(1);
                }
            };
            stripLeadingZero();
            setTimeout(stripLeadingZero, 100);
            setTimeout(stripLeadingZero, 300);
            
            // Create error message element
            const errorMsg = document.createElement('div');
            errorMsg.className = 'invalid-feedback';
            errorMsg.innerText = 'Geçersiz telefon numarası. Lütfen kontrol ediniz.';
            phoneInput.parentNode.parentNode.appendChild(errorMsg);

            function validatePhone() {
                const cleanVal = phoneInput.value.replace(/\D/g, '');
                const country = iti.getSelectedCountryData().iso2;
                
                let isValid = false;
                if (cleanVal === '') {
                    isValid = false;
                } else if (country === 'tr') {
                    isValid = /^5\d{9}$/.test(cleanVal);
                } else {
                    isValid = cleanVal.length >= 7 && cleanVal.length <= 15;
                }

                if (isValid) {
                    phoneInput.classList.remove('is-invalid');
                    phoneInput.classList.add('is-valid');
                    return true;
                } else {
                    phoneInput.classList.remove('is-valid');
                    phoneInput.classList.add('is-invalid');
                    return false;
                }
            }

            phoneInput.addEventListener('input', function() {
                let val = phoneInput.value;
                if (val.startsWith('0')) {
                    phoneInput.value = val.substring(1);
                }
            });

            phoneInput.addEventListener('blur', validatePhone);
            phoneInput.addEventListener('change', validatePhone);

            form.addEventListener('submit', function (e) {
                if (phoneInput.value.trim()) {
                    const isValid = validatePhone();
                    if (!isValid) {
                        e.preventDefault();
                        phoneInput.classList.add('is-invalid');
                        phoneInput.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    } else {
                        const cleanVal = phoneInput.value.replace(/\D/g, '');
                        const dialCode = iti.getSelectedCountryData().dialCode;
                        phoneInput.value = '+' + dialCode + cleanVal;
                    }
                }
            });
        }
    });
</script>
@endpush
@endsection