@extends('layouts.adminmaster')

@section('title', 'Edit Website Details | Trew India Pvt Ltd')

@section('content')
<div class="main-content">
    <div class="page-content">
        <div class="container-fluid">

            <h4 class="mb-4">Edit Website Details</h4>

            <div class="card">
                <div class="card-body">
                    <form action="{{ route('header.website-details.update', $detail->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="logo" class="form-label">Website Logo</label>
                                <!-- note the id="logo" -->
                                <input type="file" id="logo" name="logo" class="form-control" accept="image/*">
                                
                                <!-- existing logo shown initially; also used for preview of newly selected file -->
                                @if($detail->logo)
                                    <img id="logoPreview" src="{{ asset('uploads/logo/'.$detail->logo) }}" height="60" class="mt-2 rounded shadow-sm" alt="Logo">
                                @else
                                    <!-- placeholder img element so JS can update when user selects a new file -->
                                    <img id="logoPreview" src="" height="60" class="mt-2 rounded shadow-sm d-none" alt="Logo Preview">
                                @endif
                            </div>

                            <div class="col-md-6">
                                <label for="email" class="form-label">Email</label>
                                <input type="email" name="email" value="{{ $detail->email }}" class="form-control">
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="phone" class="form-label">Phone</label>
                                <input type="text" name="phone" value="{{ $detail->phone }}" class="form-control">
                            </div>

                            <div class="col-md-6">
                                <label for="toll_free" class="form-label">Toll Free</label>
                                <input type="text" name="toll_free" value="{{ $detail->toll_free }}" class="form-control">
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="address" class="form-label">Address</label>
                            <textarea name="address" rows="2" class="form-control">{{ $detail->address }}</textarea>
                        </div>

                        <div class="mb-3">
                            <label for="brochure" class="form-label">Upload Brochure (PDF / Word / Image)</label>
                            <!-- note the id="brochure" -->
                            <input type="file" id="brochure" name="brochure" class="form-control" accept=".pdf,.doc,.docx,image/*">

                            @if($detail->brochure)
                                @php $ext = pathinfo($detail->brochure, PATHINFO_EXTENSION); @endphp

                                @if (in_array(strtolower($ext), ['jpg','jpeg','png','webp']))
                                    <!-- existing brochure image (also will be previewed when new image chosen) -->
                                    <img id="brochurePreview" src="{{ asset('uploads/brochures/'.$detail->brochure) }}" height="60" class="mt-2 rounded shadow-sm" alt="Brochure">
                                @else
                                    <a id="brochureFileLink" href="{{ asset('uploads/brochures/'.$detail->brochure) }}" target="_blank" class="btn btn-outline-primary mt-2 btn-sm">
                                        <i class="mdi mdi-file-document-outline"></i> View Current File
                                    </a>
                                    <!-- hidden image preview element for when user selects an image file -->
                                    <img id="brochurePreview" src="" height="60" class="mt-2 rounded shadow-sm d-none" alt="Brochure Preview">
                                @endif
                            @else
                                <!-- no existing brochure: show hidden preview img that JS can toggle when user selects an image -->
                                <img id="brochurePreview" src="" height="60" class="mt-2 rounded shadow-sm d-none" alt="Brochure Preview">
                                <a id="brochureFileLink" class="d-none"></a>
                            @endif
                        </div>

                        <div class="text-end">
                            <button type="submit" class="btn btn-primary">Update</button>
                            <a href="{{ route('header.website-details.index') }}" class="btn btn-secondary">Cancel</a>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>

<!-- Preview JS: use below script to preview selected images -->
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    // helper to show image preview and remove d-none class
    function showImagePreview(inputElem, previewElemId, fileLinkElemId) {
        var input = document.getElementById(inputElem);
        var preview = document.getElementById(previewElemId);
        var fileLink = fileLinkElemId ? document.getElementById(fileLinkElemId) : null;

        if (!input) return;

        input.addEventListener('change', function (e) {
            var file = this.files && this.files[0];
            if (!file) return;

            // only preview image mime types
            if (file.type.startsWith('image/')) {
                var objectUrl = URL.createObjectURL(file);

                // set src and show
                preview.src = objectUrl;
                preview.classList.remove('d-none');

                // if there's a file link (for previous non-image file), hide it
                if (fileLink) fileLink.classList.add('d-none');

                // revoke object URL after image loads (free memory)
                preview.onload = function() {
                    URL.revokeObjectURL(objectUrl);
                };
            } else {
                // if non-image selected, hide preview and show a download link-like button
                if (preview) preview.classList.add('d-none');

                if (fileLink) {
                    // create a blob URL for the selected non-image file so user can open it in a new tab
                    var blobUrl = URL.createObjectURL(file);
                    fileLink.href = blobUrl;
                    fileLink.target = '_blank';
                    fileLink.classList.remove('d-none');
                    fileLink.textContent = 'Open Selected File';
                    // revoke when user leaves page (best-effort)
                    window.addEventListener('beforeunload', function () {
                        URL.revokeObjectURL(blobUrl);
                    });
                }
            }
        });
    }

    // preview for logo input
    showImagePreview('logo', 'logoPreview', null);

    // preview for brochure input (shows either image preview or a link for non-images)
    showImagePreview('brochure', 'brochurePreview', 'brochureFileLink');
});
</script>
@endpush

@endsection