@extends('Admin.layout')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
@section('content')
<style>
    input[type="file"]::file-selector-button {
        background-color: #28a745;
        color: white;
        border: none;
        padding: 6px 12px;
        margin-right: 10px;
        border-radius: 4px;
        cursor: pointer;
    }

    input[type="file"]::file-selector-button:hover {
        background-color: #218838;
    }
</style>
<div class="row align-items-center justify-content-between">
    <div class="col-auto">
        <h5>
            <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <a href="{{ route('customer_table') }}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="icon icon-tabler">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M15 6l-6 6l6 6" />
                    </svg>
                </a>
            </button>
            Create Customer
        </h5>
    </div>
</div>
<div class="card p-3">
    <h6>Create Customer</h6>
    <form action="{{ route('add_customer_form') }}" method="POST" id="customerform" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="store_image_base64" id="storePreview_hidden">
        <h6 class="mt-2 text-primary">Personal Details</h6>
        <div class="row g-2">
            <div class="col-lg-3 mb-2">
                <label class="form-label">Name *</label>
                <input type="text" name="name" value="{{ old('name') }}"
                    class="form-control @error('name') is-invalid @enderror" placeholder="e.g. John Doe">
                @error('name') <div class="text-danger small">{{ $message }}</div> @enderror
            </div>
            <div class="col-lg-3 mb-2">
                <label class="form-label">Phone Number *</label>
                <input type="text" name="phone_number" value="{{ old('phone_number') }}"
                    class="form-control @error('phone_number') is-invalid @enderror" placeholder="e.g. 9876543210">
                @error('phone_number') <div class="text-danger small">{{ $message }}</div> @enderror
            </div>
            <div class="col-lg-3 mb-2">
                <label class="form-label">Email *</label>
                <input type="email" name="email" value="{{ old('email') }}"
                    class="form-control @error('email') is-invalid @enderror" placeholder="example@mail.com">
                @error('email') <div class="text-danger small">{{ $message }}</div> @enderror
            </div>
            <div class="col-lg-3 mb-2">
                <div class="upload-box rounded-3 p-4 mt-3 text-center position-relative"
                    style="border: 1px dashed #000; background-color: #fff; height: 100%;"
                    ondragover="handleDragOver(event)" ondragleave="handleDragLeave(event)"
                    ondrop="handleDrop(event, 'storeImageInput', 'storePreview')">
                    <!-- File input -->
                    <input type="file" id="storeImageInput" name="profile_image"
                        class="file-input position-absolute top-0 start-0 w-100 h-100 opacity-0 cursor-pointer"
                        onchange="previewImage(this, 'storePreview', 'storePreview_hidden')"
                        accept=".jpg,.jpeg,.png,.webp" />
                    <!-- Hidden input for Base64 backup -->
                    <input type="hidden" id="storePreview_hidden" name="store_image_base64"
                        value="{{ old('store_image_base64') }}">
                    <!-- Upload placeholder -->
                    <div class="upload-placeholder {{ old('store_image_base64') ? 'd-none' : '' }}">
                        <i class="fa-solid fa-cloud-arrow-up fa-2x mb-3" style="color: #000;"></i>
                        <h6 class="card-title mb-1 fw-bold">Upload Image</h6>
                        <p class="mb-1 small">Choose a file</p>
                        <p class="text-muted small">Max 1MB • 770x770px</p>
                        <button type="button" class="btn btn-outline-dark btn-sm"
                            onclick="document.getElementById('storeImageInput').click()">Browse
                            File</button>
                    </div>
                    <!-- Preview Image -->
                    <img id="storePreview" src="{{ old('store_image_base64') ? old('store_image_base64') : '' }}"
                        class="img-preview mt-3 {{ old('store_image_base64') ? '' : 'd-none' }}"
                        style="width:100px; height:100px;" />
                    @error('store_image')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>

            </div>
            <div class="col-lg-3 mb-2">
                <label class="form-label">ID Number *</label>
                <input type="text" name="id_number" value="{{ old('id_number') }}"
                    class="form-control @error('id_number') is-invalid @enderror" placeholder="id number">
                @error('id_number') <div class="text-danger small">{{ $message }}</div> @enderror
            </div>
            <div class="col-lg-3 mb-2">
                <label class="form-label">Password *</label>
                <input type="password" name="password" value="{{ old('password') }}" autocomplete="new-password"
                    class="form-control @error('password') is-invalid @enderror" placeholder="Min 6 characters">
                @error('password') <div class="text-danger small">{{ $message }}</div> @enderror
            </div>
            <div class="col-lg-3 mb-2">
                <label class="form-label">Date Of Birth *</label>
                <input type="date" id="dob" name="dob" value="{{ old('dob') }}"
                    class="form-control @error('dob') is-invalid @enderror">
                @error('dob') <div class="text-danger small">{{ $message }}</div> @enderror
            </div>
            <div class="col-lg-3 mb-2">
                <label class="form-label">Date Of Joining *</label>
                <input type="date" name="date_of_joining" value="{{ old('date_of_joining') }}"
                    class="form-control @error('date_of_joining') is-invalid @enderror">
                @error('date_of_joining') <div class="text-danger small">{{ $message }}</div> @enderror
            </div>
            <div class="col-lg-6 mb-2">
                <label class="form-label">Age *</label>
                <input type="text" id="age" name="age" value="{{ old('age') }}" readonly
                    class="form-control @error('age') is-invalid @enderror" placeholder="Auto-calculated from DOB">
                @error('age') <div class="text-danger small">{{ $message }}</div> @enderror
            </div>
            <div class="col-lg-6 mb-2">
                <label class="form-label">Address *</label>
                <input type="text" name="address" value="{{ old('address') }}"
                    class="form-control @error('address') is-invalid @enderror" placeholder="Enter full address">
                @error('address') <div class="text-danger small">{{ $message }}</div> @enderror
            </div>
        </div>
        <h6 class="mt-4 text-primary">Referral Details</h6>
        <div class="row">
            <div class="col-lg-6 mb-2">
                <label class="form-label">Referral Number *</label>
                <input type="text" id="ref_number" name="ref_number" value="{{ old('ref_number') }}"
                    class="form-control" placeholder="Enter referrer phone">
            </div>
            <div class="col-lg-6 mb-2">
                <label class="form-label">Referral Name *</label>
                <input type="text" id="ref_name" name="ref_name" value="{{ old('ref_name') }}" class="form-control"
                    placeholder="Referral name will auto fill" readonly>
            </div>
        </div>
        <h6 class="mt-4 text-primary">Health Details</h6>
        <div class="row">
            <div class="col-lg-4 mb-2">
                <label class="form-label">Height *</label>
                <input type="text" name="height" value="{{ old('height') }}"
                    class="form-control @error('height') is-invalid @enderror" placeholder="in cm (e.g. 170)">
                @error('height') <div class="text-danger small">{{ $message }}</div> @enderror
            </div>
            <div class="col-lg-4 mb-2">
                <label class="form-label">Weight *</label>
                <input type="text" name="weight" value="{{ old('weight') }}"
                    class="form-control @error('weight') is-invalid @enderror" placeholder="in kg (e.g. 70)">
                @error('weight') <div class="text-danger small">{{ $message }}</div> @enderror
            </div>
            <div class="col-lg-4 mb-2">
                <label class="form-label">BMI *</label>
                <input type="text" name="bmi" id="bmi" value="{{ old('bmi') }}"
                    class="form-control @error('bmi') is-invalid @enderror" placeholder="Body Mass Index">
                @error('bmi') <div class="text-danger small">{{ $message }}</div> @enderror
            </div>
            <div class="col-lg-4 mb-2">
                <label class="form-label">VF *</label>
                <input type="text" name="vf" value="{{ old('vf') }}"
                    class="form-control @error('vf') is-invalid @enderror" placeholder="Visceral Fat level">
                @error('vf') <div class="text-danger small">{{ $message }}</div> @enderror
            </div>
            <div class="col-lg-4 mb-2">
                <label class="form-label">BMR *</label>
                <input type="text" name="bmr" value="{{ old('bmr') }}"
                    class="form-control @error('bmr') is-invalid @enderror" placeholder="Basal Metabolic Rate">
                @error('bmr') <div class="text-danger small">{{ $message }}</div> @enderror
            </div>
            <div class="col-lg-4 mb-2">
                <label class="form-label">Body Age *</label>
                <input type="text" name="body_age" value="{{ old('body_age') }}"
                    class="form-control @error('body_age') is-invalid @enderror" placeholder="Biological Age">
                @error('body_age') <div class="text-danger small">{{ $message }}</div> @enderror
            </div>
        </div>
        <h6 class="mt-4 text-primary">Eating Habits</h6>
        <div class="row">
            <div class="col-lg-4 mb-2">
                <label class="form-label">Wake Up *</label>
                <input type="time" name="wake_up" value="{{ old('wake_up') }}"
                    class="form-control @error('wake_up') is-invalid @enderror">
                @error('wake_up') <div class="text-danger small">{{ $message }}</div> @enderror
            </div>
            <div class="col-lg-4 mb-2">
                <label class="form-label">Tea/Coffee *</label>
                <select name="tea_type" class="form-select @error('tea_type') is-invalid @enderror">
                    <option value="">Select Type</option>
                    <option value="tea" {{ old('tea_type')=='tea' ? 'selected':'' }}>Tea</option>
                    <option value="coffee" {{ old('tea_type')=='coffee' ? 'selected':'' }}>Coffee</option>
                </select>
                @error('tea_type') <div class="text-danger small">{{ $message }}</div> @enderror
            </div>
            <div class="col-lg-4 mb-2">
                <label class="form-label">Breakfast *</label>
                <input type="text" name="tiffen" value="{{ old('tiffen') }}"
                    class="form-control @error('tiffen') is-invalid @enderror" placeholder="e.g. Idly, Dosa">
                @error('tiffen') <div class="text-danger small">{{ $message }}</div> @enderror
            </div>
            <div class="col-lg-4 mb-2">
                <label class="form-label">Lunch *</label>
                <input type="text" name="lunch" value="{{ old('lunch') }}"
                    class="form-control @error('lunch') is-invalid @enderror" placeholder="e.g. Rice & Veg">
                @error('lunch') <div class="text-danger small">{{ $message }}</div> @enderror
            </div>
            <div class="col-lg-4 mb-2">
                <label class="form-label">Evening Snacks *</label>
                <input type="text" name="evening_snacks" value="{{ old('evening_snacks') }}"
                    class="form-control @error('evening_snacks') is-invalid @enderror"
                    placeholder="e.g. Tea & Biscuits">
                @error('evening_snacks') <div class="text-danger small">{{ $message }}</div> @enderror
            </div>
            <div class="col-lg-4 mb-2">
                <label class="form-label">Dinner *</label>
                <input type="text" name="dinner" value="{{ old('dinner') }}"
                    class="form-control @error('dinner') is-invalid @enderror" placeholder="e.g. Chappati">
                @error('dinner') <div class="text-danger small">{{ $message }}</div> @enderror
            </div>
            <div class="col-lg-6 mb-2">
                <label class="form-label">Veg / Non-Veg *</label>
                <select name="food_type" class="form-select @error('food_type') is-invalid @enderror">
                    <option value="">Select Diet Type</option>
                    <option value="veg" {{ old('food_type')=='veg' ? 'selected':'' }}>Veg</option>
                    <option value="non-veg" {{ old('food_type')=='non-veg' ? 'selected':'' }}>Non-Veg</option>
                </select>
                @error('food_type') <div class="text-danger small">{{ $message }}</div> @enderror
            </div>
            <div class="col-lg-6 mb-2">
                <label class="form-label">Water Intake *</label>
                <input type="text" name="water_intake" value="{{ old('water_intake') }}"
                    class="form-control @error('water_intake') is-invalid @enderror" placeholder="e.g. 1-3 L/500 ml">
                @error('water_intake') <div class="text-danger small">{{ $message }}</div> @enderror
            </div>
        </div>
        <h6 class="mt-4 text-primary">Health Conditions</h6>
        <div class="row">
            <div class="col-lg-4 mb-2">
                <label class="form-label">Blood Pressure *</label>
                <input type="text" name="blood_pressure" value="{{ old('blood_pressure') }}"
                    class="form-control @error('blood_pressure') is-invalid @enderror"
                    placeholder="e.g. Normal or 120/80">
                @error('blood_pressure') <div class="text-danger small">{{ $message }}</div> @enderror
            </div>
            <div class="col-lg-4 mb-2">
                <label class="form-label">Sugar *</label>
                <input type="text" name="sugar" value="{{ old('sugar') }}"
                    class="form-control @error('sugar') is-invalid @enderror" placeholder="e.g. No or Fasting 110">
                @error('sugar') <div class="text-danger small">{{ $message }}</div> @enderror
            </div>
            @foreach(['headache', 'giddiness', 'cardiac', 'gastritis', 'tiredness', 'acidity', 'indigestion',
            'constipation', 'pain', 'breathing_problem'] as $cond)
            <div class="col-lg-4 mb-2">
                <label class="form-label">{{ ucwords(str_replace('_', ' ', $cond)) }} *</label>
                <select name="{{ $cond }}" class="form-select @error($cond) is-invalid @enderror">
                    <option value="">Select</option>
                    <option value="Yes" {{ old($cond)=='Yes'?'selected':'' }}>Yes</option>
                    <option value="No" {{ old($cond)=='No'?'selected':'' }}>No</option>
                </select>
                @error($cond) <div class="text-danger small">{{ $message }}</div> @enderror
            </div>
            @endforeach
            <div class="col-lg-12 mb-2">
                <label class="form-label">Sleeping Disorder *</label>
                <select name="sleeping_disorder" class="form-select @error('sleeping_disorder') is-invalid @enderror">
                    <option value="">Select</option>
                    <option value="Yes" {{ old('sleeping_disorder')=='Yes'?'selected':'' }}>Yes</option>
                    <option value="No" {{ old('sleeping_disorder')=='No'?'selected':'' }}>No</option>
                </select>
                @error('sleeping_disorder') <div class="text-danger small">{{ $message }}</div> @enderror
            </div>
        </div>
        <div class="form-action d-flex justify-content-center mt-4">
            <button type="reset" class="btn btn-label-secondary px-5 me-4"
                onclick="window.location.href='{{ route('create_customer') }}'">
                Discard
            </button>
            <button type="submit" id="submit-btn" class="btn btn-primary px-5">Submit</button>
        </div>
    </form>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            document.getElementById('customerform').addEventListener('submit', function() {
                const btn = document.getElementById('submit-btn');
                btn.disabled = true;
                btn.innerText = 'Processing...';
            });
        });
    </script>
    <script>
        document.getElementById('dob').addEventListener('change', function() {
            const dobValue = this.value;
            if (dobValue) {
                const dob = new Date(dobValue);
                const today = new Date();
                let age = today.getFullYear() - dob.getFullYear();
                const monthDiff = today.getMonth() - dob.getMonth();
                // Birthday innum varala na oru varusham kammi pannanum
                if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < dob.getDate())) {
                    age--;
                }
                // Age field-la value-va set pandrom
                document.getElementById('age').value = age > 0 ? age : 0;
            } else {
                document.getElementById('age').value = '';
            }
        });
    </script>
    <script>
        $(document).ready(function() {
            $('#ref_number').on('input', function() {
                let ref_number = $(this).val().trim();
                if (ref_number.length >= 10) {
                    $.ajax({
                        url: "{{ route('getReferralUser') }}",
                        type: "GET",
                        data: {
                            ref_number: ref_number
                        },
                        success: function(response) {
                            console.log(response); // Debug check
                            if (response.status) {
                                $('#ref_name').val(response.name);
                            } else {
                                $('#ref_name').val('');
                            }
                        },
                        error: function(xhr) {
                            console.log(xhr.responseText);
                            $('#ref_name').val('');
                        }
                    });
                } else {
                    $('#ref_name').val('');
                }
            });
        });
    </script>
    <script>
        function previewImage(input, previewId) {
            const preview = document.getElementById(previewId);
            const file = input.files[0];
            const reader = new FileReader();
            reader.onload = function(e) {
                preview.src = e.target.result;
                preview.classList.remove('d-none');
            };
            if (file) reader.readAsDataURL(file);
        }

        function handleDragOver(e) {
            e.preventDefault();
            e.stopPropagation();
            e.target.closest('.upload-box').style.borderColor = '#007bff';
        }

        function handleDragLeave(e) {
            e.preventDefault();
            e.stopPropagation();
            e.target.closest('.upload-box').style.borderColor = '#000';
        }

        function handleDrop(e, inputId, previewId) {
            e.preventDefault();
            e.stopPropagation();
            e.target.closest('.upload-box').style.borderColor = '#000';
            const input = document.getElementById(inputId);
            input.files = e.dataTransfer.files;
            previewImage(input, previewId);
        }
    </script>
    <script>
        function previewImage(input, previewId, hiddenId) {
            const file = input.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById(previewId).src = e.target.result;
                    document.getElementById(previewId).classList.remove('d-none');
                    document.getElementById(hiddenId).value = e.target.result; // Store base64
                    input.closest('.upload-box').querySelector('.upload-placeholder').classList.add('d-none');
                };
                reader.readAsDataURL(file);
            }
        }
    </script>
    <script>
        function previewImage(input, previewId, hiddenId) {
            const file = input.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById(previewId).src = e.target.result;
                    document.getElementById(previewId).classList.remove('d-none');
                    document.getElementById(hiddenId).value = e.target.result; // Save base64
                    document.querySelector('.upload-placeholder').classList.add('d-none');
                };
                reader.readAsDataURL(file);
            }
        }

        function handleDragOver(e) {
            e.preventDefault();
            e.currentTarget.classList.add('border-primary');
        }

        function handleDragLeave(e) {
            e.preventDefault();
            e.currentTarget.classList.remove('border-primary');
        }

        function handleDrop(e, inputId, previewId) {
            e.preventDefault();
            e.currentTarget.classList.remove('border-primary');
            const input = document.getElementById(inputId);
            input.files = e.dataTransfer.files;
            previewImage(input, previewId, 'storePreview_hidden');
        }

        function previewImage(input, previewId, hiddenId) {
            const file = input.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById(previewId).src = e.target.result;
                    document.getElementById(previewId).classList.remove('d-none');
                    // Set the value to the hidden input
                    const hiddenInput = document.getElementById(hiddenId);
                    if (hiddenInput) {
                        hiddenInput.value = e.target.result;
                    }
                    // Hide the placeholder
                    const placeholder = document.querySelector('.upload-placeholder');
                    if (placeholder) {
                        placeholder.classList.add('d-none');
                    }
                };
                reader.readAsDataURL(file);
            }
        }
    </script>
    @endsection