@extends('operations.layout.mainlayout')

@section('content')
<style>
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    color: black;
}

.btn-blz {
    color: var(--blazma-primary);
    border-color: var(--blazma-primary);
    width: 20%;
    margin: 2px;
}

.btn-blz:hover {
    color: #fff;
    background-color: var(--blazma-primary);
    border-color: var(--blazma-primary);
}

.date-filter {
    color: var(--blazma-primary);
    border: 1px solid var(--blazma-primary);
}

.badge-orange {
    background: #fd9843;
    color: #ffffff !important;
}

.badge-purple {
    background: #6f42c1;
}

.badge-phosphor {
    background: #ccff00;
    color: #000 !important;
}

.card-footer::after {
    content: none;
}

#add-group-btn {
    max-width: 190px;
    height: 38px;
    padding: 4px 16px 4px 16px;
    border-radius: 30px;
    border: 1px;
    gap: 8px;
    background: var(--blazma-primary);
    color: white;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0em;
}

#add-group-btn:hover {
    background: white;
    color: var(--blazma-primary);
    border: 1px solid var(--blazma-primary);
}

.card-footer-btns {
    height: 38px;
    padding: 4px 16px 4px 4px;
    border-radius: 30px;
    border: 1px;
    gap: 8px;
    border: 1px solid var(--blazma-primary);
    background: transparent;
    color: black !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0em;

    display: inline-flex;
    justify-content: space-around;
    align-items: center;
}

.card-footer-btns:hover,
.card-footer-btns:active,
.card-footer-btns:focus {
    background: var(--blazma-primary);
    color: white !important;
    border: 1px solid var(--blazma-primary);
}

div.dataTables_wrapper div.dataTables_filter {
    display: inline;
    float: right;
}

div.dataTables_wrapper div.dataTables_filter input {
    margin-left: 0.5em;
    display: inline-block;
    width: 250px;
}

#insurance-groups-table_filter i {
    color: var(--blazma-primary);
    position: absolute;
    top: 15px;
    right: 25px;
}

table.dataTable tbody td input[type="checkbox"] {
    background: #f4f6f9;
    accent-color: var(--blazma-primary);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    vertical-align: middle;
    border: 1px solid #E6E6E6;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
}

table.dataTable tbody td input[type="checkbox"]:checked {
    appearance: auto;
    clip-path: circle(50% at 50% 50%);
}

#insurance-groups-table {
    font-size: 16px;
}

#insurance-groups-table thead th {
    background-color: var(--blazma-primary);
    color: white;
    font-weight: 500;
}

.action-btn {
    border-radius: 30px;
    padding: 4px 16px;
    border: 1px solid var(--blazma-primary);
    background: transparent;
    color: var(--blazma-primary);
}

.action-btn:hover,
.action-btn:focus {
    background: var(--blazma-primary);
    color: white;
}

.action-btn-danger {
    border-radius: 30px;
    padding: 4px 16px;
    border: 1px solid #dc3545;
    background: transparent;
    color: #dc3545;
}

.action-btn-danger:hover,
.action-btn-danger:focus {
    background: #dc3545;
    color: white;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, 
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--blazma-primary);
    color: white !important;
    border: 1px solid var(--blazma-primary);
    border-radius: 50%;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #f8f9fa;
    color: var(--blazma-primary) !important;
    border: 1px solid var(--blazma-primary);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 1px solid transparent;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, 
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, 
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    color: #6c757d !important;
}
</style>
<link href="/css/operations.css?v={{ filemtime(public_path('css/operations.css')) }}" rel="stylesheet">

<!-- Content Header (Page header) -->
<div class="content-header p-0">
    <div class="container-fluid card m-0">
        <div class="row">
            <div class="col-sm-6 m-0 card">
                <h1 class="card-body m-0 text-dark" style="color: var(--blazma-text)!important;">Insurance Groups</h1>
            </div>
            <div class="col-sm-6">
            </div>
        </div>
    </div>
</div>
<!-- /.content-header -->

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card bg-light mr-0">
                    <div class="card-body">
                        <button class="btn float-right" id="add-group-btn">
                            <i class="fas fa-plus"></i> Add New Group
                        </button>
                    </div>
                    <div class="card">
                        <div class="card-body">
                            <table id="insurance-groups-table" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Code</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($groups as $group)
                                <tr>
                                    <td>{{ $group->ID }}</td>
                                    <td>{{ $group->NAME }}</td>
                                    <td>{{ $group->CODE }}</td>
                                    <td>
                                        @if($group->STATUS == 1)
                                            <span class="badge badge-success">Active</span>
                                        @else
                                            <span class="badge badge-secondary">Inactive</span>
                                        @endif
                                    </td>
                                    <td>
                                        <button class="btn action-btn edit-group-btn" data-id="{{ $group->ID }}" data-name="{{ $group->NAME }}" data-code="{{ $group->CODE }}" data-status="{{ $group->STATUS }}">
                                            <i class="fas fa-edit"></i> Edit
                                        </button>
                                        <button class="btn action-btn-danger delete-group-btn" data-id="{{ $group->ID }}">
                                            <i class="fas fa-trash"></i> Delete
                                        </button>
                                    </td>
                                </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="modal fade" id="group-modal" tabindex="-1" role="dialog" aria-labelledby="groupModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="groupModalLabel">Add Insurance Group</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="group-form">
                    <input type="hidden" id="group-id">
                    <div class="form-group">
                        <label for="group-name">Group Name</label>
                        <input type="text" class="form-control" id="group-name" required>
                    </div>
                    <div class="form-group">
                        <label for="group-code">Group Code</label>
                        <input type="text" class="form-control" id="group-code">
                    </div>
                    <div class="form-group">
                        <label for="group-status">Status</label>
                        <select class="form-control" id="group-status">
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn card-footer-btns" id="save-group-btn">Save</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('footer-scripts')
<script>
$(document).ready(function() {
    $('#insurance-groups-table').DataTable({
        "pageLength": 25,
        "order": [[0, "desc"]],
        "responsive": true,
        "lengthChange": false,
        "autoWidth": false,
        "language": {
            "processing": "",
            "paginate": {
                "next": '&#8594;',
                "previous": '&#8592;'
            },
            "search": '',
            "searchPlaceholder": "Search anything here"
        }
    });

    $('#add-group-btn').click(function() {
        $('#groupModalLabel').text('Add Insurance Group');
        $('#group-id').val('');
        $('#group-name').val('');
        $('#group-code').val('');
        $('#group-status').val('1');
        $('#group-modal').modal('show');
    });

    $('.edit-group-btn').click(function() {
        $('#groupModalLabel').text('Edit Insurance Group');
        $('#group-id').val($(this).data('id'));
        $('#group-name').val($(this).data('name'));
        $('#group-code').val($(this).data('code'));
        $('#group-status').val($(this).data('status'));
        $('#group-modal').modal('show');
    });

    $('#save-group-btn').click(function() {
        if (!$('#group-name').val()) {
            toastr.error('Group name is required');
            return;
        }
        
        $.ajax({
            url: '/operations/insurance/groups/save',
            type: 'POST',
            data: {
                ID: $('#group-id').val(),
                NAME: $('#group-name').val(),
                CODE: $('#group-code').val(),
                STATUS: $('#group-status').val()
            },
            success: function(response) {
                if (response.success) {
                    toastr.success(response.message);
                    $('#group-modal').modal('hide');
                    setTimeout(function() {
                        window.location.reload();
                    }, 1000);
                } else {
                    toastr.error(response.message);
                }
            },
            error: function() {
                toastr.error('An error occurred while saving the group');
            }
        });
    });

    $('.delete-group-btn').click(function() {
        if (!confirm('Are you sure you want to delete this insurance group?')) {
            return;
        }
        
        const groupId = $(this).data('id');
        
        $.ajax({
            url: '/operations/insurance/groups/delete',
            type: 'DELETE',
            data: {
                ID: groupId
            },
            success: function(response) {
                if (response.success) {
                    toastr.success(response.message);
                    setTimeout(function() {
                        window.location.reload();
                    }, 1000);
                } else {
                    toastr.error(response.message);
                }
            },
            error: function() {
                toastr.error('An error occurred while deleting the group');
            }
        });
    });
});
</script>
@endsection