@extends('layouts.app')
@section('content')

<!-- PAGE-HEADER -->
<div class="page-header">
    <div>
        <h1>Documents <small>List & Management</small></h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
        </ol>
    </div>

    <div class="float-end">
        <a class="btn btn-primary float-right" href="javascript:void(0)" id="createNewDocument">
            <i class="fa fa-plus"></i> ADD New Document
        </a>
    </div>
</div>
<!-- PAGE-HEADER END -->

<div class="content mt-3">

    <div class="card shadow mb-4">
        <div class="card-body">
            <div class="">
                <table class="table table-bordered dt-responsive data-table" id="dataTable" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>S.No.</th>
                            <th>Title</th>
                            <th>File Type</th>
                            <th>Updated At</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

</div>

@include('view-modals.document_upload_addedit')  {{-- Your modal file with form --}}

@stop

@section('scripting')
<script type="text/javascript">

jQuery(document).ready(function($) {

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    var site_id = "{{ $siteId ?? '' }}";

    var table = $('.data-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ url('lead/getDocumentsData') }}/" + site_id,
        columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex'},
            {data: 'title', name: 'title'},
            {data: 'file_type', name: 'file_type'},
            {data: 'updated_at', name: 'updated_at', orderable: false, searchable: false},
            {data: 'action', name: 'action', orderable: false, searchable: false},
        ],
        language: {
            search: "_INPUT_",
            searchPlaceholder: "Search documents",
        }
    });

    // Show modal for creating new document
    $('#createNewDocument').click(function() {
        reset_modal();
        $('#document_id').val("");
        $('#site_id').val(site_id);  // use lowercase with underscore, matching your variable and input ID

        $('#dataForm').trigger("reset");
        $('#modelHeading').html("Create New Document");
        $('#ajaxModel').modal('show');
    });

    // Edit document
    $('body').on('click', '.editDocument', function() {
        var document_id = $(this).data('id');
        reset_modal();

        $.get("{{ url('document/edit') }}" + '/' + document_id, function(data) {
            $('#modelHeading').html("Edit Document");
            $('#saveBtn').val("Save Changes");
            $('#ajaxModel').modal('show');

            $('#document_id').val(data.id);
            $('#site_id').val(data.site_id);
            $('#title').val(data.title);
            $('#file_type').val(data.file_type);
            // File input cannot be filled programmatically for security reasons
            // Optionally show existing file link somewhere if needed
        });
    });

    // Save document (create/update)
    $('#saveBtn').click(function(e) {
        e.preventDefault();
        $(this).html('Sending..');

        // For file upload, need to use FormData, so don't serialize
        var form = $('#dataForm')[0];
        var data = new FormData(form);

        $.ajax({
            url: "{{ url('lead/upload-document') }}",
            type: "POST",
            data: data,
            processData: false,
            contentType: false,
            success: function(data) {
                $('#dataForm').trigger("reset");
                $('#ajaxModel').modal('hide');
                table.draw();
                swal({
                    title: "Success!",
                    text: data.msg,
                    icon: "success",
                });
                $('#saveBtn').html('Submit');
            },
            error: function(data) {
                if (data.status == 422) {
                    var errors = data.responseJSON.errors;
                    $.each(errors, function(key, value) {
                        $("#" + key).addClass("is-invalid");
                        $("#" + key + "-error").html(value[0]);
                    });
                }
                $('#saveBtn').html('Submit');
            }
        });
    });

    // Delete document
    $('body').on('click', '.deleteDocument', function() {
        var document_id = $(this).data("id");

        swal({
            title: "Are you sure?",
            text: "Once deleted, you will not be able to recover this document!",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        }).then((willDelete) => {
            if (willDelete) {
                $.ajax({
                    type: "GET",
                    url: "{{ url('document/delete') }}/" + document_id,
                    success: function(data) {
                        table.draw();
                        swal("Deleted!", "Document has been deleted.", "success");
                    },
                    error: function(data) {
                        console.log('Error:', data);
                    }
                });
            } else {
                swal("Your document is safe!");
            }
        });
    });

});

// Reset modal fields and validation
function reset_modal() {
    $('#document_id').val('');
    $('#site_id').val('');
    $('#title').val('');
    $('#file_type').val('');
    $('#file').val('');

    $('#title').removeClass('is-invalid');
    $('#file_type').removeClass('is-invalid');
    $('#file').removeClass('is-invalid');

    $('#title-error').html('');
    $('#file_type-error').html('');
    $('#file-error').html('');

    $('#saveBtn').html('Submit');
}

</script>
@endsection