@extends('site.layout.layout')

@section('title',__('Favorites'))

@section('content')
    <main class="orders_page shopping_cart_page product_details_page py-2">
        <!-- ------- breadcrumb ---------- -->
        <nav aria-label="breadcrumb" class="py-2 px-3 px-lg-4">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ route('home') }}"><i class="fas fa-arrow-right-long"></i> {{ __('Home') }}</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page"> {{ __('Sell My Products')}}</li>
            </ol>
        </nav>
        <section class="all_products row py-3 px-3 px-lg-4 mb-5">
            <div class="col-sm-4 col-md-3 mb-3">
                <nav class="setting_nav d-flex d-sm-block">
                    <a href="{{ route('Site.MyOrders') }}">
                        <img src="{{ asset('site/img/light/3d-cube-scan.png') }}" class="mode_icon" data-light="{{ asset('site/img/light/3d-cube-scan.png') }}" data-dark="{{ asset('site/img/dark/3d-cube-scan.png') }}" alt=""> {{ __('My Orders') }}
                    </a>
                    <a href="{{ route('Site.SellMyProducts') }}" class="active">
                        <img src="{{ asset('site/img/buy-crypto.png') }}" alt=""> {{ __('Sell My Products')}}
                    </a>
                    <a href="{{ route('Site.Profile') }}">
                        <img src="{{ asset('site/img/light/profile-circle.png') }}" class="mode_icon" data-light="{{ asset('site/img/light/profile-circle.png') }}" data-dark="{{ asset('site/img/dark/profile-circle.png') }}" alt=""> {{ __('Profile') }}
                    </a>
                    <a href="{{ route('Site.favorites.index') }}">
                        <img src="{{ asset('site/img/light/heart.png') }}" class="mode_icon" data-light="{{ asset('site/img/light/heart.png') }}" data-dark="{{ asset('site/img/dark/heart.png') }}" alt=""> {{ __('Favorites') }}
                    </a>
                    <a href="{{ route('Site.addresses.index') }}">
                        <img src="{{ asset('site/img/light/location.png') }}" class="mode_icon" data-light="{{ asset('site/img/light/location.png') }}" data-dark="{{ asset('site/img/dark/location.png') }}" alt=""> {{ __('Addresses') }}
                    </a>
                </nav>
            </div>
            @if(!auth()->user()->store)
                <div class="col-sm-8 col-md-9" id="firstCard">
                    <section class="title_sec mb-3">
                        <h3 class="section_title mb-2"> {{ __('Sell my products') }}</h3>
                        <p> {{ __('Start selling your products easily through our secure platform.') }}</p>
                    </section>
                    <section class="title_sec fit_height_center justify-content-center mb-3 p-4">
                        <img src="{{ asset('site/img/undraw_gaming_v7a6 1.png') }}" class="img-fluid" alt="">
                        <h3 class="section_title text-center w-100 mt-5 mb-4"> {{ __('Activate the selling feature') }}</h3>
                        <p class="text-center w-100 mb-4"> {{ __("Activate your account now to start selling products on our platform. After activation, you'll be able to display your products professionally, manage orders easily, and communicate directly with customers.") }}</p>
                        <div class="d-flex justify-content-center w-100">
                            <a type="button" class="primaryBgBtn floatBtn w-100" onclick="showFormCard()"> {{ __('Activate the service now') }}</a>
                        </div>
                    </section>
                </div>
                <div class="col-sm-8 col-md-9 d-none" id="secondCard">
                    <section class="title_sec mb-4">
                        <h3 class="section_title"> {{ __('Activation request') }}</h3>
                    </section>
                    <section class="form-horizontal form-label-right">
                        <form class="general_form" action="{{ route('Site.stores.store') }}" method="post" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="form-group col-lg-12 mb-3">
                                    <p class="label mb-1"> {{ __('Upload a photo of your ID (such as an ID card or passport)') }}</p>
                                    <label for="file_input" class="file_label fit_height_center justify-content-center w-100 mb-0">
                                        <div class="icon_container">
                                            <i class="fas fa-file-arrow-up"></i>
                                        </div>
                                        <h6 class="section_title text-center w-100 my-2"> {{ __('Click or drag and drop') }}</h6>
                                        <p class="w-100 text-center"> {{ __('JPEG, PNG, JPG, GIF, PDF, SVG files only (Max size: 2MB)') }}</p>
                                    </label>
                                    <p class="w-100 text-center pt-1" id="fileName"> </p>
                                    <input type="file" id="file_input" name="personal_id" class="form-control d-none cropper-input" accept=".jpeg, .png, .jpg, .gif, .pdf, .svg">
                                </div>
                                <h6 class="section_title mb-2 pt-3"> {{ __('Store information') }}</h6>
                                <div class="form-group col-lg-6 mb-3">
                                    <label for="title_input"> {{ __('Store Title') }}</label>
                                    <input type="text" placeholder="{{ __('Enter store title in English') }}" name="title_en" class="form-control" id="title_input" value="{{ old('title_en') }}">
                                </div>
                                <div class="form-group col-lg-6 mb-3">
                                    <label for="title_ar_input"> {{ __('Store Title') }}</label>
                                    <input type="text" placeholder="{{ __('Enter store title in Arabic') }}" name="title_ar" class="form-control" id="title_ar_input" value="{{ old('title_ar') }}">
                                </div>
                                <div class="form-group col-lg-6 mb-3">
                                    <label for="description_input"> {{ __('Store Description') }}</label>
                                    <textarea type="text" name="description_en" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="{{ __('Enter store description in English') }}" rows="1">{{ old('description_en') }}</textarea>
                                </div>
                                <div class="form-group col-lg-6 mb-3">
                                    <label for="description_ar_input"> {{ __('Store Description') }}</label>
                                    <textarea type="text" name="description_ar" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="{{ __('Enter store description in Arabic') }}" rows="1">{{ old('description_ar') }}</textarea>
                                </div>
                                <h6 class="section_title mb-2 pt-3"> {{ __('Bank account information') }}</h6>
                                <div class="form-group col-lg-6 mb-3">
                                    <label for="name_input"> {{ __('Account holder name') }}</label>
                                    <input type="text" placeholder="{{ __('Account holder name') }}" name="account_holder_name" class="form-control" id="name_input" value="{{ old('account_holder_name') }}">
                                </div>
                                <div class="form-group col-lg-6 mb-3">
                                    <label for="bank_input"> {{ __('Bank name') }}</label>
                                    <input type="text" placeholder="{{ __('Bank name') }}" name="bank_name" class="form-control" id="bank_input" value="{{ old('bank_name') }}">
                                </div>
                                <div class="form-group col-lg-12 mb-3">
                                    <label for="iban_input">{{ __('IBAN number') }}</label>
                                    <input type="text" placeholder="{{ __('IBAN number') }}" name="IBAN" class="form-control" id="iban_input" value="{{ old('IBAN') }}">
                                </div>
                                <h6 class="section_title mb-2"> {{ __('Address') }}</h6>
                                <div class="form-group col-lg-6 mb-3">
                                    <label for="area_input"> {{ __('Region') }}</label>
                                    <input type="text" placeholder="{{ __('Region') }}" name="region" class="form-control" id="area_input" value="{{ old('region') }}">
                                </div>
                                <div class="form-group col-lg-6 mb-3">
                                    <label for="slctCity" class="d-block" style="margin-top : 20px!important;"> {{ __('City') }}</label>
                                    <select class="quantity-select w-100" id="slctCity" name="city_id">
                                        <option value="" disabled selected hidden>{{ __('Select city') }}</option>
                                        @foreach($cities as $city)
                                            <option value="{{ $city->id }}">{{ $city->getTranslation('city',app()->getLocale()) }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <p><i class="fas fa-info-circle mx-1"></i> {{ __('Your application will be reviewed by the Tasahal administration. Once approved, the selling feature will be activated on your account.') }}</p>
                                <div class="d-flex justify-content-center col-12 mt-5">
                                    <button type="submit" class="primaryBgBtn floatBtn w-50 text-center d-block"> {{ __('Submit the request') }}</button>
                                </div>
                            </div>
                        </form>
                    </section>
                </div>
            @elseif(auth()->user()->store && auth()->user()->store?->status != 1)
                <div class="col-sm-8 col-md-9">
                    <section class="title_sec mb-4">
                        <h3 class="section_title mb-2"> {{ __('Sell my products') }}</h3>
                        <p> {{ __('Start selling your products easily through our secure platform.') }}</p>
                    </section>
                    <section class="store">
                        <div class="info_card bg-transparent d-lg-flex justify-content-between align-items-start mb-4">
                            <figcaption>
                                <h5 class="mb-2"><span>{{ __('Your application is under review') }}</span></h5>
                                <h5 class="mb-2"> {{ auth()->user()->store?->account_holder_name }}</h5>
                                <h5 class="mb-2"> {{ auth()->user()->store?->bank_name }}</h5>
                                <h5> {{ auth()->user()->store?->IBAN }}</h5>
                            </figcaption>
                            <div class="d-flex justify-content-end mt-3 mt-lg-0">
                                <p class="order_status orange"> {{ __('The request is being processed') }}</p>
                            </div>
                        </div>
                    </section>
                </div>
            @elseif(auth()->user()->store && auth()->user()->store?->sale_status == 1)
                <div class="col-sm-8 col-md-9">
                    <div class="no_results fit_height_center justify-content-center">
                        <i class="fas fa-users-cog bounce_icon"></i>
                        <h2 class="text-center w-100 pt-3"> {{ __('You can only access your products through the admin panel. This is for used products only.') }}</h2>
                    </div>
                </div>
            @else
                <div class="col-sm-8 col-md-9">
                    <section class="title_sec mb-4">
                        <h3 class="section_title mb-2"> {{ __('Sell my products') }}</h3>
                        <p> {{ __('Start selling your products easily through our secure platform.') }}</p>
                    </section>
                    <section class="statistics mb-3">
                        <div class="row">
                            <div class="col-6 col-lg-3 mb-3 px-2">
                                <figure class="info_card bg-transparent p-3 h-100">
                                    <img src="{{ asset('site/img/box-icon.png') }}" alt="">
                                    <h2 class="my-1">{{ auth()->user()->store?->products()->where('status',1)->where('count','>=',1)->count() ?? 0 }}</h2>
                                    <p> {{ __('Displayed products') }}</p>
                                </figure>
                            </div>
                            <div class="col-6 col-lg-3 mb-3 px-2">
                                <figure class="info_card bg-transparent p-3 h-100">
                                    <img src="{{ asset('site/img/box-tick-icon.png') }}" alt="">
                                    <h2 class="my-1">{{ auth()->user()->store?->orderProducts()->where('shipping_status','!=','shipped')->count() ?? 0 }}</h2>
                                    <p> {{ __('Products in the sales phase') }}</p>
                                </figure>
                            </div>
                            <div class="col-6 col-lg-3 mb-3 px-2">
                                <figure class="info_card bg-transparent p-3 h-100">
                                    <img src="{{ asset('site/img/box-time-icon.png') }}" alt="">
                                    <h2 class="my-1">{{ auth()->user()->store?->orderProducts()->where('shipping_status','shipped')->count() ?? 0 }}</h2>
                                    <p> {{ __('Products sold') }}</p>
                                </figure>
                            </div>
                            <div class="col-6 col-lg-3 mb-3 px-2">
                                <figure class="info_card bg-transparent p-3 h-100">
                                    <img src="{{ asset('site/img/user-search-icon.png') }}" alt="">
                                    <h2 class="my-1">0</h2>
                                    <p> {{ __('Visits to your seller profile') }}</p>
                                </figure>
                            </div>
                        </div>
                    </section>
                    <section class="store row">
                        <h6 class="section_title mb-3"> {{ __('Store settings') }}</h6>
                        <a href="{{ route('Site.transactions.index') }}" class="col-md-6 mb-3">
                            <div class="info_card d-flex justify-content-between align-items-center">
                                <figure class="d-flex align-items-center">
                                    <img src="{{ asset('site/img/wallet.png') }}" class="img-fluid" alt="">
                                    <figcaption>
                                        <h5 class="mx-2"><span> {{ __('Wallet') }}</span></h5>
                                    </figcaption>
                                </figure>
                                <i class="fas fa-chevron-left"></i>
                            </div>
                        </a>
                        <a href="{{ route('Site.StoreOrders') }}" class="col-md-6 mb-3">
                            <div class="info_card d-flex justify-content-between align-items-center">
                                <figure class="d-flex align-items-center">
                                    <img src="{{ asset('site/img/box.png') }}" class="img-fluid" alt="">
                                    <figcaption>
                                        <h5 class="mx-2"><span> {{ __('Orders') }}</span></h5>
                                    </figcaption>
                                </figure>
                                <i class="fas fa-chevron-left"></i>
                            </div>
                        </a>
                        <a href="{{ route('Site.StoreProfile') }}" class="col-md-6 mb-3">
                            <div class="info_card d-flex justify-content-between align-items-center">
                                <figure class="d-flex align-items-center">
                                    <img src="{{ asset('site/img/shop.png') }}" class="img-fluid" alt="">
                                    <figcaption>
                                        <h5 class="mx-2"><span> {{ __('View store') }}</span></h5>
                                    </figcaption>
                                </figure>
                                <i class="fas fa-chevron-left"></i>
                            </div>
                        </a>
                        <button type="button" class="col-md-6 mb-3" data-bs-toggle="modal"
                            data-bs-target="#shippingSettingsModal">
                            <div class="info_card d-flex justify-content-between align-items-center">
                                <figure class="d-flex align-items-center">
                                    <img src="{{ asset('site/img/truck-fast.png') }}" class="img-fluid" alt="">
                                    <figcaption>
                                        <h5 class="mx-2"><span> {{ __('Shipping settings') }}</span></h5>
                                    </figcaption>
                                </figure>
                                <i class="fas fa-chevron-left"></i>
                            </div>
                        </button>
                        <button type="button" class="col-12 mb-3" data-bs-toggle="modal" data-bs-target="#ratingsModal">
                            <div class="info_card d-flex justify-content-between align-items-center">
                                <figure class="d-flex align-items-center">
                                    <img src="{{ asset('site/img/star.png') }}" class="img-fluid" alt="">
                                    <figcaption>
                                        <h5 class="mx-2"><span> {{ __('Reviews') }}</span></h5>
                                    </figcaption>
                                </figure>
                                <i class="fas fa-chevron-left"></i>
                            </div>
                        </button>
                    </section>
                </div>
            @endif
        </section>
        <!-- Modal -->
        <div class="modal fade modal-md" id="shippingSettingsModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="section_title " id="staticBackdropLabel"> {{ __('Shipping settings') }}</h1>
                        <button type="button" data-bs-dismiss="modal" aria-label="Close"><i class="far fa-circle-xmark"></i></button>
                    </div>
                    <div class="modal-body pb-5">
                        <div class="general_form">
                            <div class="form-check form-switch d-flex justify-content-between align-items-center">
                                <label class="form-check-label" for="direct_receipt_input"> {{ __('PickUp') }}</label>
                                <input class="form-check-input" name="pickup" type="checkbox" style="cursor:pointer" role="switch" id="direct_receipt_input" @if(auth()->user()->store?->storeShippingSetting?->pickup) checked @endif>
                            </div>
                            <div class="form-check form-switch d-flex justify-content-between align-items-center">
                                <label class="form-check-label" for="direct_delivery_input"> {{ __('Store delivery') }}<br><span> {{ __('Delivery cost is :cost SAR', ['cost' => auth()->user()->store?->storeShippingSetting?->store_delivery_cost ?? 0]) }}</span></label>
                                <input class="form-check-input" name="store_delivery" type="checkbox" style="cursor:pointer" role="switch" id="direct_delivery_input" @if(auth()->user()->store?->storeShippingSetting?->store_delivery) checked @endif>
                            </div>
                            @php
                                $selectedCompanies = json_decode(auth()->user()->store?->storeShippingSetting?->shipping_companies_ids, true) ?? [];
                            @endphp
                            @foreach($companies ?? [] as $company)
                                <div class="form-check form-switch d-flex justify-content-between align-items-center">
                                    <label class="form-check-label" for="company_input_{{ $company->id }}">
                                        {{ $company->title }}<br>
                                        <span>{{ __('Shipping costs are borne by the buyer.') }}</span>
                                    </label>
                                    <input
                                        class="form-check-input"
                                        name="shipping_companies_ids[{{ $company->id }}]"
                                        type="checkbox"
                                        style="cursor:pointer"
                                        role="switch"
                                        id="company_input_{{ $company->id }}"
                                        @if(in_array($company->id, $selectedCompanies)) checked @endif
                                    >
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Store Delivery Cost Modal -->
        <div class="modal fade modal-md" id="storeDeliveryCostModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="storeDeliveryCostLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <form id="storeDeliveryCostForm">
                        <div class="modal-header">
                            <h1 class="section_title " id="storeDeliveryCostLabel"> {{ __('Store Delivery Cost') }}</h1>
                            <button type="button" data-bs-dismiss="modal" aria-label="Close"><i class="far fa-circle-xmark"></i></button>
                        </div>
                        <div class="modal-body">
                            <input type="number" name="store_delivery_cost" id="store_delivery_cost_input" class="form-control" placeholder="{{ __('Cost in SAR') }}" required>
                        </div>
                        <div class="modal-footer" style="border-top: 0!important;justify-content: center!important;">
                            <button type="submit" class="primaryBgBtn floatBtn w-50 text-center d-block">{{ __('Confirm') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade modal-md" id="ratingsModal" data-bs-backdrop="static" data-bs-keyboard="false"
            tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="section_title " id="staticBackdropLabel"> {{ __('Reviews') }}</h1>
                        <button type="button" data-bs-dismiss="modal" aria-label="Close"><i class="far fa-circle-xmark"></i></button>
                    </div>
                    <div class="modal-body pb-5 pt-0">
                        @forelse($store->reviews ?? [] as $review)
                                                        <figure class="reviews py-3">
                                <div class="d-flex align-items-center justify-content-between w-100">
                                    <div>
                                        <h6>{{ $review->user?->name }}</h6>
                                        <img src="{{ asset("site/img/{$productRating}stars.png") }}" alt="">
                                    </div>
                                    <p class="date">{{ $review->created_at->format('d-m-Y') }}</p>
                                </div>
                                <figcaption> {{ $review->comment }}</figcaption>
                            </figure>
                            @if (!$loop->last)
                                <hr>
                            @endif
                        @empty
                            <div class="no_results fit_height_center justify-content-center">
                                <i class="fas fa-star-half-alt bounce_icon"></i>
                                <h2 class="text-center w-100 pt-3"> {{ __('There are no reviews to display.') }}</h2>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@push('scripts')
    <script>
        $('#orderSlct').select2({
            allowClear: false,
            minimumResultsForSearch: Infinity,
            dir: "{{ app()->getLocale() == 'ar' ? 'ltr' : 'rtl' }}"
        });
        $('#slctCity').select2({
            allowClear: false,
            minimumResultsForSearch: Infinity,
            dir: "{{ app()->getLocale() == 'ar' ? 'ltr' : 'rtl' }}",
            width: '100%'
        });
    </script>
    <script>
        const input = document.getElementById("file_input");
        const output = document.getElementById("fileName");

        input.addEventListener("change", function () {
            if (input.files.length > 0) {
                const fileName = input.files[0].name;
                output.textContent = fileName;
            } else {
                output.textContent = '{{ __('No file selected.') }}';
            }
        });

        function showFormCard()
        {
            $('#firstCard').addClass('d-none');
            $('#secondCard').removeClass('d-none');
        }
    </script>
    <script>
        const deliveryCostText = {
            ar: "{{ __('تكلفة التوصيل :cost رس') }}",
            en: "{{ __('Delivery cost is :cost SAR') }}"
        };
    </script>
    <script>
        $(document).ready(function () {
        let shippingData = {
            pickup: $('#direct_receipt_input').is(':checked') ? 1 : 0,
            store_delivery: $('#direct_delivery_input').is(':checked') ? 1 : 0,
            store_delivery_cost: "{{ auth()->user()->store?->storeShippingSetting?->store_delivery_cost ?? 0 }}",
            shipping_companies_ids: {}
        };

        // Initialize company checkboxes
        $('[name^="shipping_companies_ids"]').each(function () {
            const id = $(this).attr('name').match(/\d+/)[0];
            if ($(this).is(':checked')) {
                shippingData.shipping_companies_ids[id] = true;
            }
        });

        // Toggle store delivery
        $('#direct_delivery_input').change(function () {
            if ($(this).is(':checked')) {
                $('#storeDeliveryCostModal').modal('show');
            } else {
                shippingData.store_delivery = 0;
                shippingData.store_delivery_cost = 0;

                const lang = document.documentElement.lang;
                const message = deliveryCostText[lang].replace(':cost', 0);

                $('#direct_delivery_input').closest('.form-check').find('label span').text(message);

                submitShippingSettings();
            }
        });

        // Toggle pickup
        $('#direct_receipt_input').change(function () {
            shippingData.pickup = $(this).is(':checked') ? 1 : 0;
            submitShippingSettings();
        });

        // Toggle companies
        $('[name^="shipping_companies_ids"]').change(function () {
            const id = $(this).attr('name').match(/\d+/)[0];
            if ($(this).is(':checked')) {
                shippingData.shipping_companies_ids[id] = true;
            } else {
                delete shippingData.shipping_companies_ids[id];
            }
            submitShippingSettings();
        });

        // Store delivery cost submit
        $('#storeDeliveryCostForm').submit(function (e) {
            e.preventDefault();
            const lang = document.documentElement.lang;
            const cost = $('#store_delivery_cost_input').val();
            shippingData.store_delivery = 1;
            shippingData.store_delivery_cost = cost;

            const message = deliveryCostText[lang].replace(':cost', cost);

            $('#direct_delivery_input').closest('.form-check').find('label span').text(message);

            $('#storeDeliveryCostModal').modal('hide');
            submitShippingSettings();
        });

        function submitShippingSettings() {
            $.ajax({
                url: "{{ route('Site.store-shipping-settings') }}",
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    pickup: shippingData.pickup,
                    store_delivery: shippingData.store_delivery,
                    store_delivery_cost: shippingData.store_delivery_cost,
                    shipping_companies_ids: Object.keys(shippingData.shipping_companies_ids),
                    type: 'web'
                },
                success: function (res) {
                    toastr.success("{{ __('Shipping settings saved successfully.') }}");
                },
                error: function (xhr) {
                    toastr.error("{{ __('Error saving shipping settings.') }}");
                    console.error(xhr.responseJSON);
                }
            });
        }
    });
    </script>
@endpush