@extends('dashboard.layouts.master')
@section('title', 'Supplier 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; }

    /* Toggle Switch */
    .switch { position: relative; display: inline-block; width: 34px; height: 20px; }
    .switch input { opacity: 0; width: 0; height: 0; }
    .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
    .slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
    input:checked + .slider { background-color: #002868; }
    input:focus + .slider { box-shadow: 0 0 1px #002868; }
    input:checked + .slider:before { transform: translateX(14px); }
    input:disabled + .slider { background-color: #e9e9e9; cursor: not-allowed; }
</style>
@endpush

@section('content')
@if(Helper::canAccessModule('supplier_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">Supplier Management</h3>
                <small class="d-inline-block">
                    <a href="{{ route('adminHome') }}">{{ __('backend.dashboard') }}</a> /
                    <span>Supplier Management</span>
                </small>
            </div>
        </div>

        {{-- Bulk action form --}}
        @if(Helper::checkPermission('supplier_management', 'update'))
        {{ Form::open(['route' => 'admin.suppliers.updateAll', 'method' => 'post', 'id' => 'updateAll']) }}
        <div class="single-action m-b p-a">
            <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>
                    <option value="active">Activate Selected</option>
                    <option value="inactive">Deactivate Selected</option>
                </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 Suppliers <span class="tab-count" id="cnt-all">—</span>
            </button>
            <button class="filter-tab" data-status="pending">
                Pending <span class="tab-count" id="cnt-pending">—</span>
            </button>
            <button class="filter-tab" data-status="approved">
                Approved <span class="tab-count" id="cnt-approved">—</span>
            </button>
            <button class="filter-tab" data-status="rejected">
                Rejected <span class="tab-count" id="cnt-rejected">—</span>
            </button>
        </div>

        <div class="table-responsive table_data">
            <table class="table table-bordered m-a-0" id="supplierTable">
                <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>Supplier Name</th>
                        <th>Company Name</th>
                        <th>Mobile</th>
                        <th>Email</th>
                        <th>Approval Status</th>
                        <th>Active 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">Alert</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">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">No</button>
                <button type="button" class="btn danger p-x-md yes_click">Yes</button>
            </div>
        </div>
    </div>
</div>

{{-- Reject Modal --}}
<div class="modal fade" id="rejectModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header"><h5>Reject Supplier Application</h5></div>
            <div class="modal-body">
                <input type="hidden" id="reject_user_id">
                <div class="form-group">
                    <label>Reason for Rejection <span class="text-danger">*</span></label>
                    <textarea id="rejection_reason" class="form-control" rows="4" placeholder="Enter reason..."></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn dark-white p-x-md" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn danger p-x-md" onclick="confirmReject()">Confirm Reject</button>
            </div>
        </div>
    </div>
</div>

@else
<script>window.location.replace("{{ route('adminHome') }}");</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 activeApprovalStatus = '';

    const table = $('#supplierTable').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        ordering: true,
        ajax: {
            url: "{{ route('admin.suppliers.anyData') }}",
            type: 'POST',
            data: function(d) { d.status = activeApprovalStatus; }
        },
        columns: [
            { data: 'checkbox', orderable: false, searchable: false },
            { data: 'contact_person', name: 'supplier_profiles.contact_person' },
            { data: 'company_name', name: 'supplier_profiles.company_name' },
            { data: 'mobile', name: 'main_users.phone' },
            { data: 'email', name: 'main_users.email' },
            { data: 'status', name: 'main_users.status' },
            { data: 'is_active', name: 'main_users.is_active' },
            { data: 'created_at', name: 'main_users.created_at' },
            { data: 'options', orderable: false, className: 'text-center' }
        ],
        order: [[7, 'desc']],
        drawCallback: function(settings) { 
            const json = settings.json;
            if (json && json.counts) {
                loadTabCounts(json.counts);
            }
        }
    });

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

    function loadTabCounts(counts) {
        $('#cnt-all').text(counts.all);
        $('#cnt-pending').text(counts.pending);
        $('#cnt-approved').text(counts.approved);
        $('#cnt-rejected').text(counts.rejected);
    }

    $('#checkAll').on('click', function() {
        $('.has-value').prop('checked', this.checked);
    });

    // Individual Actions
    $(document).on('click', '.approve-supplier', function() {
        const id = $(this).data('id');
        Swal.fire({
            title: 'Approve Supplier?',
            text: "They will gain access to the platform.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#28a745',
            confirmButtonText: 'Yes, Approve'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "{{ route('admin.suppliers.approve') }}",
                    type: 'POST',
                    data: { user_id: id },
                    beforeSend: function() { $('#loader').show(); },
                    success: function(res) {
                        if(res.success) { table.ajax.reload(); Swal.fire('Approved!', res.msg, 'success'); }
                        else Swal.fire('Error', res.msg, 'error');
                    },
                    complete: function() { $('#loader').hide(); }
                });
            }
        });
    });

    $(document).on('click', '.reject-supplier', function() {
        $('#reject_user_id').val($(this).data('id'));
        $('#rejection_reason').val('');
        $('#rejectModal').modal('show');
    });

    function confirmReject() {
        const id = $('#reject_user_id').val();
        const reason = $('#rejection_reason').val();
        if(!reason) { Swal.fire('Error', 'Please enter a reason', 'error'); return; }
        $.ajax({
            url: "{{ route('admin.suppliers.reject') }}",
            type: 'POST',
            data: { user_id: id, rejection_reason: reason },
            beforeSend: function() { $('#loader').show(); },
            success: function(res) {
                if(res.success) { $('#rejectModal').modal('hide'); table.ajax.reload(); Swal.fire('Rejected', res.msg, 'success'); }
                else Swal.fire('Error', res.msg, 'error');
            },
            complete: function() { $('#loader').hide(); }
        });
    }

    $(document).on('change', '.status-toggle', function() {
        const id = $(this).data('id');
        $.post("{{ route('admin.suppliers.status') }}", { user_id: id }, function(res) {
            if(!res.success) { table.ajax.reload(); Swal.fire('Error', res.msg, 'error'); }
        });
    });

    // Bulk action
    $(document).on('submit', '#updateAll', function(e) {
        e.preventDefault();
        const type = $('#action').val();
        if (type === 'no') { $('#alert_confirm').modal('show'); $('.alert_dynamic_message').text("Select an action"); return; }
        const ids = [];
        $('.has-value:checked').each(function() { ids.push($(this).data('id')); });
        if (ids.length === 0) { $('#alert_confirm').modal('show'); $('.alert_dynamic_message').text("Select rows"); return; }
        
        const msg = type === 'active' ? "Activate selected?" : "Deactivate selected?";
        $('#default_confirm').modal('show');
        $('.dynamic_message').text(msg);
        $('.checkbox_data').val(ids.join(','));
        $('.checkbox_type').val(type);
    });

    $(document).on('click', '.yes_click', function() {
        const ids = $('.checkbox_data').val();
        const type = $('.checkbox_type').val();
        $.post("{{ route('admin.suppliers.updateAll') }}", { ids: ids, status: type }, function(res) {
            $('#default_confirm').modal('hide');
            if(res.success) { table.ajax.reload(); Swal.fire('Success', res.msg, 'success'); }
            else Swal.fire('Error', res.msg, 'error');
        });
    });
</script>
@endpush