@extends('layouts.master')

@push('plugin-styles')
  <link href="{{ asset('theme_v2/assets/plugins/flatpickr/flatpickr.min.css') }}" rel="stylesheet" />
  <link rel="stylesheet" href="{{ asset('theme/css/daterangepicker.css') }}">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
@endpush

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                {{ strtoupper('Company') }}
                <a  href="javascript:void(0)"  class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#create" style="float:right">Create User</a>
            </div>
            <div class="card-body">
                <table id="company-table" class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>No</th> <!-- Tambahkan No di sini -->
                            <th>Name</th>
                            <th>Email</th>
                            <th>Role</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Data akan diisi secara otomatis oleh DataTables -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="create" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Form OJT</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <form action="https://data.cityservice.co.id/cs/public/submit-ojt" method="POST" enctype="multipart/form-data"></form>
                    <input type="hidden" name="_token" value="nfOnp5GJvd5iIPBZeTmumjEsOiYk2K94pBskRsBm">                                        <input type="hidden" class="form-control" name="user_id" value="6680" readonly="readonly">
                    <input type="hidden" class="form-control" name="type_training" value="2" readonly="readonly">
                    <input type="hidden" class="form-control" name="batch_id" value="" readonly="readonly">
                    <div class="row">
                        <div class="col-md-12 mb-2">
                            <label for="" class="form-label">Nama</label>
                            <input type="text" class="form-control" readonly="readonly" value="Aria Yudha Prasetia">    
                        </div>
                        <div class="col-md-12 mb-2">
                            <label for="" class="form-label">Tanggal</label>
                            <input type="text" class="form-control" name="tanggal" value="2025-03-04" readonly="readonly">    
                        </div>
                        <div class="col-md-12 mb-2">
                            <label for="" class="form-label">Project</label>
                            
                        </div>
                        <div class="col-md-12 mb-2">
                            <label for="" class="form-label">Status</label>
                            <select name="status" class="form-control">
                                <option value="">-- PILIH --</option>
                                <option value="H">Hadir</option>
                                <option value="I">Izin</option>
                                <option value="TK">Tanpa Keterangan</option>
                            </select>    
                        </div>
                        <div class="col-md-12 mb-2">
                            <label for="" class="form-label">Keterangan</label>
                            <textarea name="keterangan" class="form-control"></textarea>    
                        </div>
                        
                        <div class="col-md-12 mt-2">
                            <button class="btn btn-primary w-100" type="submit">Simpan Data</button>
                        </div>
                    </div>
                
            </div>
        </div>
    </div>
</div>
@endsection

@push('plugin-scripts')
  <script src="{{ asset('theme_v2/assets/plugins/flatpickr/flatpickr.min.js') }}"></script>
  <script src="{{ asset('theme_v2/assets/plugins/apexcharts/apexcharts.min.js') }}"></script>
  <script src="{{ asset('theme/js/daterangepicker.js') }}"></script>
  <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
@endpush

@push('custom-scripts')
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
$(document).ready(function() {
    let table = $('#company-table').DataTable({
        processing: true,
        serverSide: false, 
        ajax: "/api/datamaster/user-management", // Pastikan API benar
        columns: [
            { data: null, render: function(data, type, row, meta) {
                return meta.row + 1; // Menampilkan nomor urut
            }},
            { data: 'name' },
            { data: 'email' },
            { data: 'role_id' },
            { data: 'id', render: function(data) {
                return `
                    <button class="btn btn-primary btn-sm" onclick="editUser(${data})">Edit</button>
                    <button class="btn btn-danger btn-sm" onclick="deleteUser(${data})">Delete</button>
                `;
            }}
        ]
    });

    // Function untuk Edit User
    window.editUser = function(id) {
        Swal.fire({
            title: 'Edit User',
            text: `Edit user dengan ID: ${id}`,
            icon: 'info'
        });
    };

    // Function untuk Delete User
    window.deleteUser = function(id) {
        Swal.fire({
            title: 'Are you sure?',
            text: 'This action cannot be undone!',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, delete it!',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                axios.delete(`/api/datamaster/users/${id}`)
                    .then(response => {
                        Swal.fire('Deleted!', 'User has been deleted.', 'success');
                        table.ajax.reload(); // Reload DataTables
                    })
                    .catch(error => {
                        Swal.fire('Error!', 'Something went wrong.', 'error');
                    });
            }
        });
    };
});
</script>
@endpush