@extends('business_owner.layouts.master')

@section('title', __('backend.edit_business_profile'))

@push('after-styles')
    <link href="{{ asset('assets/dashboard/css/select2.min.css') }}" rel="stylesheet" />
    <style>
        .select2-container {
            width: 100% !important;
        }

        .country-code {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 2;
            border-right: 1px solid #ccc;
            padding-right: 10px;
        }

        .mobile-input {
            padding-left: 60px !important;
        }

        .preview-image {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 6px;
            border: 1px solid #ddd;
            padding: 2px;
            background: #fff;
        }

        .img-box {
            display: inline-block;
            margin-right: 12px;
            margin-bottom: 12px;
            vertical-align: top;
        }

        .section-title {
            margin-top: 25px;
            margin-bottom: 15px;
            font-size: 20px;
            font-weight: 600;
            border-bottom: 1px solid #e5e5e5;
            padding-bottom: 8px;
        }

        .place-image-box {
            position: relative;
        }

        .place-img {
            width: 100%;
            height: 120px;
            object-fit: cover;
        }

        .delete-btn {
            position: absolute;
            top: 5px;
            right: 5px;
            width: 22px;
            height: 22px;
            background: red;
            color: #fff;
            border-radius: 50%;
            text-align: center;
            line-height: 22px;
            cursor: pointer;
            font-weight: bold;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 22px;
        }

        /* Open Hours Styling */
        .open-hours-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0 10px;
        }

        .open-hours-table td {
            padding: 10px;
            vertical-align: middle;
            background: #fdfdfd;
            border-top: 1px solid #f0f0f0;
            border-bottom: 1px solid #f0f0f0;
        }

        .open-hours-table td:first-child {
            border-left: 1px solid #f0f0f0;
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
            font-weight: 600;
            width: 150px;
        }

        .open-hours-table td:last-child {
            border-right: 1px solid #f0f0f0;
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
        }

        .time-input-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .time-input {
            width: 140px !important;
            border-radius: 6px;
            border: 1px solid #ddd;
            padding: 5px 10px;
        }

        .switch-checkbox {
            position: relative;
            display: inline-block;
            width: 45px;
            height: 22px;
        }

        .switch-checkbox input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 34px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        input:checked+.slider {
            background-color: #926247;
        }

        input:checked+.slider:before {
            transform: translateX(23px);
        }

        .closed-label {
            color: #999;
            font-style: italic;
        }

        .tab-btn-group {
            display: flex;
            gap: 15px;
            margin-bottom: 25px;
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
        }

        .tab-btn {
            padding: 10px 20px;
            border-radius: 30px;
            border: 1px solid #ddd;
            background: #fff;
            color: #555;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .tab-btn.active {
            background: #926247;
            color: #fff;
            border-color: #926247;
        }

        .tab-btn:hover:not(.active) {
            background: #f5f5f5;
            border-color: #ccc;
        }
    </style>
@endpush

@section('content')
    <div class="padding edit-business-profile">
        <div class="box">
            <div class="box-header m-b-2">
                <div class="box-header-left">
                    <h3>{{ __('backend.edit_business_profile') }}</h3>
                    <small>
                        <a href="{{ route('businessOwnerHome') }}">{{ __('backend.dashboard') }}</a> /
                        <a href="{{ route('business_owner.businessprofile') }}">{{ __('backend.business_profile') }}</a> /
                        {{ __('backend.edit_business_profile') }}
                    </small>
                </div>
            </div>

            {{-- @if (session('success'))
                <div class="alert alert-success alert-block">
                    <button type="button" class="close" data-dismiss="alert">×</button>
                    <strong>{{ session('success') }}</strong>
                </div>
            @endif --}}

            {{-- @if (session('error'))
                <div class="alert alert-danger alert-block">
                    <button type="button" class="close" data-dismiss="alert">×</button>
                    <strong>{{ session('error') }}</strong>
                </div>
            @endif --}}

            {{-- @if ($errors->any())
                <div class="alert alert-danger alert-block">
                    <button type="button" class="close" data-dismiss="alert">×</button>
                    <ul style="margin-bottom:0;">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif --}}

            <div class="box-body">
                <div class="tab-btn-group">
                    <button type="button" class="tab-btn active" onclick="switchTab('profile')">Business Profile</button>
                    <button type="button" class="tab-btn" onclick="switchTab('timing')">Service Timing</button>
                </div>

                <form method="POST"
                    action="{{ route('business_owner.businessprofileupdate', $businessOwner->business_id) }}"
                    enctype="multipart/form-data" id="businessProfileForm">
                    @csrf

                    <!-- Section 1: Business Profile (Contains all profile/personal details) -->
                    <div id="profile-section" style="display: block;">
                        <h4 class="section-title">{{ __('backend.personal_details') }}</h4>
                        <div class="row">
                            <div class="col-lg-4 col-md-4">
                                <div class="form-group">
                                    <label>{{ __('backend.fullname') }}<span class="text-danger">*</span></label>
                                    <input type="text" name="full_name" class="form-control"
                                        value="{{ old('full_name', $businessOwner->full_name) }}">
                                    @if ($errors->has('full_name'))
                                        <span class="help-block">
                                            <span style="color: red;"
                                                class="validate">{{ $errors->first('full_name') }}</span>
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <div class="col-lg-4 col-md-4">
                                <div class="form-group">
                                    <label>{{ __('backend.email') }}<span class="text-danger"></span></label>
                                    <input type="email" name="email" class="form-control"
                                        value="{{ old('email', $businessOwner->email) }}" readonly>
                                    @if ($errors->has('email'))
                                        <span class="help-block">
                                            <span style="color: red;" class="validate">{{ $errors->first('email') }}</span>
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <div class="col-lg-4 col-md-4">
                                <div class="form-group">
                                    <label>{{ __('backend.mobile_number') }}<span class="text-danger">*</span></label>

                                    <div class="position-relative">
                                        <span class="country-code">
                                            {{ old('country_code', $businessOwner->country_code ?? '+61') }}
                                        </span>

                                        <input type="text" name="mobile_number" class="form-control mobile-input"
                                            value="{{ old('mobile_number', $businessOwner->mobile_number) }}">
                                    </div>

                                    @if ($errors->has('mobile_number'))
                                        <span class="help-block">
                                            <span style="color: red;" class="validate">
                                                {{ $errors->first('mobile_number') }}
                                            </span>
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <h4 class="section-title">{{ __('backend.business_details') }}</h4>
                        <div class="row">
                            <div class="col-lg-6 col-md-6">
                                <div class="form-group">
                                    <label>{{ __('backend.business_name') }}<span class="text-danger">*</span></label>
                                    <input type="text" name="business_name" class="form-control"
                                        value="{{ old('business_name', $businessOwner->business_name) }}">
                                    @if ($errors->has('business_name'))
                                        <span class="help-block">
                                            <span style="color: red;"
                                                class="validate">{{ $errors->first('business_name') }}</span>
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <div class="col-lg-6 col-md-6">
                                <div class="form-group">
                                    <label for="category_id">
                                        {!! __('backend.category') !!} <span class="valid_field">*</span>
                                    </label>
                                    <select name="category_id" id="category_id" class="form-control">
                                        <option value="">{!! __('backend.select_category') !!}</option>
                                        @foreach ($categories as $category)
                                            <option value="{{ $category->id }}"
                                                {{ old('category_id', $businessOwner->category_id) == $category->id ? 'selected' : '' }}>
                                                {{ $category->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @if ($errors->has('category_id'))
                                        <span class="help-block">
                                            <span style="color: red;"
                                                class="validate">{{ $errors->first('category_id') }}</span>
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="interest_ids" class="col-xl-2 form-control-label">
                                    Select Interest <span class="valid_field">*</span>
                                </label>

                                <div class="col-xl-10">
                                    <select name="interest_ids[]" id="interest_ids" class="form-control" multiple>
                                        @foreach ($interests as $interest)
                                            <option value="{{ $interest->id }}"
                                                {{ in_array($interest->id, old('interest_ids', $selectedInterests ?? [])) ? 'selected' : '' }}>
                                                {{ $interest->name }}
                                            </option>
                                        @endforeach
                                    </select>

                                    @if ($errors->has('interest_ids'))
                                        <span class="help-block">
                                            <span style="color:red;">{{ $errors->first('interest_ids') }}</span>
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <div class="col-lg-12 col-md-12">
                                <div class="form-group">
                                    <label>{{ __('backend.business_description') }}<span
                                            class="valid_field">*</span></label>
                                    <textarea name="description" class="form-control" rows="4">{{ old('description', $businessOwner->description) }}</textarea>
                                    @if ($errors->has('description'))
                                        <span class="help-block">
                                            <span style="color: red;"
                                                class="validate">{{ $errors->first('description') }}</span>
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <h4 class="section-title">{{ __('backend.google_location_full_address') }}</h4>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label>{{ __('backend.google_location_full_address') }} <span
                                            class="valid_field">*</span></label>
                                    <input type="text" name="address" id="location" class="form-control"
                                        placeholder="{{ __('backend.google_location_full_address') }}"
                                        value="{{ old('address', $businessOwner->address ?? '') }}" autocomplete="off">

                                    <input type="hidden" name="location_name" id="location_name"
                                        value="{{ old('location_name', $businessOwner->location_name ?? '') }}">
                                    <input type="hidden" name="latitude" id="latitude"
                                        value="{{ old('latitude', $businessOwner->latitude ?? '') }}">
                                    <input type="hidden" name="longitude" id="longitude"
                                        value="{{ old('longitude', $businessOwner->longitude ?? '') }}">

                                    @if ($errors->has('address'))
                                        <span class="help-block">
                                            <span style="color: red;"
                                                class="validate">{{ $errors->first('address') }}</span>
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <h4 class="section-title">{{ __('backend.business_contact_information') }}</h4>
                        <div class="row">
                            <div class="col-lg-4 col-md-4">
                                <div class="form-group">
                                    <label>{{ __('backend.business_phone_number') }}<span class="valid_field">*</span></label>
                            
                                    <div class="position-relative">
                                        <span class="country-code">
                                            {{ old('country_code', $businessOwner->country ?? '+61') }}
                                        </span>
                            
                                        <input type="text"
                                            name="business_phone"
                                            class="form-control mobile-input"
                                            value="{{ old('business_phone', $businessOwner->business_phone) }}">
                                    </div>
                            
                                    @if ($errors->has('business_phone'))
                                        <span class="help-block">
                                            <span style="color: red;" class="validate">
                                                {{ $errors->first('business_phone') }}
                                            </span>
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <div class="col-lg-4 col-md-4">
                                <div class="form-group">
                                    <label>{{ __('backend.business_email_address') }}</label>
                                    <input type="email" name="business_email" class="form-control"
                                        value="{{ old('business_email', $businessOwner->business_email) }}" readonly>
                                    @if ($errors->has('business_email'))
                                        <span class="help-block">
                                            <span style="color: red;"
                                                class="validate">{{ $errors->first('business_email') }}</span>
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <div class="col-lg-4 col-md-4">
                                <div class="form-group">
                                    <label>{{ __('backend.website_url') }}</label>
                                    <input type="text" name="website_url" class="form-control"
                                        value="{{ old('website_url', $businessOwner->website_url) }}">
                                    @if ($errors->has('website_url'))
                                        <span class="help-block">
                                            <span style="color: red;"
                                                class="validate">{{ $errors->first('website_url') }}</span>
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <h4 class="section-title">{{ __('backend.business_media') }}</h4>
                        <div class="row">
                            <div class="col-lg-6 col-md-6">
                                <div class="form-group">
                                    <label>{{ __('backend.business_logo') }}</label>
                                    <input type="file" name="business_logo" class="form-control" accept="image/*">
                                    <small class="text-muted">Allowed: jpg, jpeg, png, webp. Max 2MB.</small>
                                    <br>
                                    @if ($errors->has('business_logo'))
                                        <span class="help-block">
                                            <span style="color: red;"
                                                class="validate">{{ $errors->first('business_logo') }}</span>
                                        </span>
                                    @endif

                                    <div style="margin-top:10px;">
                                        @php
                                            $logo = !empty($businessOwner->business_logo)
                                                ? Storage::disk('s3')->url($businessOwner->business_logo)
                                                : asset('assets/dashboard/images/profile.jpg');
                                        @endphp

                                        <img src="{{ $logo }}" class="preview-image" alt="Business Logo">
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-6 col-md-6">
                                <div class="form-group">
                                    <label>{{ __('backend.business_images_5') }}</label>

                                    <input type="file" name="business_images[]" class="form-control" multiple
                                        accept="image/*" onchange="previewBusinessImages(this)">

                                    @if ($errors->has('business_images'))
                                        <span class="help-block">
                                            <span style="color: red;" class="validate">
                                                {{ $errors->first('business_images') }}
                                            </span>
                                        </span>
                                    @endif

                                    <br>

                                    <small class="text-muted">
                                        You can keep old images, remove selected ones, and upload new images.
                                    </small>

                                    <!-- OLD IMAGES -->
                                    <div class="row mt-2">
                                        @forelse($businessImages as $img)
                                            <div class="col-md-3 image-wrapper" id="old-img-{{ $img->id }}">
                                                <div class="place-image-box" style="position:relative;">

                                                    <img src="{{ Storage::disk('s3')->url($img->image) }}"
                                                        class="place-img"
                                                        style="width:100%;height:120px;object-fit:cover;border-radius:6px;">

                                                    <div class="delete-btn" data-id="{{ $img->id }}"
                                                        onclick="markDelete({{ $img->id }})"
                                                        style="position:absolute;top:5px;right:5px;
                                                                background:red;color:#fff;
                                                                width:22px;height:22px;
                                                                text-align:center;cursor:pointer;
                                                                border-radius:50%;">
                                                        ×
                                                    </div>

                                                    <input type="hidden" name="remove_business_images[]"
                                                        id="remove-img-{{ $img->id }}" disabled>
                                                </div>
                                            </div>
                                        @empty
                                            <span>-</span>
                                        @endforelse
                                    </div>

                                    <!-- NEW IMAGE PREVIEW -->
                                    <div id="businessNewPreview" class="row mt-3"></div>

                                    <div id="business_image_error" class="text-danger"></div>
                                </div>
                            </div>
                        </div>
                    </div><!-- End profile-section -->

                    <!-- Section 2: Service Timing -->
                    <div id="timing-section" style="display: none;">
                        <h4 class="section-title">Open Hours</h4>
                        <div class="row">
                            <div class="col-lg-12">
                                <table class="open-hours-table">
                                    @php
                                        $days = [
                                            'monday' => 'Monday',
                                            'tuesday' => 'Tuesday',
                                            'wednesday' => 'Wednesday',
                                            'thursday' => 'Thursday',
                                            'friday' => 'Friday',
                                            'saturday' => 'Saturday',
                                            'sunday' => 'Sunday',
                                        ];
                                    @endphp

                                    @foreach ($days as $key => $label)
                                        @php
                                            $short = substr($key, 0, 3);
                                            $isOpen = $serviceTiming ? $serviceTiming->{$key . '_open'} : false;
                                            $startTime = $serviceTiming ? $serviceTiming->{$short . '_start'} : '';
                                            $endTime = $serviceTiming ? $serviceTiming->{$short . '_end'} : '';
                                        @endphp
                                        <tr>
                                            <td>{{ $label }}</td>
                                            <td>
                                                <label class="switch-checkbox">
                                                    <input type="checkbox" name="{{ $key }}_open"
                                                        class="day-toggle" {{ $isOpen ? 'checked' : '' }}>
                                                    <span class="slider"></span>
                                                </label>
                                                <span class="m-l-1 toggle-status">{{ $isOpen ? 'Open' : 'Closed' }}</span>
                                            </td>

                                            {{-- <td>
                                                <div class="time-input-group">
                                                    <input type="time"
                                                           name="{{ $short }}_start"
                                                           class="time-input"
                                                           value="{{ $start ? \Carbon\Carbon::parse($start)->format('H:i') : '' }}">
                                            
                                                    <span>to</span>
                                            
                                                    <input type="time"
                                                           name="{{ $short }}_end"
                                                           class="time-input"
                                                           value="{{ $end ? \Carbon\Carbon::parse($end)->format('H:i') : '' }}">
                                                </div>
                                            </td> --}}

                                            {{-- <td>
                                                <div class="time-input-group {{ $isOpen ? '' : 'd-none' }}">
                                                    <input type="text" name="{{ $short }}_start"
                                                        class="time-input" placeholder="09:00 AM"
                                                        value="{{ $startTime }}">
                                                    <span>to</span>
                                                    <input type="text" name="{{ $short }}_end"
                                                        class="time-input" placeholder="05:00 PM"
                                                        value="{{ $endTime }}">
                                                </div>
                                                <div class="closed-label {{ $isOpen ? 'd-none' : '' }}">
                                                    Business is closed on this day.
                                                </div>
                                            </td> --}}
                                            <td>
                                                <div class="time-input-group {{ $isOpen ? '' : 'd-none' }}">
                                                    <input type="time" name="{{ $short }}_start"
                                                        class="time-input"
                                                        value="{{ $startTime ? \Carbon\Carbon::parse($startTime)->format('H:i') : '' }}">
                                                    <span>to</span>
                                                    <input type="time" name="{{ $short }}_end"
                                                        class="time-input"
                                                        value="{{ $endTime ? \Carbon\Carbon::parse($endTime)->format('H:i') : '' }}">
                                                </div>

                                            </td>

                                        </tr>
                                    @endforeach
                                </table>
                            </div>
                        </div>
                    </div><!-- End timing-section -->


                    <div class="form-group m-t-md">
                        <button type="submit" class="solid-button m-r-1" id="submitBtn">Save Changes</button>
                        <a href="{{ route('business_owner.businessprofile') }}" class="border-btn">Back</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('after-scripts')
    <script src="{{ asset('assets/dashboard/js/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('assets/dashboard/js/select2.min.js') }}"></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/js/select2.min.js"></script>
    <script
        src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}&libraries=places&callback=initialize3"
        async defer></script>
    <script>
        let isLocationSelected3 = false;

        function initialize3() {
            const center = {
                lat: 15.9272665,
                lng: 58.3071033
            };
            const defaultBounds = {
                north: center.lat + 0.1,
                south: center.lat - 0.1,
                east: center.lng + 0.1,
                west: center.lng - 0.1,
            };

            const autocomplete = new google.maps.places.Autocomplete($("#location")[0], {
                bounds: defaultBounds,
            });

            autocomplete.addListener('place_changed', function() {
                const place = autocomplete.getPlace();
                if (place.geometry) {
                    isLocationSelected3 = true;
                    $('#location').val(place.formatted_address ?? '');
                    $('#location_name').val(place.name ?? '');
                    $('#latitude').val(place.geometry.location.lat());
                    $('#longitude').val(place.geometry.location.lng());
                }
            });

            $('#location').on('input', function() {
                isLocationSelected3 = false;
                if ($(this).val().trim() === '') {
                    $('#location_name').val('');
                    $('#latitude').val('');
                    $('#longitude').val('');
                }
            });
        }

        $(document).ready(function() {
            $('#interest_ids').select2({
                placeholder: "Select Interests",
                width: '100%',
                allowClear: true
            });
        });

        $(document).ready(function() {
            // Form Submit Throttling
            $('#submitBtn').on('click', function() {
                let form = $('#businessProfileForm');
                if (form.length) {
                    $(this).prop('disabled', true);
                    form.submit();
                }
            });

            // Image Delete Handling
            $('.delete-btn').on('click', function() {
                let wrapper = $(this).closest('.image-wrapper');
                let input = wrapper.find('.delete-input');
                let imageId = $(this).data('id');

                wrapper.hide().addClass('deleted');
                input.val(imageId).prop('disabled', false);
                $('#business_image_error').text('');
            });

            // Image Limit Validation
            $('input[name="business_images[]"]').on('change', function() {
                let current = $('.image-wrapper:not(.deleted)').length;
                let newFiles = this.files.length;
                if (current + newFiles > 5) {
                    $('#business_image_error').text("Maximum 5 images allowed");
                    this.value = "";
                } else {
                    $('#business_image_error').text('');
                }
            });

            // Service Timing Toggles
            $('.day-toggle').on('change', function() {
                let row = $(this).closest('tr');
                let timeGroup = row.find('.time-input-group');
                let closedLabel = row.find('.closed-label');
                let statusLabel = row.find('.toggle-status');

                if (this.checked) {
                    timeGroup.removeClass('d-none');
                    closedLabel.addClass('d-none');
                    statusLabel.text('Open');
                } else {
                    timeGroup.addClass('d-none');
                    closedLabel.removeClass('d-none');
                    statusLabel.text('Closed');
                }
            });
        });

        function switchTab(tab) {
            const profileSection = document.getElementById('profile-section');
            const timingSection = document.getElementById('timing-section');
            const buttons = document.querySelectorAll('.tab-btn');

            // Hide all using explicit styles
            profileSection.style.display = 'none';
            timingSection.style.display = 'none';
            buttons.forEach(btn => btn.classList.remove('active'));

            if (tab === 'profile') {
                profileSection.style.display = 'block';
                buttons[0].classList.add('active');
            } else if (tab === 'timing') {
                timingSection.style.display = 'block';
                buttons[1].classList.add('active');
            }
        }

        google.maps.event.addListener(autocomplete, 'place_changed', function() {
            updatePacWidth();
        });

        function updatePacWidth() {
            const input = document.getElementById('location');
            const pac = document.querySelector('.pac-container');

            if (input && pac) {
                pac.style.width = input.offsetWidth + 'px';
                pac.style.left = input.getBoundingClientRect().left + 'px';
            }
        }

        window.addEventListener('resize', updatePacWidth);

        document.getElementById('location').addEventListener('focus', updatePacWidth);
    </script>
@endpush