@extends('layouts.adminmaster')

@section('title', 'Edit Mid Category | Trew India Pvt Ltd')

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

                <!-- Page Title -->
                <div class="row mb-4">
                    <div class="col-12">
                        <h4 class="mb-0">Edit Mid Category</h4>
                    </div>
                </div>

                <!-- Edit Form -->
                <form action="{{ route('admin.mid-categories.update', $midCategory->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    <!-- Top Category Selection -->
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Select Top Category</label>
                            <select name="top_category_id" class="form-select" required>
                                <option value="">-- Select Top Category --</option>
                                @foreach ($topCategories as $topCategory)
                                    <option value="{{ $topCategory->id }}"
                                        {{ $midCategory->top_category_id == $topCategory->id ? 'selected' : '' }}>
                                        {{ $topCategory->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <!-- Mid Category Name -->
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Mid Category Name</label>
                            <input type="text" name="name" class="form-control"
                                   value="{{ $midCategory->name }}" required>
                        </div>
                    </div>

                    <!-- Image Upload with Old + New Preview -->
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Upload New Image</label>
                            <input type="file" name="image" id="imageInput" class="form-control" accept="image/*">
                            <small class="text-muted d-block mt-1">
                                Allowed: JPG, JPEG, PNG, WEBP | Max size: 2MB
                            </small>

                            <!-- Current Image -->
                            @if($midCategory->image)
                                <div class="mt-3">
                                    <p class="mb-1 fw-semibold">Current Image:</p>
                                    <img id="currentImage" 
                                         src="{{ asset('storage/' . $midCategory->image) }}" 
                                         alt="Current Image"
                                         class="rounded border" 
                                         width="100" height="100" 
                                         style="object-fit: cover;">
                                </div>
                            @endif

                            <!-- New Image Preview -->
                            <div class="mt-3 d-none" id="newImageWrapper">
                                <p class="mb-1 fw-semibold text-success">New Image Preview:</p>
                                <img id="previewImage" 
                                     src="" 
                                     alt="Preview Image"
                                     class="rounded border"
                                     width="100" height="100"
                                     style="object-fit: cover;">
                            </div>
                        </div>
                    </div>

                    <!-- Submit & Back Buttons -->
                    <div class="text-start mt-4 mb-4">
                        <button type="submit" class="btn btn-success btn-lg me-3">
                            <i class="mdi mdi-content-save"></i> Update Mid Category
                        </button>
                        <a href="{{ route('admin.mid-categories.index') }}" class="btn btn-secondary btn-lg">
                            <i class="mdi mdi-arrow-left"></i> Back to List
                        </a>
                    </div>
                </form>

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

    <!-- Live Preview Script -->
    <script>
        document.getElementById('imageInput').addEventListener('change', function(event) {
            const file = event.target.files[0];
            const previewWrapper = document.getElementById('newImageWrapper');
            const previewImg = document.getElementById('previewImage');

            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    previewImg.src = e.target.result;
                    previewWrapper.classList.remove('d-none');
                }
                reader.readAsDataURL(file);
            } else {
                previewWrapper.classList.add('d-none');
                previewImg.src = '';
            }
        });
    </script>
@endsection