@extends('admin.layouts.master')
@section('title', 'Edit Customer')

@section('content')
<div class="row fv-plugins-icon-container">
    <div class="col-md-12">
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between">
                <h5 class="card-title mb-0">Edit Customer</h5>
                <a class="btn btn-sm btn-primary waves-effect waves-light" href="{{ route('admin.customer.list') }}">
                    <i class="me-1 fa-solid fa-chevron-left"></i> Back
                </a>
            </div>

            @if(session('message'))
            <div class="alert alert-success">
                {{ session('message') }}
            </div>
            @endif

            @if(session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
            @endif

            <div class="card-body">
                <form method="POST" action="{{ route('admin.customer.update', encrypt($customer->id)) }}" class="fv-plugins-bootstrap5" enctype="multipart/form-data">
                    @csrf


                    <div class="row">

                        {{-- Name --}}
                        <div class="mb-3 col-md-6">
                            <label class="form-label">Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                                value="{{ old('name', $customer->name) }}" autofocus>
                            @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
   {{-- user Name --}}
                        <div class="mb-3 col-md-6">
                            <label class="form-label">User Name <span class="text-danger">*</span></label>
                            <input type="text" name="username" class="form-control @error('username') is-invalid @enderror"
                                value="{{ old('username', $customer->username) }}" autofocus>
                            @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                        {{-- Email --}}
                        <div class="mb-3 col-md-6">
                            <label class="form-label">Email<span class="text-danger">*</span></label>
                            <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
                                value="{{ old('email', $customer->email) }}">
                            @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                        {{-- Phone --}}
                        <div class="mb-3 col-md-6">
                            <label class="form-label">Phone</label>
                            <input type="text" name="phone" class="form-control @error('phone') is-invalid @enderror"
                                value="{{ old('phone', $customer->phone) }}">
                            @error('phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                     
            {{-- Password --}}
                <div class="mb-3 col-md-6">
    <label class="form-label">New Password <small class="text-muted">(leave blank to keep current)</small></label>
    <input type="password" name="password" class="form-control @error('password') is-invalid @enderror">
    @error('password')<div class="invalid-feedback">{{ $message }}</div>@enderror
</div>

                        {{-- Address --}}
                        <div class="mb-3 col-md-6">
                            <label class="form-label">Address</label>
                            <textarea name="address" class="form-control @error('address') is-invalid @enderror">{{ old('address', $customer->address) }}</textarea>
                            @error('address')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        {{-- Profile Photo --}}
{{-- ID Front Copy --}}
<div class="mb-3 col-md-6">
    <label class="form-label">ID Front Copy</label>
    <input type="file" id="id_front" name="id_front" class="form-control @error('id_front') is-invalid @enderror" accept=".jpg,.jpeg,.png,.pdf">
    @error('id_front')<div class="invalid-feedback">{{ $message }}</div>@enderror

    <div class="mt-2 image-preview-container position-relative d-inline-block" id="id_front_preview_container">
        @if($customer->id_copy)
            @php $idFront = json_decode($customer->id_copy); @endphp
            @if($idFront && isset($idFront->front))
                @php $ext = pathinfo($idFront->front, PATHINFO_EXTENSION); @endphp

                @if(in_array(strtolower($ext), ['jpg','jpeg','png','gif']))
                    <img id="id_front_preview" src="{{ $idFront->front }}" alt="ID Front Copy" style="max-width: 200px; cursor: zoom-in;" class="img-thumbnail" />
                @elseif(strtolower($ext) === 'pdf')
                    <embed src="{{ $idFront->front }}" type="application/pdf" class="preview-embed" style="max-width: 200px; max-height: 200px;" />
                @endif
                <a href="{{ $idFront->front }}" download class="btn btn-sm btn-outline-primary mt-1">Download</a>

                <!-- Remove Button -->
                <button type="button" class="btn btn-sm btn-danger position-absolute top-0 end-0 remove-image-btn" data-target="remove_id_front" style="z-index: 10;">×</button>
            @else
                <img id="id_front_preview" style="display:none; max-width: 200px; cursor: zoom-in;" />
            @endif
        @else
            <img id="id_front_preview" style="display:none; max-width: 200px; cursor: zoom-in;" />
        @endif
    </div>
    <input type="checkbox" name="remove_id_front" value="1" hidden>
</div>

{{-- ID Back Copy --}}
<div class="mb-3 col-md-6">
    <label class="form-label">ID Back Copy</label>
    <input type="file" id="id_back" name="id_back" class="form-control @error('id_back') is-invalid @enderror" accept=".jpg,.jpeg,.png,.pdf">
    @error('id_back')<div class="invalid-feedback">{{ $message }}</div>@enderror

    <div class="mt-2 image-preview-container position-relative d-inline-block" id="id_back_preview_container">
        @if($customer->id_copy)
            @php $idBack = json_decode($customer->id_copy); @endphp
            @if($idBack && isset($idBack->back))
                @php $ext = pathinfo($idBack->back, PATHINFO_EXTENSION); @endphp

                @if(in_array(strtolower($ext), ['jpg','jpeg','png','gif']))
                    <img id="id_back_preview" src="{{ $idBack->back }}" alt="ID Back Copy" style="max-width: 200px; cursor: zoom-in;" class="img-thumbnail" />
                @elseif(strtolower($ext) === 'pdf')
                    <embed src="{{ $idBack->back }}" type="application/pdf" class="preview-embed" style="max-width: 200px; max-height: 200px;" />
                @endif
                <a href="{{ $idBack->back }}" download class="btn btn-sm btn-outline-primary mt-1">Download</a>

                <!-- Remove Button -->
                <button type="button" class="btn btn-sm btn-danger position-absolute top-0 end-0 remove-image-btn" data-target="remove_id_back" style="z-index: 10;">×</button>
            @else
                <img id="id_back_preview" style="display:none; max-width: 200px; cursor: zoom-in;" />
            @endif
        @else
            <img id="id_back_preview" style="display:none; max-width: 200px; cursor: zoom-in;" />
        @endif
    </div>
    <input type="checkbox" name="remove_id_back" value="1" hidden>
</div>

{{-- Profile Photo --}}
<div class="mb-3 col-md-6">
    <label class="form-label">Profile Photo</label>
    <input type="file" id="profile_photo" name="profile_photo" class="form-control @error('profile_photo') is-invalid @enderror" accept=".jpg,.jpeg,.png">
    @error('profile_photo')<div class="invalid-feedback">{{ $message }}</div>@enderror

    <div class="mt-2 image-preview-container position-relative d-inline-block" id="profile_photo_preview_container">
        @if($customer->profile_photo)
            @php $profilePhoto = json_decode($customer->profile_photo); @endphp
            @if($profilePhoto && isset($profilePhoto->url))
                <img id="profile_photo_preview" src="{{ $profilePhoto->url }}" alt="Profile Photo" style="max-width: 200px; cursor: zoom-in;" class="img-thumbnail" />
                <a href="{{ $profilePhoto->url }}" download class="btn btn-sm btn-outline-primary mt-1">Download</a>

                <!-- Remove Button -->
                <button type="button" class="btn btn-sm btn-danger position-absolute top-0 end-0 remove-image-btn" data-target="remove_profile_photo" style="z-index: 10;">×</button>
            @else
                <img id="profile_photo_preview" style="display:none; max-width: 200px; cursor: zoom-in;" />
            @endif
        @else
            <img id="profile_photo_preview" style="display:none; max-width: 200px; cursor: zoom-in;" />
        @endif
    </div>
    <input type="checkbox" name="remove_profile_photo" value="1" hidden>
</div>

                        {{-- Passport Copy --}}
                   {{-- Passport Copy --}}
<div class="mb-3 col-md-6">
    <label class="form-label">Passport Copy</label>
    <input type="file" id="passport_copy" name="passport_copy" class="form-control @error('passport_copy') is-invalid @enderror" accept=".jpg,.jpeg,.png,.pdf">
    @error('passport_copy')<div class="invalid-feedback">{{ $message }}</div>@enderror

    {{-- Image preview --}}
    <div class="mt-2 image-preview-container position-relative d-inline-block" id="passport_preview_container">
        @if($customer->passport_copy)
            @php $passport = json_decode($customer->passport_copy); @endphp
            @if($passport && isset($passport->url))
                @php $ext = pathinfo($passport->url, PATHINFO_EXTENSION); @endphp

                @if(in_array(strtolower($ext), ['jpg','jpeg','png','gif']))
                    <img id="passport_preview" src="{{ $passport->url }}" alt="Passport Copy" style="max-width: 200px; cursor: zoom-in;" class="img-thumbnail" />
                @elseif(strtolower($ext) === 'pdf')
                    <embed src="{{ $passport->url }}" type="application/pdf" class="preview-embed" />
                @endif
                <a href="{{ $passport->url }}" download class="btn btn-sm btn-outline-primary mt-1">Download</a>

                <!-- Remove Button -->
                <button type="button" class="btn btn-sm btn-danger position-absolute top-0 end-0 remove-image-btn" data-target="remove_passport" style="z-index: 10;">×</button>
            @else
                <img id="passport_preview" style="display:none; max-width: 200px; cursor: zoom-in;" />
            @endif
        @else
            <img id="passport_preview" style="display:none; max-width: 200px; cursor: zoom-in;" />
        @endif
    </div>

    <input type="checkbox" name="remove_passport" value="1" hidden>
</div>



                       

{{-- Passport Uploaded Date --}}
<div class="mb-3 col-md-6">
    <label class="form-label">Add passport verified date</label>
    <input type="date" name="passport_uploaded_date"
           class="form-control @error('passport_uploaded_date') is-invalid @enderror"
           value="{{ old('passport_uploaded_date', optional($customer)->passport_uploaded_date ? \Carbon\Carbon::parse($customer->passport_uploaded_date)->format('Y-m-d') : '') }}">
    @error('passport_uploaded_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
</div>

{{-- Birth Date --}}
<div class="mb-3 col-md-6">
    <label class="form-label">Birth Date</label>
    <input type="date" name="birth_date"
           class="form-control @error('birth_date') is-invalid @enderror"
           value="{{ old('birth_date', $customer->birth_date ? \Carbon\Carbon::parse($customer->birth_date)->format('Y-m-d') : '') }}">
    @error('birth_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
</div>
<div class="mb-3 col-md-6">
    <label class="form-label">Referral Points</label>
    <input type="text" class="form-control" value="{{ $customer->referral_points ?? 0 }}" disabled>
</div>

<div class="mb-3 col-md-6">
    <label class="form-label">Referral code</label>
    <input type="text" class="form-control" value="{{ $customer->referral_code ?? 0 }}" disabled>
</div>

<!-- <div class="mb-3 col-md-6">
    <label for="referred_by_manual" class="form-label">Referred By (Manual)</label>
    <select name="referred_by_manual" class="form-control">
        <option value="">-- None --</option>
        @foreach($customers as $ref)
            @if($ref->id != $customer->id)
                <option value="{{ $ref->id }}" {{ (old('referred_by_manual', $customer->referred_by_manual) == $ref->id) ? 'selected' : '' }}>
                    {{ $ref->name }} (ID: {{ $ref->email }})
                </option>
            @endif
        @endforeach
    </select>
</div>

<div class="mb-3 col-md-6">
    <label for="package_id" class="form-label">Package (For Referral Points)</label>
    <select name="package_id" class="form-control">
        <option value="">-- Select Package --</option>
        @foreach($packages as $package)
            <option value="{{ $package->id }}" {{ (old('package_id', $customer->package_id) == $package->id) ? 'selected' : '' }}>
                {{ $package->title }} (₹{{ number_format($package->discount_price ?? $package->original_price, 2) }})
            </option>
        @endforeach
    </select>
</div>

<div class="form-check mt-2">
    <input type="checkbox" class="form-check-input" name="award_manual_referral_points" value="1" id="awardManualPoints"
        {{ old('award_manual_referral_points', $customer->manual_points_awarded ?? false) ? 'checked' : '' }}>
    <label class="form-check-label" for="awardManualPoints">
        Award Manual Referral Points
    </label>
</div> -->


                    </div>

                    <div class="mt-3">
                        <button type="submit" class="btn btn-sm btn-primary me-2 waves-effect waves-light">Update</button>
                        <button type="reset" class="btn btn-sm btn-secondary waves-effect">Reset</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<style>
    #passport_preview,
    #id_front_preview,
    #id_back_preview {
        max-width: 200px;
        max-height: 200px;
        cursor: zoom-in;
        transition: transform 0.3s ease;
        display: block;
        object-fit: contain;
    }

    .preview-embed {
        max-width: 200px;
        max-height: 200px;
        cursor: default;
        display: block;
        border: 1px solid #ccc;
    }

    .zoomed {
        transform: scale(2);
        cursor: zoom-out;
        position: relative;
        z-index: 10;
    }
</style>

<script>
    function setupFilePreview(inputId, previewId, containerId) {
        const input = document.getElementById(inputId);
        const container = document.getElementById(containerId);

        input.addEventListener('change', function() {
            const file = this.files[0];

            if (file) {
                const fileType = file.type;
                const url = URL.createObjectURL(file);

                // Clear previous content
                container.innerHTML = '';

                if (fileType.startsWith('image/')) {
                    const img = document.createElement('img');
                    img.id = previewId;
                    img.src = url;
                    img.alt = 'Preview';
                    img.className = 'img-fluid';
                    img.style.maxWidth = '200px';
                    img.style.cursor = 'zoom-in';

                    // Zoom toggle
                    img.addEventListener('click', function() {
                        if (this.classList.contains('zoomed')) {
                            this.classList.remove('zoomed');
                            this.style.cursor = 'zoom-in'; // reset cursor
                        } else {
                            this.classList.add('zoomed');
                            this.style.cursor = 'zoom-out'; // change cursor when zoomed
                        }
                    });

                    container.appendChild(img);
                } else if (fileType === 'application/pdf') {
                    const embed = document.createElement('embed');
                    embed.src = url;
                    embed.type = 'application/pdf';
                    embed.className = 'preview-embed';

                    container.appendChild(embed);
                }

                // Download button
                const downloadLink = document.createElement('a');
                downloadLink.href = url;
                downloadLink.download = file.name;
                downloadLink.className = 'btn btn-sm btn-outline-primary mt-1';
                downloadLink.textContent = 'Download';

                container.appendChild(downloadLink);
            }
        });
    }

    // Initialize previews for all file inputs
    setupFilePreview('profile_photo', 'profile_photo_preview', 'profile_photo_preview_container');
    setupFilePreview('passport_copy', 'passport_preview', 'passport_preview_container','');
    setupFilePreview('id_front', 'id_front_preview', 'id_front_preview_container');
    setupFilePreview('id_back', 'id_back_preview', 'id_back_preview_container');
</script>


<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.remove-image-btn').forEach(button => {
        button.addEventListener('click', function () {
            console.log('Remove button clicked.');

            const confirmDelete = confirm('Are you sure you want to remove this file?');
            console.log('User confirmed:', confirmDelete);
            if (!confirmDelete) return;

            const targetName = this.getAttribute('data-target');
            console.log('Data-target attribute:', targetName);

            const hiddenCheckbox = document.querySelector(`input[name="${targetName}"]`);
            console.log('Found hidden checkbox:', hiddenCheckbox);

            if (hiddenCheckbox) {
                hiddenCheckbox.checked = true;
                console.log('Checkbox checked.');

                const container = this.closest('.image-preview-container');
                if (container) {
                    container.style.setProperty('display', 'none', 'important');
                    console.log('Image preview container hidden with !important.');
                } else {
                    console.log('No container found.');
                }
            } else {
                console.log('Hidden checkbox not found.');
            }
        });
    });
});
</script>


@endsection
@push('js')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>

<script>
    $(document).ready(function () {
        // Apply select2 to all select elements
        $('select').select2({
            width: '100%',
            allowClear: true,
            placeholder: function() {
                return $(this).data('placeholder') || 'Select an option';
            }
        });
    });





</script>
@endpush

<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />