000

@extends('admin.layout')

@section('page_title', 'Manage Category')
@section('category_select', 'active')

@section('container')
    <div class="container-fluid">
        <h1 class="my-4">Manage Category</h1>
        
        <a href="{{ url('admin/category') }}" class="btn btn-success mb-3">Back</a>
        
        <div class="row">
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-body">
                        <form action="{{ route('category.manage_category_process') }}" method="post" enctype="multipart/form-data">
                            @csrf
                            <div class="form-group">
                                <label for="CategoryName" class="control-label">Category Name</label>
                                <input id="CategoryName" value="{{ old('CategoryName', $CategoryName ?? '') }}" name="CategoryName" type="text" class="form-control @error('CategoryName') is-invalid @enderror" required>
                                @error('CategoryName')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

<div class="form-group">
                                <label for="category_image" class="control-label">Image</label>
                                <input id="category_image" name="CategoryImage" type="file" class="form-control-file @error('CategoryImage') is-invalid @enderror" aria-describedby="imageHelp">
                                <small id="imageHelp" class="form-text text-muted">Upload category image here.</small>
                                @error('CategoryImage')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror

@if(isset($CategoryImage) && $CategoryImage != '')
                                    <a href="{{ asset('storage/media/category/' . $CategoryImage) }}" target="_blank">
                                        <img src="{{ asset('storage/media/category/' . $CategoryImage) }}" class="img-fluid mt-3" style="max-height: 200px;" alt="Category Image">
                                    </a>
                                @endif
                            </div>

<button type="submit" class="btn btn-info mt-3">Submit</button>

@endsection

@section('styles')
    <style>
        .drop-zone {
            border: 2px dashed #cccccc;
            padding: 20px;
            cursor: pointer;
        }
        .drop-zone:hover {
            border-color: #666666;
        }
    </style>
@endsection

@section('scripts')
    <script>
        document.getElementById('drop_zone').addEventListener('dragover', function(event) {
            event.preventDefault();
            event.stopPropagation();
            this.classList.add('border', 'border-primary');
        });

document.getElementById('drop_zone').addEventListener('dragleave', function(event) {
            event.preventDefault();
            event.stopPropagation();
            this.classList.remove('border', 'border-primary');
        });

document.getElementById('drop_zone').addEventListener('drop', function(event) {
            event.preventDefault();
            event.stopPropagation();
            this.classList.remove('border', 'border-primary');
            
            var files = event.dataTransfer.files;
            document.getElementById('category_image').files = files;

if (files.length > 0) {
                this.innerHTML = `<p>File selected: ${files[0].name}</p>`;
            }
        });

document.getElementById('drop_zone').addEventListener('click', function() {
            document.getElementById('category_image').click();
        });

document.getElementById('category_image').addEventListener('change', function() {
            if (this.files.length > 0) {
                document.getElementById('drop_zone').innerHTML = `<p>File selected: ${this.files[0].name}</p>`;
            }
        });
    </script>
@endsection