@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> Create Sub Service Variant</h2>
            </div>
        </div>
        <div class="card card-default">
            <div class="card-body">
                <form action="{{ route('sub_service_variant.store') }}" method="POST" enctype="multipart/form-data" onsubmit="return validateForm()">
                    @csrf
                    <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 }}" {{ old('service_id') == $service->id ? 'selected' : '' }}>
                                        {{ $service->service_name }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        @if ($errors->has('service_name'))
                        <span class="text-danger">{{ $errors->first('service_name') }}</span>
                        @endif
                        <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 onchange="loadTimeperiods()">
                                    <option value="">Select Sub Service</option>
                                </select>
                            </div>
                        </div>
                        @if ($errors->has('subservice_id'))
                        <span class="text-danger">{{ $errors->first('subservice_id') }}</span>
                        @endif
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label for="time_period">Time Period</label>
                                <select class="form-control" name="timepackage_id" id="timepackage_id" required>
                                    <option value="">Select Time Period</option>
                                </select>
                            </div>
                        </div>
                        @if ($errors->has('timepackage_id'))
                        <span class="text-danger">{{ $errors->first('timepackage_id') }}</span>
                        @endif
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for="time_period">Designation</label>
                                <input type="text" class="form-control" name="designation" placeholder="Enter Designation" value="{{ old('designation') }}">
                            </div>
                        </div>
                        @if ($errors->has('designation'))
                        <span class="text-danger">{{ $errors->first('designation') }}</span>
                        @endif

                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for="time_period">Starting Price (Minimum price 500 Rs.)</label>
                                <input type="text" class="form-control" name="starting_price" id="starting_price" placeholder="Enter Starting Price" value="500" oninput="validatePrice(this)">
                                <span id="priceError" class="text-danger"></span>
                            </div>
                        </div>
                        @if ($errors->has('starting_price'))
                        <span class="text-danger">{{ $errors->first('starting_price') }}</span>
                        @endif
                    </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" 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" 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" 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="price">Experience</label>
                                <div>
                                    <input type="radio" name="experience" id="experience" value="experience" checked>
                                    <label for="experience">Experience</label>

                                    <input type="radio" name="experience" id="fresher" value="fresher">
                                    <label for="fresher">Fresher</label>
                                </div>
                            </div>
                        </div>
                        @if ($errors->has('experience'))
                        <span class="text-danger">{{ $errors->first('experience') }}</span>
                        @endif
                        <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" required onchange="previewIcon(event)">
                                @if ($errors->has('icon'))
                                <span class="text-danger">{{ $errors->first('icon') }}</span>
                                @endif
                            </div>
                            <div id="iconImagePreview" class="mt-2"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label for="price">Description</label>
                                <div id="descriptionContainer">
                                    <div class="form-group descriptionWrapper">
                                        <textarea class="form-control descriptionEditor" name="details[]" id="descriptionEditor" cols="30" rows="5"></textarea>
                                        <button type="button" class="btn btn-danger btn-sm removeDescription" style="display: none;">Remove</button>
                                    </div>
                                </div>
                                <button type="button" class="btn btn-success btn-sm mt-2" id="addDescription">Add More</button>
                                <!-- <textarea class="form-control detailsEditor" name="details" id="detailsEditor" cols="30" rows="5">{{ old('description') }}</textarea> -->
                            </div>
                        </div>
                        @if ($errors->has('description'))
                        <span class="text-danger">{{ $errors->first('description') }}</span>
                        @endif
                    </div>

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

<script>
    // function validatePrice(input) {
    //     let value = parseInt(input.value, 10);
    //     alert(value);
    //     if (isNaN(value)) {
    //         input.value = "";
    //         return;
    //     }

    //     if (value < 500) {
    //         alert("Price must be at least 500!");
    //         input.value = 500;
    //     }
    // }

    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;
    }

    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>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        document.querySelectorAll('#descriptionEditor').forEach((textarea) => {
            CKEDITOR.replace(textarea.name, {
                height: 200,
                toolbar: [{
                        name: 'document',
                        items: ['Source', '-', 'NewPage', 'Preview', 'Print']
                    },
                    {
                        name: 'clipboard',
                        items: ['Cut', 'Copy', 'Paste', 'Undo', 'Redo']
                    },
                    {
                        name: 'editing',
                        items: ['Find', 'Replace', '-', 'SelectAll', '-', 'Scayt']
                    },
                    {
                        name: 'basicstyles',
                        items: ['Bold', 'Italic', 'Underline', 'Strike', '-', 'RemoveFormat']
                    },
                    {
                        name: 'paragraph',
                        items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote']
                    },
                    {
                        name: 'insert',
                        items: ['Image', 'Table', 'HorizontalRule', 'SpecialChar']
                    },
                    {
                        name: 'styles',
                        items: ['Styles', 'Format', 'Font', 'FontSize']
                    },
                    {
                        name: 'colors',
                        items: ['TextColor', 'BGColor']
                    },
                    {
                        name: 'tools',
                        items: ['Maximize', 'ShowBlocks']
                    }
                ],
                uiColor: '#ffffff'
            });
        });
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        let descriptionCount = 1;

        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();
            }
        });

        CKEDITOR.replace("descriptionEditor");
    });
</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);
                }
            });
        }
    }

    function loadTimeperiods() {
        var serviceId = $("#service_id").val();
        var subserviceId = $("#subservice_id").val();
        var timeperiodDropdown = $("#timepackage_id");

        timeperiodDropdown.html('<option value="">Select Time Period</option>');

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