@extends('admin.layouts.layout')

@section('title', 'Client Discounts Management')

@section('content')
<div class="mb-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div class="d-flex gap-2">
            <div class="input-group" style="width: 300px;">
                <input type="text" class="form-control" id="search-input" placeholder="Search client discounts...">
                <button class="btn btn-outline-secondary" type="button" id="search-btn">
                    <i class="fas fa-search"></i>
                </button>
            </div>
            <button class="btn btn-outline-secondary" type="button" id="clear-search" style="display: none;">
                <i class="fas fa-times"></i> Clear
            </button>
        </div>
        
        <div class="d-flex gap-2">
            @if($permission['create'] ?? true)
            <a href="{{ route('client-discounts.create') }}" class="btn btn-success">
                <i class="fas fa-plus"></i> Add Discount
            </a>
            @endif
            @if($permission['destroy'] ?? true)
            <button type="button" class="btn btn-danger" id="delete-selected" disabled>
                <i class="fas fa-trash"></i> Delete Multiple
            </button>
            @endif
        </div>
    </div>

    <!-- Filters -->
    <div class="card mb-3">
        <div class="card-body">
            <div class="row">
                <div class="col-md-3">
                    <label for="type-filter" class="form-label">Filter by Type</label>
                    <select class="form-select" id="type-filter">
                        <option value="">All Types</option>
                        @foreach($filters['discount_types'] ?? [] as $key => $value)
                            <option value="{{ $key }}">{{ $value }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="status-filter" class="form-label">Filter by Status</label>
                    <select class="form-select" id="status-filter">
                        <option value="">All Status</option>
                        <option value="1">Active</option>
                        <option value="0">Inactive</option>
                    </select>
                </div>
                <div class="col-md-6 d-flex align-items-end">
                    <button type="button" class="btn btn-outline-secondary me-2" id="apply-filters">
                        <i class="fas fa-filter"></i> Apply Filters
                    </button>
                    <button type="button" class="btn btn-outline-secondary" id="clear-filters">
                        <i class="fas fa-times"></i> Clear Filters
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Data Table -->
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Client Discounts</h5>
            <div class="d-flex align-items-center">
                <small class="text-muted me-3" id="record-count">
                    Total: {{ $data->total() ?? $data->count() }} records
                </small>
                <div class="btn-group btn-group-sm" role="group">
                    <input type="checkbox" class="btn-check" id="select-all" autocomplete="off">
                    <label class="btn btn-outline-secondary" for="select-all">
                        <i class="fas fa-check-square"></i>
                    </label>
                </div>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0" id="client-discounts-table">
                    <thead class="table-light">
                        <tr>
                            <th width="50">
                                <input type="checkbox" id="select-all-header" class="form-check-input">
                            </th>
                            <th>Discount Title</th>
                            <th>Discount Type</th>
                            <th>Discount</th>
                            @if(session('tenant_id') == 0 || session('tenant_id') === null)
                            <th>Tenant</th>
                            @endif
                            <th>Status</th>
                            <th width="100">Action</th>
                        </tr>
                    </thead>
                    <tbody id="client-discounts-tbody">
                        @forelse($data as $index => $clientDiscount)
                        <tr data-id="{{ $clientDiscount->id }}">
                            <td>
                                <input type="checkbox" class="form-check-input row-checkbox" value="{{ $clientDiscount->id }}">
                            </td>
                            <td>
                                <strong>{{ $clientDiscount->title }}</strong>
                            </td>
                            <td>
                                <span class="badge bg-{{ $clientDiscount->discount_type === 'Percentage' ? 'info' : 'warning' }}">
                                    {{ $clientDiscount->discount_type }}
                                </span>
                            </td>
                            <td>
                                <strong class="text-success">{{ $clientDiscount->formatted_amount }}</strong>
                            </td>
                            @if(session('tenant_id') == 0 || session('tenant_id') === null)
                            <td>
                                <span class="badge bg-secondary">{{ $clientDiscount->tenant->name ?? 'N/A' }}</span>
                            </td>
                            @endif
                            <td>
                                {!! $clientDiscount->status_badge !!}
                            </td>
                            <td>
                                <div class="btn-group btn-group-sm" role="group">
                                    @if($permission['show'] ?? true)
                                    <a href="{{ route('client-discounts.show', $clientDiscount->id) }}" 
                                       class="btn btn-outline-info btn-sm" 
                                       title="View Details">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    @endif
                                    @if($permission['edit'] ?? true)
                                    <a href="{{ route('client-discounts.edit', $clientDiscount->id) }}" 
                                       class="btn btn-outline-primary btn-sm" 
                                       title="Edit">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    @endif
                                    @if($permission['destroy'] ?? true)
                                    <button type="button" 
                                            class="btn btn-outline-danger btn-sm delete-single" 
                                            data-id="{{ $clientDiscount->id }}" 
                                            data-title="{{ $clientDiscount->title }}"
                                            title="Delete">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                    @endif
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="{{ session('tenant_id') == 0 || session('tenant_id') === null ? '7' : '6' }}" class="text-center py-4">
                                <div class="d-flex flex-column align-items-center">
                                    <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                                    <h5 class="text-muted">No Client Discounts Found</h5>
                                    <p class="text-muted">Get started by creating your first client discount.</p>
                                    @if($permission['create'] ?? true)
                                    <a href="{{ route('client-discounts.create') }}" class="btn btn-primary">
                                        <i class="fas fa-plus"></i> Add New Client Discount
                                    </a>
                                    @endif
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        
        @if($data->hasPages())
        <div class="card-footer">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <small class="text-muted">
                        Showing {{ $data->firstItem() }} to {{ $data->lastItem() }} of {{ $data->total() }} results
                    </small>
                </div>
                <div>
                    {{ $data->links('pagination::bootstrap-4') }}
                </div>
            </div>
        </div>
        @endif
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">Confirm Delete</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete this client discount?</p>
                <div class="alert alert-warning">
                    <strong>Warning:</strong> This action cannot be undone.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirm-delete">Delete</button>
            </div>
        </div>
    </div>
</div>

<!-- Multiple Delete Confirmation Modal -->
<div class="modal fade" id="deleteMultipleModal" tabindex="-1" aria-labelledby="deleteMultipleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteMultipleModalLabel">Confirm Multiple Delete</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete <span id="delete-count">0</span> selected client discount(s)?</p>
                <div class="alert alert-warning">
                    <strong>Warning:</strong> This action cannot be undone.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirm-delete-multiple">Delete All</button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('styles')
<style>
    .table th {
        background-color: #f8f9fa;
        font-weight: 600;
        border-bottom: 2px solid #dee2e6;
    }
    
    .table td {
        vertical-align: middle;
    }
    
    .btn-group .btn {
        border-radius: 0.25rem;
        margin-right: 2px;
    }
    
    .btn-group .btn:last-child {
        margin-right: 0;
    }
    
    .badge {
        font-size: 0.75em;
    }
    
    .table-responsive {
        border-radius: 0.375rem;
    }
    
    .card-header {
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
    }
    
    .form-check-input:checked {
        background-color: #0d6efd;
        border-color: #0d6efd;
    }
    
    .row-checkbox:checked {
        background-color: #198754;
        border-color: #198754;
    }
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    let selectedIds = [];
    let deleteId = null;

    // Search functionality
    $('#search-btn').on('click', function() {
        performSearch();
    });

    $('#search-input').on('keypress', function(e) {
        if (e.which === 13) {
            performSearch();
        }
    });

    $('#clear-search').on('click', function() {
        $('#search-input').val('');
        $(this).hide();
        loadClientDiscounts();
    });

    function performSearch() {
        const query = $('#search-input').val().trim();
        if (query) {
            $('#clear-search').show();
            loadClientDiscounts({ search: query });
        }
    }

    // Filter functionality
    $('#apply-filters').on('click', function() {
        const filters = {
            discount_type: $('#type-filter').val(),
            is_active: $('#status-filter').val()
        };
        loadClientDiscounts(filters);
    });

    $('#clear-filters').on('click', function() {
        $('#type-filter, #status-filter').val('');
        loadClientDiscounts();
    });

    // Select all functionality
    $('#select-all, #select-all-header').on('change', function() {
        const isChecked = $(this).is(':checked');
        $('.row-checkbox').prop('checked', isChecked);
        $('#select-all, #select-all-header').prop('checked', isChecked);
        updateSelectedIds();
        updateDeleteButton();
    });

    // Individual checkbox functionality
    $(document).on('change', '.row-checkbox', function() {
        updateSelectedIds();
        updateDeleteButton();
        
        const totalCheckboxes = $('.row-checkbox').length;
        const checkedCheckboxes = $('.row-checkbox:checked').length;
        
        $('#select-all, #select-all-header').prop('checked', totalCheckboxes === checkedCheckboxes);
    });

    function updateSelectedIds() {
        selectedIds = $('.row-checkbox:checked').map(function() {
            return parseInt($(this).val());
        }).get();
    }

    function updateDeleteButton() {
        $('#delete-selected').prop('disabled', selectedIds.length === 0);
    }

    // Single delete
    $(document).on('click', '.delete-single', function() {
        deleteId = $(this).data('id');
        const title = $(this).data('title');
        $('#deleteModal .modal-body p').text(`Are you sure you want to delete "${title}"?`);
        $('#deleteModal').modal('show');
    });

    $('#confirm-delete').on('click', function() {
        if (deleteId) {
            deleteClientDiscount(deleteId);
        }
    });

    // Multiple delete
    $('#delete-selected').on('click', function() {
        if (selectedIds.length > 0) {
            $('#delete-count').text(selectedIds.length);
            $('#deleteMultipleModal').modal('show');
        }
    });

    $('#confirm-delete-multiple').on('click', function() {
        if (selectedIds.length > 0) {
            deleteMultipleClientDiscounts(selectedIds);
        }
    });

    function deleteClientDiscount(id) {
        $.ajax({
            url: `{{ url('client-discounts/destroy') }}/${id}`,
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                $('#deleteModal').modal('hide');
                if (response.status) {
                    showNotification('success', response.message);
                    loadClientDiscounts();
                } else {
                    showNotification('error', response.message);
                }
            },
            error: function(xhr) {
                $('#deleteModal').modal('hide');
                const message = xhr.responseJSON?.message || 'Error deleting client discount';
                showNotification('error', message);
            }
        });
    }

    function deleteMultipleClientDiscounts(ids) {
        $.ajax({
            url: '{{ route("client-discounts.delete-multiple") }}',
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: { ids: ids },
            success: function(response) {
                $('#deleteMultipleModal').modal('hide');
                if (response.status) {
                    showNotification('success', response.message);
                    loadClientDiscounts();
                    selectedIds = [];
                    updateDeleteButton();
                    $('#select-all, #select-all-header').prop('checked', false);
                } else {
                    showNotification('error', response.message);
                }
            },
            error: function(xhr) {
                $('#deleteMultipleModal').modal('hide');
                const message = xhr.responseJSON?.message || 'Error deleting client discounts';
                showNotification('error', message);
            }
        });
    }

    function loadClientDiscounts(params = {}) {
        // Add search query if exists
        const searchQuery = $('#search-input').val().trim();
        if (searchQuery) {
            params.search = searchQuery;
        }

        // Show loading state
        $('#client-discounts-tbody').html(`
            <tr>
                <td colspan="{{ session('tenant_id') == 0 || session('tenant_id') === null ? '7' : '6' }}" class="text-center py-4">
                    <i class="fas fa-spinner fa-spin fa-2x text-muted"></i>
                    <p class="text-muted mt-2">Loading client discounts...</p>
                </td>
            </tr>
        `);

        $.ajax({
            url: '{{ route("client-discounts.index") }}',
            method: 'GET',
            data: params,
            success: function(response) {
                if (response.status) {
                    // Reload the page to show updated data
                    window.location.reload();
                } else {
                    showNotification('error', 'Error loading client discounts');
                }
            },
            error: function(xhr) {
                const message = xhr.responseJSON?.message || 'Error loading client discounts';
                showNotification('error', message);
            }
        });
    }

    function showNotification(type, message) {
        // You can integrate with your existing notification system
        // For now, using browser alert
        if (type === 'success') {
            alert('Success: ' + message);
        } else {
            alert('Error: ' + message);
        }
    }
});
</script>
@endpush