@include('header')


<div class="tab-container mb-5">
    <div class="tabs">
        <button class="tab-button active col-md-4 lh1 pointerDis" onclick="openTab(0)">
            <p class="mt-3">1 .Basic Account Credentials </p>
            <p class="fw-normal">Personal Information</p>
        </button>
        <button class="tab-button col-md-4 lh1 pointerDis" onclick="openTab(1)">
            <p class="mt-3">2 .Company Information</p>
            <p class="fw-normal">About your company</p>
        </button>
        <button class="tab-button col-md-4 lh1 pointerDis" onclick="openTab(2)">
            <p class="mt-3">3. Add location</p>
            <p class="fw-normal">Your business location</p>
        </button>
    </div>

    <div class="tab-content active rounded">
        <form id="wrapped" method="post" enctype="multipart/form-data" action="{{ route('saveCompany') }}">
            @csrf
            <input id="website" name="website" type="text" value="">
            <!-- Leave for security protection, read docs for details -->
            <div id="middle-wizard">
                <div class="step">
                    <div>
                        <div class="form-group">
                            <label class="mb-2">Email</label>
                            <input type="text" name="email" class="form-control rounded">
                        </div>
                        @error('name')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror

                        <div class="form-group">
                            <label class="mb-2">Password</label>
                            <input type="text" name="password" class="form-control rounded">
                        </div>

                        <div class="form-group">
                            <label class="mb-2">Confirm Password</label>
                            <input type="text" name="password_confirmation" class="form-control rounded">
                        </div>

                        <div class="form-group">
                            <label class="mb-2">Phone</label>
                            <input type="text" name="phone" class="form-control rounded">
                        </div>

                        <div class="form-group">
                            <label class="mb-2">First Name</label>
                            <input type="text" name="first_name" class="form-control rounded">
                        </div>

                        <div class="form-group">
                            <label class="mb-2">Last Name</label>
                            <input type="text" name="last_name" class="form-control rounded">
                        </div>

                        <div class="form-group">
                            <label class="mb-2">Address</label>
                            <input type="text" name="address" class="form-control rounded">
                        </div>

                        <div class="form-group">
                            <label class="mb-2">City</label>
                            <input type="text" name="city" class="form-control rounded">
                        </div>

                        <div class="form-group">
                            <label class="mb-2">Country</label>
                            <input type="text" name="country_id" class="form-control rounded">
                        </div>

                        <div class="form-group">
                            <label class="mb-2">Agent or organisation that introduced you to african mall</label>
                            <input type="text" name="agent" class="form-control rounded">
                        </div>
                    </div>
                </div>
                <!-- /step-->


            </div>

        </form>
    </div>

    {{-- TAB 2 --}}
    <div class="tab-content">
        <div>
            <div class="form-group">
                <label class="mb-2">Company Name</label>
                <input type="text" name="company_name" class="form-control rounded">
            </div>

            <div class="form-group">
                <label class="mb-2">Category</label>
                <input type="text" name="category_id" class="form-control rounded">
            </div>

            <div class="form-group">
                <label class="mb-2">Description</label>
                <input type="text" name="description" class="form-control rounded">
            </div>

            <div class="form-group">
                <label class="mb-2">Short Description</label>
                <input type="text" name="short_description" class="form-control rounded">
            </div>

            <div class="form-group">
                <label class="mb-2">Website URL</label>
                <input type="text" name="website_url" class="form-control rounded">
            </div>

            <div class="form-group">
                <label class="mb-2">Facebook URL</label>
                <input type="text" name="facebook_url" class="form-control rounded">
            </div>

            <div class="form-group">
                <label class="mb-2">Email 1</label>
                <input type="text" name="email1" class="form-control rounded">
            </div>

            <div class="form-group">
                <label class="mb-2">Email 2</label>
                <input type="text" name="email2" class="form-control rounded">
            </div>

            <div class="form-group">
                <label class="mb-2">Phone</label>
                <input type="text" name="phone1" class="form-control rounded">
            </div>

            <div class="form-group">
                <label class="mb-2">Second Phone / Whatsapp</label>
                <input type="text" name="phone2" class="form-control rounded">
            </div>

            <div class="form-group">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-check">
                            <input type="checkbox" id="monday_to_friday" name="monday_to_friday"
                                class="form-check-input" onchange="toggleMondayFridayTimeFields()">
                            <label for="agentIntroduced" class="form-check-label">Monday To Friday</label>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <input type="time" class="form-control" name="monday_friday_from" id="monday_friday_from"
                            disabled />
                    </div>
                    <div class="col-md-3">
                        <input type="time" class="form-control" name="monday_friday_to" id="monday_friday_to"
                            disabled />
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-check">
                            <input type="checkbox" id="saturday" name="saturday" class="form-check-input"
                                onchange="toggleSaturdayTimeFields()">
                            <label for="saturday" class="form-check-label">We Work on Saturday</label>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <input type="time" class="form-control" name="saturday_from" id="saturday_from"
                            disabled />
                    </div>
                    <div class="col-md-3">
                        <input type="time" class="form-control" name="saturday_to" id="saturday_to" disabled />
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-check">
                            <input type="checkbox" id="sunday" name="sunday" class="form-check-input"
                                onchange="toggleSundayTimeFields()">
                            <label for="sunday" class="form-check-label">Sunday</label>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <input type="time" class="form-control" name="sunday_from" id="sunday_from" disabled />
                    </div>
                    <div class="col-md-3">
                        <input type="time" class="form-control" name="sunday_to" id="sunday_to" disabled />
                    </div>
                </div>
            </div>


            <div class="form-group">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-check">
                            <input type="checkbox" id="public_holiday" name="public_holiday"
                                class="form-check-input" onchange="toggleHolidayTimeFields()">
                            <label for="public_holiday" class="form-check-label">Public Holiday</label>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <input type="time" class="form-control" name="public_holiday_from"
                            id="public_holiday_from" disabled />
                    </div>
                    <div class="col-md-3">
                        <input type="time" class="form-control" name="public_holiday_to" id="public_holiday_to"
                            disabled />
                    </div>
                </div>
            </div>

        </div>
    </div>

    {{-- TAB 3 --}}
    <div class="tab-content">
        <div>

            <div class="form-group">
                <div id="map"></div>
            </div>
            <div class="form-group d-flex gap-1">

                <div class="col-md-6">
                    <label class="mb-2">latitude</label>
                    <input type="text" name="latitude" id="latitude" class="form-control rounded" readonly>
                </div>
                <div class="col-md-6">
                    <label class="mb-2">Longitude</label>
                    <input type="text" name="longitude" id="longitude" class="form-control rounded" readonly>
                </div>
            </div>

            <div class="form-group">
                <label class="mb-2">Country</label>
                <input type="text" name="location_country_id" class="form-control rounded">
            </div>

            <div class="form-group">
                <label class="mb-2">Town</label>
                <input type="text" name="town" class="form-control rounded">
            </div>

            <div class="form-group">
                <label class="mb-2">Name of the suburb</label>
                <input type="text" name="suburb" class="form-control rounded">
            </div>

            <div class="form-group">
                <label class="mb-2">Shop No./Building Name/Street name</label>
                <input type="text" name="location_city" class="form-control rounded">
            </div>

            <div class="form-group">
                <label class="mb-2">Any Landmark nearby</label>
                <input type="text" name="address" class="form-control rounded">
            </div>

            <div class="form-group">
                <label class="mb-2">Location Name</label>
                <input type="text" name="location_name" class="form-control rounded">
            </div>

            <div class="form-group">
                <div class="form-check">
                    <input type="checkbox" id="public_holiday" name="public_holiday" class="form-check-input"
                        onchange="toggleHolidayTimeFields()">
                    <label for="public_holiday" class="form-check-label">Creating an account on African Mall means
                        you
                        have read and agreed to the Terms & Conditions</label>
                </div>
            </div>
        </div>
    </div>

    <div id="bottom-wizard">
        <button type="button" name="backward" class="backward" id="prevBtn"
            onclick="changeTab(-1)">Prev</button>
        <button type="button" name="forward" class="forward" id="nextBtn" onclick="changeTab(1)">Next</button>
        <button type="submit" name="process" class="submit">SignUp</button>
    </div>

</div>



<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD-JuUvYW7kRyRJzVX5etLciu7SVphjXp8&callback=initMap" async
    defer></script>

<script>
    function initMap() {
        const map = new google.maps.Map(document.getElementById('map'), {
            center: {
                lat: -34.397,
                lng: 150.644
            },
            zoom: 8
        });

        map.addListener('click', function(e) {
            const lat = e.latLng.lat();
            const lng = e.latLng.lng();

            // Assuming you have elements with IDs 'latitude' and 'longitude'
            // Add these elements if not present
            document.getElementById('latitude').value = lat;
            document.getElementById('longitude').value = lng;
        });
    }
</script>

<script>
    var validateCompanyRoute = '{{ route('validateCompany') }}';
</script>

@include('footer')
<script>
    // $("#nextBtn").on("click", function(e) {
    //     e.preventDefault();
    //     let formData = $("#wrapped").serialize();
    //     openTab(0);
    //     console.log(formData);
    //     $.ajax({
    //         url: '{{ route('validateCompany') }}',
    //         type: "POST",
    //         data: formData,
    //         success: function(response) {
    //             if (response.success) {
    //                 // If validation passes, move to the next tab
    //                 changeTab(1);
    //             } else {
    //                 // Display validation errors
    //                 displayErrors(response.errors);
    //             }
    //         },
    //         error: function(response) {
    //             // Handle server errors
    //             console.log("Server error occurred:", response);
    //         },
    //     });
    // });

    //     function displayErrors(errors) {
    //         // Clear all previous error messages
    //         $(".text-danger").remove();
    // 
    //         // Loop through each error and display below the corresponding input field
    //         $.each(errors, function(field, errorMessages) {
    //             let input = $("[name=" + field + "]");
    //             input.after(
    //                 '<span class="text-danger">' + errorMessages[0] + "</span>"
    //             );
    //         });
    //     }
</script>