@extends('Admin.layout')
<style>
    .image-upload {
        position: relative;
        height: 180px;
        width: 100%;
        border: 2px dashed #000;
        border-radius: 10px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    #placeholder p {
        margin: 0;
        font-weight: 600;
    }
    #placeholder small {
        color: #555;
    }
    #placeholder img {
        width: 270px;
        height: 150px;
    }
    #previewImage {
        max-width: 80%;
        max-height: 140px;
        border-radius: 8px;
        display: none;
    }
    #removeBtn {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        border: none;
        background: #ff4d4d;
        color: #fff;
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
        display: none;
        align-items: center;
        justify-content: center;
    }
</style>
@section('content')
<div class="row align-items-center justify-content-between mb-3 mt-3 m-2">
    <!-- Heading -->
    <div class="col-auto">
        <h5>
            <button type="button" class="btn btn-icon bg-white waves-effect me-2"
                style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <a href="{{route('package_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 icons-tabler-outline icon-tabler-chevron-left">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M15 6l-6 6l6 6" />
                    </svg>
                </a></button>Edit Package
        </h5>
    </div>
</div>
<div class="card p-4">
    <h6>Edit Package</h6>
    <form action="{{ route('edit_package_form') }}" id="PackageForm" method="post" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="id" value="{{ $packages->id }}">
        <div class="row d-lg-flex-row">
            <div class="col-lg-8 col-md-12 mb-3">
                <div class="row">
                    <div class="col-lg-6 mb-3">
                        <label class="form-label">Package</label>
                        <input type="text" name="package" class="form-control"
                            value="{{ old('package', $packages->package) }}"
                            placeholder="Enter Package">
                        @error('package')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                    <div class="col-lg-6 mb-3">
                        <label class="form-label">Amount</label>
                        <input type="text" name="amount" class="form-control"
                            value="{{ old('amount', $packages->amount) }}"
                            placeholder="Enter Amount">
                        @error('amount')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                    <div class="col-lg-6 mb-3">
                        <label class="form-label">Discount</label>
                        <input type="text" name="discount" class="form-control"
                            placeholder="Enter Discount"
                            value="{{ old('discount', $packages->discount) }}">
                        @error('discount')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                    <div class="col-lg-6 mb-3">
                        <label class="form-label">Days</label>
                        <input type="text" name="days" class="form-control" placeholder="Enter Days"
                            value="{{ old('days', $packages->days) }}">
                        @error('amount')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                    <div class="col-lg-6 mb-3">
                        <label class="form-label">Description</label>
                        <input type="text" name="description" class="form-control" placeholder="Enter Description"
                            value="{{ old('description', $packages->description) }}">
                        @error('description')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                    <div class="col-lg-6 mb-3">
                        <label class="form-label">Status</label>
                        <select name="is_active" class="form-select">
                            <option value="1"
                                {{ old('is_active', $packages->is_active) == 1 ? 'selected' : '' }}>
                                Active
                            </option>
                            <option value="0"
                                {{ old('is_active', $packages->is_active) == 0 ? 'selected' : '' }}>
                                Inactive
                            </option>
                        </select>
                        @error('is_active')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-12 mb-3">
                <label class="form-label">Image</label>
                <div class="image-upload" id="uploadBox">
                    <input type="file" name="package_image" id="fileInput" accept="image/jpeg" hidden>
                    <!-- Remove button -->
                    <button type="button" id="removeBtn">&times;</button>
                    <!-- Upload placeholder -->
                    <div id="placeholder">
                        <img src="{{ $packages->package_image ? asset('storage/'.$packages->package_image) : '' }}" alt="Demo package">
                    </div>
                    <!-- Preview -->
                    <img id="previewImage"
                        src="{{ $packages->package_image ? asset('storage/'.$packages->package_image) : '' }}"
                        alt="Preview">
                </div>
                @error('package_image')
                <small class="text-danger">{{ $message }}</small>
                @enderror
                <p class="mt-1 text-center">( Max file size: 5 MB, JPG only )</p>
            </div>
        </div>
        <div class="form-actions mt-4 d-flex gap-3 justify-content-center">
            <button type="reset" class="btn btn-label-secondary">Discard</button>
            <button type="submit" class="btn btn-primary" id="submit_btn">Update</button>
        </div>
    </form>
</div>
</div>
<script>
    //double tap prevention
    document.getElementById('PackageForm').addEventListener('submit', function() {
        const btn = document.getElementById('submit_btn');
        btn.disabled = true;
        btn.innerText = 'Processing...';
    });
</script>
<script>
    const uploadBox = document.getElementById('uploadBox');
    const fileInput = document.getElementById('fileInput');
    const previewImage = document.getElementById('previewImage');
    const placeholder = document.getElementById('placeholder');
    const removeBtn = document.getElementById('removeBtn');
    // Open file picker
    uploadBox.addEventListener('click', (e) => {
        if (e.target !== removeBtn) {
            fileInput.click();
        }
    });
    // Handle file selection
    fileInput.addEventListener('change', () => {
        const file = fileInput.files[0];
        if (!file) return;
        // Validate type
        if (file.type !== 'image/jpeg') {
            alert('Only JPG images are allowed.');
            resetUpload();
            return;
        }
        // Validate size (5MB)
        if (file.size > 5 * 1024 * 1024) {
            alert('File size must be less than 5 MB.');
            resetUpload();
            return;
        }
        const reader = new FileReader();
        reader.onload = (e) => {
            previewImage.src = e.target.result;
            previewImage.style.display = 'block';
            placeholder.style.display = 'none';
            removeBtn.style.display = 'flex';
        };
        reader.readAsDataURL(file);
    });
    // Remove image
    removeBtn.addEventListener('click', (e) => {
        e.stopPropagation();
        resetUpload();
    });
    function resetUpload() {
        fileInput.value = '';
        previewImage.src = '';
        previewImage.style.display = 'none';
        placeholder.style.display = 'block';
        removeBtn.style.display = 'none';
    }
</script>
@endsection