@extends('layouts.simple.master')

@section('title', trans(app()->getLocale() . '.create_company'))

@section('css')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/animate.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/date-picker.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/dropzone.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/select2.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/form-wizard.css') }}">
@endsection

@section('main_content')
    <div class="container-fluid">
        <div class="page-title">
            <div class="row">
                <div class="col-sm-6">
                    <h3>{{ trans(app()->getLocale() . '.add_company') }}</h3>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}"> <svg class="stroke-icon">
                                    <use href="{{ asset('assets/svg/icon-sprite.svg#stroke-home') }}"></use>
                                </svg></a></li>
                        <li class="breadcrumb-item">{{ trans(app()->getLocale() . '.companies') }}</li>
                        <li class="breadcrumb-item active">{{ trans(app()->getLocale() . '.create_company') }}</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <!-- Container-fluid starts-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-body basic-wizard">
                        <form class="row g-3 custom-input" id="companyForm" action="{{ route('admin.company.store') }}" method="POST" enctype="multipart/form-data" onsubmit="return handleFormSubmit(event)">
                            @csrf

                            <!-- Stepper -->
                            <div class="stepper-horizontal custom-scrollbar" id="stepper1">
                                <div class="stepper-one stepper step editing active">
                                    <div class="step-circle"><span>1</span></div>
                                    <div class="step-title">{{ trans(app()->getLocale() . '.user_info') }}</div>
                                    <div class="step-bar-left"></div>
                                    <div class="step-bar-right"></div>
                                </div>
                                <div class="stepper-two step">
                                    <div class="step-circle"><span>2</span></div>
                                    <div class="step-title">{{ trans(app()->getLocale() . '.company_info') }}</div>
                                    <div class="step-bar-left"></div>
                                    <div class="step-bar-right"></div>
                                </div>
                            </div>

                            <!-- Step 1: Personal Info -->
                            <div class="step-content" id="step1">
                                <div class="form theme-form">
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="mb-3">
                                                <label>{{ trans(app()->getLocale() . '.name') }}<span>*</span></label>
                                                <input class="form-control" type="text" name="name"
                                                    value="{{ old('name') }}"
                                                    placeholder="{{ trans(app()->getLocale() . '.enter_name') }}" required>
                                                @error('name')
                                                    <span class="text-danger">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="mb-3">
                                                <label>{{ trans(app()->getLocale() . '.email') }}<span>*</span></label>
                                                <input class="form-control" type="email" id="email"
                                                    value="{{ old('email') }}" name="email"
                                                    placeholder="{{ trans(app()->getLocale() . '.enter_email') }}" required>
                                                @error('email')
                                                    <span class="text-danger">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="mb-3">
                                                <label>{{ trans(app()->getLocale() . '.password') }}<span>*</span></label>
                                                <input class="form-control" type="password" id="password" name="password" placeholder="{{ trans(app()->getLocale() . '.enter_password') }}"
                                                    autocomplete="off" required>
                                                @error('password')
                                                    <span class="text-danger">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="mb-3">
                                                <label>{{ trans(app()->getLocale() . '.confirm_password') }}<span>*</span></label>
                                                <input class="form-control" type="password" id="password_confirmation" name="password_confirmation"
                                                    placeholder="{{ trans(app()->getLocale() . '.enter_confirm_password') }}" autocomplete="off" required>
                                                @error('password_confirmation')
                                                    <span class="text-danger">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div>
                                                <label>{{ trans(app()->getLocale() . '.phone_number') }}<span>*</span></label>
                                                <div class="row phone-select">
                                                    <div class="col-2 pe-0">
                                                        <select class="select-2 form-control select-country-code" id="country_code"
                                                        name="country_code" data-placeholder="">
                                                            @php
                                                                $default = old('country_code', '+20');
                                                            @endphp
                                                            <option class="option" value="+20" data-image="{{ asset('assets/images/flags/EG.png') }}" @selected($default == '+20')>
                                                                <img src="{{ asset('assets/images/flags/EG.png') }}"
                                                                    style="width:20px;height:14px;margin-right:6px;"
                                                                    alt="EG"> +20
                                                            </option>
                                                        </select>
                                                    </div>
                                                    <div class="col-9 ps-0">
                                                        <input class="form-control" type="text" name="number" id="number"
                                                            value="{{ old('number') }}" placeholder="{{ trans(app()->getLocale() . '.enter_phone_number') }}" required>
                                                        @error('number')
                                                            <span class="text-danger">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <input type="hidden" name="iso_code" id="iso_code" value="EG">
                                                <input type="hidden" name="normalized" id="normalized" value="{{ old('normalized') }}">
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="mb-3">
                                                <label>{{ trans(app()->getLocale() . '.type') }}<span>*</span></label>
                                                <input type="hidden" name="type" value="entrepreneur">
                                                <input class="form-control" type="text" value="{{ trans(app()->getLocale() . '.entrepreneur') }}" readonly disabled>
                                                @error('type')
                                                    <span class="text-danger">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="mb-3">
                                                <label>{{ trans(app()->getLocale() . '.avatar') }}</label>
                                                <input class="form-control" type="file" name="image">
                                                @error('image')
                                                    <span class="text-danger">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="mb-3">
                                                <label>{{ trans(app()->getLocale() . '.bio') }}</label>
                                                <textarea class="form-control" id="bio" rows="1" name="bio" placeholder="{{ trans(app()->getLocale() . '.bio') }}">{{ old('bio') }}</textarea>
                                                @error('bio')
                                                    <span class="text-danger">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Step 2: Company Info -->
                            <div class="step-content" id="step2" style="display: none;">
                                <div class="form theme-form">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="mb-3">
                                                <label>{{ trans(app()->getLocale() . '.company_name') }}<span>*</span></label>
                                                <input class="form-control" type="text" name="company_name" id="company_name"
                                                    value="{{ old('company_name') }}" placeholder="{{ trans(app()->getLocale() . '.enter_company_name') }}" required>
                                                @error('company_name')
                                                    <span class="text-danger">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="mb-3">
                                                <label>{{ trans(app()->getLocale() . '.category') }}<span>*</span></label>
                                                <select class="form-select" name="category_id" id="category_id" required>
                                                    <option value="" selected disabled hidden>{{ trans(app()->getLocale() . '.select_category') }}</option>
                                                    @foreach ($categories as $id => $name)
                                                        <option value="{{ $id }}"
                                                            @selected(old('category_id') == $id)>
                                                            {{ $name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                @error('category_id')
                                                    <span class="text-danger">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="mb-3">
                                                <label>{{ trans(app()->getLocale() . '.city') }}</label>
                                                <select class="form-select" name="city_id" id="city_id">
                                                    <option value="" selected disabled hidden>{{ trans(app()->getLocale() . '.select_city') }}</option>
                                                    @foreach ($cities as $id => $name)
                                                        <option value="{{ $id }}"
                                                            @selected(old('city_id') == $id)>
                                                            {{ $name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                @error('city_id')
                                                    <span class="text-danger">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="mb-3">
                                                <label>{{ trans(app()->getLocale() . '.description') }}</label>
                                                <textarea class="form-control" id="description" rows="4" name="description" placeholder="{{ trans(app()->getLocale() . '.enter_description') }}">{{ old('description') }}</textarea>
                                                @error('description')
                                                    <span class="text-danger">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="mb-3">
                                                <label>{{ trans(app()->getLocale() . '.company_logo') }}</label>
                                                <input class="form-control" type="file" name="logo" id="logo" accept="image/*">
                                                @error('logo')
                                                    <span class="text-danger">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="mb-3">
                                                <label class="form-check-label">{{ trans(app()->getLocale() . '.flags') }}</label>
                                                <div class="form-check mt-2">
                                                    <input class="form-check-input" type="checkbox" name="empowering_women" id="empowering_women" value="1" {{ old('empowering_women') ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="empowering_women">
                                                        {{ trans(app()->getLocale() . '.empowering_women') }}
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" name="environmental_friendly" id="environmental_friendly" value="1" {{ old('environmental_friendly') ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="environmental_friendly">
                                                        {{ trans(app()->getLocale() . '.environmental_friendly') }}
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" name="invent_selections" id="invent_selections" value="1" {{ old('invent_selections') ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="invent_selections">
                                                        {{ trans(app()->getLocale() . '.invent_selections') }}
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Navigation Buttons -->
                            <div class="row mt-4">
                                <div class="col-12 d-flex justify-content-between">
                                    <button type="button" class="btn btn-secondary" id="backbtn" onclick="backStep()" disabled>{{ trans(app()->getLocale() . '.back') }}</button>
                                    <button type="button" class="btn btn-primary" id="nextbtn" onclick="nextStep()">{{ trans(app()->getLocale() . '.next') }}</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Container-fluid Ends-->
@endsection

@section('scripts')
    <script src="{{ asset('assets/js/datepicker/date-picker/datepicker.js') }}"></script>
    <script src="{{ asset('assets/js/datepicker/date-picker/datepicker.en.js') }}"></script>
    <script src="{{ asset('assets/js/datepicker/date-picker/datepicker.custom.js') }}"></script>
    <script src="{{ asset('assets/js/select2/select2.full.min.js') }}"></script>
    <script src="{{ asset('assets/js/bookmark/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('assets/js/custom-validation/validation.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('#country_code').select2({
                templateResult: function(option) {
                    if (option.element && option.element.dataset.image) {
                        return $('<span><img src="' + option.element.dataset.image + '" width="20" height="15" /> ' + option.text + '</span>');
                    }
                    return option.text;
                }
            });
            $('#category_id, #city_id').select2();
        });

        // Stepper functionality
        var currentStep = 1;
        var numSteps = 2;

        function nextStep() {
            // Validate current step before proceeding
            if (!validateCurrentStep()) {
                return false;
            }

            document.getElementById("backbtn").disabled = false;
            currentStep++;

            if (currentStep > numSteps) {
                currentStep = numSteps;
            }

            var stepper = document.getElementById("stepper1");
            var steps = stepper.getElementsByClassName("step");
            var stepContents = document.querySelectorAll(".step-content");

            Array.from(steps).forEach((step, index) => {
                let stepNum = index + 1;
                let stepLength = steps.length;

                // Hide all step contents
                stepContents.forEach(content => {
                    content.style.display = "none";
                });

                if (stepNum === currentStep && currentStep <= stepLength) {
                    addClass(step, "editing");
                    addClass(step, "active");
                    document.getElementById("step" + currentStep).style.display = "block";
                } else {
                    removeClass(step, "editing");
                }

                if (stepNum < currentStep) {
                    addClass(step, "done");
                    addClass(step, "active");
                    removeClass(step, "editing");
                } else if (stepNum > currentStep) {
                    removeClass(step, "done");
                    removeClass(step, "active");
                }

                if (currentStep === stepLength) {
                    document.getElementById("nextbtn").textContent = "{{ trans(app()->getLocale() . '.submit') }}";
                    document.getElementById("nextbtn").setAttribute("onclick", "submitForm()");
                } else {
                    document.getElementById("nextbtn").textContent = "{{ trans(app()->getLocale() . '.next') }}";
                    document.getElementById("nextbtn").setAttribute("onclick", "nextStep()");
                }
            });
        }

        function backStep() {
            currentStep--;
            var stepper = document.getElementById("stepper1");
            var steps = stepper.getElementsByClassName("step");
            var stepContents = document.querySelectorAll(".step-content");
            let stepLength = steps.length;

            document.getElementById("nextbtn").textContent = "{{ trans(app()->getLocale() . '.next') }}";
            document.getElementById("nextbtn").setAttribute("onclick", "nextStep()");
            document.getElementById("nextbtn").disabled = false;

            if (currentStep < 1) {
                currentStep = 1;
            }

            // Hide all step contents first
            stepContents.forEach(content => {
                content.style.display = "none";
            });

            // Show current step content
            var currentStepElement = document.getElementById("step" + currentStep);
            if (currentStepElement) {
                currentStepElement.style.display = "block";
            }

            // Update step indicators
            Array.from(steps).forEach((step, index) => {
                let stepNum = index + 1;

                if (stepNum === currentStep) {
                    addClass(step, "editing");
                    addClass(step, "active");
                    removeClass(step, "done");
                } else {
                    removeClass(step, "editing");
                }

                if (stepNum < currentStep) {
                    addClass(step, "done");
                    addClass(step, "active");
                    removeClass(step, "editing");
                } else if (stepNum > currentStep) {
                    removeClass(step, "done");
                    removeClass(step, "active");
                }
            });

            if (currentStep === 1) {
                document.getElementById("backbtn").disabled = true;
            } else {
                document.getElementById("backbtn").disabled = false;
            }
        }

        function validateCurrentStep() {
            var isValid = true;
            var currentStepContent = document.getElementById("step" + currentStep);
            var requiredFields = currentStepContent.querySelectorAll("[required]");

            requiredFields.forEach(function(field) {
                if (!field.value.trim()) {
                    isValid = false;
                    field.classList.add("is-invalid");
                } else {
                    field.classList.remove("is-invalid");
                }
            });

            // Special validation for password confirmation
            if (currentStep === 1) {
                var password = document.getElementById("password").value;
                var confirmPassword = document.getElementById("password_confirmation").value;
                if (password !== confirmPassword) {
                    isValid = false;
                    document.getElementById("password_confirmation").classList.add("is-invalid");
                }
            }

            return isValid;
        }

        function findStepWithErrors() {
            // Check for server-side validation errors
            var step1Fields = ['name', 'email', 'password', 'password_confirmation', 'number', 'type', 'country_code', 'bio', 'image'];
            var step2Fields = ['company_name', 'category_id', 'city_id', 'description'];

            // Check all error messages in the form
            var allErrorMessages = document.querySelectorAll('#step1 .text-danger, #step2 .text-danger');

            if (allErrorMessages.length > 0) {
                // Check which step contains errors
                for (var i = 0; i < allErrorMessages.length; i++) {
                    var errorElement = allErrorMessages[i];
                    var step1 = document.getElementById('step1');
                    var step2 = document.getElementById('step2');

                    if (step1 && step1.contains(errorElement)) {
                        return 1;
                    } else if (step2 && step2.contains(errorElement)) {
                        return 2;
                    }
                }
            }

            // Also check by field names
            for (var i = 0; i < step1Fields.length; i++) {
                var field = document.querySelector('[name="' + step1Fields[i] + '"]');
                if (field) {
                    var errorElement = field.closest('.mb-3') || field.closest('.row');
                    if (errorElement && errorElement.querySelector('.text-danger')) {
                        return 1;
                    }
                }
            }

            for (var i = 0; i < step2Fields.length; i++) {
                var field = document.querySelector('[name="' + step2Fields[i] + '"]');
                if (field) {
                    var errorElement = field.closest('.mb-3') || field.closest('.row');
                    if (errorElement && errorElement.querySelector('.text-danger')) {
                        return 2;
                    }
                }
            }

            return null;
        }

        function goToStep(stepNumber) {
            currentStep = stepNumber;
            var stepper = document.getElementById("stepper1");
            var steps = stepper.getElementsByClassName("step");
            var stepContents = document.querySelectorAll(".step-content");
            let stepLength = steps.length;

            // Hide all step contents
            stepContents.forEach(content => {
                content.style.display = "none";
            });

            Array.from(steps).forEach((step, index) => {
                let stepNum = index + 1;

                if (stepNum === currentStep) {
                    addClass(step, "editing");
                    addClass(step, "active");
                    document.getElementById("step" + currentStep).style.display = "block";
                } else {
                    removeClass(step, "editing");
                }

                if (stepNum < currentStep) {
                    addClass(step, "done");
                    addClass(step, "active");
                    removeClass(step, "editing");
                } else if (stepNum > currentStep) {
                    removeClass(step, "done");
                    removeClass(step, "active");
                }
            });

            if (currentStep === stepLength) {
                document.getElementById("nextbtn").textContent = "{{ trans(app()->getLocale() . '.submit') }}";
                document.getElementById("nextbtn").setAttribute("onclick", "submitForm()");
            } else {
                document.getElementById("nextbtn").textContent = "{{ trans(app()->getLocale() . '.next') }}";
                document.getElementById("nextbtn").setAttribute("onclick", "nextStep()");
            }

            if (currentStep === 1) {
                document.getElementById("backbtn").disabled = true;
            } else {
                document.getElementById("backbtn").disabled = false;
            }
        }

        function handleFormSubmit(event) {
            event.preventDefault();

            // Validate all steps before submitting
            var allValid = true;
            var firstInvalidStep = null;

            for (var step = 1; step <= numSteps; step++) {
                var originalStep = currentStep;
                currentStep = step;
                if (!validateCurrentStep()) {
                    allValid = false;
                    if (firstInvalidStep === null) {
                        firstInvalidStep = step;
                    }
                }
                currentStep = originalStep;
            }

            if (!allValid) {
                // Navigate to first step with errors
                goToStep(firstInvalidStep);
                return false;
            }

            // If all valid, submit the form
            document.getElementById("companyForm").submit();
            return true;
        }

        function submitForm() {
            document.getElementById("companyForm").dispatchEvent(new Event('submit'));
        }

        // Check for validation errors on page load and navigate to the step with errors
        $(document).ready(function() {
            var errorStep = findStepWithErrors();
            if (errorStep !== null) {
                goToStep(errorStep);
            }
        });

        function addClass(element, className) {
            if (!hasClass(element, className)) {
                element.className += " " + className;
            }
        }

        function removeClass(element, className) {
            element.className = element.className.replace(new RegExp(" " + className + " ", "g"), " ").replace(/^ | $/g, "");
        }

        function hasClass(elem, className) {
            return new RegExp(" " + className + " ").test(" " + elem.className + " ");
        }
    </script>
@endsection