@extends('layouts.app')
@php
    $title = isset($serviceMaster) ? 'Edit Service Master' : 'Create Service Master';
@endphp
@section('title', $title)
@section('content')
    <link rel="stylesheet" href="{{ asset('css/summernote.min.css') }}">
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Service Master</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="serviceMasterForm"
                            action="{{ isset($serviceMaster) ? route('service.update', $serviceMaster->service_id) : route('service.store') }}"
                            method="post" enctype="multipart/form-data">
                            @csrf
                            @if (isset($serviceMaster))
                                @method('PUT')
                            @endif

                            <div class="card-body">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>Category <span class="text-danger">*</span></label>
                                            <select class="form-control select2 category" name="category_id" id="category"
                                                style="width: 100%;">
                                                <option value="">Select Category</option>
                                                @foreach ($category as $key => $name)
                                                    <option value="{{ $key }}"
                                                        {{ old('category_id', isset($serviceMaster) ? $serviceMaster->category_id : '') == $key ? 'selected' : '' }}>
                                                        {{ $name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <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="{{ old('name', $serviceMaster->name ?? '') }}"
                                                placeholder="Enter name"><br>
                                            <input type="text" class="form-control" name="name_ar" id="name_ar"
                                                value="{{ old('name_ar', $serviceMaster->name_ar ?? '') }}"
                                                placeholder="Enter name in arabic">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="service_image">Service Image <span
                                                    class="text-danger">*</span></label> <small>(aspect ratio
                                                110*110)</small>
                                            <div class="input-group">
                                                <div class="custom-file">
                                                    <input type="file" class="custom-file-input" name="service_image"
                                                        id="service_image">
                                                    <label class="custom-file-label" for="service_image">Choose file</label>
                                                </div>
                                            </div>
                                            <div id="previewContainer"
                                                style="display:none; position: relative; width: 150px; margin-top: 10px;">
                                                <img id="previewImage" src="" alt="Preview"
                                                    style="width: 100%; border: 1px solid #ccc; padding: 5px; border-radius: 5px;">
                                                <button type="button" id="removeImage"
                                                    style="position: absolute; top: -10px; right: -10px; background: red; color: #fff;
               border: none; border-radius: 50%; padding: 3px 7px; cursor: pointer;">
                                                    ×
                                                </button>
                                            </div>
                                            @if (isset($serviceMaster))
                                                <img src="{{ $serviceMaster->service_image_url }}" alt="Service Image"
                                                    width="100" class="mt-2">
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>Status</label>
                                            <select class="custom-select select2" name="status">
                                                <option value="1"
                                                    {{ old('status', $serviceMaster->status ?? '') == 1 ? 'selected' : '' }}>
                                                    Active</option>
                                                <option value="0"
                                                    {{ old('status', $serviceMaster->status ?? '') == 0 ? 'selected' : '' }}>
                                                    In Active</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <label for="description">Description <span class="text-danger">*</span></label>
                                        <textarea id="description" class="description" name="description">{{ old('description', $serviceMaster->description ?? '') }}</textarea>                                        
                                    </div>
                                    <div class="col-sm-12">
                                        <label for="description">Description (In Arabic)<span class="text-danger">*</span></label>                                        
                                        <textarea id="description_ar" class="description" name="description_ar">{{ old('description_ar', $serviceMaster->description_ar ?? '') }}</textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <a href="{{ route('service.list') }}" class="btn btn-secondary">Cancel</a>
                                <button type="submit" id="storeServiceMaster"
                                    class="btn btn-primary">{{ isset($serviceMaster) ? '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 src="{{ asset('js/summernote-bs4.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('.select2').select2();
            $('.description').summernote({
                height: 300,
                width: 1200,
            });

            $('#description').on('summernote.change', function() {
                var plainText = $('<div>').html($(this).summernote('code')).text().trim();

                if (plainText.length > 0 && !/^\s/.test(plainText)) {
                    $(this).next('.note-editor').find('.note-editable').removeClass('is-invalid');
                    $(this).next('.note-editor').find('.invalid-feedback').remove();
                }
            });

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

            // For name field (text input)
            $.validator.addMethod("noLeadingSpaceInput", function(value, element) {
                return this.optional(element) || /^\S.*$/.test(value);
            }, "First character cannot be a space.");

            // For Summernote description
            $.validator.addMethod("noLeadingSpaceEditor", function(value, element) {
                var plainText = $('<div>').html($('#description').summernote('code')).text();
                return /^\S/.test(plainText); // fails if starts with space
            }, "First character cannot be a space.");

            // For Summernote being empty
            $.validator.addMethod("validDescription", function(value, element) {
                var plainText = $('<div>').html($('#description').summernote('code')).text().trim();
                return plainText.length > 0;
            }, "Please enter a description");

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

            $.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.");

            $("#serviceMasterForm").validate({
                ignore: ":hidden:not(#description), .note-editable.card-block",
                rules: {
                    category_id: {
                        required: true,
                    },
                    name: {
                        required: true,
                        maxlength: 100,
                        noLeadingSpaceInput: true,
                        englishOnly: true
                    },
                    name_ar: {
                        required: true,
                        maxlength: 100,
                        noLeadingSpaceInput: true,
                        arabiconly:true
                    },
                    service_image: {
                        required: edit ? false : true,
                        extension: "jpg|jpeg|png|tiff|tif|webp",
                        filesize: 5242880 // 5MB
                    },
                    description: {
                        required: true,
                        validDescription: true,
                        noLeadingSpaceEditor: true,
                        noArabic: true,

                    },
                    description_ar: {
                        required: true,
                        validDescription: true,
                        noLeadingSpaceEditor: true,
                        arabiconly: true
                    }
                },
                messages: {
                    category_id: {
                        required: "Please select category"
                    },
                    name: {
                        required: "Please enter a service name",
                        maxlength: "Name cannot exceed 100 characters",
                        englishOnly: "Only English letters and spaces are allowed",
                    },
                    name_ar: {
                        required: "Please enter a service name in arabic",
                        maxlength: "Name cannot exceed 100 characters",
                        arabiconly: "Please enter Arabic letters and numbers only."
                    },
                    service_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",
                        noArabic: "Arabic characters are not allowed"
                    },
                    description_ar: {
                        required: "Please enter a description in arabic",
                        arabiconly: "Please enter Arabic letters and numbers only."
                    }
                },
                errorElement: 'span',
                errorPlacement: function(error, element) {
                    error.addClass('invalid-feedback');

                    if (element.attr("id") === "description") {
                        $('#description').next('.note-editor').append(error);
                    }else if (element.attr("id") === "description_ar") {
                        $('#description_ar').next('.note-editor').append(error);
                    } else {
                        element.closest('.form-group').append(error);
                    }
                },
                highlight: function(element) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function(element) {
                    $(element).removeClass('is-invalid');
                },
                submitHandler: function(form) {
                    var content = $('#description').summernote('code').trim();
                    $("#description").val(content);

                    var summernoteContentAr = $('#description_ar').summernote('code').trim();
                    var plainText = $('<div>').html(summernoteContentAr).text().replace(/\u00a0/g, ' ')
                        .trim();
                    $("#description_ar").val(summernoteContentAr);
                    if (plainText === "") {
                        $("#description_ar").val("");
                        $("#description_ar").next('.note-editor').find('.invalid-feedback').remove();
                        $("#description_ar").next('.note-editor').append(
                            '<span class="invalid-feedback d-block">Please enter a description in arabic</span>'
                        );
                        return false;
                    }
                    form.submit();
                }
            });

            $('#service_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 5MB.');

            $("#storeServiceMaster").click(function(e) {
                $("#serviceMasterForm").valid();
            });
            document.getElementById('service_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 text with filename
                    this.nextElementSibling.innerText = file.name;
                }
            });

            // Remove button click
            document.getElementById('removeImage').addEventListener('click', function() {
                let input = document.getElementById('service_image');
                input.value = ""; // clear file input
                input.nextElementSibling.innerText = "Choose file"; // reset label
                document.getElementById('previewContainer').style.display = 'none';
            });
        });
    </script>
@endsection