@extends('Admin.layout')
@section('content')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />
    <div class="row align-items-center justify-content-between mb-3 mt-3">
        <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('user_list') }}">
                        <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>
                Edit User
            </h5>
        </div>
    </div>
    <div class="card p-5">
        <form id="staffForm" action="{{ route('user_update') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <input type="hidden" name="id" value="{{ $user->id }}">
            <h4 class="mb-3">Personal Details</h4>
            <div class="row">

                <div class="col-lg-2 mb-3">
    <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)">

        <input type="file" id="storeImageInput" name="profile_image"
            class="position-absolute top-0 start-0 w-100 h-100 opacity-0"
            style="cursor:pointer; z-index:2;"
            onchange="previewImage(this)" accept=".jpg,.jpeg,.png,.webp" />

        <input type="hidden" name="temp_image" id="tempImagePath"
            value="{{ old('temp_image') }}">
        <input type="hidden" name="image_removed" id="imageRemoved" value="0">

        {{-- Placeholder --}}
        <div id="uploadPlaceholder"
            class="{{ $user->profile_image || old('temp_image') ? 'd-none' : '' }}">
            <svg width="56" height="44" viewBox="0 0 24 24" fill="none"
                xmlns="http://www.w3.org/2000/svg" class="mb-2">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
                    stroke="#aaa" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round" />
                <polyline points="17 8 12 3 7 8" stroke="#aaa" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round" />
                <line x1="12" y1="3" x2="12" y2="15" stroke="#aaa"
                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
            <p class="fw-bold mb-1 small">Upload Image</p>
            <p class="text-muted" style="font-size:11px;">JPG, PNG, WEBP • Max 1MB</p>
        </div>

        {{-- Preview --}}
        <div id="previewWrapper"
            class="{{ $user->profile_image || old('temp_image') ? '' : 'd-none' }} position-relative d-inline-block">
            <img id="storePreview"
                src="{{ old('temp_image') ? asset(old('temp_image')) : ($user->profile_image ? asset($user->profile_image) : '') }}"
                class="rounded-3"
                style="width:100px; height:100px; object-fit:cover;" />
            <button type="button" onclick="removeImagePreview()"
                class="position-absolute top-0 end-0 btn btn-danger btn-sm rounded-circle"
                style="width:22px; height:22px; padding:0; font-size:11px; line-height:1; z-index:10;">
                ✕
            </button>
        </div>

        @error('profile_image')
            <small class="text-danger d-block mt-1">{{ $message }}</small>
        @enderror
        <small class="text-danger d-none" id="imageError">Image must be under 1MB.</small>
    </div>
</div>


                <div class="col-lg-10">
                    <div class="row">

                        <div class="col-lg-4 mb-3">
                            <label class="form-label">Name</label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" name="name"
                                value="{{ old('name', $user->name) }}">

                            @error('name')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-lg-4 mb-3">
                            <label class="form-label"> Email</label>
                            <input type="text" class="form-control @error('email') is-invalid @enderror" name="email"
                                value="{{ old('email', $user->email) }}">
                            @error('email')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-lg-4 mb-3">
                            <label class="form-label">Phone Number</label>
                            <input type="text" class="form-control @error('phone_number') is-invalid @enderror"
                                name="phone_number" value="{{ old('phone_number', $user->phone_number) }}">
                            @error('phone_number')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-lg-6 mb-3">
                            <label class="form-label">DOB</label>
                            <input type="date" class="form-control @error('dob') is-invalid @enderror" name="dob"
                                value="{{ old('dob', $user->dob) }}">
                            @error('dob')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="col-lg-6 mb-3">
                            <label class="form-label">Gender</label>

                            <select class="form-select @error('gender') is-invalid @enderror" name="gender">
                                <option value="">Select</option>

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

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

                                <option value="Other" {{ old('gender', $user->gender) == 'Other' ? 'selected' : '' }}>
                                    Other
                                </option>
                            </select>

                            @error('gender')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-lg-6 mb-3">
                            <label class="form-label">Blood Group</label>
                            <input type="text" class="form-control @error('blood_group') is-invalid @enderror"
                                name="blood_group" value="{{ old('blood_group', $user->blood_group) }}"
                                placeholder="Enter Blood Group">

                            @error('blood_group')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-lg-6 mb-3">
                            <label class="form-label">Address</label>
                            <input type="text" class="form-control @error('address') is-invalid @enderror" name="address"
                                value="{{ old('address', $user->address) }}" placeholder="Enter Address">

                            @error('address')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
            {{-- <div class="row mt-2">
                <div class="col-lg-3 mb-2">
                    <label class="form-label">Identification Marks</label>
                    <textarea class="form-control @error('identification') is-invalid @enderror" name="identification"
                        rows="1">{{ old('identification') }}</textarea>
                    <div class="text-danger small error-identification"></div>
                </div>
                <div class="col-lg-3 mb-2">
                    <label class="form-label">Shop Reference Person</label>
                    <textarea rows="1" class="form-control @error('shop_ref_personal_details') is-invalid @enderror"
                        name="shop_ref_personal_details">{{ old('shop_ref_personal_details') }}</textarea>
                    <div class="text-danger small error-shop_ref_personal_details"></div>
                </div>
                <div class="col-lg-3 mb-2">
                    <label class="form-label">Per Day Salary</label>
                    <input type="number" class="form-control @error('per_day_salary') is-invalid @enderror"
                        name="per_day_salary" value="{{ old('per_day_salary') }}" placeholder="₹0.00" min="0" step="0.01">
                    <div class="text-danger small error-per_day_salary"></div>
                </div>
                <div class="col-lg-3 mb-2">
                    <label class="form-label">Qualification</label>
                    <textarea class="form-control @error('Qualification') is-invalid @enderror" name="Qualification"
                        rows="1">{{ old('Qualification') }}</textarea>
                    <div class="text-danger small error-Qualification"></div>
                </div>


            </div> --}}



            <h6 class="mt-2">Physical Details</h6>
            <div class="row">
                <div class="col-lg-4 mb-2">
                    <label class="form-label">Height (cm)</label>
                    <input type="number" step="0.01" class="form-control @error('height') is-invalid @enderror"
                        name="height" id="height" value="{{ old('height', $user->height) }}" placeholder="Enter Height">

                    @error('height')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                <div class="col-lg-4 mb-2">
                    <label class="form-label">Weight (kg)</label>
                    <input type="number" step="0.01" class="form-control @error('weight') is-invalid @enderror"
                        name="weight" id="weight" value="{{ old('weight', $user->weight) }}" placeholder="Enter Weight">

                    @error('weight')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                <div class="col-lg-4 mb-2">
                    <label class="form-label">
                        BMI <small class="text-muted">(Auto Calculated)</small>
                    </label>

                    <input type="text" class="form-control @error('bmi') is-invalid @enderror" name="bmi" id="bmi"
                        value="{{ old('bmi', $user->bmi) }}" placeholder="Auto calculated" readonly>

                    @error('bmi')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>


            </div>
            <h6 class="mt-2">Gym Information</h6>
            <div class="row">
                <div class="col-lg-4 mb-2">
                    <label class="form-label">Package</label>

                    <select class="form-select @error('package_id') is-invalid @enderror" name="package_id">
                        <option value="">Select Package</option>

                        @foreach($packages as $package)
                            <option value="{{ $package->id }}" {{ old('package_id', $user->package_id ?? '') == $package->id ? 'selected' : '' }}>
                                {{ $package->package_name }}
                                - {{ $package->duration_months }} Month(s)
                                (₹{{ $package->price }})
                            </option>
                        @endforeach
                    </select>
                    @error('package_id')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                <div class="col-lg-4 mb-2">
                    <label class="form-label">Joining Date</label>

                    <input type="date" class="form-control @error('joining_date') is-invalid @enderror" name="joining_date"
                        value="{{ old('joining_date', $user->joining_date) }}">

                    @error('joining_date')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                <div class="col-lg-4 mb-2">
                    <label class="form-label">Trainer Name</label>

                    <select class="form-select @error('trainer_id') is-invalid @enderror" name="trainer_id">
                        <option value="">Select Trainer</option>

                        @foreach($trainers as $trainer)
                            <option value="{{ $trainer->id }}" {{ old('trainer_id', $user->trainer_id) == $trainer->id ? 'selected' : '' }}>
                                {{ $trainer->name }}
                            </option>
                        @endforeach
                    </select>

                    @error('trainer_id')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>

                <div class="col-lg-6 mb-2">
                    <label class="form-label">Fitness Goal</label>

                    <select class="form-select @error('fitness_goal') is-invalid @enderror" name="fitness_goal">

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

                        <option value="Weight Loss" {{ old('fitness_goal', $user->fitness_goal) == 'Weight Loss' ? 'selected' : '' }}>
                            Weight Loss
                        </option>

                        <option value="Muscle Gain" {{ old('fitness_goal', $user->fitness_goal) == 'Muscle Gain' ? 'selected' : '' }}>
                            Muscle Gain
                        </option>

                        <option value="General Fitness" {{ old('fitness_goal', $user->fitness_goal) == 'General Fitness' ? 'selected' : '' }}>
                            General Fitness
                        </option>

                    </select>

                    @error('fitness_goal')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>


                <div class="form-actions mt-4 d-flex gap-3 justify-content-center">
                    {{-- <button type="reset" class="btn btn-label-secondary me-2" onclick="window.location.reload()">
                        Discard
                    </button> --}}
                    <button type="submit" id="finalSubmit" class="btn btn-primary">
                        Update
                    </button>
                </div>
        </form>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


    <script>
        function previewImage(input) {
    const file = input.files[0];
    if (!file) return;

    document.getElementById('imageError').classList.add('d-none');

    if (file.size > 1024 * 1024) {
        input.value = '';
        document.getElementById('imageError').classList.remove('d-none');
        return;
    }

    const reader = new FileReader();
    reader.onload = function (e) {
        document.getElementById('storePreview').src = e.target.result;
        document.getElementById('previewWrapper').classList.remove('d-none');
        document.getElementById('uploadPlaceholder').classList.add('d-none');
        document.getElementById('imageRemoved').value = '0';
    };
    reader.readAsDataURL(file);
}

function removeImagePreview() {
    document.getElementById('storeImageInput').value = '';
    document.getElementById('storePreview').src      = '';
    document.getElementById('tempImagePath').value   = '';
    document.getElementById('imageRemoved').value    = '1';
    document.getElementById('previewWrapper').classList.add('d-none');
    document.getElementById('uploadPlaceholder').classList.remove('d-none');
}

function handleDragOver(e) {
    e.preventDefault();
    e.currentTarget.style.borderColor = '#0d6efd';
}

function handleDragLeave(e) {
    e.preventDefault();
    e.currentTarget.style.borderColor = '#000';
}

function handleDrop(e) {
    e.preventDefault();
    e.currentTarget.style.borderColor = '#000';
    const input = document.getElementById('storeImageInput');
    input.files = e.dataTransfer.files;
    previewImage(input);
}

document.getElementById('finalSubmit').addEventListener('click', function () {
    this.disabled = true;
    this.innerText = 'Processing...';
    document.getElementById('staffForm').submit();
});

document.getElementById('height').addEventListener('input', calculateBMI);
document.getElementById('weight').addEventListener('input', calculateBMI);
function calculateBMI() {
    const height = parseFloat(document.getElementById('height').value);
    const weight = parseFloat(document.getElementById('weight').value);
    if (height > 0 && weight > 0) {
        const heightInMeters = height / 100;
        const bmi = weight / (heightInMeters * heightInMeters);
        document.getElementById('bmi').value = bmi.toFixed(2);
    } else {
        document.getElementById('bmi').value = '';
    }
}
    </script>
    <script>
        document.getElementById('finalSubmit').addEventListener('click', function () {
            let btn = this;
            btn.disabled = true;
            btn.innerText = 'Processing...';
            document.getElementById('staffForm').submit();
        });
    </script>
    <script>
        document.getElementById('height').addEventListener('input', calculateBMI);
        document.getElementById('weight').addEventListener('input', calculateBMI);
        function calculateBMI() {
            const height = parseFloat(document.getElementById('height').value);
            const weight = parseFloat(document.getElementById('weight').value);

            if (height > 0 && weight > 0) {
                const heightInMeters = height / 100;
                const bmi = weight / (heightInMeters * heightInMeters);
                document.getElementById('bmi').value = bmi.toFixed(2);
            } else {
                document.getElementById('bmi').value = '';
            }
        }
    </script>

@endsection