@extends('layout.app')
@section('content')
    <div class="col-md-12 col-lg-12">
        <div class="card crm-list-card">
            <div class="card-header crm-list-header">
                <h3 class="card-title"><i class="fas fa-clipboard-list"></i> Lý do đơn từ</h3>
                {{-- Nút thêm: JS #add_new_reason tạo bản ghi rỗng rồi reload trang --}}
                <a class="btn btn-primary" id="add_new_reason" href="javascript:void(0)" style="cursor: pointer"><i class="fa fa-plus-circle"></i> Tạo mới</a>
            </div>
            {{--
                Style bảng dùng chung: .crm-list-table (public/css/crm-2026/components.css).
                Giữ hook JS: nút lưu .save-reason[data-id] đọc .name, .count, .type, .phat_tien trong cùng dòng;
                nút xoá .delete[data-url] (layout/_script.blade.php).
            --}}
            <div id="registration-form" class="crm-list">
                <div class="table-responsive">
                    <table class="table crm-list-table">
                        <thead>
                        <tr>
                            <th class="crm-list-table__no">STT</th>
                            <th>Lý do</th>
                            <th>Số lần / tháng</th>
                            <th>Type</th>
                            <th>Phạt tiền</th>
                            <th class="crm-list-table__actions">Thao tác</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($reasons as $key => $item)
                            <tr>
                                <td class="crm-list-table__no">{{$key+1}}</td>
                                <td><input type="text" class="form-control name" value="{{$item->name}}"></td>
                                <td><input type="text" class="form-control count" value="{{$item->count}}"></td>
                                <td>
                                    <select name="" id="" class="form-control type">
                                        <option value="0" {{$item->type == 0 ? 'selected' : ''}}>Đơn Nghỉ Phép</option>
                                        <option value="1" {{$item->type == 1 ? 'selected' : ''}}>Đơn Checkin/Checkout</option>
                                        <option value="2" {{$item->type == 2 ? 'selected' : ''}}>Đơn Tăng Ca</option>
                                    </select>
                                </td>
                                <td>
                                    <select name="" id="" class="form-control phat_tien">
                                        <option value="0" {{$item->phat_tien == 0 ? 'selected' : ''}}>Không</option>
                                        <option value="1" {{$item->phat_tien == 1 ? 'selected' : ''}}>Có</option>
                                    </select>
                                </td>
                                <td class="crm-list-table__actions">
                                    <a class="crm-action-btn crm-action-btn--save save save-reason" href="javascript:void(0)" data-id="{{$item->id}}"
                                       data-toggle="tooltip" title="Lưu" aria-label="Lưu {{$item->name}}">
                                        <i class="fas fa-save"></i>
                                    </a>
                                    <a class="crm-action-btn crm-action-btn--delete delete" href="javascript:void(0)"
                                       data-url="{{ url('approval/reason/' . $item->id) }}"
                                       data-toggle="tooltip" title="Xoá" aria-label="Xoá {{$item->name}}">
                                        <i class="fas fa-trash-alt"></i>
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td id="no-data" colspan="6">
                                    <div class="crm-list-empty">
                                        <i class="fas fa-folder-open"></i>
                                        <span>Không tồn tại dữ liệu</span>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('_script')
    <script>
        $(document).on('click', '#add_new_reason', function () {
            $.ajax({
                url: '{{route('approval.reason.store')}}',
                method: 'POST',
                success: function (data) {
                    location.reload();
                    console.log(data);
                }
            })
        })

        $(document).on('click', '.save-reason', function () {
            let id = $(this).data('id');
            let data = {
                name: $(this).closest('tr').find('.name').val(),
                count: $(this).closest('tr').find('.count').val(),
                type: $(this).closest('tr').find('.type').val(),
                phat_tien: $(this).closest('tr').find('.phat_tien').val(),
            }
            $.ajax({
                url: `/approval/reason/${id}`,
                data: data,
                method: 'PUT',
                success: function (data) {
                    if (data) {
                        swal({
                            title: 'Cập nhật thành công !!!',
                            type: 'success',
                            confirmButtonText: 'OK'
                        });
                    }
                }
            })
        })

        // Tooltip cho nút thao tác trong bảng
        if ($.fn.tooltip) {
            $('.crm-list-table [data-toggle="tooltip"]').tooltip({trigger: 'hover', placement: 'top'});
        }
    </script>
@endsection