@extends('layouts.app')
@php
    $title = isset($category) ? 'Edit Category' : 'Create Category';
@endphp
@section('title', $title)
@section('content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Categories</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item active">{{ $title }}</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-primary">
                        <div class="card-header">
                            <h3 class="card-title">{{ $title }}</h3>
                        </div>

                        <form id="categoryForm"
                            action="{{ isset($category) ? route('category.update', $category->category_id) : route('category.store') }}"
                            method="post" enctype="multipart/form-data">
                            @csrf
                            @if (isset($category))
                                @method('PUT')
                            @endif

                            <div class="card-body">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="name">Name<span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" name="name" id="name"
                                                value="{{ $category->name ?? '' }}" placeholder="Enter name"><br>
                                            <input type="text" class="form-control" name="name_ar" id="name_ar"
                                                value="{{ $category->name_ar ?? '' }}" placeholder="Enter name in Arabic">
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="category_image">Category Image <span
                                                    class="text-danger">*</span></label> <small>(aspect ratio 64*64)</small>
                                            <div class="input-group">
                                                <div class="custom-file">
                                                    <input type="file" class="custom-file-input" name="category_image"
                                                        id="category_image">
                                                    <label class="custom-file-label" for="category_image">Choose
                                                        file</label>
                                                </div>
                                            </div>
                                            <div id="previewContainer"
                                                style="display:none; position: relative; width: 150px; margin-top: 10px;">
                                                <img id="previewImage" src="" alt="Image Preview"
                                                    style="width: 100%; border: 1px solid #ccc; padding: 5px; border-radius: 5px;">
                                                <button type="button" id="removePreview"
                                                    style="position: absolute; top: -10px; right: -10px; background: red; color: white; border: none; border-radius: 50%; padding: 3px 7px; cursor: pointer;">
                                                    ×
                                                </button>
                                            </div>
                                            @if (isset($category) && $category->category_image)
                                                <img src="{{ $category->category_image_url }}" alt="Category Image"
                                                    width="100" class="mt-2">
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="description">Description <span class="text-danger">*</span></label>
                                            <textarea class="form-control" name="description" rows="3" id="description" placeholder="Enter Description">{{ $category->description ?? '' }}</textarea><br>
                                            <textarea class="form-control" name="description_ar" rows="3" id="description_ar" placeholder="Enter Description in Arabic">{{ $category->description_ar ?? '' }}</textarea>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>Status</label>
                                            <select class="custom-select select2" name="status">
                                                <option value="1"
                                                    {{ isset($category) && $category->status == 1 ? 'selected' : '' }}>
                                                    Active</option>
                                                <option value="0"
                                                    {{ isset($category) && $category->status == 0 ? 'selected' : '' }}>In
                                                    Active</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <a href="{{ route('category.list') }}" class="btn btn-secondary">Cancel</a>
                                <button type="button" id="storeCategory"
                                    class="btn btn-primary">{{ isset($category) ? 'Update' : 'Submit' }}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection
@section('scripts')
    <script src="{{ asset('js/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('js/additional-methods.min.js') }}"></script>
    <script>
        $(document).ready(function() {

            $('.select2').select2();

            var edit = "{{ isset($category) }}";

            $.validator.setDefaults({
                ignore: [],
                onfocusout: function(element) {
                    if (element.value && typeof element.value === 'string') {
                        element.value = element.value.trim();
                    }
                    this.element(element);
                }
            });

            $.validator.addMethod("notOnlySpaces", function(value, element) {
                return this.optional(element) || value.length > 0;
            }, "This field cannot be empty or contain only spaces.");

            $.validator.addMethod("englishOnly", function (value, element) {
                return this.optional(element) || /^[A-Za-z ]+$/.test(value);
            }, "Please enter English letters and spaces only.");

            $.validator.addMethod("noArabic", function (value, element) {
                return this.optional(element) || !/[\u0600-\u06FF]/.test(value);
            }, "Arabic characters are not allowed.");
            
            $.validator.addMethod("arabiconly", function(value, element) {
                return this.optional(element) || !/[A-Za-z]/.test(value);
            }, "Please enter Arabic letters and numbers only.");

            $("#categoryForm").validate({
                rules: {
                    name: {
                        required: true,
                        maxlength: 100,
                        notOnlySpaces: true,
                        englishOnly: true
                    },
                    name_ar: {
                        required: true,
                        maxlength: 100,
                        notOnlySpaces: true,
                        arabiconly: true
                    },
                    category_image: {
                        required: edit ? false : true,
                        extension: "jpg|jpeg|png|tiff|tif|webp",
                        filesize: 5242880 // 1MB
                    },
                    description: {
                        required: true,
                        notOnlySpaces: true,
                        noArabic: true,
                    },
                    description_ar: {
                        required: true,
                        notOnlySpaces: true,
                        arabiconly: true
                    }
                },
                messages: {
                    name: {
                        required: "Please enter a category name",
                        maxlength: "Name cannot exceed 100 characters",
                        notOnlySpaces: "Name cannot be empty or only spaces",
                        englishOnly: "Only English letters and spaces are allowed"
                    },
                    name_ar: {
                        required: "Please enter a category name in arabic",
                        maxlength: "Name cannot exceed 100 characters",
                        notOnlySpaces: "Name cannot be empty or only spaces",
                        arabiconly: "Please enter Arabic letters and numbers only."
                    },
                    category_image: {
                        required: "Please upload an image",
                        extension: "Only image files (JPG, JPEG, PNG, TIFF, TIF, WEBP) are allowed",
                        filesize: "File must be less than 5MB"
                    },
                    description: {
                        required: "Please enter a description",
                        notOnlySpaces: "Description cannot be empty or only spaces",
                        noArabic: "Arabic characters are not allowed"
                    },
                    description_ar: {
                        required: "Please enter a description in arabic",
                        notOnlySpaces: "Description cannot be empty or only spaces",
                        arabiconly: "Please enter Arabic letters and numbers only."
                    }
                },
                errorElement: 'span',
                errorPlacement: function(error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.form-group').append(error);
                },
                highlight: function(element, errorClass, validClass) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function(element, errorClass, validClass) {
                    $(element).removeClass('is-invalid');
                },
                submitHandler: function(form) {
                    form.submit();
                }
            });

            $('#category_image').on('change', function() {
                var fileName = $(this).val().split("\\").pop();
                $(this).next('.custom-file-label').addClass("selected").html(fileName);
            });

            $.validator.addMethod('filesize', function(value, element, param) {
                return this.optional(element) || (element.files[0].size <= param);
            }, 'File size must be less than 1MB.');

            $("#storeCategory").click(function(e) {
                if ($("#categoryForm").valid()) {
                    $("#categoryForm").submit();
                }
            });
            document.getElementById('category_image').addEventListener('change', function(e) {
                let file = e.target.files[0];
                if (file) {
                    let reader = new FileReader();
                    reader.onload = function(event) {
                        document.getElementById('previewImage').src = event.target.result;
                        document.getElementById('previewContainer').style.display = 'block';
                    }
                    reader.readAsDataURL(file);

                    // Update label with file name
                    this.nextElementSibling.innerText = file.name;
                }
            });

            // Remove Image
            document.getElementById('removePreview').addEventListener('click', function() {
                let fileInput = document.getElementById('category_image');
                fileInput.value = ''; // Clear input
                fileInput.nextElementSibling.innerText = 'Choose file'; // Reset label
                document.getElementById('previewContainer').style.display = 'none';
            });
        });
    </script>
@endsection