@extends('layouts.app', ['title' => __tr('Vendor Details')])
@php
$vendorIdOrUid = $vendorIdOrUid ?? getVendorUid();
$vendorViewBySuperAdmin = $vendorViewBySuperAdmin ?? null;
@endphp

@section('content')
@if(hasCentralAccess())
@include('users.partials.header', [
'title' => __tr('__vendorTitle__ Details', [
'__vendorTitle__' => $vendorInfo['title'] ?? getVendorSettings('title')
]),
'description' => '',
])
@else
@include('users.partials.header', [
'title' => __tr('Hi __userFullName__,', [
'__userFullName__' => getUserAuthInfo('profile.first_name')
]),
'description' => '',
])
@endif

@php
$isExtendedLicence = (getAppSettings('product_registration', 'licence') === 'dee257a8c3a2656b7d7fbe9a91dd8c7c41d90dc9');
$UserVendorInfo = getUserAuthInfo();
@endphp
<style>
    /* small compact card styles — drop into the same Blade file or a project stylesheet */
    .small-card {
        border: 0;
        border-radius: .75rem;
        box-shadow: 0 6px 18px rgba(27, 40, 73, .06);
        padding: 1rem;
        min-height: 110px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .small-card .meta {
        text-align: center;
    }

    .small-card .meta .title {
        font-size: .85rem;
        font-weight: 600;
        margin-bottom: .25rem;
        color: #1f2937;
        /* dark */
    }

    .small-card .meta .value {
        font-size: .95rem;
        color: #6b7280;
        /* muted */
        margin: 0;
        word-break: break-word;
    }

    .small-card .icon {
        width: 46px;
        height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        margin-bottom: .5rem;
    }

    .small-card .badge-status {
        font-size: .78rem;
        padding: .35rem .65rem;
        border-radius: 999px;
    }

    @media (min-width: 992px) {
        .small-card {
            min-height: 100px;
        }
    }
</style>
<div class="container-fluid py-4">
    @if(hasCentralAccess())
    <nav aria-label="breadcrumb" class="bg-white rounded p-3 shadow-sm mb-4">
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item">
                <a class="text-decoration-none" href="{{ route('central.vendors') }}">{{ __tr('Manage Vendors') }}</a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">{{ __tr('Details') }}</li>
        </ol>
    </nav>
    @endif

    @if(hasVendorAccess() || $vendorViewBySuperAdmin)
    @php
    $planDetails = vendorPlanDetails(null, null, $vendorInfo['id']);
    @endphp

    <div class="row g-3">
        <!-- Vendor Name -->
        <div class="col-12 col-md-4 col-lg-3 mb-3">
            <div class="card small-card h-100">
                <div class="w-100">
                    <div class="meta">
                        <div class="icon mx-auto mb-2" aria-hidden="true">
                            <!-- small vendor SVG icon -->
                            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 12a4 4 0 100-8 4 4 0 000 8z" stroke="#0f172a" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M20 21v-1a4 4 0 00-4-4H8a4 4 0 00-4 4v1" stroke="#0f172a" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </div>
                        <div class="title">Vendor Name</div>
                        <p class="value mb-0">{{ $vendorInfo['title'] ?? '-' }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Email -->
        <div class="col-12 col-md-4 col-lg-3 mb-3">
            <div class="card small-card h-100">
                <div class="w-100">
                    <div class="meta">
                        <div class="icon mx-auto mb-2" aria-hidden="true">
                            <!-- email icon -->
                            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M3 8.5l9 6 9-6" stroke="#0f172a" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <rect x="3" y="4" width="18" height="16" rx="2" stroke="#0f172a" stroke-width="1.2" />
                            </svg>
                        </div>
                        <div class="title">Email</div>
                        <p class="value mb-0">{{ $UserVendorInfo['profile']['email'] ?? '-' }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Phone -->
        <div class="col-12 col-md-4 col-lg-3 mb-3">
            <div class="card small-card h-100">
                <div class="w-100">
                    <div class="meta">
                        <div class="icon mx-auto mb-2" aria-hidden="true">
                            <!-- phone icon -->
                            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M22 16.92v3a2 2 0 01-2.18 2 19.86 19.86 0 01-8.63-3.07 19.5 19.5 0 01-6-6A19.86 19.86 0 013.08 4.18 2 2 0 015 2h3a2 2 0 012 1.72c.12.95.38 1.88.78 2.76a2 2 0 01-.45 2.11L9.91 9.91a16 16 0 006 6l1.32-1.32a2 2 0 012.11-.45c.88.4 1.8.66 2.76.78A2 2 0 0122 16.92z" stroke="#0f172a" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </div>
                        <div class="title">Phone</div>
                        <p class="value mb-0">{{ $UserVendorInfo['profile']['mobile_number'] ?? '-' }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Status -->
        <div class="col-12 col-md-4 col-lg-3 mb-3">
            <div class="card small-card h-100">
                <div class="w-100">
                    <div class="meta">
                        <div class="icon mx-auto mb-2" aria-hidden="true">
                            <!-- status icon -->
                            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="12" cy="12" r="9" stroke="#0f172a" stroke-width="1.1" />
                                <path d="M9 12l2 2 4-4" stroke="#0f172a" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </div>
                        <div class="title">Status</div>

                        {{-- dynamic status example: adjust the key to your real field --}}
                        @php
                        $isActive = data_get($UserVendorInfo, 'status') === 1 ||
                        data_get($UserVendorInfo, 'status_text') === 1;
                        @endphp

                        @if($isActive)
                        <span class="badge bg-success badge-status">Active</span>
                        @else
                        <span class="badge bg-danger badge-status">Inactive</span>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Created At -->
        <div class="col-12 col-md-4 col-lg-3 mb-3">
            <div class="card small-card h-100">
                <div class="w-100">
                    <div class="meta">
                        <div class="icon mx-auto mb-2" aria-hidden="true">
                            <!-- calendar icon -->
                            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect x="3" y="4" width="18" height="18" rx="2" stroke="#0f172a" stroke-width="1.1" />
                                <path d="M16 2v4M8 2v4M3 10h18" stroke="#0f172a" stroke-width="1.1" stroke-linecap="round" />
                            </svg>
                        </div>
                        <div class="title">Created At</div>
                        <p class="value mb-0">
                            @if(!empty($UserVendorInfo['vendor_created_at']))
                            {{ \Carbon\Carbon::parse($UserVendorInfo['vendor_created_at'])->format('d M Y') }}
                            @else
                            -
                            @endif
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="card shadow-sm h-100 border-0 rounded-4 mb-4">
        <div class="card-header bg-primary text-white rounded-top-4">
            <h5 class="mb-0 text-white">{{ __tr('Current Subscribed Plan') }}</h5>
        </div>
        <div class="card-body">
            @if ($planDetails->hasActivePlan())
            <h4 class="text-primary mb-3">{{ $planDetails->planTitle() }}</h4>
            @php
            $planStructure = $planDetails->plan_id ? getPaidPlans($planDetails->plan_id) : getFreePlan();
            $planCharges = $planStructure['charges'][$planDetails->frequency] ?? null;
            @endphp
            <ul class="list-group mb-3">
                @foreach ($planStructure['features'] as $featureKey => $featureValue)
                <li class="list-group-item d-flex align-items-center border-0 border-bottom">
                    <i class="fa {{ isset($featureValue['limit']) && $featureValue['limit'] ? 'fa-check-circle text-success' : 'fa-times-circle text-danger' }} me-2"></i>
                    {{ $featureValue['description'] }}
                    @if (isset($featureValue['limit']) && $featureValue['limit'] >= 0)
                    - {{ $featureValue['limit'] }} {{ $featureValue['limit_duration_title'] ?? '' }}
                    @elseif (isset($featureValue['limit']) && $featureValue['limit'] < 0)
                        - {{ __tr('Unlimited') }}
                        @endif
                        </li>
                        @endforeach
            </ul>
            @if($planCharges)
            <div class="mb-2">
                <span class="badge bg-primary fs-6 px-3 py-2 text-white">
                    {{ $planCharges['title'] ?? '' }} {{ formatAmount($planCharges['charge'], true) }}
                </span>
            </div>
            @endif
            @else
            <div class="alert alert-warning mb-0">{{ __tr('Vendor does not have any active plan.') }}</div>
            @endif
        </div>
        <div class="card-footer rounded-bottom-4">
            @if($planDetails->isAuto())
            <div class="alert alert-warning mb-2">
                <i class="fa fa-exclamation-triangle"></i>
                {{ __tr('Please note vendor is on the Auto Renewal Subscription Plan, First you need to cancel it to manage manual subscription.') }}
            </div>
            <a data-show-processing="true" class="btn btn-danger" data-method="post" href="{{ route('central.subscription.write.cancel', ['vendorUid' => $vendorIdOrUid]) }}">
                {{ __tr('Cancel Auto Subscription and Discard Grace Period if any') }}
            </a>
            @else
            @if ($isExtendedLicence)
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#lwAddNewManualSubscription">
                {{ __tr('Create New Subscription') }}
            </button>
            @else
            <div class="alert alert-danger mb-0">
                {{ __tr('Extended licence required to enable manage subscription') }}
            </div>
            @endif
            @endif
        </div>
    </div>

    <!-- New Subscription Modal -->
    <x-lw.modal id="lwAddNewManualSubscription" :header="__tr('Create New Subscription')" :hasForm="true">
        <x-lw.form x-data="{calculated_ends_at:null}" id="lwAddNewManualSubscriptionForm"
            :action="route('central.subscription.manual_subscription.write.create')"
            :data-callback-params="['modalId' => '#lwAddNewManualSubscription', 'datatableId' => '#lwManualSubscriptionList']"
            data-callback="appFuncs.modelSuccessCallback">
            <div class="lw-form-modal-body">
                @if ($isExtendedLicence)
                <div class="alert alert-danger mb-3">
                    {{ __tr('It will cancel all the existing active subscriptions and create a new subscription') }}
                </div>
                <input type="hidden" name="vendor_uid" value="{{ $vendorInfo['uid'] }}">
                <div class="row g-3">
                    <div class="col-6">
                        <x-lw.input-field type="selectize" data-lw-plugin="lwSelectize" id="lwPlanIdField"
                            :label="__tr('Plan')" name="plan" required="true">
                            <x-slot name="selectOptions">
                                <option value="">{{ __tr('Select Plan') }}</option>
                                @foreach (getPaidPlans() as $paidPlanKey => $paidPlan)
                                <optgroup label="{{ $paidPlan['title'] }} @if(!$paidPlan['enabled']) ({{ __tr('Disabled') }}) @endif">
                                    @foreach ($paidPlan['charges'] as $planChargeKey => $planCharge)
                                    <option value="{{ $paidPlanKey }}___{{ $planChargeKey }}">{{ $paidPlan['title'] }} - {{ formatAmount($planCharge['charge'], true) }} {{ $planCharge['title'] }}</option>
                                    @endforeach
                                </optgroup>
                                @endforeach
                            </x-slot>
                        </x-lw.input-field>
                    </div>
                    <div class="col-6">
                        <x-lw.input-field x-model="calculated_ends_at" type="date" data-jsx-set="datepicker" id="lwEndsAtField" :label="__tr('Expiry on')"
                            name="ends_at" required="true" />
                    </div>
                    <div class="col-6">
                        <div class="form-group">
                            <label for="lwRemarks">{{ __tr('Remarks if any') }}</label>
                            <textarea class="form-control" name="remarks" id="lwRemarks" rows="2"></textarea>
                        </div>
                    </div>
                </div>
                @else
                <div class="alert alert-danger">
                    {{ __tr('Extended licence required to enable manage subscription') }}
                </div>
                @endif
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">{{ __tr('Submit') }}</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __tr('Close') }}</button>
            </div>
        </x-lw.form>
    </x-lw.modal>
    <!--/ New Subscription Modal -->

    <div class="row mt-5">
        <div class="col-12">
            <div class="card shadow-sm border-0 rounded-4">
                <div class="card-header bg-primary text-white rounded-top-4">
                    <h5 class="mb-0 text-white">{{ __tr('Manual/Prepaid Subscription Log') }}</h5>
                </div>
                <div class="card-body">
                    <div id="lwManualSubscriptionList_table" is_btn="true" is_filter="true"
                        is_column="plan_id,created_at,ends_at,charges,charges_frequency,status,action"
                        is_column_name="Plan,Created At, Expiry At, Plan Charges, Frequency, Status, Action"
                        data-url="{{ route('central.subscription.manual_subscription.read.list', ['vendorUid' => $vendorIdOrUid]) }}"
                        data-btn-route-1="{{ route('central.subscription.manual_subscription.read.update.data', ['manualSubscriptionIdOrUid']) }}, [Update]"
                        data-btn-route-2="{{ route('central.subscription.manual_subscription.write.delete', ['manualSubscriptionIdOrUid']) }}, [Delete]">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Manual Subscription Modal -->
    <x-lw.modal id="lwEditManualSubscription" :header="__tr('Update Subscription')" :hasForm="true">
        <x-lw.form id="lwEditManualSubscriptionForm"
            :action="route('central.subscription.manual_subscription.write.update')"
            :data-callback-params="['modalId' => '#lwEditManualSubscription', 'datatableId' => '#lwManualSubscriptionList']"
            data-callback="appFuncs.modelSuccessCallback">
            <div id="lwEditManualSubscriptionBody" class="modal-body"></div>
            <script type="text/template" id="lwEditManualSubscriptionBody-template">
                @if ($isExtendedLicence)
                        <fieldset>
                            <legend>{{  __tr('Provided Payment Details') }}</legend>
                            <dl>
                                <dt>{{  __tr('Payment Method') }}</dt>
                                <dd><%- __tData.__data?.manual_txn_details?.selected_payment_method %></dd>
                                <dt>{{  __tr('Transaction Reference') }}</dt>
                                <dd><%- __tData.__data?.manual_txn_details?.txn_reference %></dd>
                                <dt>{{  __tr('Transaction Date') }}</dt>
                                <dd><%- __tData.transactionDate %></dd>
                            </dl>
                        </fieldset>
                        <input type="hidden" name="manualSubscriptionIdOrUid" value="<%- __tData._uid %>" />
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="">{{ __tr('Charges') }}</label>
                                <input class="form-control" placeholder="{{ __tr('Charges') }}" type="number" id="lwChargesEditField" min="0"
                                    name="charges" value="<%- __tData.charges %>" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="">{{ __tr('Expiry On') }}</label>
                                <input class="form-control" placeholder="{{ __tr('Expiry On') }}" id="lwEndsAtEditField" type="date" data-jsx-set="datepicker" name="ends_at"
                                    value="<%- __tData.ends_at %>" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="">{{ __tr('Status') }}</label>
                                <select required name="status" id="lwSubscriptionStatus" class="form-select"
                                    data-selected="<%- __tData.status %>" data-lw-plugin="lwSelectize">
                                    <option value="">{{ __tr('Select Status') }}</option>
                                    @foreach (configItem('subscription_status') as $subscriptionStatusKey => $subscriptionStatus)
                                        <option value="{{ $subscriptionStatusKey }}">{{ $subscriptionStatus }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="lwEditRemarks">{{ __tr('Remarks if any') }}</label>
                                <textarea class="form-control" name="remarks" id="lwEditRemarks"
                                    rows="2"><%- __tData.remarks %></textarea>
                            </div>
                        </div>
                    @else
                        <div class="alert alert-danger">
                            {{  __tr('Extended licence required to enable manage subscription') }}
                        </div>
                    @endif
                </script>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">{{ __tr('Submit') }}</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __tr('Close') }}</button>
            </div>
        </x-lw.form>
    </x-lw.modal>
    <!--/ Edit Manual Subscription Modal -->

    <script type="text/template" id="manualSubscriptionActionColumnTemplate">
        <a data-pre-callback="appFuncs.clearContainer" title="{{  __tr('Update') }}" class="btn btn-sm btn-outline-primary lw-ajax-link-action" data-response-template="#lwEditManualSubscriptionBody" href="<%= __Utils.apiURL("{{ route('central.subscription.manual_subscription.read.update.data', ['manualSubscriptionIdOrUid']) }}", {'manualSubscriptionIdOrUid': __tData._uid}) %>"  data-toggle="modal" data-target="#lwEditManualSubscription"><i class="fa fa-pencil-alt"></i></a>
            <a data-method="post" href="<%= __Utils.apiURL("{{ route('central.subscription.manual_subscription.write.delete', ['manualSubscriptionIdOrUid']) }}", {'manualSubscriptionIdOrUid': __tData._uid}) %>" class="btn btn-sm btn-outline-danger lw-ajax-link-action-via-confirm" data-confirm="#lwDeleteManualSubscription-template" title="{{ __tr('Delete') }}" data-callback-params="{{ json_encode(['datatableId' => '#lwManualSubscriptionList']) }}" data-callback="appFuncs.modelSuccessCallback"><i class="fa fa-trash"></i></a>
        </script>
    <script type="text/template" id="lwDeleteManualSubscription-template">
        <h4>{{ __tr('Are You Sure!') }}</h4>
            <p>{{ __tr('You want to delete this Subscription?') }}</p>
        </script>
    <script type="text/template" id="manualSubscriptionStatusColumnTemplate">
        <% if(__tData.status == 'Pending') { %>
                <span class="badge bg-warning text-dark">{{  __tr('Pending') }}</span>
            <% } else if(__tData.status == 'Active') { %>
                <span class="badge bg-success">{{  __tr('Active') }}</span>
            <% } else { %>
                <%- __tData.status %>
            <% } %>
            <% if(__tData.options.is_expired) { %>
                <span class="badge bg-danger">{{  __tr('Expired') }}</span>
            <% } %>
        </script>
    @endif
</div>

@push('appScripts')
@viteReactRefresh
@vite('resources/js/datatable.jsx')
<script>
    (function(window) {
        'use strict';
        $('#lwPlanIdField').on('lwSelectizeOnChange', function(event, value) {
            __DataRequest.post("{{ route('central.subscription.manual_subscription.read.selected_plan_details') }}", {
                'selected_plan': value
            });
        });
    })(window);
</script>
@endpush
@endsection