@extends('superadmin::layouts.master')
@section('title',__('tenant::company.company'))
@section('extra-styles')
    <link rel="stylesheet" type="text/css" href="{{asset('assets/vendors/css/pickers/daterange/daterangepicker.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('assets/vendors/css/pickers/datetime/bootstrap-datetimepicker.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('assets/vendors/css/pickers/pickadate/pickadate.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('assets/css/plugins/pickers/daterange/daterange.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('assets/css/custom/amsify-suggestags/amsify-suggestags.css')}}">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/colreorder/1.5.4/css/colReorder.dataTables.min.css">
    <style>
        /* ── Filter Panel Styles ── */
        #filterPanel .card-body {
            background: #f8fafc;
            border-radius: 12px;
            border: 1px solid #e2e8f0;
            padding: 20px;
        }
        #filterPanel label {
            font-weight: 600;
            color: #3F587E;
            font-size: 13px;
            margin-bottom: 8px;
        }
        #filterPanel .form-control {
            border-radius: 8px;
            border: 1px solid #cbd5e0;
            padding: 10px 14px;
            height: 42px;
            font-size: 14px;
            color: #2d3748;
            background-color: #fff;
            transition: all 0.3s cubic-bezier(.4,0,.2,1);
            box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.02);
        }
        #filterPanel .form-control:focus {
            border-color: #11B99F;
            box-shadow: 0 0 0 3px rgba(17, 185, 159, 0.15);
            outline: none;
        }
        #clearFiltersBtn {
            height: 42px;
            border-radius: 8px;
            font-weight: 600;
            background: #fff;
            border: 1px solid #cbd5e0;
            color: #4a5568;
            transition: all 0.2s;
        }
        #clearFiltersBtn:hover {
            background: #f1f5f9;
            color: #1a202c;
        }

        /* ── Action Buttons & Tooltips ── */
        .action-with-tooltip {
            position: relative;
            overflow: visible;
        }
        .btn-renew {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            border: none;
            border-radius: 8px;
            background: linear-gradient(135deg, #11B99F 0%, #0ea88f 100%);
            color: #fff;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(.4,0,.2,1);
            box-shadow: 0 2px 6px rgba(17, 185, 159, 0.25);
        }
        .btn-renew:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(17, 185, 159, 0.4);
            background: linear-gradient(135deg, #0ea88f 0%, #0d9a83 100%);
        }
        .btn-renew:active {
            transform: translateY(0);
        }
        .btn-renew svg {
            width: 16px;
            height: 16px;
            fill: currentColor;
        }
        .action-tooltip {
            position: absolute;
            bottom: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%) translateY(4px);
            background: #2d3748;
            color: #fff;
            padding: 5px 10px;
            border-radius: 6px;
            font-size: 12px;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: all 0.2s cubic-bezier(.4,0,.2,1);
            z-index: 10;
        }
        .action-tooltip::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 5px solid transparent;
            border-top-color: #2d3748;
        }
        .action-with-tooltip:hover .action-tooltip,
        .action-with-tooltip:focus .action-tooltip {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
    </style>
@endsection
@section('breadcrumb')
    <div class="row breadcrumbs-top">
        <div class="breadcrumb-wrapper col-xs-12">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{route('dashboard-home')}}">@lang('Home')</a></li>
                <li class="breadcrumb-item"><a href="{{route('tenants.index')}}">@lang('tenant::company.company')</a></li>
            </ol>
        </div>
    </div>
@endsection
@section('content')
<div id="app">

<div class="ibox-content m-b-sm hidden-print list-actions text-xs-right mb-1 headBtns">
    @if (request()->get('type') != 'student')
        <a href="{{route('tenants.create')}}" class="btn btn-primary btn-min-width"><i class="fa fa-plus"></i>@lang('Create')</a>
    @endif
</div>
@include('superadmin::errors.lists')

<section id="configuration">
    <div class="row my-1" style="margin: 0px;">
        <div class="row">
            <div class="col-md-12">
                <button class="btn btn-primary w-100 filterbtn" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                    <div class="d-flex justify-content-between">
                        <span>@lang('tenant::company.filters')</span><i class="fa fa-angle-down"></i>
                    </div>
                </button>
            </div>
        </div>
        <div class="collapse filter-section-collapse" id="collapseExample">
            <div class="card mb-2" id="filterPanel">
                <div class="card-body" style="padding-bottom: 0;">
                    <form id="filtersForm">
                        <div class="row">
                            <div class="col-md-4 form-group">
                                <label>@lang('tenant::company.filter_by_package')</label>
                                <select name="filter_package_id" class="form-control" id="filterPackage">
                                    <option value="">@lang('tenant::company.all')</option>
                                    @foreach($packages as $package)
                                        <option value="{{ $package->id }}">{{ $package->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4 form-group">
                                <label>@lang('tenant::company.filter_by_status')</label>
                                <select name="filter_status" class="form-control" id="filterStatus">
                                    <option value="">@lang('tenant::company.all')</option>
                                    <option value="active">@lang('tenant::subscription.active')</option>
                                    <option value="trial">@lang('tenant::subscription.trial')</option>
                                    <option value="expired">@lang('tenant::subscription.expired')</option>
                                </select>
                            </div>
                            <div class="col-md-4 form-group">
                                <label>@lang('tenant::company.filter_by_industry')</label>
                                <select name="filter_industry_id" class="form-control" id="filterIndustry">
                                    <option value="">@lang('tenant::company.all')</option>
                                    @foreach(\Modules\Tenant\Enums\IndustriesEnum::translatedList() as $key => $label)
                                        <option value="{{ $key }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4 form-group">
                                <label>@lang('tenant::company.filter_by_plan')</label>
                                <select name="filter_plan" class="form-control" id="filterPlan">
                                    <option value="">@lang('tenant::company.all')</option>
                                    @foreach($plans as $key => $label)
                                        <option value="{{ $key }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4 form-group">
                                <label>@lang('tenant::company.filter_by_last_activity')</label>
                                <x-date-picker mode="range" name="filter_last_activity" start-name="filter_last_activity_from" end-name="filter_last_activity_to" />
                            </div>
                            <div class="col-md-4 form-group">
                                <label>@lang('tenant::company.filter_by_renewal_date')</label>
                                <x-date-picker mode="range" name="filter_renewal_date" start-name="filter_renewal_date_from" end-name="filter_renewal_date_to" />
                            </div>
                        </div>
                        @if (request()->get('type') == 'student')
                            <div class="row">
                                <div class="col-md-4 form-group">
                                    <label>@lang('tenant::company.graduation_year')</label>
                                    <select name="filter_graduation_year" class="form-control" id="filterGraduationYear">
                                        <option value="">@lang('tenant::company.all')</option>
                                        @for ($i = 2024; $i <= date('Y') + 6; $i++)
                                            <option value="{{ $i }}">{{ $i }}</option>
                                        @endfor
                                    </select>
                                </div>
                                <div class="col-md-4 form-group">
                                    <label>@lang('tenant::company.university')</label>
                                    <select name="filter_university" class="form-control" id="filterUniversity">
                                        <option value="">@lang('tenant::company.all')</option>
                                        @foreach($universities as $key => $label)
                                            <option value="{{ $key }}">{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        @endif
                        <div class="row">
                            <div class="col-md-3 form-group">
                                <label>@lang('tenant::company.id')</label>
                                <input type="text" name="filter_company_id" class="form-control" id="filterCompanyId">
                            </div>
                            <div class="col-md-3 form-group">
                                <label>@lang('tenant::company.subdomain')</label>
                                <input type="text" name="filter_subdomain" class="form-control" id="filterSubdomain">
                            </div>
                            <div class="col-md-3 form-group">
                                <label>@lang('tenant::company.email')</label>
                                <input type="text" name="filter_email" class="form-control" id="filterEmail">
                            </div>
                            <div class="col-md-3 form-group">
                                <label>@lang('tenant::company.phone_number')</label>
                                <input type="text" name="filter_mobile" class="form-control" id="filterMobile">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4 form-group d-flex align-items-end" style="padding-top: 25px;">
                                <button type="button" class="btn btn-secondary mr-1 w-50" id="clearFiltersBtn">
                                    @lang('tenant::company.clear_filters')
                                </button>
                                <button type="button" class="btn btn-info w-50" id="applyFiltersBtn">
                                    @lang('tenant::company.apply')
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="card ">
                <div class="card-body collapse in">
                    <div class="table-responsive">
                        <table class="table table-striped" id="companies_table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>@lang('tenant::company.company name')</th>
                                    <th>@lang('tenant::company.company identifier')</th>
                                    <th width="10%">@lang('tenant::company.email')</th>
                                    <th  width="10%">@lang('superadmin::User.mobile')</th>
                                    <th>@lang('tenant::company.industry')</th>
                                    <th>@lang('tenant::company.package')</th>
                                    <th>@lang('tenant::company.renew date')</th>
                                    <th>@lang('tenant::company.supscription status')</th>
                                    <th>@lang('tenant::company.payment_total')</th>
                                    <th>@lang('tenant::company.last_activity')</th>
                                    @if(request()->get('type') == 'student')
                                        <th>@lang('tenant::company.university')</th>
                                        <th>@lang('tenant::company.graduation_year')</th>
                                    @endif
                                    <th>@lang('tenant::company.actions')</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- Renew Subscription Modal Vue Component --}}
<renew-subscription-modal
    :packages="{{ json_encode($packages) }}"
    :plans="{{ json_encode($plans) }}"
    :translations="{{ json_encode([
        'renew_subscription' => __('tenant::company.renew_subscription'),
        'package' => __('tenant::company.package'),
        'select_package' => __('tenant::company.select the package'),
        'plan' => __('tenant::company.plan'),
        'start_date' => __('tenant::company.start_date'),
        'end_date' => __('tenant::company.end_date'),
        'activate_foodics' => __('tenant::company.activate_foodics'),
        'cancel' => __('tenant::company.cancel'),
        'apply' => __('tenant::company.apply'),
        'renewing' => __('tenant::company.renewing'),
        'renewal_success' => __('tenant::company.renewal_success'),
        'renewal_error' => __('tenant::company.renewal_error')
    ]) }}"
    submit-url="{{ route('tenant.subscription.admin-renew') }}"
    locale="{{ app()->getLocale() }}"
></renew-subscription-modal>

</div>
@endsection
@section('extra_scripts')
<script src="{{ asset('js/app.js') }}" defer></script>
<script>
    window.addEventListener('DOMContentLoaded', function () {
	(function ($) {
        const industries = @json(\Modules\Tenant\Enums\IndustriesEnum::translatedList());
        const showLabel = @json(__('Show'));
        const renewLabel = @json(__('tenant::company.renew_subscription'));
        const deactivateLabel = @json(__('tenant::company.deactivate_client'));
        const editLabel = @json(__('Edit'));
        const activityLabel = @json(__('Activity'));
        const deactivateConfirmation = @json(__('tenant::company.deactivate_client_confirmation'));
        const deactivateSuccess = @json(__('tenant::company.client_deactivated_successfully'));
        const deactivateError = @json(__('tenant::company.client_deactivation_error'));
        // Every enum value except 'expired': all of them still leave the client
        // with a subscription CS may need to terminate.
        const deactivatableStatuses = ['active', 'trial', 'grace_period', 'overdue'];
        const escapeHtml = (value) => $('<div>').text(value || '').html()
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;');

        var table = $('#companies_table').DataTable({
            processing: true,
            serverSide: true,
            search: false,
            paging: true,
            lengthChange: true,
            pageLength: 10,
            lengthMenu: [
                [10, 25, 50, 100],
                [10, 25, 50, 100]
            ],
            ajax: {
                url: "{{route('tenants.index')}}" + window.location.search,
                data: function(d) {
                    var formData = $('#filtersForm').serializeArray();
                    $.each(formData, function(i, field) {
                        d[field.name] = field.value;
                    });
                },
                responsive: true,
                dataSrc: function (json) {
                    return json.data;
                }
            },
            columns:[
                {"data" : "company.id"},
                {"data" : "company.name"},
                {"data" : "company.host.fqdn"},
                {
                    "data" : "company.email",
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        result = `<a href="mailto:${oData.email}">${oData.email}</a>`;
                        $(nTd).html(result);
                    }
                },
                {
                    "data" : "company.mobile",
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        result = `<a href="tel:${oData.company.mobile}">${oData.company.mobile}</a>`;
                        $(nTd).html(result);
                    }
                },
                {
                    "data" : "company.industry_id",
                    "render": function (data) {
                        const industryIndex = Number(data);

                        if (!Number.isInteger(industryIndex) || !industries[industryIndex]) {
                            return '-';
                        }

                        return industries[industryIndex];
                    }
                },
                {"data" : "package.name"},
                {"data" : "end_date",},
                {"data" : "status"},
                {"data" : "paid_amount",},
                {"data" : "company.last_activity"},
                @if(request()->get('type') == 'student')
                {
                    "data": "company.university_name",
                    "render": function(data, type, row) {
                        if (data === 'other' || data === 'Other') {
                            return row.company && row.company.university_name_other ? row.company.university_name_other : (data || '-');
                        }
                        return data || '-';
                    }
                },
                {
                    "data": "company.graduation_year",
                    "render": function(data) {
                        return data || '-';
                    }
                },
                @endif
                {
                    "data" : null,
                    "fnCreatedCell" :  function (nTd, sData, oData, iRow, iCol) {
                        nTd.setAttribute('class', 'hidden-print');
                    },
                    "render": function(data, type, row, meta){
                        let output_html = '';
                        // Show btn
                        output_html += `<a href="${row.show_url}"
                                       class="btn btni rounded-circle font-small-2 btn-primary btn-show btn-view text-white action-with-tooltip"
                                       aria-label="${showLabel}">
                                            <i class="fa fa-eye"></i>
                                            <span class="action-tooltip">${showLabel}</span>
                                        </a>`;
                        // Renew btn
                        output_html += `<button type="button"
                                       class="btn btni rounded-circle btn-renew action-with-tooltip"
                                       aria-label="${renewLabel}"
                                       onclick="openRenewModal(${row.company_id}, '${(row.company && row.company.name || '').replace(/'/g, "\\'")}', '${row.website_id || ''}', '${row.end_date || ''}', '${row.plan || 'monthly'}')">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
                                    <span class="action-tooltip">${renewLabel}</span>
                                </button>`;
                        if (deactivatableStatuses.includes(row.status)) {
                            output_html += `<button type="button"
                                       class="btn btni rounded-circle font-small-2 btn-danger text-white js-deactivate-client action-with-tooltip"
                                       data-url="${escapeHtml(row.deactivate_url)}"
                                       data-company-name="${escapeHtml(row.company && row.company.name)}"
                                       aria-label="${deactivateLabel}">
                                        <i class="fa fa-ban"></i>
                                        <span class="action-tooltip">${deactivateLabel}</span>
                                    </button>`;
                        }
                        //{{-- edit btn --}}
                        output_html += `<a href="${row.edit_url}"
                                       class="btn btni rounded-circle font-small-2 btn-info btn-edit text-white action-with-tooltip"
                                       aria-label="${editLabel}">
                                        <i class="fa fa-pencil"></i>
                                        <span class="action-tooltip">${editLabel}</span>
                                    </a>`;

                        //{{-- activity log btn --}}
                        output_html += `<a href="${row.activity_url}"
                                       class="btn btni rounded-circle font-small-2 btn-info btn-edit text-white action-with-tooltip"
                                       aria-label="${activityLabel}">
                                        <i class="fa fa-tasks"></i>
                                        <span class="action-tooltip">${activityLabel}</span>
                                    </a>`;
                        return output_html;
                    }
                }
            ],
            columnDefs: [
                { orderable: false, targets: [3, 4, 6, 8, 9, 11] }
            ],
            @if (App::isLocale('ar'))
            language: {
                "url": "https://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Arabic.json"
            },
            @endif
        });

        // ── Renew Modal Logic ──

        window.openRenewModal = function(companyId, companyName, websiteId, endDate, plan) {
            document.dispatchEvent(new CustomEvent('open-renew-modal', {
                detail: {
                    company_id: companyId,
                    name: companyName,
                    website_id: websiteId,
                    end_date: endDate,
                    plan: plan
                }
            }));
        };

        $('#companies_table').on('click', '.js-deactivate-client', function () {
            const $button = $(this);
            const companyName = $button.data('company-name') || '';
            const message = deactivateConfirmation.replace(':client', companyName);

            if (!window.confirm(message)) {
                return;
            }

            $button.prop('disabled', true);

            $.ajax({
                url: $button.data('url'),
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    'Accept': 'application/json'
                }
            }).done(function (response) {
                const successMessage = response.data && response.data.message
                    ? response.data.message
                    : deactivateSuccess;

                window.alert(successMessage);
                table.ajax.reload(null, false);
            }).fail(function (xhr) {
                const subscriptionErrors = xhr.responseJSON
                    && xhr.responseJSON.errors
                    && xhr.responseJSON.errors.subscription;
                const errorMessage = subscriptionErrors && subscriptionErrors.length
                    ? subscriptionErrors[0]
                    : deactivateError;

                window.alert(errorMessage);
            }).always(function () {
                $button.prop('disabled', false);
            });
        });

        // Trigger table reload when Apply button is clicked
        $('#applyFiltersBtn').on('click', function() {
            table.draw();
        });

        $('#clearFiltersBtn').on('click', function() {
            // Reset selects
            $('#filtersForm select').val('').trigger('change');
            
            // For x-date-picker hidden inputs
            $('#filtersForm input[type="hidden"]').val('');
            
            // Reset text inputs
            $('#filtersForm input[type="text"]').val('');

            // Reset UI values and properly clear flatpickr instances
            var datePickers = document.querySelectorAll('#filtersForm .flatpickr-input');
            datePickers.forEach(function(el) {
                el.value = '';
                if (el._flatpickr) {
                    el._flatpickr.clear();
                }
            });

            table.draw();
        });

	})(jQuery);
});

</script>
@endsection