@extends('admin.layouts.masterlayout')

@section('title', 'Edit Shop')
@section('head_title', 'Shop Management')

@section('Css')
<link href="{{ asset('assets/css/bootstrap-tagsinput.css') }}" rel="stylesheet" type="text/css" />
@endsection
@section('content')
<div class="dashboard-body-content">
    <div class="dashboard-breadcrumb-section">
        <h2>Edit Shop </h2>
        <p><a href="{{ route('admin.shopManagement') }}"> Shop Management </a>/ Edit Shop</p>
    </div>
    @if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <form id="edit_shop_form" method="POST" action="{{ route('admin.updateShop', $shop_details->id) }}" enctype="multipart/form-data">
        <div class="row">
            @csrf
            <input type="hidden" id="id" name="id" value="{{ $shop_details->user->id }}">
            <input type="hidden" name="user_id" value="{{ $shop_details->user->id }}">

            <div class="col-lg-6 mb-4">
                <div class="ct-admin-container mb-4 h-100">
                    <div class="card h-100">
                        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                            <div class="card-title mb-0">
                                <h2>Shop Details</h2>
                            </div>
                            <div class="form-check form-check-toggle form-switch ps-3 ps-md-0">
                                <input type="hidden" name="active" value="0">
                                <input class="form-check-input" type="checkbox" role="switch" id="active" name="active" value="1" {{ old('active', isset($shop_details) ? $shop_details->status : null) == 1 ? 'checked' : '' }}>
                                <label class="form-check-label" for="active">Is Active?</label>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="d-flex gap-4 mb-4 flex-wrap profile-image-shop">
                                <div>
                                    <div class="profile-image">
                                        <img src="{{ $shop_details->shop_image }}" class="profile-image image-preview" id="image_preview" alt="Profile Image" onerror="this.src='{{ asset('assets/img/default.png') }}';">
                                        <div class="profile-image-position">
                                            <img src="{{ asset('assets/img/dashboard/camera.png') }}" alt="">
                                            <input type="file" class="file-input" name="shop_img" id="shop_img">
                                        </div>
                                    </div>
                                    <div class="shop_img_error_msg"></div>
                                </div>
                                <div class="input-file-main">
                                    <label for="shop">Shop Name<span class="required-star">*</span></label>
                                    <div class="auth-input-position">
                                        <input type="text" id="shopname" name="shopname" placeholder="Enter Shop name" class="form-control" value="{{ $shop_details->shop_name }}">
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets/img/Shop-location.png') }}" alt="">
                                        </div>
                                    </div>
                                    <div class="shopname_error_msg"></div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-lg-6 mb-4">
                                    <label for="owner-name">Owner Name<span class="required-star">*</span></label>
                                    <div class="auth-input-position">
                                        <input type="text" id="ownername" name="ownername" placeholder="Enter Name" value="{{ $shop_details->owner_name }}" class="form-control">
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets/img/role-icon.png') }}" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6 mb-4">
                                    <label for="owner-name">Contact Number<span class="required-star">*</span></label>
                                    <div class="auth-input-position">
                                        <input type="text" id="phone" name="phone" value="{{ $shop_details->shop_phone }}" placeholder="Enter Your Contact Number" class="form-control phone-number-restriction">
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets/img/call.png') }}" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-lg-12 mb-4">
                                    <label for="owner-name">Email Address<span class="required-star">*</span></label>
                                    <div class="auth-input-position">
                                        <input type="text" placeholder="Enter Your Business Email" class="form-control" name="email" id="email" value="{{ $shop_details->shop_email }}">
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets/img/mail.png') }}" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-12 mb-4">
                                    <label for="owner-name">Shop Address<span class="required-star">*</span></label>
                                    <div class="auth-input-position">
                                        <input type="text" id="autocomplete" name="full_address" placeholder="Enter address" class="form-control" value="{{ $shop_details->shop_address }}">

                                        <input type="hidden" name="latitude" id="latitude" value="{{ $shop_details->latitude }}">
                                        <input type="hidden" name="longitude" id="longitude" value="{{ $shop_details->longitude }}">
                                        <input type="hidden" name="city" id="city" value="{{ $shop_details->city }}">
                                        <input type="hidden" name="state" id="state" value="{{ $shop_details->state }}">
                                        <input type="hidden" name="postal_code" id="postal_code" value="{{ $shop_details->postal_code }}">
                                        <input type="hidden" name="redirect_point" id="redirect_point" value="{{ $redirect_point }}">
                                        <input type="hidden" name="country" id="country" value="{{ $shop_details->country }}">

                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets/img/location.png') }}" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-12 mb-4">
                                    <label for="shop_id">Select Currency<span class="required-star">*</span></label>
                                    <div class="auth-input-position">
                                        <select class="form-control form-menu" id="currency" name="currency_code" disabled>
                                            <option value="">-- Select a Currency --</option>
                                            @foreach($currencies as $currency)
                                            <option value="{{ $currency }}" {{ $shop_details->currency_code == $currency ? 'selected' : '' }}>
                                                {{ $currency }}
                                            </option>
                                            @endforeach
                                        </select>
                                        <div class="auth-input-icon">
                                            <img src="{{asset('assets/img/dollar.png')}}" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6 mb-4">
                <div class="ct-admin-container h-100">
                    <div class="card h-100">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="card-title mb-0">
                                <h2>Other Details</h2>
                            </div>
                        </div>
                        <div class="card-body">
                            
                            <div class="row align-items-end">
                                <div class="col-md-5">
                                    <div class="error-placement-div">
                                        <label for="availability">Select Start Time<span class="required-star">*</span></label>
                                        <div class="date-width">
                                            <div class="input-group date custom_date_input">
                                                <input type="text" class="input-group-addon form-control" id="main_start_hours" name="main_start_hours" value="{{ $mainStart }}">
                                                <span class="clock-icon"><i class="fa fa-clock-o" aria-hidden="true"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <div class="error-placement-div">
                                        <label for="availability">Select End Time<span class="required-star">*</span></label>
                                        <div class="date-width">
                                            <div class="input-group date custom_date_input">
                                                <input type="text" class="input-group-addon form-control" id="main_end_hours" name="main_end_hours" value="{{ $mainEnd }}">
                                                <span class="clock-icon"><i class="fa fa-clock-o" aria-hidden="true"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="mb-lg-20">
                                        <button type="button" class="ct-btn add_time_btn">ADD</button>
                                    </div>
                                </div>

                            </div>
                            <div class="main_hours_error_msg"></div>

                            <div class="row mt-2">
                                @foreach ($days as $index => $day)
                                @php
                                $dayNumber = $index + 1;
                                $timing = $shopTimings[$dayNumber] ?? null;
                                $isChecked = $timing ? 'checked' : '';
                                $start = $timing ? \Carbon\Carbon::parse($timing->opening_time)->format('h:i A') : 'Unavailable';
                                $end = $timing ? \Carbon\Carbon::parse($timing->closing_time)->format('h:i A') : 'Unavailable';
                                $showTimeText = $timing ? '' : 'display: none;';
                                $showUnavailableText = $timing ? 'd-none' : '';
                                $showEditText = $timing ? '' : 'd-none';
                                @endphp
                                <div class="col-md-6 mt-2">
                                    <div class="day-card d-flex align-items-center flex-wrap justify-content-between">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="{{ $dayNumber }}" name="days[]" id="{{ $day }}" {{ $isChecked }}>
                                            <label class="form-check-label" for="{{ $day }}">{{ ucfirst($day) }}</label>
                                        </div>

                                        <!-- Display times -->
                                        <div class="d-flex gap-2 align-items-center">
                                            <span id="day_{{ $dayNumber }}_start_hours_text" style="{{ $showTimeText }}">{{ $start }}</span>
                                            <span id="day_{{ $dayNumber }}_dash" style="{{ $showTimeText }}">–</span>
                                            <span id="day_{{ $dayNumber }}_end_hours_text" style="{{ $showTimeText }}">{{ $end }}</span>
                                            <span class="text-danger {{ $showUnavailableText }}" id="day_{{ $dayNumber }}_unavailable_text">Unavailable</span>

                                            <!-- Hidden inputs -->
                                            <input type="hidden" id="day_{{ $dayNumber }}_start_hours" name="start_hours[{{ $dayNumber }}]" value="{{ $start }}">
                                            <input type="hidden" id="day_{{ $dayNumber }}_end_hours" name="end_hours[{{ $dayNumber }}]" value="{{ $end }}">

                                            <button type="button" class="edit-day-time-btn {{ $showEditText }}" data-day="{{ $dayNumber }}" data-day-index="{{ $dayNumber }}" id="day_{{ $loop->iteration }}_edit_button">
                                                <img src="{{ asset('assets/img/dashboard/edit.png') }}" width="18" alt="Edit">
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                            <div class="days_error_msg"></div>

                            <div id="socialLinksContainer" class="mt-2">
                                <label for="availability">Social Links</label>

                                @if (!empty($socialLinks))
                                @foreach ($socialLinks as $index => $link)
                                <div class="mb-4">
                                    <div class="d-flex gap-4 align-items-center social-link-row">
                                        <div class="input-file-main">
                                            <div class="auth-input-position">
                                                <input type="text" class="form-control" placeholder="Add Social Link" name="social_link[]" value="{{ $link }}">
                                                <div class="auth-input-icon">
                                                    <img src="{{ asset('assets/img/link.png') }}" alt="">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="add-icon c-cursor {{ $loop->first ? 'add_link' : 'remove_link' }}">
                                            @if ($loop->first)
                                            <!-- Plus Icon -->
                                            <svg xmlns="http://www.w3.org/2000/svg" width="26"
                                                height="26" viewBox="0 0 26 26" fill="none">
                                                <path
                                                    d="M19.5 13.3125H6.5C6.33198 13.3125 6.1875 13.168 6.1875 13C6.1875 12.832 6.33198 12.6875 6.5 12.6875H19.5C19.668 12.6875 19.8125 12.832 19.8125 13C19.8125 13.168 19.668 13.3125 19.5 13.3125Z"
                                                    fill="#4D4B4B" stroke="#4D4B4B" />
                                                <path
                                                    d="M13 19.8125C12.832 19.8125 12.6875 19.668 12.6875 19.5V6.5C12.6875 6.33198 12.832 6.1875 13 6.1875C13.168 6.1875 13.3125 6.33198 13.3125 6.5V19.5C13.3125 19.668 13.168 19.8125 13 19.8125Z"
                                                    fill="#4D4B4B" stroke="#4D4B4B" />
                                            </svg>
                                            @else
                                            <!-- Minus Icon -->
                                            <svg xmlns="http://www.w3.org/2000/svg" width="26"
                                                height="26" viewBox="0 0 24 24">
                                                <path fill="#000" d="M19 13H5v-2h14z" />
                                            </svg>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="social_link_error_msg"></div>
                                </div>
                                @endforeach
                                @else
                                <!-- First empty input by default -->
                                <div class="mb-4">
                                    <div class="d-flex gap-4 align-items-center social-link-row">
                                        <div class="input-file-main">
                                            <div class="auth-input-position">
                                                <input type="text" class="form-control"
                                                    placeholder="Add Social Link" name="social_link[]">
                                                <div class="auth-input-icon">
                                                    <img src="{{ asset('assets/img/link.png') }}" alt="">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="add-icon add_link" style="cursor: pointer;">
                                            <!-- Plus Icon -->
                                            <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"
                                                viewBox="0 0 26 26" fill="none">
                                                <path
                                                    d="M19.5 13.3125H6.5C6.33198 13.3125 6.1875 13.168 6.1875 13C6.1875 12.832 6.33198 12.6875 6.5 12.6875H19.5C19.668 12.6875 19.8125 12.832 19.8125 13C19.8125 13.168 19.668 13.3125 19.5 13.3125Z"
                                                    fill="#4D4B4B" stroke="#4D4B4B" />
                                                <path
                                                    d="M13 19.8125C12.832 19.8125 12.6875 19.668 12.6875 19.5V6.5C12.6875 6.33198 12.832 6.1875 13 6.1875C13.168 6.1875 13.3125 6.33198 13.3125 6.5V19.5C13.3125 19.668 13.168 19.8125 13 19.8125Z"
                                                    fill="#4D4B4B" stroke="#4D4B4B" />
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="social_link_error_msg"></div>
                                </div>
                                @endif
                            </div>

                            <div class="add-expertise-box mt-4">
                                <label for="availability">Add Expertise<span class="required-star">*</span> </label>
                                <div class="mb-4">
                                    <div class="d-flex gap-4 align-items-center">
                                        <!-- loop this section on click add icon -->
                                        <div class="input-file-main">
                                            <div class="auth-input-position auth-input-position-expertise">
                                                <div class="auth-input-icon">
                                                    <img src="{{ asset('assets/img/briefcase.png') }}" alt="">
                                                </div>
                                                <input type="text" class="form-control" placeholder="Write here your expertise" name="expertiseInput" id="expertiseInput" data-role="tagsinput" value="{{ $expertise }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="expertise_error_msg"></div>
                                </div>
                            </div>

                            <div class="file-upload-wrapper">
                                <label for="Upload">Upload Portfolio</label>
                                <div class="ct-file-flex">
                                    <div>
                                        <div class="ct-file-container ct-file-shop-container">
                                            <input type="file" class="ct-file-input" name="shop_portfolio[]" id="shop_portfolio" multiple>
                                            <div class="d-flex gap-3 flex-wrap justify-content-center align-items-center">
                                                <img src="{{ asset('assets/img/upload-icon.png') }}" alt="">
                                                <p>Upload Photos</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="portfolio-preview-container" class="file-container-upload">
                                        @foreach ($shopPortfolios ?? [] as $key => $image)
                                        <div class="ct-file-image existing-image" data-index="{{ $key }}">
                                            <img src="{{ $image->path }}" class="ct-file-images image-preview" alt="" onerror="this.src=\'{{ asset('assets/img/dashboard/default_img.jpg') }}\'">
                                            <div class="ct-file-close-icon remove-existing c-cursor">
                                                <img src="{{ asset('assets/img/round-close-icon.png') }}" alt="">
                                            </div>
                                            <input type="hidden" name="existing_images[]" value="{{ $image->path }}">
                                        </div>
                                        @endforeach
                                    </div>
                                    <div class="portfolio_error_msg"></div>
                                </div>
                            </div>

                            <div class="mt-4">
                                <label for="Upload1">Upload Business License/ID Proof<span class="required-star">*</span></label>
                                <div class="mb-4">
                                    <div class="ct-file-flex">
                                        <div>
                                            <div class="ct-file-container ct-file-shop-container">
                                                <input type="file" class="ct-file-input" name="business_proof_image" id="business_proof_image">
                                                <div class="d-flex gap-3 flex-wrap justify-content-center align-items-center">
                                                    <img src="{{ asset('assets/img/upload-icon.png') }}" alt="" onerror="this.src=\'{{ asset('assets/img/dashboard/default_img.jpg') }}\'">
                                                    <p>Upload Proof</p>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="file-container-upload">
                                            <div class="preview_business_proof_img">
                                                <div class="ct-file-image">
                                                    <img src="{{ $shop_details->business_proof_image }}" class="ct-file-images image-preview">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="business_proof_image_error_msg"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="d-flex gap-3 submit-container">
            <a href="{{ route('admin.shopManagement', ['tab' => $shop_details->is_approved == 1 ? 'verified' : 'unverified']) }}" class="ct-outline-btn text-center">Cancel</a>
            <button type="submit" class="ct-btn edit_shop_btn"> <span>Save</span> </button>
        </div>
    </form>
</div>
@include('admin.shop.availability_day')
@endsection

@section('script')
<script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}&libraries=places"></script>
<script src="{{ asset('assets/js/fileUploads.js') }}"></script>
<script src="{{ asset('assets/js/bootstrap-tagsinput.js') }}"></script>
<script>
    $(document).ready(function() {
        $("#expertiseInput").tagsinput('items');

        // Upload Portfolio
        $("#shop_portfolio").fileUpload({
            maxFileSize: 5, // 2 MB
            allowedFileTypes: ['jpg', 'gif', 'jpeg', 'png'], // small case
            parentsElementOfInputFiles: 'file-upload-wrapper', // Class of parent div of input files which include list of files
            appendFilesClass: 'file-container-upload', // Class of Files listed
            isShowProgressBar: 0,
        });

        $('#edit_shop_form').validate({
            ignore: [],
            onkeyup: false,
            rules: {
                shopname: {
                    required: true,
                    minlength: minInput,
                    maxlength: maxInput
                },
                ownername: {
                    required: true,
                    minlength: minInput,
                    maxlength: maxInput
                },
                phone: {
                    required: true,
                    minlength: minInput,
                    maxlength: maxInput,
                    phoneValidation: true
                },
                email: {
                    required: true,
                    email: true,
                    customEmailValidation: true,
                    minlength: minInput,
                    maxlength: maxInput,
                    remote: {
                        url: "{{ route('admin.check.email') }}", // The URL to the backend endpoint
                        type: "POST",
                        data: {
                            email: function() {
                                return $("#email").val(); // Send the email field value
                            },
                            id: function() {
                                return $("#id").val(); // Send the current email to allow validation to pass
                            }
                        },
                        dataType: "json",
                        dataFilter: function(data) {
                            var jsonResponse = JSON.parse(data);
                            return jsonResponse.exists ? false : true;
                        }
                    }
                },
                full_address: {
                    required: true,
                    maxlength: maxInput
                },
                'days[]': {
                    requireOneDay: true
                },
                main_start_hours: {
                    required: true
                },
                main_end_hours: {
                    required: true,
                    timeCompare: {
                        startTimeSelector: "#main_start_hours"
                    }
                },
                shop_img: {
                    extension: "jpg|jpeg|png|gif",
                    fileSize: 5 // 5MB
                },
                expertiseInput: {
                    required: true
                },
                'shop_portfolio[]': {
                    maxFiles: 20,
                    checkValidFileUpload: true
                },
                business_proof_image: {
                    extension: "jpg|jpeg|png|gif",
                    fileSize: 5 // 5MB
                }
            },
            errorPlacement: function(error, element) {
                if (element.attr("name") === "shop_img") {
                    $(".shop_img_error_msg").html(error);
                } else if (element.attr("name") === "shopname") {
                    $(".shopname_error_msg").html(error);
                } else if (element.attr("name") === "days[]") {
                    $(".days_error_msg").html(error);
                } else if (element.attr("name") === "social_link[]") {
                    $(".social_link_error_msg").html(error);
                } else if (element.attr("name") === "expertiseInput") {
                    $(".expertise_error_msg").html(error);
                } else if (element.attr("name") === "shop_portfolio[]") {
                    $(".portfolio_error_msg").html(error);
                } else if (element.attr("name") === "business_proof_image") {
                    $(".business_proof_image_error_msg").html(error);
                } else if (element.attr("name") === "main_end_hours" || element.attr("name") === "main_end_hours") {
                    $(element).parents('.error-placement-div').append(error);
                } else {
                    error.insertAfter(element); // Default behavior for other fields
                }
            },
            messages: {
                email: {
                    remote: "This email already exists."
                },
            },
            submitHandler: function(form) {
                $('.edit_shop_btn').attr('disable', true);
                $('.edit_shop_btn').addClass('loader-active');
                form.submit(); // Submit the form when valid
            }
        });

        $('#edit_shop_form').on('keypress', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault(); // Prevent form submission on Enter key
                return false;
            }
        });

        // Edit day time validation
        $('#editDayTimeForm').validate({
            rules: {
                edit_start_time: {
                    required: true
                },
                edit_end_time: {
                    required: true,
                    timeCompare: {
                        startTimeSelector: "#edit_start_time"
                    }
                }
            },
            errorPlacement: function(error, element) {
                if (element.attr("name") === "edit_end_time") {
                    $(".edit_endtime_error").html(error);
                } else if (element.attr("name") === "edit_start_time") {
                    $(".edit_starttime_error").html(error);
                } else {
                    error.insertAfter(element); // Default behavior for other fields
                }
            },
            submitHandler: function(form) {
                // Optional: if you're using a submit button
                form.submit();
            }
        });

        $('#shop_img').on('change', function(e) {
            var reader = new FileReader();
            reader.onload = function(event) {
                $('#image_preview').attr('src', event.target.result);
            };
            reader.readAsDataURL(e.target.files[0]);
        });

        // Add time to all checked days
        $('.add_time_btn').on('click', function() {
            const startTime = $('#main_start_hours').val();
            const endTime = $('#main_end_hours').val();

            for (let i = 1; i <= 7; i++) {
                const checkbox = $('#' + getDayName(i));

                if (checkbox.prop('checked')) {
                    $('#day_' + i + '_start_hours_text').text(startTime);
                    $('#day_' + i + '_end_hours_text').text(endTime);
                    $('#day_' + i + '_start_hours').val(startTime);
                    $('#day_' + i + '_end_hours').val(endTime);

                    $('#day_' + i + '_start_hours_text').show();
                    $('#day_' + i + '_end_hours_text').show();
                    $('#day_' + i + '_dash').show();
                    $('#day_' + i + '_unavailable_text').addClass('d-none');
                    $('#day_' + i + '_edit_button').removeClass('d-none');
                }
            }
        });

        // Handle checkbox toggle
        $('input[name="days[]"]').on('change', function() {
            const dayIndex = $(this).val();
            const isChecked = $(this).is(':checked');

            if (isChecked) {
                const startTime = $('#main_start_hours').val();
                const endTime = $('#main_end_hours').val();

                $('#day_' + dayIndex + '_start_hours_text').text(startTime);
                $('#day_' + dayIndex + '_end_hours_text').text(endTime);
                $('#day_' + dayIndex + '_start_hours').val(startTime);
                $('#day_' + dayIndex + '_end_hours').val(endTime);

                $('#day_' + dayIndex + '_start_hours_text').show();
                $('#day_' + dayIndex + '_end_hours_text').show();
                $('#day_' + dayIndex + '_dash').show();
                $('#day_' + dayIndex + '_unavailable_text').addClass('d-none');
                $('#day_' + dayIndex + '_edit_button').removeClass('d-none');
            } else {
                $('#day_' + dayIndex + '_start_hours_text').hide();
                $('#day_' + dayIndex + '_end_hours_text').hide();
                $('#day_' + dayIndex + '_dash').hide();
                $('#day_' + dayIndex + '_unavailable_text').removeClass('d-none');
                $('#day_' + dayIndex + '_edit_button').addClass('d-none');

                $('#day_' + dayIndex + '_start_hours').val('Unavailable');
                $('#day_' + dayIndex + '_end_hours').val('Unavailable');
            }
        });

        // Edit button logic
        $('.edit-day-time-btn').on('click', function() {
            const dayIndex = $(this).data('day-index');
            const startTime = $('#day_' + dayIndex + '_start_hours').val();
            const endTime = $('#day_' + dayIndex + '_end_hours').val();

            $('#edit_day_index').val(dayIndex);
            $('#edit_start_time').val(startTime);
            $('#edit_end_time').val(endTime);

            $('#editDayTimeModal').modal('show');
        });

        // Save edited time
        $('#saveDayTimeBtn').on('click', function() {
            if ($('#editDayTimeForm').valid()) {
                const dayIndex = $('#edit_day_index').val();
                const startTime = $('#edit_start_time').val();
                const endTime = $('#edit_end_time').val();

                $('#day_' + dayIndex + '_start_hours').val(startTime);
                $('#day_' + dayIndex + '_end_hours').val(endTime);
                $('#day_' + dayIndex + '_start_hours_text').text(startTime);
                $('#day_' + dayIndex + '_end_hours_text').text(endTime);

                $('#day_' + dayIndex + '_time_text').show();
                $('#day_' + dayIndex + '_dash').show();
                $('#day_' + dayIndex + '_unavailable_text').addClass('d-none');
                $('#day_' + dayIndex + '_edit_button').removeClass('d-none');

                $('#editDayTimeModal').modal('hide');
            }
        });

        // Initial state setup
        // $('input[name="days[]"]').each(function() {
        //     $(this).trigger('change');
        // });

        // Business proof Image  
        $('#business_proof_image').on('change', function() {
            const file = this.files[0];
            const previewContainer = $('.preview_business_proof_img');
            const maxSize = 5 * 1024 * 1024; // 5MB size limit

            if (file.size > maxSize) {
                custom_message('error', 'File is too large. Please upload a file smaller than 5 MB.');
                this.value = ''; // Clear input
                return;
            }
            previewContainer.empty(); // Clear previous preview

            const reader = new FileReader();

            reader.onload = function(e) {
                const img = $('<img>', {
                    src: e.target.result,
                    alt: 'Preview',
                    class: 'ct-file-images'
                }).on('error', function() {
                    $(this).attr('src', '{{ asset("assets/img/dashboard/default_img.jpg") }}');
                })

                const wrapper = $('<div>', {
                    class: 'ct-file-image'
                });
                wrapper.append(img);
                previewContainer.append(wrapper);
            };

            reader.readAsDataURL(file);
        });
    });

    $(document).on('click', '.add_link', function() {
        const linkIconPath = "{{ asset('assets/img/link.png') }}";
        const newRow = `<div class="d-flex gap-4 mb-4 align-items-center social-link-row">
            <div class="input-file-main">
                <div class="auth-input-position">
                    <input type="text" class="form-control" placeholder="Add Social Link" name="social_link[]">
                    <div class="auth-input-icon">
                        <img src="${linkIconPath}" alt="">
                    </div>
                </div>
            </div>
            <div class="add-icon remove_link" style="cursor: pointer;">
                <!-- Minus Icon -->
                <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24">
                    <path fill="#000" d="M19 13H5v-2h14z" />
                </svg>
            </div>
        </div>`;
        $('#socialLinksContainer').append(newRow);
    });

    // Remove social link
    $(document).on('click', '.remove_link', function() {
        $(this).closest('.social-link-row').remove();
    });

    // Remove existing image previews
    $(document).on('click', '.remove-existing', function() {
        $(this).closest('.ct-file-image').remove(); // Removes image + hidden input
    });

    // START: Add google address 
    function initAutocomplete() {
        const input = document.getElementById('autocomplete');
        const autocomplete = new google.maps.places.Autocomplete(input, {
            types: ['geocode']
        });

        autocomplete.addListener('place_changed', () => {
            const place = autocomplete.getPlace();

            if (!place.geometry) {
                console.error("Autocomplete: Place has no geometry");
                return;
            }

            // Get lat/lng
            const lat = place.geometry.location.lat();
            const lng = place.geometry.location.lng();

            document.getElementById('latitude').value = lat;
            document.getElementById('longitude').value = lng;

            // Reset values first
            document.getElementById('city').value = '';
            document.getElementById('state').value = '';
            document.getElementById('postal_code').value = '';
            document.getElementById('country').value = '';

            // Extract components
            const componentsMap = {
                locality: 'city',
                administrative_area_level_1: 'state',
                postal_code: 'postal_code',
                country: 'country'
            };

            place.address_components.forEach(component => {
                component.types.forEach(type => {
                    if (componentsMap[type]) {
                        document.getElementById(componentsMap[type]).value = component
                            .long_name;
                    }
                });
            });
        });
    }
    google.maps.event.addDomListener(window, 'load', initAutocomplete);
    // END: Add google address 
</script>
@endsection