@extends('themes.basic.business.layouts.app')
@section('container', 'dashboard-container-md')
@section('title', d_trans('Settings'))
@section('header_title', d_trans('Business Settings'))
@section('breadcrumbs', Breadcrumbs::render('business.settings'))
@section('hide_alerts', true)
@section('content')
    <div class="dashboard-accordion accordion" id="accordion">
        <div class="accordion-item mb-4">
            <h2 class="accordion-header position-relative">
                <button class="accordion-button position-relative" type="button" data-bs-toggle="collapse"
                    data-bs-target="#accordion1" aria-expanded="true" aria-controls="accordion1">
                    {{ d_trans('Business Details') }}
                    @if (!$currentBusiness->hasDataCompleted())
                        @if ($currentBusiness->hasDetailsCompleted())
                            <i class="far fa-check-circle text-success status-icon"></i>
                        @else
                            <i class="far fa-question-circle text-warning status-icon"></i>
                        @endif
                    @endif
                </button>
            </h2>
            <div id="accordion1" class="accordion-collapse collapse" data-bs-parent="#accordion">
                <div class="accordion-body p-4">
                    <form action="{{ route('business.settings.details.update') }}" method="POST">
                        @csrf
                        <div class="row g-3 mb-4">
                            <div class="col-lg-6">
                                <label class="form-label">{{ d_trans('Business Name') }}</label>
                                <input type="text" name="business_name" class="form-control form-control-md"
                                    value="{{ $currentBusiness->name }}" required />
                            </div>
                            <div class="col-lg-6">
                                <label class="form-label">{{ d_trans('Website or Business URL') }}</label>
                                <input type="url" name="website" class="form-control form-control-md"
                                    placeholder="https://example.com" value="{{ $currentBusiness->website }}" required />
                            </div>
                            <div class="col-12">
                                <label class="form-label">{{ d_trans('Category') }}</label>
                                <select name="category" class="form-select form-select-md" required>
                                    <option value="" disabled selected>{{ d_trans('Select Category') }}</option>
                                    @foreach ($categories as $category)
                                        <option value="{{ $category->id }}" @selected($currentBusiness->category_id == $category->id)>
                                            {{ $category->trans->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-lg-6">
                                <label class="form-label">{{ d_trans('Email') }}</label>
                                <input type="email" name="email" class="form-control form-control-md"
                                    value="{{ demo($currentBusiness->email) }}" />
                                <div class="form-text">{{ d_trans('Contact form messages will sent to this email.') }}
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <label class="form-label">{{ d_trans('Phone Number') }}</label>
                                <input type="mobile" name="phone_number" class="form-control form-control-md"
                                    value="{{ $currentBusiness->phone }}" />
                            </div>
                            <div class="col-12">
                                <label class="form-label">{{ d_trans('Short Description') }}</label>
                                <textarea name="short_description" class="form-control form-control-md"
                                    placeholder="{{ d_trans('Between 30 to 60 characters') }}" rows="3" minlength="30" maxlength="60" required>{{ $currentBusiness->short_description }}</textarea>
                            </div>
                            <div class="col-12">
                                <label class="form-label">{{ d_trans('Full Description') }}</label>
                                <textarea name="description" class="form-control form-control-md" placeholder="{{ d_trans('Max 1500 characters') }}"
                                    rows="10">{{ $currentBusiness->description }}</textarea>
                            </div>
                            <div class="col-12">
                                <label class="form-label">{{ d_trans('Tags') }}</label>
                                <input id="businessTags" type="text" name="tags"
                                    value="{{ $currentBusiness->tags }}">
                                <div class="form-text">
                                    {{ d_trans('Add relevant tags to help improve search visibility and make it easier for people to find your business quickly') }}
                                </div>
                            </div>
                        </div>
                        <button class="btn btn-primary btn-md">{{ d_trans('Save Changes') }}</button>
                    </form>
                </div>
            </div>
        </div>
        <!-- website opeing hours-->
            <div class="accordion-item mb-4">
            <h2 class="accordion-header position-relative">
                <button class="accordion-button position-relative collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#accordion7" aria-expanded="true" aria-controls="accordion2">
                    {{ d_trans('Business Opening Hours') }}
                    @if (!$currentBusiness->hasDataCompleted())
                        @if ($currentBusiness->hasLogoCompleted())
                            <i class="far fa-check-circle text-success status-icon"></i>
                        @else
                            <i class="far fa-question-circle text-warning status-icon"></i>
                        @endif
                    @endif
                </button>
            </h2>
                        <div id="accordion7" class="accordion-collapse collapse" data-bs-parent="#accordion">
                <div class="accordion-body p-4">
                                        <form action="{{ route('business.settings.opening-hours.update') }}" method="POST">
                        @csrf
                                             <div class="d-flex align-items-center justify-content-between">
                                <h5 class="fw-semibold-1 font-14 mb-0">Hide Opening Hours Section</h5>
                                <div class="form-check form-switch">
                                        <input style="font-size:24px;" class="form-check-input cursor-pointer" name="opening_hours_section" type="checkbox" value="1"
                                                     role="switch"
                                                     data-action=""
                                                     data-type="opening_hours_section"
                                                     @checked(!@$currentBusiness->opening_hours_enabled)>
                                </div>
                        </div>
                        <p class="mt-8">Turn on or off your opening hours section</p>   
                                 <hr>   
                                        <h5><i class="fa-brands fa-spotify"></i> Add / Edit Opening Hours</h5>
                        <hr>
                        <div class="table-responsive mb-3">
                        <table class="table table-striped">
    <tbody>
        @php
                $days = [1=>'Monday',2=>'Tuesday',3=>'Wednesday',4=>'Thursday',5=>'Friday',6=>'Saturday',0=>'Sunday'];
        @endphp
        @foreach ($days as $w => $label)
        @php
                $hour = $currentBusiness->openingHours->firstWhere('weekday', $w);
                $enabled = $hour ? !$hour->is_closed : false;
        @endphp
        <tr>
            <td style="vertical-align:middle;">
            <div class="form-check">
    <input class="form-check-input" type="checkbox" name="hours[{{ $w }}][enabled]" value="1" id="weekday-{{ $w }}" @checked($enabled)>
    <label class="form-check-label" for="weekday-{{ $w }}">
    {{ strtoupper($label) }}
    </label>
            </div></td>
            <td>
        <input type="time" class="form-control" name="hours[{{ $w }}][opens_at]" value="{{ $hour ? substr($hour->opens_at,0,5) : '' }}" autocomplete="off" />
            </td>
            <td>
 <input type="time" class="form-control" name="hours[{{ $w }}][closes_at]" value="{{ $hour ? substr($hour->closes_at,0,5) : '' }}" autocomplete="off" />
            </td>
        </tr>
        @endforeach
    </tbody>
</table>
                        </div>      
                          
                            <button class="btn btn-primary btn-md">{{ d_trans('Save Changes') }}</button>
                    </form>
                        </div>
                </div>
           </div>
     
        
        
        <div class="accordion-item mb-4">
            <h2 class="accordion-header position-relative">
                <button class="accordion-button position-relative collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#accordion2" aria-expanded="true" aria-controls="accordion2">
                    {{ d_trans('Business Logo') }}
                    @if (!$currentBusiness->hasDataCompleted())
                        @if ($currentBusiness->hasLogoCompleted())
                            <i class="far fa-check-circle text-success status-icon"></i>
                        @else
                            <i class="far fa-question-circle text-warning status-icon"></i>
                        @endif
                    @endif
                </button>
            </h2>
            <div id="accordion2" class="accordion-collapse collapse" data-bs-parent="#accordion">
                <div class="accordion-body p-4">
                    <div class="row align-items-center g-3 ">
                        <div class="col-auto">
                            <img src="{{ $currentBusiness->getLogoLink() }}" alt="{{ $currentBusiness->trans->name }}"
                                class="border rounded-3 p-2 business-logo" width="120px" height="120px">
                        </div>
                        <div class="col">
                            <div class="mb-2">
                                <button id="selectImageBtn" type="button" class="btn btn-light">
                                    <i class="fa fa-camera me-2"></i>{{ d_trans('Change Logo') }}
                                </button>
                                <input id="uploadImage" type="file" name="logo"
                                    accept="image/png, image/jpg, image/jpeg" required hidden>
                            </div>
                            <div class="col-lg-6">
                                <small class="text-muted">
                                    {{ d_trans('Supported types: JPEG, JPG, and PNG') }}</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="accordion-item mb-4">
            <h2 class="accordion-header position-relative">
                <button class="accordion-button position-relative collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#accordion3" aria-expanded="true" aria-controls="accordion3">
                    {{ d_trans('Business Social Links') }}
                    @if (!$currentBusiness->hasDataCompleted())
                        @if ($currentBusiness->hasSocialLinksCompleted())
                            <i class="far fa-check-circle text-success status-icon"></i>
                        @else
                            <i class="far fa-question-circle text-warning status-icon"></i>
                        @endif
                    @endif
                </button>
            </h2>
            <div id="accordion3" class="accordion-collapse collapse" data-bs-parent="#accordion">
                <div class="accordion-body p-4">
                    <form action="{{ route('business.settings.social-links.update') }}" method="POST">
                        @csrf
                        <div class="row g-3 mb-4">
                            <div class="col-lg-6">
                                <label class="form-label">{{ d_trans('Facebook') }}</label>
                                <div class="row g-2 align-items-center">
                                    <div class="col-auto">
                                        <button type="button" class="social-btn social-facebook p-4">
                                            <i class="fab fa-facebook-f"></i>
                                        </button>
                                    </div>
                                    <div class="col">
                                        <input type="text" name="social_links[facebook]"
                                            class="form-control form-control-md" placeholder="{{ d_trans('Username') }}"
                                            value="{{ @$currentBusiness->social_links->facebook }}">
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <label class="form-label">{{ d_trans('X.com') }}</label>
                                <div class="row g-2 align-items-center">
                                    <div class="col-auto">
                                        <button type="button" class="social-btn social-x p-4">
                                            <i class="fab fa-x-twitter"></i>
                                        </button>
                                    </div>
                                    <div class="col">
                                        <input type="text" name="social_links[x]" class="form-control form-control-md"
                                            placeholder="{{ d_trans('Username') }}"
                                            value="{{ @$currentBusiness->social_links->x }}">
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <label class="form-label">{{ d_trans('Youtube') }}</label>
                                <div class="row g-2 align-items-center">
                                    <div class="col-auto">
                                        <button type="button" class="social-btn social-youtube p-4">
                                            <i class="fab fa-youtube"></i>
                                        </button>
                                    </div>
                                    <div class="col">
                                        <input type="text" name="social_links[youtube]"
                                            class="form-control form-control-md" placeholder="{{ d_trans('Username') }}"
                                            value="{{ @$currentBusiness->social_links->youtube }}">
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <label class="form-label">{{ d_trans('Linkedin') }}</label>
                                <div class="row g-2 align-items-center">
                                    <div class="col-auto">
                                        <button type="button" class="social-btn social-linkedin p-4">
                                            <i class="fab fa-linkedin"></i>
                                        </button>
                                    </div>
                                    <div class="col">
                                        <input type="text" name="social_links[linkedin]"
                                            class="form-control form-control-md" placeholder="{{ d_trans('Username') }}"
                                            value="{{ @$currentBusiness->social_links->linkedin }}">
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <label class="form-label">{{ d_trans('Instagram') }}</label>
                                <div class="row g-2 align-items-center">
                                    <div class="col-auto">
                                        <button type="button" class="social-btn social-instagram p-4">
                                            <i class="fab fa-instagram"></i>
                                        </button>
                                    </div>
                                    <div class="col">
                                        <input type="text" name="social_links[instagram]"
                                            class="form-control form-control-md" placeholder="{{ d_trans('Username') }}"
                                            value="{{ @$currentBusiness->social_links->instagram }}">
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <label class="form-label">{{ d_trans('Pinterest') }}</label>
                                <div class="row g-2 align-items-center">
                                    <div class="col-auto">
                                        <button type="button" class="social-btn social-pinterest p-4">
                                            <i class="fab fa-pinterest"></i>
                                        </button>
                                    </div>
                                    <div class="col">
                                        <input type="text" name="social_links[pinterest]"
                                            class="form-control form-control-md" placeholder="{{ d_trans('Username') }}"
                                            value="{{ @$currentBusiness->social_links->pinterest }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button class="btn btn-primary btn-md">{{ d_trans('Save Changes') }}</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="accordion-item mb-4">
            <h2 class="accordion-header position-relative">
                <button class="accordion-button position-relative collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#accordion4" aria-expanded="true" aria-controls="accordion4">
                    {{ d_trans('Business Address') }}
                    @if (!$currentBusiness->hasDataCompleted())
                        @if ($currentBusiness->hasAddressCompleted())
                            <i class="far fa-check-circle text-success status-icon"></i>
                        @else
                            <i class="far fa-question-circle text-warning status-icon"></i>
                        @endif
                    @endif
                </button>
            </h2>
            <div id="accordion4" class="accordion-collapse collapse" data-bs-parent="#accordion">
                <div class="accordion-body p-4">
                    <form action="{{ route('business.settings.address.update') }}" method="POST">
                        @csrf
                        @include('themes.basic.partials.address-forms', [
                            'address_classes' => 'mb-4',
                            'address' => (object) [
                                'line_1' => $currentBusiness->address_line_1,
                                'line_2' => $currentBusiness->address_line_2,
                                'city' => $currentBusiness->city,
                                'state' => $currentBusiness->state,
                                'zip' => $currentBusiness->zip,
                                'country' => $currentBusiness->country,
                            ],
                        ])
                        <button class="btn btn-primary btn-md">{{ d_trans('Save Changes') }}</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="accordion-item mb-4">
            <h2 class="accordion-header position-relative">
                <button class="accordion-button position-relative collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#accordion5" aria-expanded="true" aria-controls="accordion5">
                    {{ d_trans('Business Verification') }}
                    @if (!$currentBusiness->hasDataCompleted())
                        @if ($currentBusiness->isVerified())
                            <i class="far fa-check-circle text-success status-icon"></i>
                        @else
                            <i class="far fa-question-circle text-warning status-icon"></i>
                        @endif
                    @endif
                </button>
            </h2>
            <div id="accordion5" class="accordion-collapse collapse" data-bs-parent="#accordion">
                <div class="accordion-body p-4">
                    @if ($currentBusiness->isUnverified())
                        @if ($currentBusiness->hasPendingVerification())
                            <div class="alert alert-warning mb-0">
                                <p class="mb-0"><i
                                        class="bi bi-hourglass-split me-2"></i>{{ d_trans('Your business ownership verification request is under review') }}
                                </p>
                            </div>
                        @else
                            <h4 class="mb-3">{{ d_trans('Verify your business ownership') }}</h4>
                            <p class="mb-2">
                                {{ d_trans('Verifying your business ownership helps build trust and ensures your business appears more credible to visitors.') }}
                            </p>
                            <p class="mb-1 fw-bold">
                                {{ d_trans('To confirm that you own or manage this business please provide one of the following:') }}
                            </p>
                            <ul>
                                <li>
                                    {{ d_trans('A screenshot of your Instagram, Facebook, TikTok, or other social profile clearly showing the account name/handle and your logged-in view') }}
                                </li>
                                <li>
                                    {{ d_trans('A utility bill, lease, or invoice in the brand name (if you have one)') }}
                                </li>
                                <li>
                                    {{ d_trans('A business license or registration (if the brand is formally registered)') }}
                                </li>
                                <li>
                                    {{ d_trans('Any other verifiable document or page tying you to the name/handle (press coverage, payment dashboard screenshot, etc.)') }}
                                </li>
                            </ul>
                            <p class="mb-3">
                                {{ d_trans('Please ensure any image or document is clear, current, and unaltered. Hide sensitive details (account numbers, personal addresses) if you wish—only the brand/account name and your link to it must be visible.') }}
                            </p>
                            <div class="bg-light border rounded-1 p-4">
                                <form action="{{ route('business.settings.verify') }}" method="POST"
                                    enctype="multipart/form-data">
                                    @csrf
                                    <div class="mb-4">
                                        <label class="form-label fw-medium">{{ d_trans('Ownership proof') }}</label>
                                        <input type="file" name="ownership_proof" class="form-control form-control-md"
                                            accept=".jpeg,.jpg,.png,.pdf" required>
                                        <div class="form-text">{{ d_trans('Allowed types (JPG, JPEG, PNG, PDF)') }}</div>
                                    </div>
                                    <div class="row g-3 row-cols-auto">
                                        <div class="col">
                                            <button class="btn btn-primary btn-md action-confirm px-4">
                                                {{ d_trans('Submit') }}
                                            </button>
                                        </div>
                                        @if (config('settings.actions.contact_page') && config('settings.general.contact_email'))
                                            <div class="col">
                                                <a href="{{ route('contact') }}"
                                                    class="btn btn-outline-dark btn-md px-4">{{ d_trans('Need Help?') }}</a>
                                            </div>
                                        @endif
                                    </div>
                                </form>
                            </div>
                        @endif
                    @else
                        <div class="alert alert-success mb-0">
                            <p class="mb-0"><i
                                    class="bi bi-patch-check me-2"></i>{{ d_trans('Your business ownership has been verified') }}
                            </p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
        @if (authBusinessOwner()->isSuperAdminOfCurrentBusiness())
            <div class="accordion-item">
                <h2 class="accordion-header position-relative">
                    <button class="accordion-button position-relative collapsed" type="button" data-bs-toggle="collapse"
                        data-bs-target="#accordion6" aria-expanded="true" aria-controls="accordion6">
                        {{ d_trans('Business Deletion') }}
                    </button>
                </h2>
                <div id="accordion6" class="accordion-collapse collapse" data-bs-parent="#accordion">
                    <div class="accordion-body p-4">
                        <p>
                            {{ d_trans('After deleting your business, you will lose all your reviews and settings and will not be able to restore them') }}
                        </p>
                        <form action="{{ route('business.settings.delete') }}" method="POST">
                            @csrf
                            <button class="btn btn-danger action-confirm btn-md">{{ d_trans('Delete business') }}</button>
                        </form>
                    </div>
                </div>
            </div>
        @endif
    </div>
    <div class="modal modal-cropper fade" id="cropModal" tabindex="-1" data-bs-backdrop="static"
        data-bs-keyboard="false" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ d_trans('Crop your business logo') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="d-flex justify-content-center">
                        <img id="cropImage" src="" alt="Cropper Image" class="cropper-image" />
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-primary btn-md px-4"
                        data-bs-dismiss="modal">{{ d_trans('Close') }}</button>
                    <button type="submit" class="btn btn-primary btn-md px-4"
                        id="cropAndUpload">{{ d_trans('Upload') }}</button>
                </div>
            </div>
        </div>
    </div>
    @push('styles_libs')
        <link rel="stylesheet" href="{{ asset('vendor/libs/cropper/cropper.min.css') }}">
    @endpush
    @push('scripts_libs')
        <script src="{{ asset('vendor/libs/bootstrap/tags-input/tags-input.min.js') }}"></script>
        <script src="{{ asset('vendor/libs/cropper/cropper.min.js') }}"></script>
        <script src="{{ asset('vendor/libs/jquery/loadingoverlay.min.js') }}"></script>
    @endpush
    @push('scripts')
        @if (session('accordion_id'))
            <script>
                "use strict";
                const accordionId = '{{ session('accordion_id') }}';
                if (accordionId) {
                    const $targetAccordion = $('#' + accordionId);
                    const targetAccordion = $targetAccordion[0];
                    if ($targetAccordion.hasClass('collapse') && !$targetAccordion.hasClass('show')) {
                        $('button[data-bs-target="#' + accordionId + '"]').trigger('click');
                        const yOffset = -300;
                        const y = targetAccordion.getBoundingClientRect().top + window.pageYOffset + yOffset;
                        window.scrollTo({
                            top: y,
                            behavior: 'smooth'
                        });
                    }
                }
            </script>
        @endif
        <script>
            "use strict";
            let businessTags = $('#businessTags');
            if (businessTags.length) {
                businessTags.tagsinput({
                    cancelConfirmKeysOnEmpty: false,
                    maxTags: 15,
                });
            }
        </script>
        <script>
            "use strict";

            const businessLogos = document.querySelectorAll('.business-logo');
            const uploadImage = document.getElementById('uploadImage');
            const selectImageBtn = document.getElementById('selectImageBtn');
            const cropModalEl = document.getElementById('cropModal');
            const cropModal = new bootstrap.Modal(cropModalEl);
            const cropImage = document.getElementById('cropImage');
            let cropper;

            selectImageBtn.addEventListener('click', () => uploadImage.click());

            uploadImage.addEventListener('change', () => {
                if (uploadImage.files && uploadImage.files.length > 0) {
                    const file = uploadImage.files[0];
                    const url = URL.createObjectURL(file);

                    cropImage.src = url;
                    cropModal.show();

                    if (cropper) {
                        cropper.destroy();
                    }

                    cropImage.onload = () => {
                        cropper = new Cropper(cropImage, {
                            aspectRatio: 1,
                            viewMode: 1,
                            dragMode: 'move',
                            autoCropArea: 1,
                            movable: true,
                            zoomable: true,
                            scalable: false,
                            rotatable: false,
                            minContainerWidth: 400,
                            minContainerHeight: 400,
                            minCropBoxWidth: 512,
                            minCropBoxHeight: 512,
                            minZoomRatio: 1,
                            maxZoomRatio: 3,
                            background: false,
                            responsive: true,
                        });
                    };
                }
            });

            let cropAndUpload = $('#cropAndUpload');
            cropAndUpload.on('click', function() {

                if (!cropper) return;

                cropper.getCroppedCanvas({
                    width: 512,
                    height: 512,
                    imageSmoothingQuality: 'high',
                }).toBlob(blob => {
                    const formData = new FormData();
                    formData.append('logo', blob, 'business-logo.png');
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ route('business.settings.logo.update') }}",
                        method: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        beforeSend: function() {
                            $('body').LoadingOverlay("show", {
                                imageColor: "{{ config('theme.settings.colors.primary_color') }}"
                            });
                        },
                        success: function(response) {
                            processDone();
                            if (!$.isEmptyObject(response.error)) {
                                toastr.error(response.error);
                            } else {
                                businessLogos.forEach(logo => {
                                    logo.src = URL.createObjectURL(blob);
                                });
                            }
                        },
                        error: function(request, status, error) {
                            processDone();
                            toastr.error(error);
                        }
                    }).fail(function(jqXHR, ajaxOptions, thrownError) {
                        processDone();
                        toastr.error(thrownError);
                    });
                }, 'image/png');
            });

            function processDone() {
                cropModal.hide();
                uploadImage.value = '';
                if (cropper) {
                    cropper.destroy();
                    cropper = null;
                }

                $('body').LoadingOverlay("hide");
            }

            cropModalEl.addEventListener('hidden.bs.modal', () => {
                if (cropper) {
                    cropper.destroy();
                    cropper = null;
                }
                cropImage.src = '';
                uploadImage.value = '';
            });
        </script>
    @endpush
@endsection