@php(
    $headerOption = \App\Http\Controllers\Controller::getHeaderOptions(
        $title ?? '',
        $subTitle ?? '',
        isset($filters) ? $filters : [],
        isset($advancedFilters) ? $advancedFilters : []
    )
)
@php($headingOptions = [
    '<a href="' . route($routePrefix . '.index') . '" class="'. \Config::get('view.buttons.secondary') .'"><i class="' . \Config::get('settings.icon_back') . '"></i> Back to Merchants</a>',
    '<a href="' . route($routePrefix . '.edit', $data->id) . '" class="'. \Config::get('view.buttons.primary') .'"> Edit Merchant</a>',
])
@extends('admin.layouts.layout', $headerOption)
@section('content')
<div class="col-12">
    <x-heading-sec :module="'Merchant Details (' . ($data->dba ?? $data->legal_name) . ')'" :options="$headingOptions" />
    <div class="row">
        <!-- Left -->
        <div class="col-lg-4">
            <!-- Merchant Information -->
            <div class="project-box p-3 mb-3">
                <h6 class="mb-3" style="font-weight: 600;">Merchant Information</h6>
                <div class="merchant-info-grid">
                    <div class="row py-2 border-bottom">
                        <div class="col-5 text-muted fw-semibold">DBA:</div>
                        <div class="col-7 fw-semibold text-primary text-start">{{ $data->dba ?? $data->legal_name ?? 'N/A' }}</div>
                    </div>
                    <div class="row py-2 border-bottom">
                        <div class="col-5 text-muted fw-semibold">Merchant ID:</div>
                        <div class="col-7 fw-semibold text-start">{{ $data->mid ?? 'N/A' }}</div>
                    </div>
                    <div class="row py-2 border-bottom">
                        <div class="col-5 text-muted fw-semibold">
                            Active:
                            <i class="bx bx-info-circle text-muted" data-toggle="tooltip" title="System active status"></i>
                        </div>
                        <div class="col-7 fw-semibold text-start">
                            @if($data->system_status == 1)
                                <span class="text-success">Yes</span>
                            @else
                                <span class="text-danger">No</span>
                            @endif
                        </div>
                    </div>
                    <div class="row py-2 border-bottom">
                        <div class="col-5 text-muted fw-semibold">Group:</div>
                        <div class="col-7 fw-semibold text-start">{{ $data->group_text ?? 'N/A' }}</div>
                    </div>
                    <div class="row py-2 border-bottom">
                        <div class="col-5 text-muted fw-semibold">Processor:</div>
                        <div class="col-7 fw-semibold text-start">{{ $data->processor_text ?? 'N/A' }}</div>
                    </div>
                    <div class="row py-2 border-bottom">
                        <div class="col-5 text-muted fw-semibold">Datasource:</div>
                        <div class="col-7 fw-semibold text-start">{{ $data->datasource_text ?? 'N/A' }}</div>
                    </div>
                    <div class="row py-2 border-bottom">
                        <div class="col-5 text-muted fw-semibold">
                            SIC Code:
                            <i class="bx bx-info-circle text-muted" data-toggle="tooltip" title="Standard Industry Code"></i>
                        </div>
                        <div class="col-7 fw-semibold text-start">{{ $data->sic_code->code ?? 'N/A' }}</div>
                    </div>
                    <div class="row py-2 border-bottom">
                        <div class="col-5 text-muted fw-semibold">
                            Days Until Notice:
                            <i class="bx bx-info-circle text-muted" data-toggle="tooltip" title="Days before sending notice"></i>
                        </div>
                        <div class="col-7 fw-semibold text-start">{{ $data->days_until_notice ?? 'N/A' }}</div>
                    </div>
                    <div class="row py-2 border-bottom">
                        <div class="col-5 text-muted fw-semibold">Approval Date:</div>
                        <div class="col-7 fw-semibold text-start">{{ $data->approval_date ? \App\Helpers\Helper::showdate($data->approval_date,false) : 'N/A' }}</div>
                    </div>
                    <div class="row py-2 border-bottom">
                        <div class="col-5 text-muted fw-semibold">Start Processing Date:</div>
                        <div class="col-7 fw-semibold text-start">{{ $data->start_processing_date ? \App\Helpers\Helper::showdate($data->start_processing_date,false) : 'N/A' }}</div>
                    </div>
                    <div class="row py-2 border-bottom">
                        <div class="col-5 text-muted fw-semibold">Last Batch Date:</div>
                        <div class="col-7 fw-semibold text-start">{{ $data->last_batch_date ? \App\Helpers\Helper::showdate($data->last_batch_date,false) : 'N/A' }}</div>
                    </div>
                    <div class="row py-2 border-bottom">
                        <div class="col-5 text-muted fw-semibold d-inline-flex align-items-center">
                            <i class="bx bx-star text-warning me-1"></i> VIM:
                        </div>
                        <div class="col-7 fw-semibold text-start">{{ $data->vim_status_text ?? 'N/A' }}</div>
                    </div>
                    <div class="row py-2 border-bottom">
                        <div class="col-5 text-muted fw-semibold">NMI Gateway ID:</div>
                        <div class="col-7 fw-semibold text-start">{{ $data->nmi_gateway_id ?? 'N/A' }}</div>
                    </div>
                </div>
            </div>

            <!-- Welcome Email -->
            <div class="project-box p-3 mb-3">
                <h6 class="mb-3" style="font-weight:600;">Welcome Email 
                    <i class="bx bx-info-circle text-muted small" data-toggle="tooltip" title="Send welcome email to merchant contacts"></i>
                </h6>
                @if(isset($data->welcome_email_sent) && $data->welcome_email_sent)
                    <!-- <div class="alert alert-success alert-sm d-flex align-items-center py-2 mb-3" role="alert">
                        <i class="bx bx-check-circle me-2"></i>
                        <small>Welcome email sent</small>
                    </div> -->
                @else
                    <div class="alert alert-warning alert-sm d-flex align-items-center py-2 mb-3" role="alert">
                        <i class="bx bx-error-circle me-2"></i>
                        <small>Welcome email has not been sent for this merchant.</small>
                    </div>
                @endif 
                    <input type="hidden" name="merchant_id" value="{{ $data->id }}">
                    <div class="project-form form-line mb-2">
                        <label for="welcome_contact_name" class="form-label mb-0">Contact Name</label>
                        <input type="text" id="welcome_contact_name" name="welcome_contact_name" class="form-control form-control-sm" placeholder="Contact Name" required>
                    </div>
                    <div class="project-form form-line mb-2">
                        <label for="welcome_contact_email" class="form-label mb-0">Contact Email</label>
                        <input type="email" id="welcome_contact_email" name="welcome_contact_email" class="form-control form-control-sm" placeholder="Contact Email" required>
                    </div>
                    <button type="button" class="btn green-btn-inner waves-effect w-100 show-modal-lg" id="preview-welcome-email">
                        <i class="bx bx-show"></i> Preview & Send
                    </button> 
            </div>

            <!-- User Invitation -->
            <div class="project-box p-3 mb-3">
                <h6 class="mb-3" style="font-weight:600;">Merchant User Invitation 
                    <i class="bx bx-info-circle text-muted small" data-toggle="tooltip" title="Invite new merchant users"></i>
                </h6>
                <p class="text-muted small mb-3">To invite a user, please enter their email address below and click Invite.</p>
                <form action="{{ route('merchants.invite-user') }}" method="post" id="invite-merchant-user-form" class="project-form form-line">
                    @csrf
                    <input type="hidden" name="merchant_id" value="{{ $data->id }}">
                    <div class="project-form form-line mb-2">
                        <label for="merchant_email" class="form-label mb-0">Merchant Email</label>
                        <input type="email" id="merchant_email" name="merchant_email" class="form-control form-control-sm" placeholder="Enter Merchant Email" required>
                    </div>
                    <div class="custom-control custom-checkbox project-checkbox mb-3">
                        <input class="can_manage_users custom-control-input form-check-input" type="checkbox" name="can_manage_users" id="can_manage_users">
                        <label class="custom-control-label" for="can_manage_users">
                            Can Manage Users
                        </label>
                    </div>
                    <button type="submit" class="green-btn-inner waves-effect w-100">
                        <i class="bx bx-send"></i> Send Invitation
                    </button>
                </form>
            </div>
        </div>

        <!-- Right: Access Management -->
        <div class="col-lg-8">
            <!-- Merchant Access Permissions -->
            <div class="project-box p-3 mb-3" id="merchant-access-permissions-section">
                <h6 class="mb-3" style="font-weight:600;">Merchant Access Permissions 
                    <i class="bx bx-info-circle text-muted small" data-toggle="tooltip" title="Manage user access, permissions, and split percentages"></i>
                </h6>
                <input type="hidden" name="merchant_id" value="{{ $data->id }}">

                <!-- Residual Month & Year -->
                <div class="row mb-2">
                    <div class="col-md-6">
                        <div class="project-form form-line">
                            <label for="residual-date" class="form-label mb-0">Reschedule Month & Year</label>
                            <input type="month" id="residual-date" name="activation_date" class="form-control" value="{{ date('Y-m') }}">
                        </div>
                    </div>
                </div>

                <!-- Assign New User -->
                <div class="row mb-2 ">
                    <div class="col-md-6">
                        <div class="project-form form-line">
                            <label for="access-permissions-user-select" class="form-label mb-0">Assign New User <span class="ms-1" data-toggle="tooltip" title="Assign user to merchant"><i class="bx bx-info-circle text-muted small"></i></span></label>
                            <select id="access-permissions-user-select" name="user_id" class="form-control form-control-lg select2 access_permissions_user_select" placeholder="Select user">
                                @if(isset($availableUsers))
                                    @foreach($availableUsers as $roleId => $roleBlock)
                                        @if(!empty($roleBlock['children']))
                                            <optgroup label="{{ $roleBlock['label'] }}">
                                                @foreach($roleBlock['children'] as $userId => $userName)
                                                    <option value="{{ $userId }}">{{ $userName }}</option>
                                                @endforeach
                                            </optgroup>
                                        @endif
                                    @endforeach
                                @endif
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <button type="button" id="assign-user-btn" class="green-btn-inner waves-effect  mt-2 assign_user_btn">
                            <i class="bx bx-plus"></i> Assign User
                        </button>
                    </div>
                </div>

                <!-- Mass Account Split Update -->
                <div class="row mb-2">
                    <div class="col-md-6">
                        <div class="project-form form-line">
                            <label for="mass-update-split" class="form-label mb-0">New Split (%)</label>
                            <input type="number" id="mass-update-split" name="split_percentage" class="form-control" min="0" max="100" step="00.01" value="00.00">
                        </div>
                    </div>
                    <div class="col-md-6 d-flex align-items-center">
                        <div class="form-check project-checkbox">
                            <input class="form-check-input" type="checkbox" id="update-split-expiration" name="update_split_expiration">
                            <label class="form-check-label" for="update-split-expiration">Update Split Expiration Date</label>
                        </div>
                    </div>
                </div>
                <div class="row mb-2 d-none" id="split-expiration-fields">
                    <div class="col-md-4">
                        <div class="project-form form-line">
                            <label for="split-expiration-date" class="form-label mb-0">Split Expiration Date</label>
                            <input type="month" id="split-expiration-date" name="split_expiration" class="form-control" value="{{ date('Y-m') }}">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="project-form form-line">
                            <label for="split-after-expiration" class="form-label mb-0">Split After Expiration (%)</label>
                            <input type="number" id="split-after-expiration" name="split_percentage_after_expiration" class="form-control" min="0" max="100" step="00.01" value="00.00">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="project-form form-line">
                            <label for="split-type" class="form-label mb-0">Type</label>
                            <select id="split-type" name="split_type" class="form-control select2 no-search">
                                <option value="1">Gross</option>
                                <option value="2">Net</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="row mb-2">
                    <div class="heading-btn">
                        <button type="button" id="mass-update-btn" class="black-btn-inner w-40 waves-effect btn-sm-custom disabled-effect" disabled>
                          <i class="bx bx-edit"></i>  Mass Update For Selected Users
                        </button>
                        <a href="{{ route('merchants.pay-order', ['merchantId' => $data->id]) }}" id="pay-order-btn" class="btn black-btn-inner w-25 waves-effect btn-sm-custom show-modal">
                            <i class="bx bx-credit-card"></i> Pay Order
                        </a>

                        <a href="{{ route('merchants.permission-history', ['merchantId' => $data->id]) }}" 
                           class="btn black-btn-inner waves-effect btn-sm-custom show-modal-lg" 
                           data-toggle="tooltip" 
                           title="View permission history">
                            <i class="bx bx-history"></i> History
                        </a>
                    </div>
                </div>

                <!-- Users Table Component -->
                @include('admin.components.merchant-users-table', [
                    'assignedUsers' => $assignedUsers ?? [],
                    'currentSplits' => $currentSplits ?? collect(),
                    'splitTypes' => $splitTypes ?? [],
                    'merchantId' => $data->id,
                    'tableId' => 'merchant-users-table'
                ])

                <!-- Update Button -->
                <div class="row mt-3">
                    <div class="col-12">
                        <div class="d-flex justify-content-end gap-2">
                            <button type="button" id="update-permissions-btn" class="green-btn-inner waves-effect w-md disabled-effect" disabled>
                                <i class="bx bx-save"></i> Update
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Split History Modal -->
@include('admin.components.split-history-modal')

@endsection

@push('page_script')
<script>
$(document).ready(function() {
    let merchantId = {{ $data->id ?? 0 }};  
   

     $("#preview-welcome-email").click(() => { 
        var pName = $("#welcome_contact_name").val();
        var pEmail = $("#welcome_contact_email").val();
        if(!pName || !pEmail) {
            showRequiredTooltip($("#welcome_contact_name"), 'Please enter a contact name.');
            showRequiredTooltip($("#welcome_contact_email"), 'Please enter a contact email.');
            return false;
        } else {
            var url = "{{ route('merchants.welcome-email.create') }}?name=" +encodeURIComponent(pName) + "&email=" + encodeURIComponent(pEmail) ;
            $("#preview-welcome-email").attr("href", url); 
            // return false;
        }
    })
});
</script>
<script src="{{ asset('assets/js/merchant-access-permissions.js') }}"></script>
@endpush