@extends('dashboard.layouts.master')
@section('title', 'Business Owner Management | Admin Panel')

@push('after-styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" type="text/css" />
<style>
    .filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
    .filter-tab {
        padding: 7px 18px;
        border-radius: 20px;
        border: 1px solid #ddd;
        background: #fff;
        cursor: pointer;
        font-size: 13px;
        font-weight: 600;
        color: #555;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .filter-tab:hover        { border-color: #002868; color: #002868; }
    .filter-tab.active       { background: #002868; color: #fff; border-color: #002868; }
    .filter-tab .tab-count   { background: rgba(255,255,255,0.25); border-radius: 10px; padding: 1px 7px; font-size: 11px; }
    .filter-tab:not(.active) .tab-count { background: #eee; color: #666; }

    .badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; }
    .badge-warning  { background: #fff3cd; color: #856404; }
    .badge-success  { background: #d4edda; color: #155724; }
    .badge-danger   { background: #f8d7da; color: #721c24; }
    .badge-info     { background: #cce5ff; color: #004085; }
    .badge-secondary{ background: #e2e3e5; color: #383d41; }
    
    /* Hide sorting icons on checkbox column */
    table.dataTable thead th:first-child:before,
    table.dataTable thead th:first-child:after { display: none !important; }
    table.dataTable thead th:first-child { background-image: none !important; cursor: default !important; }
</style>
@endpush

@section('content')
@if(Helper::canAccessModule('business_owner_management'))

<div class="loader" id="loader"></div>
<div class="padding website-label">
    <div id="success_file_popup" style="margin-bottom:10px;"></div>

    <div class="box">
        <div class="box-header">
            <div class="box-header-left">
                <h3 class="d-block">Business Owner Management</h3>
                <small class="d-inline-block">
                    <a href="{{ route('adminHome') }}">{{ __('backend.dashboard') }}</a> /
                    <span>Business Owner Management</span>
                </small>
            </div>
        </div>

        {{-- Bulk action form --}}
        @if(Helper::checkPermission('business_owner_management', 'update') || Helper::checkPermission('business_owner_management', 'delete') || Helper::checkPermission('business_owner_management', 'active') || Helper::checkPermission('business_owner_management', 'approve') || Helper::checkPermission('business_owner_management', 'reject'))
        {{ Form::open(['route' => 'business-owner-management.updateAll', 'method' => 'post', 'id' => 'updateAll']) }}
        <div class="single-action m-b">
            <div class="bulk-action">
                <select name="action" id="action" class="form-control c-select w-sm inline v-middle" required>
                    <option value="no">{{ __('backend.bulkAction') }}</option>
                    @if(Helper::checkPermission('business_owner_management', 'approve'))
                        <option value="approve">Approve Selected</option>
                    @endif
                    @if(Helper::checkPermission('business_owner_management', 'reject'))
                        <option value="reject">Reject Selected</option>
                    @endif
                    @if(Helper::checkPermission('business_owner_management', 'update'))
                        <option value="under_review">Mark Under Review</option>
                    @endif
                    @if(Helper::checkPermission('business_owner_management', 'active'))
                        <option value="1">Activate Selected</option>
                        <option value="0">Deactivate Selected</option>
                    @endif
                    @if(Helper::checkPermission('business_owner_management', 'delete'))
                        <option value="2">{{ __('backend.deleteSelected') }}</option>
                    @endif
                </select>
                <button type="submit" id="submit_all" class="btn white">{{ __('backend.apply') }}</button>
            </div>
        </div>
        {{ Form::close() }}
        @endif

        {{-- Status Filter Tabs --}}
        <div class="filter-tabs m-l m-b">
            <button class="filter-tab active" data-status="">
                All Applications
                <span class="tab-count" id="cnt-all">—</span>
            </button>
            <button class="filter-tab" data-status="1">
                <span style="color:inherit;">Pending</span>
                <span class="tab-count" id="cnt-1">—</span>
            </button>
            <button class="filter-tab" data-status="2">
                Approved
                <span class="tab-count" id="cnt-2">—</span>
            </button>
            <button class="filter-tab" data-status="3">
                Rejected
                <span class="tab-count" id="cnt-3">—</span>
            </button>
            <button class="filter-tab" data-status="5">
                Under Review
                <span class="tab-count" id="cnt-5">—</span>
            </button>
        </div>

        <div class="table-responsive table_data">
            <table class="table table-bordered m-a-0" id="businessOwnerTable">
                <thead class="dker">
                    <tr>
                        <th class="width20 dker no-sort">
                            <label class="ui-check m-a-0">
                                <input id="checkAll" type="checkbox"><i></i>
                            </label>
                        </th>
                        <th>Business Name</th>
                        <th>Owner Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Account Status</th>
                        <th>Approval Status</th>
                        <th>Created Date</th>
                        <th class="no-sort text-center">Options</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

{{-- Confirmation modals --}}
<div class="modal fade" id="alert_confirm" data-backdrop="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ __('backend.confirmation') }}</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body text-center p-lg">
                <p class="alert_dynamic_message"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn dark-white p-x-md" data-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="default_confirm" data-backdrop="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ __('backend.confirmation') }}</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body text-center p-lg">
                <p class="dynamic_message"></p>
                <input type="hidden" class="checkbox_data" value="">
                <input type="hidden" class="checkbox_type" value="">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn dark-white p-x-md" data-dismiss="modal">{{ __('backend.no') }}</button>
                <button type="button" class="btn danger p-x-md yes_click">{{ __('backend.yes') }}</button>
            </div>
        </div>
    </div>
</div>

@else
<input type="hidden" value="{{ route('adminHome') }}" id="redirect_url">
<script>window.location.replace(document.getElementById('redirect_url').value);</script>
@endif
@endsection

@push('after-scripts')
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.0/sweetalert2.all.min.js"></script>
<script>
    $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });

    let activeStatus = '';

    const table = $('#businessOwnerTable').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        ordering: true,
        columnDefs: [{ bSortable: false, aTargets: [0, 7] }],
        ajax: {
            url: "{{ route('business-owner-management.anyData') }}",
            type: 'POST',
            data: function(d) { d.approval_status = activeStatus; }
        },
        columns: [
            { data: 'checkbox',         orderable: false, searchable: false },
            { data: 'business_name',    name: 'business_name' },
            { data: 'owner_name',       name: 'name' },
            { data: 'email',            name: 'email' },
            { data: 'phone',            name: 'phone' },
            { data: 'status',           name: 'status' },
            { data: 'approval_status',  name: 'admin_approval_status' },
            { data: 'created_at',       name: 'created_at' },
            { data: 'options',          orderable: false, className: 'text-center' }
        ],
        order: [[7, 'desc']],
        drawCallback: function(settings) {
            loadTabCounts();
        }
    });

    // Filter tabs
    $(document).on('click', '.filter-tab', function() {
        $('.filter-tab').removeClass('active');
        $(this).addClass('active');
        activeStatus = $(this).data('status');
        table.ajax.reload();
    });

    // Load counts for each tab
    function loadTabCounts() {
        const statuses = ['', '1', '2', '3', '5'];
        statuses.forEach(function(s) {
            $.post("{{ route('business-owner-management.anyData') }}", {
                _token: "{{ csrf_token() }}",
                approval_status: s,
                start: 0,
                length: 1,
                draw: 1
            }, function(data) {
                const el = s === '' ? '#cnt-all' : '#cnt-' + s;
                $(el).text(data.iTotalRecords);
            });
        });
    }

    loadTabCounts();

    // Check all
    $('#checkAll').on('click', function() {
        $('input:checkbox').not(this).prop('checked', this.checked);
    });

    // Bulk action submit
    $(document).on('submit', '#updateAll', function(e) {
        e.preventDefault();
        const type = $('#action').val();
        if (type === 'no') {
            $('#alert_confirm').modal('show');
            $('#alert_confirm .alert_dynamic_message').text("{{ __('backend.select_status') }}");
            return;
        }
        const allVals = [];
        $('.has-value:checked').each(function() {
            const v = $(this).attr('data-id');
            if (v) allVals.push(v);
        });
        if (!allVals.length) {
            $('#alert_confirm').modal('show');
            $('#alert_confirm .alert_dynamic_message').text("{{ __('backend.select_row') }}");
            return;
        }
        const msgs = {
            '0': 'Deactivate selected business owners?',
            '1': 'Activate selected business owners?',
            '2': 'Delete selected business owners?',
            'approve': 'Approve selected applications? Welcome emails will be sent.',
            'reject': 'Reject selected applications?',
            'under_review': 'Place selected applications under review?'
        };
        $('#default_confirm .dynamic_message').text(msgs[type] || 'Proceed with this action?');
        $('#default_confirm .checkbox_data').val(allVals.join(','));
        $('#default_confirm .checkbox_type').val(type);
        $('#default_confirm').modal('show');
    });

    $(document).on('click', '.yes_click', function() {
        const ids    = $('#default_confirm .checkbox_data').val();
        const action = $('#default_confirm .checkbox_type').val();
        $.ajax({
            url: "{{ route('business-owner-management.updateAll') }}",
            type: 'POST',
            data: { ids: ids, action: action },
            beforeSend() { $('.loader').css('visibility','visible'); },
            success(data) {
                $('.loader').css('visibility','hidden');
                $('#default_confirm').modal('hide');
                if (data.success) {
                    showMsg('alert-success', data.msg);
                    table.ajax.reload(null, false);
                    loadTabCounts();
                    $('#checkAll').prop('checked', false);
                    $('#action').prop('selectedIndex', 0);
                } else {
                    showMsg('alert-danger', data.msg || 'Something went wrong.');
                }
            },
            error() { $('.loader').css('visibility','hidden'); alert('Request failed.'); }
        });
    });

    function showMsg(cls, msg) {
        $('#success_file_popup').html(
            '<div class="alert ' + cls + ' m-b-0"><button type="button" class="close" data-dismiss="alert">&times;</button>' + msg + '</div>'
        );
        setTimeout(() => $('#success_file_popup').empty(), 5000);
    }

    setTimeout(() => $('#topmsgall').hide(), 5000);
</script>
@endpush