@extends('layout.master')

@section('title', 'Tetapan Manual Pengguna')

@section('content')
<div class="page-header">
    <h5 class="page-title">Tetapan Manual Pengguna</h5>
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">Laman Utama</a></li>
            <li class="breadcrumb-item">Pengurusan Web</li>
            <li class="breadcrumb-item active">Tetapan Manual Pengguna</li>
        </ol>
    </nav>
</div>

<section class="section">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">

                    <div class="d-flex justify-content-end align-items-center">
                        <button class="btn btn-primary" onclick="add()"><i class="fa fa-plus me-2"></i> Tambah Manual</button>
                    </div>
                    
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover nowrap w-100" id="the-table">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>Bil</th>
                                    <th>Kategori</th>
                                    <th>Tajuk</th>
                                    <th>Jenis</th>
                                    <th>Tindakan</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Modal Tambah Manual -->
<div class="modal fade" id="the-modal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header">
                <h5 class="modal-title fw-bold" id="modal-title">Tambah Manual</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4">
                <form action="javascript:void(0)" id="modal-form" name="modal-form" class="form-horizontal" method="POST" enctype="multipart/form-data">
                    <input type="hidden" name="id" id="id">

                    <div class="row mb-3">
                        <label for="user_role_id" class="col-sm-3 col-form-label fw-semibold">Kategori <span class="text-danger">*</span></label>
                        <div class="col-sm-9">
                            <select class="form-select" name="user_role_id" id="user_role_id" required>
                                <option value="2">Pentadbir</option>
                                <option value="3">Pentadbir Negeri</option>
                                <option value="4">Pengguna</option>
                            </select>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label for="title" class="col-sm-3 col-form-label fw-semibold">Tajuk <span class="text-danger">*</span></label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="title" name="title" placeholder="Masukkan tajuk manual..." required>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label for="type" class="col-sm-3 col-form-label fw-semibold">Jenis <span class="text-danger">*</span></label>
                        <div class="col-sm-9">
                            <select class="form-select" name="type" id="type" required onchange="toggleTypeFields()">
                                <option value="pdf">Fail PDF</option>
                                <option value="link">Pautan (URL)</option>
                                <option value="video">Video (Pautan)</option>
                            </select>
                        </div>
                    </div>

                    <div class="row mb-3" id="file-group">
                        <label for="file" class="col-sm-3 col-form-label fw-semibold">Muat Naik PDF <span class="text-danger">*</span></label>
                        <div class="col-sm-9">
                            <input type="file" class="form-control" id="file" name="file" accept=".pdf">
                            <div class="form-text">Format: PDF (Max 10MB)</div>
                            <div id="current-file" class="mt-1 small text-muted"></div>
                        </div>
                    </div>

                    <div class="row mb-3 d-none" id="url-group">
                        <label for="url" class="col-sm-3 col-form-label fw-semibold">Pautan URL <span class="text-danger">*</span></label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="url" name="url" placeholder="https://...">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-danger" data-bs-dismiss="modal">Batal</button>
                <button class="btn btn-primary" type="submit" form="modal-form" id="submit-button">Simpan</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script type="text/javascript">
    $(document).ready(function() {
        $('#the-table').DataTable({
            ...datatables_config,
            responsive: true,
            processing: true,
            serverSide: true,
            layout: {
                top2End: null
            },
            ajax: "{{ route('pengurusan_web.manual_pengguna') }}",
            columns: [
                { data: null, title: '', width: '1%' },
                { data: 'DT_RowIndex', name: 'DT_RowIndex', width: '1%', className: 'text-center', orderable: false, searchable: false },
                { data: 'user_role_id', name: 'user_role_id' },
                { data: 'title', name: 'title' },
                { data: 'type', name: 'type', render: function(data) {
                    return data.toUpperCase();
                }},
                { data: 'action', name: 'action', className: 'text-center', orderable: false, searchable: false },
            ],
            order: [[1, 'desc']]
        });
    });

    function toggleTypeFields() {
        let type = $('#type').val();
        if (type === 'pdf') {
            $('#file-group').removeClass('d-none');
            $('#url-group').addClass('d-none');
        } else {
            $('#file-group').addClass('d-none');
            $('#url-group').removeClass('d-none');
        }
    }

    function add() {
        $('#modal-form').trigger("reset");
        $('#id').val('');
        $('#current-file').html('');
        $('#modal-title').html("Tambah Manual");
        toggleTypeFields();
        $('#the-modal').modal('show');
    }

    function editData(id) {
        $.ajax({
            type: "POST",
            url: "{{ route('pengurusan_web.manual_pengguna_get') }}",
            data: { id: id },
            dataType: 'json',
            success: function(res) {
                $('#modal-form').trigger("reset");
                $('#id').val(res.id);
                $('#user_role_id').val(res.user_role_id);
                $('#title').val(res.title);
                $('#type').val(res.type);
                $('#url').val(res.url);
                $('#modal-title').html("Kemaskini Manual");
                
                if (res.file_path) {
                    $('#current-file').html('Fail sedia ada: ' + res.file_path.split('/').pop());
                } else {
                    $('#current-file').html('');
                }
                
                toggleTypeFields();
                $('#the-modal').modal('show');
            }
        });
    }

    function deleteData(id, name) {
        sPadam(null, name, function() {
            $.ajax({
                type: "POST",
                url: "{{ route('pengurusan_web.manual_pengguna_delete') }}",
                data: { id: id },
                success: function() {
                    $('#the-table').DataTable().ajax.reload();
                    sSuccess('Data telah berjaya dipadam.');
                },
                error: function() {
                    sFail('Gagal memadam data.');
                }
            });
        });
    }

    $("#modal-form").submit(function(e) {
        e.preventDefault();
        var formData = new FormData(this);
        $.ajax({
            type: 'POST',
            url: "{{ route('pengurusan_web.manual_pengguna_store') }}",
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            beforeSend: function() {
                Swal.fire({
                    title: 'Sila Tunggu',
                    text: 'Sedang menyimpan...',
                    allowOutsideClick: false,
                    didOpen: () => { Swal.showLoading() }
                });
            },
            success: (data) => {
                $('#the-modal').modal('hide');
                $('#the-table').DataTable().ajax.reload();
                Swal.fire('Berjaya!', 'Maklumat telah disimpan.', 'success');
            },
            error: function(data) {
                Swal.fire('Ralat!', 'Gagal menyimpan. Sila pastikan semua ruangan diisi dengan betul.', 'error');
            }
        });
    });
</script>
@endsection