@extends('admin.layout.master')
@section('content')
<style>
    .cke_notification_message {
        display: none !important;
    }

    .cke_notification_warning {
        display: none !important;
    }
</style>
<div class="content-wrapper">
    <div class="content">
        <div class="card card-default">
            <div class="card-header">
                <h2>Edit Sub-Service Variant</h2>
            </div>

            <div class="card-body">
                <form action="{{ route('sub_service_variant.update', $subservicesvariant->id) }}" id="service_variant" method="POST" enctype="multipart/form-data" onsubmit="return validateForm()">
                    @csrf
                    @method('PUT')

                    <div class="row">
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label for="service_name">Service Name</label>
                                <select class="form-control" name="service_id" id="service_id" required onchange="loadSubServices()">
                                    <option value="">Select Service</option>
                                    @foreach($services as $service)
                                    <option value="{{ $service->id }}" {{ $subservicesvariant->service_id == $service->id ? 'selected' : '' }}>
                                        {{ $service->service_name }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-sm-4">
                            <div class="form-group">
                                <label for="subservice_name">Sub Services Name</label>
                                <select class="form-control" name="subservice_id" id="subservice_id" required>
                                    <option value="">Select Sub Service</option>
                                    @foreach($subservices as $subservice)
                                    <option value="{{ $subservice->id }}" {{ $subservicesvariant->subservice_id == $subservice->id ? 'selected' : '' }}>
                                        {{ $subservice->subservice_name }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-sm-4">
                            <div class="form-group">
                                <label for="subservice_name">Time Period</label>
                                <select class="form-control" name="timepackage_id" id="timepackage_id" required>
                                    <option value="">Select Time Period</option>
                                    @foreach($timePackages as $timePackage)
                                    <option value="{{ $timePackage->id }}" {{ $subservicesvariant->timepackage_id == $timePackage->id ? 'selected' : '' }}>
                                        {{ $timePackage->time_period }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for="designation">Designation</label>
                                <input type="text" class="form-control" name="designation" placeholder="Enter Designation" value="{{ old('designation', $subservicesvariant->designation) }}">
                                @if ($errors->has('designation'))
                                <span class="text-danger">{{ $errors->first('designation') }}</span>
                                @endif
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for="starting_price">Starting Price (Minimum price 500 Rs.)</label>
                                <input type="text" class="form-control" name="starting_price" id="starting_price" placeholder="Enter Starting Price" value="{{ old('starting_price', $subservicesvariant->starting_price) }}" oninput="validatePrice(this)">
                                <span id="priceError" class="text-danger"></span>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label for="starting_price">Daily Price (Minimum price 500 Rs.)</label>
                                <input type="text" class="form-control" name="daily_price" id="daily_price" placeholder="Enter Daily Price" value="{{ old('daily_price', $subservicesvariant->daily_price) }}" oninput="validateDailyPrice(this)">
                                <span id="dailypriceError" class="text-danger"></span>
                            </div>
                        </div>

                        <div class="col-sm-4">
                            <div class="form-group">
                                <label for="starting_price">Weekly Price (Minimum price 500 Rs.)</label>
                                <input type="text" class="form-control" name="weekly_price" id="weekly_price" placeholder="Enter Weekly Price" value="{{ old('weekly_price', $subservicesvariant->weekly_price) }}" oninput="validateWeeklyPrice(this)">
                                <span id="weeklypriceError" class="text-danger"></span>
                            </div>
                        </div>

                        <div class="col-sm-4">
                            <div class="form-group">
                                <label for="starting_price">Monthly Price (Minimum price 500 Rs.)</label>
                                <input type="text" class="form-control" name="monthly_price" id="monthly_price" placeholder="Enter Monthly Price" value="{{ old('monthly_price', $subservicesvariant->monthly_price) }}" oninput="validateMonthlyPrice(this)">
                                <span id="monthlypriceError" class="text-danger"></span>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for="experience">Experience</label>
                                <div>
                                    <input type="radio" name="experience" id="experience" value="experience" {{ old('experience', $subservicesvariant->experience) == 'experience' ? 'checked' : '' }}>
                                    <label for="experience">Experience</label>

                                    <input type="radio" name="experience" id="fresher" value="fresher" {{ old('experience', $subservicesvariant->experience) == 'fresher' ? 'checked' : '' }}>
                                    <label for="fresher">Fresher</label>
                                </div>
                                @if ($errors->has('experience'))
                                <span class="text-danger">{{ $errors->first('experience') }}</span>
                                @endif
                            </div>
                        </div>

                        <!-- Icon Upload -->
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for="icon">Icon</label>
                                <input type="file" class="form-control-file" name="icon" id="iconInput" onchange="previewIcon(event)">
                                @if ($errors->has('icon'))
                                <span class="text-danger">{{ $errors->first('icon') }}</span>
                                @endif
                            </div>

                            <div id="iconImagePreview" class="mt-2">
                                @if($subservicesvariant->icon)
                                <img src="{{ asset('storage/icon-images/'.$subservicesvariant->icon) }}" alt="Icon Preview" style="max-width: 100px; max-height: 100px;">
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label for="price">Description</label>
                                <div id="descriptionContainer">
                                    @foreach(json_decode($subservicesvariant->details, true) as $key => $detail)
                                    <div class="form-group descriptionWrapper">
                                        <textarea class="form-control descriptionEditor" name="details[]" id="descriptionEditor_{{ $key }}" cols="30" rows="5">{{ $detail }}</textarea>
                                        <button type="button" class="btn btn-danger btn-sm removeDescription" style="{{ $key == 0 ? 'display: none;' : '' }}">Remove</button>
                                    </div>
                                    @endforeach
                                </div>
                                <button type="button" class="btn btn-success btn-sm mt-2" id="addDescription">Add More</button>
                            </div>
                        </div>
                    </div>

                    <div class="form-footer pt-5">
                        <button type="submit" class="btn btn-primary btn-pill">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
<script src="https://cdn.ckeditor.com/4.16.1/full/ckeditor.js"></script>

<script>
    function validatePrice(input) {
        let oldValue = input.value;
        input.value = input.value.replace(/[^0-9]/g, '');

        let value = parseInt(input.value, 10);

        if (isNaN(value)) {
            document.getElementById("priceError").innerText = "Please enter a valid number.";
            return false;
        }

        if (value < 500) {
            document.getElementById("priceError").innerText = "Price must be at least 500!";
            return false;
        } else {
            document.getElementById("priceError").innerText = "";
            return true;
        }
    }

    function validateDailyPrice(input) {
        input.value = input.value.replace(/[^0-9]/g, '');
        let value = parseInt(input.value, 10);
        let errorSpan = document.getElementById("dailypriceError");

        if (isNaN(value)) {
            errorSpan.innerText = "Please enter a valid number.";
            return false;
        }

        if (value < 500) {
            errorSpan.innerText = "Price must be at least 500!";
            return false;
        } else {
            errorSpan.innerText = "";
            return true;
        }
    }


    function validateWeeklyPrice(input) {
        let oldValue = input.value;
        input.value = input.value.replace(/[^0-9]/g, '');

        let value = parseInt(input.value, 10);

        if (isNaN(value)) {
            document.getElementById("weeklypriceError").innerText = "Please enter a valid number.";
            return false;;
        }

        if (value < 500) {
            document.getElementById("weeklypriceError").innerText = "Price must be at least 500!";
            return false;;
        } else {
            document.getElementById("weeklypriceError").innerText = "";
            return true;
        }
    }

    function validateMonthlyPrice(input) {
        let oldValue = input.value;
        input.value = input.value.replace(/[^0-9]/g, '');

        let value = parseInt(input.value, 10);

        if (isNaN(value)) {
            document.getElementById("monthlypriceError").innerText = "Please enter a valid number.";
            return false;;
        }

        if (value < 500) {
            document.getElementById("monthlypriceError").innerText = "Price must be at least 500!";
            return false;
        } else {
            document.getElementById("monthlypriceError").innerText = "";
            return true;
        }
    }

    function validateForm() {
        const startingpriceInput = document.getElementById("starting_price");
        const dailyInput = document.getElementById("daily_price");
        const weeklyInput = document.getElementById("weekly_price");
        const monthlyInput = document.getElementById("monthly_price");

        if (!validatePrice(startingpriceInput)) {
            startingpriceInput.focus();
            return false;
        }
        if (!validateDailyPrice(dailyInput)) {
            dailyInput.focus();
            return false;
        }
        if (!validateWeeklyPrice(weeklyInput)) {
            weeklyInput.focus();
            return false;
        }
        if (!validateMonthlyPrice(monthlyInput)) {
            monthlyInput.focus();
            return false;
        }
        return true;
    }
</script>


<script>
    document.addEventListener("DOMContentLoaded", function() {
        let descriptionCount = document.querySelectorAll('.descriptionEditor').length;

        document.querySelectorAll('.descriptionEditor').forEach((textarea) => {
            CKEDITOR.replace(textarea.id);
        });

        document.getElementById("addDescription").addEventListener("click", function() {
            descriptionCount++;
            let container = document.getElementById("descriptionContainer");
            let newId = "descriptionEditor_" + descriptionCount;
            let newField = document.createElement("div");
            newField.classList.add("form-group", "descriptionWrapper");
            newField.innerHTML = `
                <textarea class="form-control descriptionEditor" name="details[]" id="${newId}" cols="30" rows="5"></textarea>
                <button type="button" class="btn btn-danger btn-sm removeDescription">Remove</button>
            `;
            container.appendChild(newField);
            CKEDITOR.replace(newId);
        });

        document.addEventListener("click", function(event) {
            if (event.target.classList.contains("removeDescription")) {
                let parentDiv = event.target.parentElement;
                let textarea = parentDiv.querySelector("textarea");
                if (textarea && CKEDITOR.instances[textarea.id]) {
                    CKEDITOR.instances[textarea.id].destroy();
                }
                parentDiv.remove();
            }
        });
    });
</script>

<script>
    function loadSubServices() {
        var serviceId = $("#service_id").val();
        var subServiceDropdown = $("#subservice_id");

        subServiceDropdown.html('<option value="">Select Sub Service</option>');

        if (serviceId) {
            $.ajax({
                url: "{{ route('get.subservices') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    service_id: serviceId
                },
                dataType: "json",
                success: function(data) {
                    $.each(data, function(key, subService) {
                        subServiceDropdown.append('<option value="' + subService.id + '">' + subService.subservice_name + '</option>');
                    });
                },
                error: function(xhr, status, error) {
                    console.error("Error fetching sub-services:", error);
                }
            });
        }
    }
</script>

<script>
    function previewIcon(event) {
        let preview = document.getElementById('iconImagePreview');
        preview.innerHTML = '';
        let file = event.target.files[0];

        if (file) {
            let reader = new FileReader();
            reader.onload = function(e) {
                preview.innerHTML = `
                    <div class="position-relative">
                        <img src="${e.target.result}" width="100" height="100" style="border-radius: 5px;">
                    </div>
                `;
            };
            reader.readAsDataURL(file);
        }
    }
</script>